:root {
    --bg: #f5f9fc;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --ink: #071638;
    --muted: #62708c;
    --line: #e5edf5;
    --blue: #1677e8;
    --teal: #0ca6a0;
    --mint: #2fb879;
    --purple: #7357d9;
    --orange: #ee7b20;
    --red: #e73b48;
    --shadow: 0 16px 45px rgba(14, 42, 82, .08);
    --shadow-soft: 0 10px 26px rgba(14, 42, 82, .06);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Create patient detailed page */
.patient-create-page {
    display: grid;
    gap: 22px;
    margin: 0 8px 24px;
    color: #06175f;
}

.patient-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 2px 0 0;
}

.patient-create-title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.patient-create-back {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid #d4e0f2;
    border-radius: 6px;
    background: #fff;
    color: #12316f;
}

.patient-create-back svg {
    transform: rotate(180deg);
}

.patient-create-title h1 {
    margin: 0;
    color: #06175f;
    font-size: 26px;
    line-height: 1.1;
}

.patient-create-title p {
    margin: 8px 0 0;
    color: #36559a;
    font-size: 12px;
    font-weight: 650;
}

.patient-create-actions,
.patient-bottom-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.patient-create-button {
    min-width: 88px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.patient-create-button.ghost {
    border: 1px solid #91a6d1;
    background: #fff;
    color: #06175f;
}

.patient-create-button.primary {
    min-width: 132px;
    background: linear-gradient(180deg, #126bff 0%, #0752e7 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(18, 88, 255, .16);
}

.patient-create-button.success {
    min-width: 164px;
    background: linear-gradient(180deg, #0bab5b 0%, #038c42 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(3, 140, 66, .16);
}

.patient-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 30px;
    align-items: start;
}

.patient-create-card,
.patient-side-card,
.patient-duplicate-card {
    border: 1px solid #d8e1f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(7, 23, 93, .06);
}

.patient-create-card {
    overflow: hidden;
}

.patient-create-section {
    padding: 22px 20px 18px;
    border-bottom: 1px solid #d8e1f3;
}

.patient-create-section:last-child {
    border-bottom: 0;
}

.patient-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.patient-section-title > svg {
    color: #1261ff;
}

.patient-section-title > span {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1261ff;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.patient-section-title h2 {
    margin: 0;
    color: #06175f;
    font-size: 14px;
    line-height: 1;
}

.patient-create-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 24px;
}

.patient-create-grid .span-3 {
    grid-column: span 3;
}

.patient-create-grid .span-4 {
    grid-column: span 4;
}

.patient-create-grid .span-5 {
    grid-column: span 5;
}

.patient-create-grid .span-6 {
    grid-column: span 6;
}

.patient-create-grid .span-12 {
    grid-column: 1 / -1;
}

.patient-personal-grid {
    grid-template-columns: repeat(100, minmax(0, 1fr));
    column-gap: 4px;
    row-gap: 18px;
}

.patient-personal-grid .pc-name-field {
    grid-column: span 24;
}

.patient-personal-grid .pc-age-field {
    grid-column: span 12;
    min-width: 92px;
}

.patient-personal-grid .pc-gender-field {
    grid-column: span 11;
    min-width: 104px;
}

.patient-personal-grid .pc-dob-field {
    grid-column: span 16;
    min-width: 146px;
}

.patient-personal-grid .pc-uhid-field {
    grid-column: span 16;
    min-width: 142px;
}

.patient-personal-grid .pc-doa-field {
    grid-column: span 16;
    min-width: 142px;
}

.pc-field {
    position: relative;
    display: block;
}

.pc-field > span,
.pc-pain-scale legend {
    display: block;
    margin-bottom: 8px;
    color: #062466;
    font-size: 12px;
    font-weight: 850;
}

.pc-field b {
    color: #ef1c2d;
}

.pc-field input,
.pc-field select,
.pc-field textarea,
.pc-phone {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cfdaf0;
    border-radius: 5px;
    background: #fff;
    color: #06175f;
    font-size: 12px;
    font-weight: 650;
    outline: 0;
}

.pc-field input,
.pc-field select {
    height: 38px;
    padding: 0 12px;
}

.pc-field textarea {
    height: 72px;
    resize: vertical;
    padding: 12px;
}

.pc-field input::placeholder,
.pc-field textarea::placeholder {
    color: #7081b0;
}

.pc-field small {
    display: block;
    margin-top: 6px;
    color: #d7192a;
    font-size: 11px;
    font-weight: 750;
}

.pc-field .pc-helper {
    display: block;
    margin-top: 8px;
    color: #667bae;
    font-size: 11px;
    font-weight: 650;
}

.pc-field.select::after {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #42598f;
    border-bottom: 1.5px solid #42598f;
    transform: rotate(45deg);
    pointer-events: none;
    content: "";
}

.pc-field.select select {
    appearance: none;
    padding-right: 34px;
}

.pc-field.has-icon svg {
    position: absolute;
    right: 13px;
    bottom: 11px;
    color: #455d99;
    pointer-events: none;
}

.pc-field.has-icon input,
.pc-field.has-suffix input {
    padding-right: 54px;
}

.pc-field.has-suffix em {
    position: absolute;
    right: 13px;
    bottom: 11px;
    color: #5b6ea4;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.patient-personal-grid .pc-age-field input {
    padding-right: 12px;
}

.patient-personal-grid .pc-age-field em {
    position: static;
    display: block;
    margin-top: 3px;
    text-align: right;
    font-size: 10px;
    line-height: 1;
}

.pc-phone {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    overflow: hidden;
}

.pc-phone button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: #fff;
    color: #344a87;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.pc-phone input {
    height: 36px;
    min-height: 36px;
    border: 0;
    border-left: 1px solid #cfdaf0;
    border-radius: 0;
}

.pc-flag {
    width: 20px;
    height: 13px;
    display: inline-block;
    border: 1px solid #dce2ef;
    background: linear-gradient(#ff9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66% 100%);
}

.patient-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 72px;
    align-items: start;
    margin-top: 18px;
}

.patient-contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 18px 16px;
}

.patient-contact-grid .pc-mobile-field {
    grid-column: span 1;
}

.patient-contact-grid .pc-email-field {
    grid-column: span 1;
}

.patient-photo-upload {
    margin-top: 14px;
    min-height: 168px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px dashed #abc2ee;
    border-radius: 7px;
    text-align: center;
}

.patient-photo-upload > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f5fb;
    color: #5470ab;
}

.patient-photo-upload strong {
    color: #075fff;
    font-size: 12px;
}

.patient-photo-upload small {
    color: #5d6f9c;
    font-size: 11px;
    font-weight: 700;
}

.with-body-map {
    padding-right: 48px;
}

.with-body-map button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #cfdaf0;
    border-radius: 5px;
    background: #fff;
    color: #4b639d;
    cursor: pointer;
}

.pc-pain-scale {
    margin: 0;
    padding: 0;
    border: 0;
}

.pc-pain-scale > div {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border: 1px solid #cfdaf0;
    border-radius: 5px;
    overflow: hidden;
}

.pc-pain-scale input {
    position: absolute;
    opacity: 0;
}

.pc-pain-scale label span {
    height: 28px;
    display: grid;
    place-items: center;
    border-right: 1px solid #e2e8f6;
    color: #06175f;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.pc-pain-scale label:last-child span {
    border-right: 0;
}

.pc-pain-scale input:checked + span {
    background: #1261ff;
    color: #fff;
}

.pc-pain-scale p {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 0;
    color: #6072a1;
    font-size: 10px;
    font-weight: 650;
}

.doctor-select select,
.pc-status-field select {
    padding-left: 38px;
}

.doctor-select::before {
    position: absolute;
    left: 12px;
    bottom: 9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: url("/assets/images/doctor-avatar.png") center / cover no-repeat;
    content: "";
}

.pc-status-field::before {
    position: absolute;
    left: 15px;
    bottom: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #14c784;
    content: "";
}

.patient-create-aside {
    display: grid;
    gap: 16px;
}

.patient-side-card {
    padding: 20px;
}

.patient-side-card h2,
.patient-duplicate-card h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    color: #06175f;
    font-size: 13px;
}

.patient-side-card h2 > svg,
.patient-duplicate-card h2 > svg {
    width: 29px;
    height: 29px;
    padding: 7px;
    border-radius: 7px;
    background: #eef5ff;
    color: #1261ff;
}

.patient-preview-card dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.patient-preview-card dl div {
    display: grid;
    grid-template-columns: 1fr minmax(48px, auto);
    align-items: center;
    gap: 14px;
}

.patient-preview-card dt {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #29427e;
    font-size: 12px;
    font-weight: 850;
}

.patient-preview-card dt svg {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 50%;
    background: #f1f5fb;
    color: #52699d;
}

.patient-preview-card dd {
    margin: 0;
    color: #6577a4;
    font-size: 12px;
    font-weight: 750;
}

.patient-preview-card dd span {
    display: inline-flex;
    min-width: 58px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #d8f6e5;
    color: #098c3b;
    font-weight: 850;
}

.patient-next-card {
    display: grid;
    gap: 13px;
}

.patient-next-card .next {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.patient-next-card .next > svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    border: 1px solid currentColor;
    border-radius: 6px;
}

.patient-next-card .green > svg { color: #10a84c; background: #effbf3; }
.patient-next-card .blue > svg { color: #1261ff; background: #f1f6ff; }
.patient-next-card .amber > svg { color: #f4a000; background: #fff8e8; }
.patient-next-card .purple > svg { color: #a24df7; background: #fbf3ff; }

.patient-next-card strong,
.patient-next-card small {
    display: block;
}

.patient-next-card strong {
    color: #06175f;
    font-size: 12px;
}

.patient-next-card small {
    margin-top: 3px;
    color: #455d97;
    font-size: 11px;
    font-weight: 650;
}

.patient-duplicate-card {
    padding: 20px;
    border-color: #ffe0a4;
    background: linear-gradient(180deg, #fffaf0 0%, #fffaf4 100%);
}

.patient-duplicate-card h2 {
    margin-bottom: 12px;
    color: #a76300;
    font-size: 14px;
}

.patient-duplicate-card h2 > svg {
    background: #fff2d3;
    color: #f5a400;
}

.patient-duplicate-card p {
    margin: 0;
    color: #463a2a;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 650;
}

.patient-sticky-actions {
    position: sticky;
    bottom: 10px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #d8e1f3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 28px rgba(7, 23, 93, .15);
    backdrop-filter: blur(12px);
    z-index: 5;
}

.patient-security-note,
.patient-consent {
    display: flex;
    align-items: center;
    gap: 11px;
}

.patient-security-note > svg {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 8px;
    background: #eef5ff;
    color: #1261ff;
}

.patient-security-note strong,
.patient-security-note small {
    display: block;
}

.patient-security-note strong {
    color: #06175f;
    font-size: 11px;
}

.patient-security-note small {
    margin-top: 4px;
    color: #50669f;
    font-size: 10px;
    font-weight: 650;
}

.patient-consent {
    color: #06175f;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.patient-consent input {
    width: 14px;
    height: 14px;
    accent-color: #1261ff;
}

@media (max-width: 1280px) {
    .patient-create-layout {
        grid-template-columns: 1fr;
    }

    .patient-create-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .patient-sticky-actions {
        grid-template-columns: 1fr;
    }

    .patient-bottom-buttons {
        justify-content: flex-end;
    }
}

@media (max-width: 980px) {
    .patient-create-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-create-actions {
        justify-content: flex-start;
    }

    .patient-create-aside,
    .patient-contact-layout {
        grid-template-columns: 1fr;
    }

    .patient-create-grid .span-3,
    .patient-create-grid .span-4,
    .patient-create-grid .span-5,
    .patient-create-grid .span-6 {
        grid-column: span 6;
    }

    .patient-personal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .patient-personal-grid .pc-name-field,
    .patient-personal-grid .pc-age-field,
    .patient-personal-grid .pc-gender-field,
    .patient-personal-grid .pc-dob-field,
    .patient-personal-grid .pc-uhid-field,
    .patient-personal-grid .pc-doa-field {
        grid-column: span 1;
        min-width: 0;
    }

    .patient-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .patient-create-page {
        margin-inline: 0;
    }

    .patient-create-title {
        align-items: flex-start;
        gap: 12px;
    }

    .patient-create-title h1 {
        font-size: 22px;
    }

    .patient-create-section {
        padding: 18px 14px;
    }

    .patient-create-grid .span-3,
    .patient-create-grid .span-4,
    .patient-create-grid .span-5,
    .patient-create-grid .span-6 {
        grid-column: 1 / -1;
    }

    .patient-personal-grid .pc-name-field,
    .patient-personal-grid .pc-age-field,
    .patient-personal-grid .pc-gender-field,
    .patient-personal-grid .pc-dob-field,
    .patient-personal-grid .pc-uhid-field,
    .patient-personal-grid .pc-doa-field {
        grid-column: 1 / -1;
    }

    .patient-create-actions,
    .patient-bottom-buttons {
        width: 100%;
        flex-direction: column;
    }

    .patient-create-button {
        width: 100%;
    }

    .patient-sticky-actions {
        position: static;
    }

    .patient-consent {
        align-items: flex-start;
        white-space: normal;
    }
}

/* Assessment create SOAP page */
.assessment-create-page {
    display: grid;
    gap: 2px;
    margin: 0 0 74px;
    color: #071b58;
}

.assessment-patient-hero,
.assessment-patient-tabs,
.soap-card,
.assessment-save-bar {
    border: 1px solid #d8e3f2;
    background: #fff;
    box-shadow: 0 10px 24px rgba(9, 34, 84, .05);
}

.assessment-patient-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 12px;
    border-radius: 8px 8px 0 0;
}

.assessment-patient-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.assessment-patient-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e7f0ff;
    color: #075fec;
    font-size: 14px;
    font-weight: 900;
}

.assessment-patient-title-line {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.assessment-patient-identity h1 {
    margin: 0;
    font-size: 19px;
    line-height: 1.05;
    white-space: nowrap;
}

.assessment-patient-identity p {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    color: #334b7f;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.assessment-patient-identity p span + span::before {
    padding: 0 13px;
    color: #94a4c1;
    content: "|";
}

.assessment-hero-actions,
.assessment-save-bar > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.assessment-ghost-button,
.assessment-primary-button {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.assessment-ghost-button {
    min-width: 118px;
    padding: 0 14px;
    border: 1px solid #d1ddea;
    background: #fff;
    color: #0750d7;
}

.assessment-primary-button {
    min-width: 150px;
    padding: 0 18px;
    border: 0;
    background: linear-gradient(180deg, #126bff 0%, #0753e7 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(18, 88, 255, .18);
}

.assessment-primary-button.compact {
    min-width: 132px;
}

.assessment-patient-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border-radius: 0;
}

.assessment-patient-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-bottom: 3px solid transparent;
    color: #334b7f;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.assessment-patient-tabs a.active {
    border-bottom-color: #126bff;
    color: #0750d7;
}

.soap-card {
    padding: 10px 14px 12px;
    border-radius: 8px;
}

.soap-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.soap-section-header > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #126bff;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.soap-section-header strong {
    color: #071b58;
    font-size: 13px;
}

.soap-section-header small {
    color: #8191b0;
    font-size: 11px;
    font-weight: 700;
}

.soap-two-column {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 10px;
}

.soap-two-column.subjective-grid {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
}

.soap-two-column.objective-grid {
    grid-template-columns: .82fr 2fr;
}

.soap-panel {
    padding: 10px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #fff;
}

.soap-panel h2 {
    margin: 0 0 9px;
    color: #071b58;
    font-size: 12px;
}

.soap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.soap-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.soap-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.soap-grid.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.soap-grid.cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.soap-field {
    display: block;
    min-width: 0;
}

.soap-field.wide,
.soap-field.span-2 {
    grid-column: span 2;
}

.soap-field span,
.soap-pain-scale legend {
    display: block;
    margin-bottom: 4px;
    color: #273f75;
    font-size: 10px;
    font-weight: 850;
}

.soap-field input,
.soap-field select,
.soap-field textarea,
.rom-table input {
    width: 100%;
    min-height: 28px;
    border: 1px solid #d5e0ed;
    border-radius: 4px;
    background: #fff;
    color: #071b58;
    font-size: 10px;
    font-weight: 650;
    outline: 0;
}

.soap-field input,
.soap-field select,
.rom-table input {
    height: 28px;
    padding: 0 9px;
}

.soap-field textarea {
    resize: vertical;
    padding: 8px;
}

.soap-field.compact-history-field textarea {
    min-height: 28px;
    height: 28px;
    resize: none;
    overflow: hidden;
}

.soap-field input::placeholder,
.soap-field textarea::placeholder,
.rom-table input::placeholder {
    color: #8da0bd;
}

.soap-field small,
.soap-pain-scale small {
    display: block;
    margin-top: 5px;
    color: #d7192a;
    font-size: 10px;
    font-weight: 750;
}

.patient-search-field {
    position: relative;
    z-index: 5;
}

.patient-search-dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #d5e0ed;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(14, 31, 68, 0.16);
}

.patient-search-dropdown button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #071b58;
    cursor: pointer;
    text-align: left;
}

.patient-search-dropdown button:hover,
.patient-search-dropdown button:focus {
    background: #eef5ff;
    outline: 0;
}

.patient-search-dropdown strong {
    font-size: 10px;
    font-weight: 850;
}

.patient-search-dropdown small,
.patient-search-empty {
    color: #6d7f9b;
    font-size: 10px;
    font-weight: 750;
}

.patient-search-empty {
    display: block;
    padding: 7px 8px;
}

.soap-multiselect {
    position: relative;
}

.pain-characteristics-field {
    position: relative;
    z-index: 3;
}

.soap-multiselect summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 36px;
    padding: 5px 30px 5px 6px;
    border: 1px solid #d5e0ed;
    border-radius: 4px;
    background: #fff;
    color: #071b58;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    list-style: none;
    overflow: hidden;
    cursor: pointer;
}

.soap-multiselect summary::-webkit-details-marker {
    display: none;
}

.soap-multiselect summary::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 14px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #667694;
}

.soap-field .soap-multiselect-placeholder {
    display: block;
    margin: 0;
    padding: 4px;
    color: #8da0bd;
    font-size: 10px;
    font-weight: 650;
}

.soap-field .soap-multiselect-placeholder[hidden] {
    display: none;
}

.soap-field .soap-multiselect-chips {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    overflow: hidden;
}

.soap-field .soap-multiselect-chip {
    display: inline-flex;
    max-width: 140px;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 5px 6px;
    border-radius: 3px;
    background: #eef3fb;
    color: #18325d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.soap-field .soap-multiselect-chip button {
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border: 0;
    background: transparent;
    color: #5f6f89;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0;
}

.soap-field .soap-multiselect-chip button:hover {
    color: #d7192a;
}

.soap-multiselect[open] summary::after {
    transform: rotate(180deg);
}

.soap-multiselect-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: min(520px, 90vw);
    max-height: none;
    overflow-y: visible;
    padding: 5px;
    border: 1px solid #d5e0ed;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(14, 31, 68, 0.16);
}

.soap-multiselect-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 3px 6px;
    color: #6a7891;
    font-size: 10px;
    font-weight: 750;
}

.soap-multiselect-meta button {
    border: 0;
    background: transparent;
    color: #126bff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 850;
    padding: 0;
}

.soap-multiselect-menu label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 4px;
    color: #071b58;
    cursor: pointer;
}

.soap-multiselect-menu label:nth-of-type(n + 11) {
    grid-column: 2;
}

.soap-multiselect-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: auto repeat(10, minmax(0, auto));
    column-gap: 8px;
}

.soap-multiselect-meta {
    grid-column: 1 / -1;
}

.soap-multiselect-menu label:hover {
    background: #f2f6fc;
}

.soap-multiselect-menu input {
    width: 14px;
    height: 14px;
    min-height: 14px;
    flex: 0 0 auto;
}

.soap-multiselect-menu span {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
}

.soap-segment {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.soap-segment input {
    position: absolute;
    opacity: 0;
}

.soap-segment span {
    display: grid;
    place-items: center;
    height: 28px;
    margin: 0;
    border: 1px solid #d5e0ed;
    border-radius: 4px;
    color: #344a7c;
    cursor: pointer;
}

.soap-segment input:checked + span {
    border-color: #126bff;
    background: #eef5ff;
    color: #0750d7;
}

.soap-pain-scale {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}

.soap-pain-scale input[type="range"] {
    width: 100%;
    accent-color: #126bff;
}

.soap-pain-scale div,
.soap-pain-scale p {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    color: #50668e;
    font-size: 9px;
    font-weight: 700;
}

.rom-table {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.rom-table > span {
    padding: 6px 8px;
    background: #eef3f9;
    color: #344a7c;
    font-size: 10px;
    font-weight: 850;
}

.soap-card.compact {
    padding-bottom: 8px;
}

.assessment-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
}

.assessment-save-bar > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #7989a5;
    font-size: 11px;
    font-weight: 700;
}

.assessment-save-bar > span svg {
    color: #14a864;
}

@media (max-width: 1280px) {
    .soap-grid.cols-5,
    .soap-grid.cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .assessment-patient-hero,
    .assessment-save-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .soap-two-column,
    .soap-two-column.objective-grid {
        grid-template-columns: 1fr;
    }

    .soap-grid.cols-3,
    .soap-grid.cols-4,
    .soap-grid.cols-5,
    .soap-grid.cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .soap-grid,
    .soap-grid.cols-3,
    .soap-grid.cols-4,
    .soap-grid.cols-5,
    .soap-grid.cols-6,
    .rom-table {
        grid-template-columns: 1fr;
    }

    .soap-field.wide,
    .soap-field.span-2 {
        grid-column: 1 / -1;
    }

    .assessment-ghost-button,
    .assessment-primary-button,
    .assessment-save-bar > div {
        width: 100%;
    }
}

/* Patient details page */
.patient-detail-page {
    display: grid;
    gap: 12px;
    margin: 0;
    color: #071638;
}

.topbar-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.topbar-back-link svg {
    transform: rotate(180deg);
}

.topbar-back-link:hover {
    color: #0a58ca;
}

.patient-detail-page.has-info-drawer {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
}

.patient-detail-page.has-info-drawer.is-followups-full {
    grid-template-columns: minmax(0, 1fr);
}

.patient-detail-page.has-info-drawer.is-followups-full .patient-info-drawer {
    display: none;
}

.patient-detail-page.has-info-drawer.is-tab-full-width {
    grid-template-columns: minmax(0, 1fr);
}

.patient-detail-page.has-info-drawer.is-tab-full-width .patient-info-drawer {
    display: none;
}

.patient-detail-page.is-full-width {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * The global shell sets `.main-panel { padding: 0 }` so each page must inset its
 * own content (e.g. `.reports-page` uses `margin: 28px`). Without this, the
 * patient detail page renders flush against the sidebar and right edge on desktop.
 * Scoped to >900px because the <=900px rule below already supplies its own margin.
 */
@media (min-width: 901px) {
    .global-shell .patient-detail-page {
        padding: 12px 18px 14px;
    }
}

.patient-detail-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.patient-detail-header {
    display: grid;
    gap: 10px;
    padding: 0;
    border-bottom: 0;
}

.patient-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 850;
}

.patient-back-link svg {
    transform: rotate(180deg);
}

.patient-identity-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.patient-detail-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dce8ff, #edf5ff);
    color: #075fe4;
    font-size: 20px;
    font-weight: 900;
}

.patient-title-block {
    min-width: 0;
}

.patient-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.patient-title-line h1 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.patient-title-block p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 0;
    color: #263a63;
    font-size: 14px;
    font-weight: 700;
}

.patient-title-block p i {
    width: 1px;
    height: 14px;
    background: #aebcd0;
}

.patient-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.patient-detail-action-menu summary {
    min-width: 108px;
    height: 40px;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(13, 110, 253, .18);
}

.patient-detail-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: hidden;
    padding: 9px 12px 0;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(14, 42, 82, .055);
    scrollbar-width: thin;
}

.patient-detail-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    gap: 8px;
    min-height: 46px;
    min-width: 0;
    padding: 0 7px 9px;
    border-radius: 8px 8px 0 0;
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.patient-detail-tabs a > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-detail-tabs a::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
}

.patient-detail-tabs a.active {
    background: #edf5ff;
    color: #0d6efd;
    box-shadow: inset 0 0 0 1px #d7e6ff;
}

.patient-detail-tabs a.active::after {
    background: #0d6efd;
}

.patient-tab-icon,
.patient-card-title-icon {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: var(--tone-bg);
    color: var(--tone);
}

.patient-tab-icon {
    width: 24px;
    height: 24px;
}

.patient-tab-panel {
    display: none;
}

.patient-tab-panel.active {
    display: block;
}

.patient-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.patient-summary-tile,
.patient-list-card {
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.patient-summary-tile.summary-blue {
    background:
        radial-gradient(120px 52px at 100% 100%, rgba(22, 119, 232, .11), transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.patient-summary-tile.summary-purple {
    background:
        radial-gradient(130px 54px at 100% 100%, rgba(115, 87, 217, .12), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
}

.patient-summary-tile.summary-green {
    background:
        radial-gradient(140px 56px at 100% 100%, rgba(47, 184, 121, .14), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
}

.patient-summary-tile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    min-height: 158px;
    overflow: hidden;
    padding: 18px 16px 0;
}

.patient-summary-tile > a {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    margin: 0 -16px;
    border-top: 1px solid #dce7f2;
    background: #f8fbff;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 850;
}

.patient-summary-tile small {
    display: block;
    margin-bottom: 8px;
    color: #4b5e80;
    font-size: 13px;
    font-weight: 850;
}

.patient-summary-tile strong {
    display: block;
    margin-bottom: 7px;
    color: #071638;
    font-size: 18px;
    line-height: 1.25;
}

.patient-summary-tile p {
    margin: 4px 0 0;
    color: #263a63;
    font-size: 14px;
    line-height: 1.45;
}

.patient-tile-icon,
.patient-row-icon {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--tone-bg);
    color: var(--tone);
}

.patient-tile-icon {
    width: 42px;
    height: 42px;
}

.patient-list-card {
    padding: 14px 16px;
}

.patient-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.patient-card-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 15px;
    line-height: 1.2;
}

.patient-card-heading a {
    color: #0d6efd;
    font-size: 13px;
    font-weight: 850;
}

.patient-card-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.patient-card-title-icon {
    width: 27px;
    height: 27px;
    border-radius: 7px;
}

.patient-detail-list {
    display: grid;
}

.patient-detail-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 0;
    border-bottom: 1px solid #e8eef6;
}

.patient-detail-row:last-child,
.patient-message-row:last-child {
    border-bottom: 0;
}

.patient-detail-row strong,
.patient-message-row strong {
    display: block;
    color: #071638;
    font-size: 13px;
    line-height: 1.25;
}

.patient-detail-row small,
.patient-message-row small {
    display: block;
    margin-top: 3px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.patient-row-icon {
    width: 34px;
    height: 34px;
}

.status-text {
    color: #058655;
    font-size: 12px;
    font-weight: 900;
}

.patient-row-download {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #263a63;
}

.patient-row-download:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.patient-message-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    min-height: 52px;
    padding: 8px 0;
    border-bottom: 1px solid #e8eef6;
}

.message-initial {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dceaff;
    color: #075fe4;
    font-size: 11px;
    font-weight: 900;
}

.patient-message-row time {
    color: #52617c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.patient-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.patient-quick-grid a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: linear-gradient(145deg, #f8fbff, #ffffff);
    color: #0d6efd;
    text-align: center;
    font-size: 13px;
    font-weight: 850;
}

.patient-quick-grid a.quick-blue {
    border-color: #d9e8ff;
    background: linear-gradient(135deg, #edf5ff, #ffffff);
    color: #075fe4;
}

.patient-quick-grid a.quick-green {
    border-color: #d7efdf;
    background: linear-gradient(135deg, #eaf8f0, #ffffff);
    color: #087c55;
}

.patient-quick-grid a.quick-purple {
    border-color: #e3dcff;
    background: linear-gradient(135deg, #f1edff, #ffffff);
    color: #6c2bd9;
}

.patient-quick-grid a.quick-pink {
    border-color: #ffd8e6;
    background: linear-gradient(135deg, #fff0f6, #ffffff);
    color: #e11d61;
}

.patient-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.patient-info-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.patient-info-list div {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e8eef6;
}

.patient-info-list div:last-child {
    border-bottom: 0;
}

.patient-info-list dt {
    color: #52617c;
    font-size: 14px;
    font-weight: 850;
}

.patient-info-list dd {
    margin: 0;
    color: #071638;
    font-size: 14px;
    font-weight: 650;
}

.patient-profile-copy {
    margin: 0;
    color: #263a63;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.7;
}

.patient-placeholder-card {
    min-height: 220px;
}

.patient-placeholder-card p {
    max-width: 760px;
    margin: 0;
    color: #52617c;
    font-size: 15px;
    line-height: 1.7;
}

.patient-assessment-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.assessment-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.assessment-dashboard-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.assessment-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.assessment-date-picker {
    position: relative;
    flex: none;
}

.assessment-date-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    color: #071638;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    list-style: none;
}

.assessment-date-picker summary::-webkit-details-marker {
    display: none;
}

.assessment-date-picker > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 230px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.assessment-date-picker a {
    padding: 10px 12px;
    border-radius: 7px;
    color: #263a63;
    font-size: 13px;
    font-weight: 800;
}

.assessment-date-picker a:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.assessment-score-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.assessment-score-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 86px;
    padding: 16px 18px;
    border: 1px solid var(--assessment-border);
    border-radius: 9px;
    background: linear-gradient(135deg, var(--assessment-bg), #ffffff);
}

.assessment-score-card > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    background: var(--assessment-icon-bg);
    color: var(--assessment-color);
}

.assessment-score-card small,
.assessment-detail-card h3 {
    color: #071638;
    font-size: 13px;
    font-weight: 900;
}

.assessment-score-card small {
    display: block;
    margin-bottom: 5px;
}

.assessment-score-card strong {
    display: block;
    color: var(--assessment-color);
    font-size: 19px;
    line-height: 1.1;
}

.assessment-score-card em {
    display: block;
    margin-top: 3px;
    color: var(--assessment-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.assessment-score-card.tone-red,
.assessment-severity.severe,
.previous-assessment-row em.severe {
    --assessment-color: #ff1f46;
    --assessment-bg: #fff4f6;
    --assessment-border: #ffd4dc;
    --assessment-icon-bg: #ffe4ea;
}

.assessment-score-card.tone-blue {
    --assessment-color: #0d6efd;
    --assessment-bg: #f4f9ff;
    --assessment-border: #d8e8ff;
    --assessment-icon-bg: #e5f0ff;
}

.assessment-score-card.tone-orange,
.assessment-severity.moderate,
.previous-assessment-row em.moderate {
    --assessment-color: #f59f00;
    --assessment-bg: #fffaf0;
    --assessment-border: #ffe3ad;
    --assessment-icon-bg: #fff0cc;
}

.assessment-score-card.tone-green,
.assessment-severity.mild {
    --assessment-color: #18a957;
    --assessment-bg: #f3fff8;
    --assessment-border: #ccefd9;
    --assessment-icon-bg: #ddf8e7;
}

.assessment-card-grid {
    display: grid;
    grid-template-columns: 1.05fr .85fr 1.1fr 1.25fr;
    gap: 12px;
}

.assessment-detail-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.assessment-detail-card h3,
.assessment-card-title-row h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.assessment-detail-card h3 svg,
.assessment-card-title-row h3 svg {
    color: #0d6efd;
}

.assessment-detail-card p {
    margin: 0;
    color: #263a63;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
}

.complaint-card dl,
.vitals-card dl {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
}

.complaint-card dl div,
.vitals-card dl div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #e8eef6;
}

.complaint-card dt,
.vitals-card dt {
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.complaint-card dd,
.vitals-card dd {
    margin: 0;
    color: #071638;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.body-map-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 178px;
}

.body-map-figures svg {
    width: 100%;
    max-height: 170px;
    stroke: #8ea0bf;
    stroke-width: 2;
    fill: none;
}

.body-map-figures .pain-glow {
    fill: url(#painGlow);
    stroke: none;
}

.pain-map-legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e8eef6;
    color: #52617c;
    font-size: 12px;
    font-weight: 750;
}

.pain-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pain-map-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-red {
    background: #ff1f46;
}

.dot-blue {
    background: #0d6efd;
}

.rom-card,
.functional-card,
.previous-assessments-card,
.clinical-notes-card {
    display: grid;
    align-content: start;
}

.rom-row {
    display: grid;
    grid-template-columns: minmax(104px, 1fr) minmax(64px, .65fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    color: #071638;
    font-size: 12px;
    font-weight: 850;
}

.rom-row i {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe5f0;
}

.rom-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0d6efd;
}

.rom-row strong {
    color: #263a63;
    font-size: 12px;
    white-space: nowrap;
}

.functional-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    border-bottom: 1px solid #e8eef6;
}

.functional-row:last-child {
    border-bottom: 0;
}

.functional-row strong {
    color: #071638;
    font-size: 12px;
}

.assessment-severity {
    min-width: 70px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--assessment-icon-bg);
    color: var(--assessment-color);
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.assessment-dots {
    display: inline-flex;
    gap: 5px;
}

.assessment-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9e1ec;
}

.assessment-dots.moderate i.filled {
    background: #f59f00;
}

.assessment-dots.severe i.filled {
    background: #ff1f46;
}

.assessment-dots.mild i.filled {
    background: #37ba62;
}

.clinical-notes-card {
    grid-column: span 2;
}

.previous-assessments-card {
    grid-column: span 2;
}

.clinical-notes-card hr {
    width: 100%;
    height: 1px;
    margin: 16px 0;
    border: 0;
    background: #e8eef6;
}

.clinical-notes-card strong {
    color: #071638;
}

.assessment-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.assessment-card-title-row h3 {
    margin-bottom: 0;
}

.assessment-card-title-row a {
    color: #0d6efd;
    font-size: 12px;
    font-weight: 900;
}

.previous-assessment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid #e8eef6;
    color: #071638;
}

.previous-assessment-row:last-child {
    border-bottom: 0;
}

.previous-assessment-row strong,
.previous-assessment-row small {
    display: block;
}

.previous-assessment-row strong {
    font-size: 13px;
}

.previous-assessment-row small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.previous-assessment-row em {
    min-width: 52px;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--assessment-icon-bg);
    color: var(--assessment-color);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.assessment-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 2px;
}

.assessment-bottom-actions .primary-button,
.assessment-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.assessment-bottom-actions .is-saved {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.patient-consents-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.consent-dashboard-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.consent-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.consent-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.consent-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid var(--consent-border);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.consent-summary-card > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--consent-icon-bg);
    color: var(--consent-color);
}

.consent-summary-card small,
.consent-summary-card strong,
.consent-summary-card em {
    display: block;
}

.consent-summary-card small {
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
}

.consent-summary-card strong {
    margin-top: 6px;
    color: var(--consent-color);
    font-size: 19px;
    line-height: 1.05;
}

.consent-summary-card em {
    margin-top: 7px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.consent-summary-card.tone-blue,
.consent-file-icon.tone-blue {
    --consent-color: #0d6efd;
    --consent-border: #d8e8ff;
    --consent-icon-bg: #e5f0ff;
}

.consent-summary-card.tone-green,
.consent-file-icon.tone-green {
    --consent-color: #18a957;
    --consent-border: #ccefd9;
    --consent-icon-bg: #ddf8e7;
}

.consent-summary-card.tone-orange,
.consent-file-icon.tone-orange {
    --consent-color: #ff8a00;
    --consent-border: #ffe1b8;
    --consent-icon-bg: #fff0d9;
}

.consent-summary-card.tone-purple {
    --consent-color: #8238e8;
    --consent-border: #eadbff;
    --consent-icon-bg: #f0e4ff;
}

.consent-file-icon.tone-red {
    --consent-color: #ff334d;
    --consent-icon-bg: #ffe7eb;
}

.consent-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.consent-status-filters,
.consent-filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.consent-status-filters button {
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #071638;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
}

.consent-status-filters button.active {
    border-color: #82b8ff;
    background: #edf5ff;
    color: #0d6efd;
    box-shadow: 0 8px 18px rgba(13, 110, 253, .08);
}

.consent-filter-controls select,
.consent-search input {
    height: 40px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #071638;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.consent-filter-controls select {
    min-width: 220px;
    padding: 0 38px 0 14px;
}

.consent-search {
    position: relative;
    display: inline-flex;
}

.consent-search svg {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    color: #56709c;
}

.consent-search input {
    width: 260px;
    padding: 0 42px 0 14px;
}

.consent-table-card {
    overflow: visible;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.consent-table-wrap {
    overflow-x: auto;
}

.consent-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
}

.consent-table th,
.consent-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef6;
    text-align: left;
    vertical-align: middle;
}

.consent-table th {
    background: linear-gradient(180deg, #fbfdff, #f6f9fd);
    color: #071638;
    font-size: 12px;
    font-weight: 900;
}

.consent-table td {
    color: #071638;
    font-size: 13px;
    font-weight: 750;
}

.consent-table tbody tr.is-hidden {
    display: none;
}

.consent-name-cell {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 280px;
}

.consent-name-cell strong,
.consent-table td strong {
    display: block;
    color: #071638;
    font-weight: 900;
}

.consent-name-cell small,
.consent-table td small {
    display: block;
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-weight: 650;
}

.consent-file-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 8px;
    background: var(--consent-icon-bg);
    color: var(--consent-color);
}

.consent-category-badge,
.consent-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
}

.consent-category-badge.treatment {
    background: #dff0ff;
    color: #0d6efd;
}

.consent-category-badge.legal {
    background: #eee2ff;
    color: #8238e8;
}

.consent-category-badge.media {
    background: #fff1d8;
    color: #ff8a00;
}

.consent-category-badge.procedure {
    background: #e4edff;
    color: #1559d6;
}

.consent-category-badge.health {
    background: #d9f5f2;
    color: #008d84;
}

.consent-status-badge.signed {
    background: #d8f4e5;
    color: #0e9f56;
}

.consent-status-badge.pending {
    background: #ffe8c9;
    color: #ec7600;
}

.consent-status-badge.expired {
    background: #ffe0e5;
    color: #f02f4a;
}

.consent-status-badge.expiring-soon {
    background: #fff2bf;
    color: #9a6800;
}

.consent-table td.is-expired strong,
.consent-table td.is-expired small {
    color: #f02f4a;
}

.consent-row-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.consent-row-actions button,
.consent-more-menu summary,
.consent-pagination button {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #294574;
    cursor: pointer;
}

.consent-row-actions > button {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.consent-row-actions > button:hover,
.consent-more-menu summary:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.consent-more-menu {
    position: relative;
}

.consent-more-menu summary {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    list-style: none;
}

.consent-more-menu summary::-webkit-details-marker {
    display: none;
}

.consent-more-menu > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 8;
    display: grid;
    min-width: 180px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.consent-more-menu > div button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border-radius: 7px;
    text-align: left;
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
}

.consent-more-menu > div button:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.consent-more-menu > div button.danger {
    color: #f02f4a;
}

.consent-empty-state {
    display: none;
    margin: 0;
    padding: 24px 16px;
    border-top: 1px solid #e8eef6;
    color: #52617c;
    text-align: center;
    font-size: 13px;
    font-weight: 750;
}

.consent-empty-state.visible {
    display: block;
}

.consent-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    color: #263a63;
    font-size: 13px;
    font-weight: 750;
}

.consent-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.consent-pagination button {
    width: 34px;
    height: 34px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
}

.consent-pagination button:first-child svg {
    transform: rotate(180deg);
}

.consent-pagination button.active {
    border-color: #69a8ff;
    background: #69a8ff;
    color: #ffffff;
}

.consent-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.consent-bottom-actions .primary-button,
.consent-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.consent-bottom-actions .is-generated,
.consent-bottom-actions .is-sent,
.consent-bottom-actions .is-created {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.consent-modal-summary {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #f8fbff;
}

.consent-modal-summary strong {
    color: #071638;
    font-size: 15px;
}

.consent-modal-summary small {
    color: #52617c;
    font-size: 13px;
    font-weight: 700;
}

.patient-documents-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.document-dashboard-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.document-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.document-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.document-summary-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid var(--document-border);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.document-summary-card > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--document-icon-bg);
    color: var(--document-color);
}

.document-summary-card small,
.document-summary-card strong,
.document-summary-card em {
    display: block;
}

.document-summary-card small {
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
}

.document-summary-card strong {
    margin-top: 6px;
    color: var(--document-color);
    font-size: 19px;
    line-height: 1.05;
}

.document-summary-card em {
    margin-top: 7px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.document-summary-card.tone-blue,
.document-file-icon.tone-blue {
    --document-color: #0d6efd;
    --document-border: #d8e8ff;
    --document-icon-bg: #e5f0ff;
}

.document-summary-card.tone-green,
.document-file-icon.tone-green {
    --document-color: #18a957;
    --document-border: #ccefd9;
    --document-icon-bg: #ddf8e7;
}

.document-summary-card.tone-orange {
    --document-color: #ff8a00;
    --document-border: #ffe1b8;
    --document-icon-bg: #fff0d9;
}

.document-summary-card.tone-purple {
    --document-color: #8238e8;
    --document-border: #eadbff;
    --document-icon-bg: #f0e4ff;
}

.document-summary-card.tone-teal {
    --document-color: #00938b;
    --document-border: #c8efea;
    --document-icon-bg: #d9f5f2;
}

.document-file-icon.tone-red {
    --document-color: #ff334d;
    --document-icon-bg: #ffe7eb;
}

.document-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.document-toolbar-actions,
.document-filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.document-filter-controls select,
.document-search input {
    height: 40px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #071638;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.document-filter-controls select {
    min-width: 190px;
    padding: 0 38px 0 14px;
}

.document-search {
    position: relative;
    display: inline-flex;
}

.document-search svg {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    color: #56709c;
}

.document-search input {
    width: 260px;
    padding: 0 42px 0 14px;
}

.document-table-card {
    overflow: visible;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.document-table-wrap {
    overflow-x: auto;
}

.document-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.document-table th,
.document-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #e8eef6;
    text-align: left;
    vertical-align: middle;
}

.document-table th {
    background: linear-gradient(180deg, #fbfdff, #f6f9fd);
    color: #071638;
    font-size: 12px;
    font-weight: 900;
}

.document-table td {
    color: #071638;
    font-size: 13px;
    font-weight: 750;
}

.document-table tbody tr.is-hidden {
    display: none;
}

.document-name-cell,
.document-uploader {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.document-name-cell {
    min-width: 260px;
}

.document-name-cell strong,
.document-uploader strong,
.document-table td strong {
    display: block;
    color: #071638;
    font-weight: 900;
}

.document-uploader small,
.document-table td small {
    display: block;
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-weight: 650;
}

.document-file-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 42px;
    flex: none;
    border-radius: 8px;
    background: var(--document-icon-bg);
    color: var(--document-color);
}

.document-file-icon em {
    display: block;
    margin-top: -4px;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.document-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
}

.document-category-badge.reports {
    background: #d8f4e5;
    color: #0e9f56;
}

.document-category-badge.prescriptions {
    background: #ffe8c9;
    color: #ec7600;
}

.document-category-badge.invoices {
    background: #eee2ff;
    color: #8238e8;
}

.document-category-badge.other {
    background: #edf1f6;
    color: #52617c;
}

.document-uploader-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #ffb15c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
}

.document-uploader-avatar.doctor-alt,
.document-uploader-avatar.patient {
    background: linear-gradient(135deg, #3fb7ff, #ffc082);
}

.document-uploader-avatar.system {
    background: #e8eef6;
    color: #52617c;
}

.document-row-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.document-row-actions button,
.document-more-menu summary,
.document-pagination button {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #294574;
    cursor: pointer;
}

.document-row-actions > button {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.document-row-actions > button:hover,
.document-more-menu summary:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.document-more-menu {
    position: relative;
}

.document-more-menu summary {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    list-style: none;
}

.document-more-menu summary::-webkit-details-marker {
    display: none;
}

.document-more-menu > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 8;
    display: grid;
    min-width: 180px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.document-more-menu > div button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border-radius: 7px;
    text-align: left;
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
}

.document-more-menu > div button:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.document-more-menu > div button.danger {
    color: #f02f4a;
}

.document-empty-state {
    display: none;
    margin: 0;
    padding: 24px 16px;
    border-top: 1px solid #e8eef6;
    color: #52617c;
    text-align: center;
    font-size: 13px;
    font-weight: 750;
}

.document-empty-state.visible {
    display: block;
}

.document-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    color: #263a63;
    font-size: 13px;
    font-weight: 750;
}

.document-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.document-pagination button {
    width: 34px;
    height: 34px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
}

.document-pagination button:first-child svg {
    transform: rotate(180deg);
}

.document-pagination button.active {
    border-color: #69a8ff;
    background: #69a8ff;
    color: #ffffff;
}

.document-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.document-bottom-actions .primary-button,
.document-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.document-bottom-actions .is-generated,
.document-bottom-actions .is-shared,
.document-toolbar-actions .is-created {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.document-modal-summary {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #f8fbff;
}

.document-modal-summary strong {
    color: #071638;
    font-size: 15px;
}

.document-modal-summary small {
    color: #52617c;
    font-size: 13px;
    font-weight: 700;
}

.patient-messages-dashboard {
    display: grid;
    grid-template-columns: minmax(280px, 350px) minmax(0, 1fr) minmax(280px, 330px);
    gap: 12px;
    min-height: 720px;
}

.patient-message-conversations,
.patient-chat-thread,
.patient-message-info-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.patient-message-conversations {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.patient-message-conversations > header,
.patient-chat-header,
.patient-message-info-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #dce7f2;
}

.patient-message-conversations > header {
    padding: 14px 14px 10px;
    border-bottom: 0;
}

.patient-message-conversations h2,
.patient-message-info-card h2 {
    margin: 0;
    color: #071638;
    font-size: 18px;
    line-height: 1.15;
}

.patient-message-conversations select {
    height: 36px;
    min-width: 82px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
    padding: 0 28px 0 10px;
}

.patient-message-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 14px 14px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #56709c;
}

.patient-message-search svg {
    margin-left: 12px;
    flex: none;
}

.patient-message-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    background: transparent;
    color: #071638;
    font: inherit;
    font-size: 13px;
    outline: 0;
    padding: 0 12px;
}

.patient-message-thread-list {
    overflow-y: auto;
    border-top: 1px solid #e8eef6;
}

.patient-message-thread {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 88px;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid #e8eef6;
    background: #ffffff;
    color: #071638;
    cursor: pointer;
    text-align: left;
}

.patient-message-thread.selected {
    background: #eef6ff;
    box-shadow: inset 3px 0 0 #69a8ff;
}

.patient-message-thread.is-hidden {
    display: none;
}

.patient-message-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 950;
}

.patient-message-avatar.large {
    width: 52px;
    height: 52px;
    font-size: 16px;
}

.patient-message-avatar.tone-green {
    background: #dcf7e7;
    color: #119953;
}

.patient-message-avatar.tone-orange {
    background: #fff0d9;
    color: #ff8a00;
}

.patient-message-avatar.tone-purple {
    background: #eee2ff;
    color: #8238e8;
}

.patient-message-avatar i {
    position: absolute;
    right: 1px;
    bottom: 3px;
    width: 9px;
    height: 9px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #18a957;
}

.patient-message-thread-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.patient-message-thread-copy strong {
    overflow: hidden;
    color: #071638;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-message-thread-copy small {
    overflow: hidden;
    color: #263a63;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-message-thread-meta {
    display: grid;
    justify-items: end;
    gap: 8px;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 750;
}

.patient-message-thread-meta em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #3d8bff;
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.patient-message-empty {
    display: none;
    margin: 0;
    padding: 16px;
    color: #52617c;
    font-size: 13px;
    font-weight: 750;
}

.patient-message-empty.visible {
    display: block;
}

.patient-message-conversations > footer {
    padding: 14px;
}

.patient-message-conversations > footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    border: 1px solid #69a8ff;
    border-radius: 7px;
    background: #ffffff;
    color: #0d6efd;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.patient-chat-thread {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.patient-chat-header {
    padding: 16px 20px;
}

.patient-chat-person {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.patient-chat-person strong {
    display: block;
    color: #071638;
    font-size: 17px;
    font-weight: 950;
}

.patient-chat-person small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #119953;
    font-size: 12px;
    font-weight: 850;
}

.patient-chat-person small i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #18a957;
}

.patient-chat-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.patient-chat-actions > button,
.patient-chat-more summary {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #294574;
    cursor: pointer;
}

.patient-chat-actions > button:hover,
.patient-chat-more summary:hover {
    border-color: #bfd9ff;
    background: #edf5ff;
    color: #0d6efd;
}

.patient-chat-more {
    position: relative;
}

.patient-chat-more summary {
    list-style: none;
}

.patient-chat-more summary::-webkit-details-marker {
    display: none;
}

.patient-chat-more > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 8;
    display: grid;
    min-width: 170px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.patient-chat-more > div button {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #263a63;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 850;
}

.patient-chat-more > div button:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.patient-chat-body {
    display: grid;
    align-content: start;
    gap: 14px;
    overflow-y: auto;
    padding: 18px 24px 24px;
    background: #fbfdff;
}

.patient-chat-date {
    justify-self: center;
    padding: 7px 16px;
    border-radius: 999px;
    background: #f0f4fa;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.patient-chat-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: min(72%, 560px);
}

.patient-chat-message.incoming {
    justify-self: start;
}

.patient-chat-message.outgoing {
    justify-self: end;
}

.doctor-message-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #ffb15c);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

.patient-chat-message > div {
    min-width: 0;
    padding: 13px 16px;
    border-radius: 10px;
    background: #f0f2f6;
    color: #071638;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.patient-chat-message.outgoing > div {
    background: #dfeeff;
}

.patient-chat-message p {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.65;
}

.patient-chat-message time {
    display: block;
    margin-top: 8px;
    color: #40577f;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
}

.patient-chat-message time span {
    color: #0d6efd;
    font-weight: 950;
}

.patient-chat-composer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 72px;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #dce7f2;
    background: #ffffff;
}

.patient-chat-composer input {
    height: 42px;
    min-width: 0;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    color: #071638;
    font: inherit;
    font-size: 13px;
    outline: 0;
    padding: 0 12px;
}

.patient-chat-composer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #294574;
    cursor: pointer;
    font-weight: 900;
}

.patient-chat-composer button[type="submit"] {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #ffffff;
}

.patient-message-info-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.patient-message-info-card > header {
    padding: 16px 20px;
}

.patient-message-info-card > header a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dce7f2;
    border-radius: 50%;
    color: #56709c;
}

.patient-message-info-card section {
    padding: 20px;
}

.patient-message-info-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.patient-message-info-heading h3 {
    margin: 0;
    color: #071638;
    font-size: 14px;
}

.patient-message-info-heading a {
    color: #0d6efd;
    font-size: 12px;
    font-weight: 900;
}

.patient-message-info-card dl {
    display: grid;
    gap: 18px;
    margin: 0;
}

.patient-message-info-card dl div {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
}

.patient-message-info-card dt,
.patient-message-info-card dd {
    margin: 0;
    color: #263a63;
    font-size: 13px;
    font-weight: 850;
}

.patient-message-info-card dd {
    color: #071638;
    font-weight: 700;
}

.patient-message-info-card > footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 20px;
    padding: 16px;
    border-radius: 8px;
    background: #edf5ff;
    color: #071638;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.patient-message-info-card > footer svg {
    flex: none;
    color: #0d6efd;
}

.patient-treatment-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.treatment-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.treatment-dashboard-heading h2,
.treatment-plan-card h3 {
    margin: 0;
    color: #071638;
}

.treatment-dashboard-heading h2 {
    font-size: 22px;
    line-height: 1.15;
}

.treatment-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.treatment-heading-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.treatment-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.treatment-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 16px 18px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.treatment-summary-card > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: var(--treatment-icon-bg);
    color: var(--treatment-color);
}

.treatment-summary-card small,
.treatment-summary-card strong,
.treatment-summary-card em {
    display: block;
}

.treatment-summary-card small {
    margin-bottom: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 850;
}

.treatment-summary-card strong {
    color: var(--treatment-color);
    font-size: 18px;
    line-height: 1.18;
}

.treatment-summary-card em {
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.treatment-summary-card.tone-blue {
    --treatment-color: #0d6efd;
    --treatment-icon-bg: #e5f0ff;
}

.treatment-summary-card.tone-green {
    --treatment-color: #18a957;
    --treatment-icon-bg: #ddf8e7;
}

.treatment-summary-card.tone-purple {
    --treatment-color: #8b5cf6;
    --treatment-icon-bg: #f0e9ff;
}

.treatment-plan-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.05fr;
    gap: 14px;
}

.treatment-plan-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.treatment-plan-card h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.2;
}

.treatment-plan-card h3 svg {
    color: #0d6efd;
}

.treatment-goals-card {
    position: relative;
    overflow: hidden;
}

.treatment-goals-card::after {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 110px;
    height: 54px;
    opacity: .22;
    background:
        linear-gradient(135deg, transparent 50%, #bfdbfe 51%) 0 18px / 48px 36px no-repeat,
        linear-gradient(135deg, transparent 50%, #93c5fd 51%) 34px 2px / 70px 52px no-repeat;
    content: "";
}

.treatment-goals-card ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.treatment-goals-card li {
    position: relative;
    padding-left: 26px;
    color: #071638;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.treatment-goals-card li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #bff0d3;
    color: #087c55;
    font-size: 11px;
    font-weight: 900;
    content: "✓";
}

.treatment-approach-card {
    display: grid;
    align-content: start;
}

.treatment-approach-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 52px;
}

.treatment-approach-row > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf5ff;
    color: #0d6efd;
}

.treatment-approach-row strong,
.treatment-approach-row small {
    display: block;
}

.treatment-approach-row strong {
    color: #071638;
    font-size: 13px;
}

.treatment-approach-row small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.treatment-timeline {
    position: relative;
    display: grid;
    gap: 18px;
    padding-left: 28px;
}

.treatment-timeline::before {
    position: absolute;
    top: 8px;
    bottom: 10px;
    left: 10px;
    width: 2px;
    border-radius: 999px;
    background: #dce7f2;
    content: "";
}

.treatment-timeline section {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 58px;
}

.treatment-timeline section > i {
    position: absolute;
    top: 8px;
    left: -24px;
    width: 12px;
    height: 12px;
    border: 3px solid #d7e6ff;
    border-radius: 50%;
    background: #7b96bd;
}

.treatment-timeline section.active {
    padding: 14px;
    border: 1px solid #9dc6ff;
    border-radius: 8px;
    background: #edf5ff;
}

.treatment-timeline section.active > i {
    left: -38px;
    background: #0d6efd;
    border-color: #0d6efd;
}

.treatment-timeline strong,
.treatment-timeline small {
    display: block;
}

.treatment-timeline strong {
    color: #071638;
    font-size: 13px;
}

.treatment-timeline section.active strong {
    color: #0d6efd;
}

.treatment-timeline small {
    margin-top: 7px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.treatment-details-card {
    padding-bottom: 14px;
}

.treatment-plan-table-wrap {
    overflow-x: auto;
    border: 1px solid #dce7f2;
    border-radius: 9px;
}

.treatment-plan-table {
    min-width: 1040px;
    width: 100%;
}

.treatment-plan-table th,
.treatment-plan-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e8eef6;
    font-size: 12px;
}

.treatment-plan-table th {
    background: #f8fbff;
    color: #52617c;
    font-weight: 900;
    text-align: left;
}

.treatment-plan-table td {
    color: #071638;
    font-weight: 750;
    line-height: 1.35;
}

.treatment-plan-table tr.current td {
    background: #fcfdff;
}

.treatment-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.treatment-status-badge.in-progress {
    background: #e7f1ff;
    color: #0d6efd;
}

.treatment-status-badge.upcoming {
    background: #fff1d9;
    color: #f59f00;
}

.treatment-progress-label {
    display: block;
    margin-bottom: 7px;
    color: #263a63;
    font-size: 11px;
    font-weight: 900;
}

.treatment-progress-track {
    display: block;
    width: 94px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7f2;
}

.treatment-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0d6efd;
}

.treatment-info-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #cfe3ff;
    border-radius: 8px;
    background: #f2f8ff;
    color: #17457e;
    font-size: 13px;
    font-weight: 750;
}

.treatment-info-note svg {
    flex: none;
    color: #0d6efd;
}

.treatment-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.treatment-bottom-actions .primary-button,
.treatment-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.treatment-bottom-actions .is-saved {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.treatment-plan-modal {
    width: min(460px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(14, 42, 82, .22);
}

.treatment-plan-modal::backdrop {
    background: rgba(7, 22, 56, .38);
}

.treatment-plan-modal form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.treatment-plan-modal header,
.treatment-plan-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.treatment-plan-modal h2 {
    margin: 0;
    color: #071638;
    font-size: 18px;
}

.treatment-plan-modal header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #071638;
}

.treatment-plan-modal label {
    display: grid;
    gap: 7px;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.treatment-plan-modal input,
.treatment-plan-modal textarea {
    width: 100%;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.treatment-plan-modal input {
    height: 40px;
    padding: 0 12px;
}

.treatment-plan-modal textarea {
    resize: vertical;
    padding: 10px 12px;
}

.plan-history-list {
    display: grid;
    gap: 10px;
}

.plan-history-list span {
    display: block;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 8px;
    background: #f8fbff;
}

.plan-history-list strong,
.plan-history-list small {
    display: block;
}

.plan-history-list strong {
    color: #071638;
    font-size: 13px;
}

.plan-history-list small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.patient-exercises-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.exercises-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.exercises-dashboard-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.exercises-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.exercises-heading-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.exercise-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.exercise-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 16px 18px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.exercise-summary-card > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: var(--exercise-icon-bg);
    color: var(--exercise-color);
}

.exercise-summary-card small,
.exercise-summary-card strong,
.exercise-summary-card em {
    display: block;
}

.exercise-summary-card small {
    margin-bottom: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 850;
}

.exercise-summary-card strong {
    color: var(--exercise-color);
    font-size: 18px;
    line-height: 1.18;
}

.exercise-summary-card em {
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.exercise-summary-card.tone-blue {
    --exercise-color: #0d6efd;
    --exercise-icon-bg: #e5f0ff;
}

.exercise-summary-card.tone-green {
    --exercise-color: #18a957;
    --exercise-icon-bg: #ddf8e7;
}

.exercise-summary-card.tone-purple {
    --exercise-color: #8b5cf6;
    --exercise-icon-bg: #f0e9ff;
}

.exercise-summary-card.tone-orange {
    --exercise-color: #f59f00;
    --exercise-icon-bg: #fff0cc;
}

.exercise-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid #e8eef6;
    border-bottom: 1px solid #e8eef6;
}

.exercise-chip-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
}

.exercise-chip-group button,
.exercise-filter-row select {
    min-height: 38px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.exercise-chip-group button {
    flex: none;
    padding: 0 18px;
}

.exercise-chip-group button.active {
    border-color: #8fc4ff;
    background: #edf5ff;
    color: #0d6efd;
    box-shadow: inset 0 0 0 1px #cfe3ff;
}

.exercise-filter-row label {
    flex: 0 0 160px;
}

.exercise-filter-row select {
    width: 100%;
    padding: 0 34px 0 12px;
}

.exercise-table-card {
    overflow: hidden;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.exercise-table-wrap {
    overflow-x: auto;
    border: 0;
    border-radius: 0;
}

.exercise-table {
    min-width: 1040px;
    width: 100%;
}

.exercise-table th,
.exercise-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #e8eef6;
    font-size: 12px;
}

.exercise-table th {
    background: #f8fbff;
    color: #52617c;
    font-weight: 900;
    text-align: left;
}

.exercise-table td {
    color: #071638;
    font-weight: 750;
    line-height: 1.35;
}

.exercise-name-cell {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

.exercise-name-cell strong,
.exercise-name-cell small,
.exercise-table td > strong,
.exercise-table td > small {
    display: block;
}

.exercise-name-cell strong {
    color: #071638;
    font-size: 13px;
}

.exercise-name-cell small,
.exercise-table td > small {
    margin-top: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.exercise-thumb {
    position: relative;
    display: block;
    width: 82px;
    height: 46px;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(160deg, #f1f5f9, #dceaff);
}

.exercise-thumb::before {
    position: absolute;
    right: 8px;
    bottom: 7px;
    left: 8px;
    height: 5px;
    border-radius: 999px;
    background: #8fc4ff;
    content: "";
}

.exercise-thumb i,
.exercise-thumb i::before,
.exercise-thumb i::after {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: #1f2937;
    content: "";
}

.exercise-thumb i {
    left: 29px;
    top: 15px;
    width: 30px;
    height: 6px;
    transform: rotate(-12deg);
}

.exercise-thumb i::before {
    right: -6px;
    top: -8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.exercise-thumb i::after {
    left: -16px;
    top: 4px;
    width: 22px;
    height: 5px;
    transform: rotate(28deg);
}

.exercise-thumb.pose-stretch i,
.exercise-thumb.pose-seated i {
    transform: rotate(-30deg);
}

.exercise-thumb.pose-bridge i {
    top: 20px;
    transform: rotate(0);
}

.exercise-thumb.pose-bird i {
    top: 18px;
    width: 36px;
}

.exercise-thumb.pose-plank i {
    top: 22px;
    width: 38px;
    transform: rotate(-8deg);
}

.exercise-category-badge,
.exercise-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.exercise-category-badge.mobility,
.exercise-status-badge.in-progress {
    background: #e7f1ff;
    color: #0d6efd;
}

.exercise-category-badge.stretching,
.exercise-status-badge.completed {
    background: #ddf8e7;
    color: #087c55;
}

.exercise-category-badge.strengthening {
    background: #f0e9ff;
    color: #7c3aed;
}

.exercise-category-badge.stability,
.exercise-status-badge.paused {
    background: #fff1d9;
    color: #f59f00;
}

.exercise-category-badge.balance {
    background: #dffcf5;
    color: #0f8f7c;
}

.exercise-category-badge.endurance {
    background: #e7e9ff;
    color: #4f46e5;
}

.exercise-status-badge.not-started {
    background: #edf1f6;
    color: #66758e;
}

.exercise-progress-cell {
    display: grid;
    grid-template-columns: 42px minmax(86px, 1fr);
    align-items: center;
    gap: 8px;
}

.exercise-progress-cell strong {
    color: #071638;
    font-size: 12px;
}

.exercise-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7f2;
}

.exercise-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0d6efd;
}

.exercise-progress-track.completed i {
    background: #18a957;
}

.exercise-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exercise-row-actions button,
.exercise-more-menu summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #31527f;
}

.exercise-row-actions button:hover,
.exercise-more-menu summary:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.exercise-more-menu {
    position: relative;
}

.exercise-more-menu summary {
    cursor: pointer;
    list-style: none;
}

.exercise-more-menu summary::-webkit-details-marker {
    display: none;
}

.exercise-more-menu > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 174px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.exercise-more-menu > div button {
    width: 100%;
    height: auto;
    justify-content: start;
    padding: 9px 10px;
    color: #263a63;
    text-align: left;
    font-size: 12px;
    font-weight: 850;
}

.exercise-info-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cfe3ff;
    border-radius: 8px;
    background: #f2f8ff;
    color: #17457e;
    font-size: 13px;
    font-weight: 750;
}

.exercise-info-note svg {
    flex: none;
    color: #0d6efd;
}

.exercise-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.exercise-bottom-actions .primary-button,
.exercise-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.exercise-bottom-actions .is-saved,
.exercise-bottom-actions .is-sent {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.exercise-plan-modal {
    width: min(480px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(14, 42, 82, .22);
}

.exercise-plan-modal::backdrop {
    background: rgba(7, 22, 56, .38);
}

.exercise-plan-modal form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.exercise-plan-modal header,
.exercise-plan-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.exercise-plan-modal h2 {
    margin: 0;
    color: #071638;
    font-size: 18px;
}

.exercise-plan-modal header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #071638;
}

.exercise-plan-modal label {
    display: grid;
    gap: 7px;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.exercise-plan-modal input,
.exercise-plan-modal select,
.exercise-plan-modal textarea {
    width: 100%;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.exercise-plan-modal input,
.exercise-plan-modal select {
    height: 40px;
    padding: 0 12px;
}

.exercise-plan-modal textarea {
    resize: vertical;
    padding: 10px 12px;
}

.exercise-library-list {
    display: grid;
    gap: 10px;
}

.exercise-library-list span {
    display: block;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 8px;
    background: #f8fbff;
}

.exercise-library-list strong,
.exercise-library-list small {
    display: block;
}

.exercise-library-list strong {
    color: #071638;
    font-size: 13px;
}

.exercise-library-list small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.exercise-row-hidden {
    display: none;
}

.patient-followup-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.followup-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.followup-dashboard-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.followup-dashboard-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.followup-heading-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.followup-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.patient-detail-page.is-followups-full .followup-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.followup-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 15px 16px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.followup-summary-card > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    background: var(--followup-icon-bg);
    color: var(--followup-color);
}

.followup-summary-card small,
.followup-summary-card strong,
.followup-summary-card em {
    display: block;
}

.followup-summary-card small {
    margin-bottom: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 850;
}

.followup-summary-card strong {
    color: var(--followup-color);
    font-size: 18px;
    line-height: 1.18;
}

.followup-summary-card em {
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.followup-summary-card.tone-blue {
    --followup-color: #0d6efd;
    --followup-icon-bg: #e5f0ff;
}

.followup-summary-card.tone-green {
    --followup-color: #18a957;
    --followup-icon-bg: #ddf8e7;
}

.followup-summary-card.tone-orange {
    --followup-color: #f59f00;
    --followup-icon-bg: #fff0cc;
}

.followup-summary-card.tone-purple {
    --followup-color: #8b5cf6;
    --followup-icon-bg: #f0e9ff;
}

.followup-table-card,
.followup-insight-card {
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.followup-table-card {
    overflow: hidden;
}

.followup-table-card > h3,
.followup-insight-card h3 {
    margin: 0;
    color: #071638;
    font-size: 15px;
    line-height: 1.2;
}

.followup-table-card > h3 {
    padding: 16px 16px 10px;
}

.followup-table-wrap {
    overflow-x: auto;
    border: 0;
}

.followup-table {
    min-width: 1120px;
    width: 100%;
}

.followup-table th,
.followup-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e8eef6;
    font-size: 12px;
    text-align: left;
}

.followup-table th {
    background: #f8fbff;
    color: #52617c;
    font-weight: 900;
}

.followup-table td {
    color: #071638;
    font-weight: 750;
    line-height: 1.35;
    vertical-align: middle;
}

.followup-table td strong,
.followup-table td small {
    display: block;
}

.followup-table td small {
    margin-top: 4px;
    color: #52617c;
    font-size: 11px;
    font-weight: 650;
}

.followup-date-cell {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 116px;
}

.followup-date-cell > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #edf5ff;
    color: #31527f;
}

.followup-mode-cancelled {
    color: #ff1f46 !important;
}

.followup-pain-score.severe,
.followup-severity.severe {
    color: #ff1f46 !important;
}

.followup-pain-score.moderate,
.followup-severity.moderate {
    color: #f59f00 !important;
}

.followup-pain-score.mild,
.followup-severity.mild {
    color: #18a957 !important;
}

.followup-progress-label {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.followup-progress-label.improving {
    background: #dffcf5;
    color: #0f8f7c;
}

.followup-progress-label.stable,
.followup-progress-label.slightly-better {
    background: #fff1d9;
    color: #f59f00;
}

.followup-progress-row {
    display: inline-block;
    width: 78px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7f2;
    vertical-align: middle;
}

.followup-progress-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0d6efd;
}

.followup-progress-row i.stable {
    background: #f59f00;
}

.followup-empty {
    color: #8da0bd;
    font-weight: 900;
}

.followup-status-badge {
    display: inline-flex;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.followup-status-badge.completed {
    background: #ddf8e7;
    color: #087c55;
}

.followup-status-badge.upcoming {
    background: #fff1d9;
    color: #f59f00;
}

.followup-status-badge.missed {
    background: #ffe4ea;
    color: #ff1f46;
}

.followup-status-badge.cancelled {
    background: #edf1f6;
    color: #66758e;
}

.followup-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.followup-row-actions button,
.followup-more-menu summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #31527f;
}

.followup-row-actions button:hover,
.followup-more-menu summary:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.followup-more-menu {
    position: relative;
}

.followup-more-menu summary {
    cursor: pointer;
    list-style: none;
}

.followup-more-menu summary::-webkit-details-marker {
    display: none;
}

.followup-more-menu > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 180px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.followup-more-menu > div button {
    width: 100%;
    height: auto;
    justify-content: start;
    padding: 9px 10px;
    color: #263a63;
    text-align: left;
    font-size: 12px;
    font-weight: 850;
}

.followup-info-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cfe3ff;
    border-radius: 8px;
    background: #f2f8ff;
    color: #17457e;
    font-size: 13px;
    font-weight: 750;
}

.followup-info-note svg {
    flex: none;
    color: #0d6efd;
}

.followup-insights-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 14px;
}

.patient-detail-page.is-followups-full .followup-insights-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.followup-insight-card {
    min-width: 0;
    padding: 16px;
}

.followup-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.followup-card-heading select {
    min-height: 36px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 0 30px 0 10px;
}

.followup-chart {
    position: relative;
    min-height: 220px;
    padding: 16px 0 0 42px;
}

.followup-chart svg {
    display: block;
    width: 100%;
    height: 190px;
}

.followup-chart .y {
    position: absolute;
    left: 0;
    color: #52617c;
    font-size: 11px;
    font-weight: 800;
}

.followup-chart .y100 { top: 20px; }
.followup-chart .y75 { top: 62px; }
.followup-chart .y50 { top: 104px; }
.followup-chart .y25 { top: 146px; }
.followup-chart .y0 { top: 188px; }

.outcome-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.outcome-card li {
    position: relative;
    padding-left: 25px;
    color: #071638;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.outcome-card li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #18a957;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    content: "✓";
}

.followup-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.followup-bottom-actions .primary-button,
.followup-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.followup-bottom-actions .is-saved,
.followup-bottom-actions .is-created {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.followup-plan-modal {
    width: min(480px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(14, 42, 82, .22);
}

.followup-plan-modal::backdrop {
    background: rgba(7, 22, 56, .38);
}

.followup-plan-modal form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.followup-plan-modal header,
.followup-plan-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.followup-plan-modal h2 {
    margin: 0;
    color: #071638;
    font-size: 18px;
}

.followup-plan-modal header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #071638;
}

.followup-plan-modal label {
    display: grid;
    gap: 7px;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.followup-plan-modal input,
.followup-plan-modal textarea {
    width: 100%;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.followup-plan-modal input {
    height: 40px;
    padding: 0 12px;
}

.followup-plan-modal textarea {
    resize: vertical;
    padding: 10px 12px;
}

.followup-modal-list {
    display: grid;
    gap: 10px;
}

.followup-modal-list span {
    display: block;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 8px;
    background: #f8fbff;
}

.followup-modal-list strong,
.followup-modal-list small {
    display: block;
}

.followup-modal-list strong {
    color: #071638;
    font-size: 13px;
}

.followup-modal-list small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.patient-appointments-dashboard {
    display: grid;
    gap: 16px;
    padding: 18px 20px 12px;
    border: 1px solid #dce7f2;
    border-radius: 0 0 9px 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .045);
}

.appointment-tab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.appointment-tab-heading h2 {
    margin: 0;
    color: #071638;
    font-size: 22px;
    line-height: 1.15;
}

.appointment-tab-heading p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.appointment-tab-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.appointment-new-menu {
    position: relative;
}

.appointment-new-menu summary {
    list-style: none;
    gap: 9px;
}

.appointment-new-menu summary::-webkit-details-marker {
    display: none;
}

.appointment-new-menu summary span {
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid currentColor;
    border-inline: 4px solid transparent;
}

.appointment-new-menu > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 8;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.appointment-new-menu > div button {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #263a63;
    text-align: left;
    padding: 10px;
    font-size: 12px;
    font-weight: 850;
}

.appointment-new-menu > div button:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.appointment-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.appointment-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 15px 16px;
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.appointment-summary-card > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    background: var(--appointment-icon-bg);
    color: var(--appointment-color);
}

.appointment-summary-card small,
.appointment-summary-card strong,
.appointment-summary-card em {
    display: block;
}

.appointment-summary-card small {
    margin-bottom: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 850;
}

.appointment-summary-card strong {
    color: var(--appointment-color);
    font-size: 18px;
    line-height: 1.18;
}

.appointment-summary-card em {
    margin-top: 4px;
    color: #263a63;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.appointment-summary-card.tone-blue {
    --appointment-color: #0d6efd;
    --appointment-icon-bg: #e5f0ff;
}

.appointment-summary-card.tone-green {
    --appointment-color: #18a957;
    --appointment-icon-bg: #ddf8e7;
}

.appointment-summary-card.tone-orange {
    --appointment-color: #f59f00;
    --appointment-icon-bg: #fff0cc;
}

.appointment-summary-card.tone-purple {
    --appointment-color: #8b5cf6;
    --appointment-icon-bg: #f0e9ff;
}

.appointment-filter-row {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(520px, .95fr);
    align-items: center;
    gap: 14px;
}

.appointment-status-chips,
.appointment-filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.appointment-status-chips button {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.appointment-status-chips button.active,
.appointment-status-chips button:hover {
    border-color: #80b7ff;
    background: #edf5ff;
    color: #0d6efd;
}

.appointment-filter-controls {
    justify-content: flex-end;
}

.appointment-filter-controls select,
.appointment-search input {
    min-height: 36px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.appointment-filter-controls select {
    width: 150px;
    padding: 0 30px 0 12px;
}

.appointment-search {
    position: relative;
    display: block;
    width: min(230px, 100%);
}

.appointment-search input {
    width: 100%;
    padding: 0 38px 0 12px;
}

.appointment-search svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6680a6;
    transform: translateY(-50%);
}

.appointment-table-card,
.appointment-analytics-card {
    border: 1px solid #dce7f2;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .04);
}

.appointment-table-card {
    overflow: hidden;
}

.appointment-table-wrap {
    overflow-x: auto;
    border: 0;
}

.appointment-profile-table {
    min-width: 1120px;
    width: 100%;
}

.appointment-profile-table th,
.appointment-profile-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e8eef6;
    font-size: 12px;
    text-align: left;
}

.appointment-profile-table th {
    background: #f8fbff;
    color: #52617c;
    font-weight: 900;
}

.appointment-profile-table td {
    color: #071638;
    font-weight: 750;
    line-height: 1.35;
    vertical-align: middle;
}

.appointment-profile-table td strong,
.appointment-profile-table td small {
    display: block;
}

.appointment-profile-table td small {
    margin-top: 4px;
    color: #52617c;
    font-size: 11px;
    font-weight: 650;
}

.appointment-type-cell,
.appointment-provider-cell {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.appointment-type-cell > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #e9fbf1;
    color: #18a957;
}

.provider-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcf9c, #0d6efd);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.provider-avatar i {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #18a957;
}

.appointment-status-badge {
    display: inline-flex;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.appointment-status-badge.upcoming {
    background: #fff1d9;
    color: #f59f00;
}

.appointment-status-badge.completed {
    background: #ddf8e7;
    color: #087c55;
}

.appointment-status-badge.cancelled {
    background: #ffe4ea;
    color: #ff1f46;
}

.appointment-status-badge.no-show {
    background: #edf1f6;
    color: #66758e;
}

.appointment-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointment-row-actions button,
.appointment-more-menu summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #31527f;
}

.appointment-row-actions button:hover,
.appointment-more-menu summary:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.appointment-more-menu {
    position: relative;
}

.appointment-more-menu summary {
    cursor: pointer;
    list-style: none;
}

.appointment-more-menu summary::-webkit-details-marker {
    display: none;
}

.appointment-more-menu > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 190px;
    padding: 8px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(14, 42, 82, .14);
}

.appointment-more-menu > div button {
    width: 100%;
    height: auto;
    justify-content: start;
    padding: 9px 10px;
    color: #263a63;
    text-align: left;
    font-size: 12px;
    font-weight: 850;
}

.appointment-empty-state {
    display: none;
    margin: 0;
    padding: 18px;
    color: #52617c;
    font-size: 13px;
    font-weight: 800;
}

.appointment-empty-state.visible {
    display: block;
}

.appointment-row-hidden {
    display: none;
}

.appointment-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 14px;
}

.appointment-analytics-card {
    min-width: 0;
    padding: 16px;
}

.appointment-analytics-card h3,
.appointment-card-heading h3 {
    margin: 0;
    color: #071638;
    font-size: 15px;
    line-height: 1.2;
}

.appointment-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.appointment-card-heading select {
    min-height: 36px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #ffffff;
    color: #263a63;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 0 30px 0 10px;
}

.appointment-line-chart {
    position: relative;
    min-height: 240px;
    padding: 16px 0 0 34px;
}

.appointment-line-chart svg {
    display: block;
    width: 100%;
    height: 210px;
}

.appointment-line-chart .y {
    position: absolute;
    left: 0;
    color: #52617c;
    font-size: 11px;
    font-weight: 800;
}

.appointment-line-chart .y10 { top: 20px; }
.appointment-line-chart .y8 { top: 52px; }
.appointment-line-chart .y6 { top: 84px; }
.appointment-line-chart .y4 { top: 116px; }
.appointment-line-chart .y2 { top: 148px; }
.appointment-line-chart .y0 { top: 180px; }

.appointment-types-card {
    display: grid;
    gap: 20px;
}

.appointment-type-chart {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.appointment-donut {
    display: grid;
    place-items: center;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background: conic-gradient(#0d6efd 0 83.3%, #18a957 83.3% 91.6%, #8b5cf6 91.6% 100%);
}

.appointment-donut span {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #ffffff;
    color: #071638;
}

.appointment-donut strong,
.appointment-donut small {
    display: block;
}

.appointment-donut strong {
    font-size: 20px;
    line-height: 1;
}

.appointment-donut small {
    color: #52617c;
    font-size: 11px;
    font-weight: 800;
}

.appointment-type-chart ul {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.appointment-type-chart li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #263a63;
    font-size: 12px;
    font-weight: 800;
}

.appointment-type-chart li i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.appointment-type-chart li i.blue { background: #0d6efd; }
.appointment-type-chart li i.green { background: #18a957; }
.appointment-type-chart li i.purple { background: #8b5cf6; }

.appointment-type-chart li strong {
    color: #071638;
    white-space: nowrap;
}

.appointment-bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.appointment-bottom-actions .primary-button,
.appointment-bottom-actions .secondary-button {
    min-height: 42px;
    justify-content: center;
}

.appointment-bottom-actions .is-exported,
.appointment-bottom-actions .is-sent {
    border-color: #bfe8cf;
    background: #effbf4;
    color: #087c55;
}

.appointment-profile-modal {
    width: min(500px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(14, 42, 82, .22);
}

.appointment-profile-modal::backdrop {
    background: rgba(7, 22, 56, .38);
}

.appointment-profile-modal form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.appointment-profile-modal header,
.appointment-profile-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.appointment-profile-modal h2 {
    margin: 0;
    color: #071638;
    font-size: 18px;
}

.appointment-profile-modal header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #071638;
}

.appointment-profile-modal label {
    display: grid;
    gap: 7px;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.appointment-profile-modal input,
.appointment-profile-modal textarea {
    width: 100%;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.appointment-profile-modal input {
    height: 40px;
    padding: 0 12px;
}

.appointment-profile-modal textarea {
    resize: vertical;
    padding: 10px 12px;
}

.appointment-modal-list {
    display: grid;
    gap: 10px;
}

.appointment-modal-list span {
    display: block;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 8px;
    background: #f8fbff;
}

.appointment-modal-list strong,
.appointment-modal-list small {
    display: block;
}

.appointment-modal-list strong {
    color: #071638;
    font-size: 13px;
}

.appointment-modal-list small {
    margin-top: 4px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
}

.patient-info-drawer {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(14, 42, 82, .06);
}

.patient-info-drawer > header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 0 18px;
    border-bottom: 1px solid #dce7f2;
    background: #ffffff;
}

.patient-info-drawer h2,
.patient-info-drawer h3 {
    margin: 0;
    color: #071638;
}

.patient-info-drawer h2 {
    font-size: 18px;
}

.patient-info-drawer h3 {
    font-size: 15px;
}

.patient-info-drawer > header a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #071638;
}

.patient-info-drawer > header a:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.patient-info-drawer section {
    padding: 20px 18px;
    border-bottom: 1px solid #dce7f2;
}

.patient-info-drawer section:last-child {
    border-bottom: 0;
}

.patient-drawer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.patient-drawer-heading a {
    color: #0d6efd;
    font-size: 13px;
    font-weight: 850;
}

.patient-info-drawer dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.patient-info-drawer dl div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
}

.patient-info-drawer dt,
.patient-info-drawer dd,
.patient-info-drawer p {
    margin: 0;
    color: #263a63;
    font-size: 14px;
    line-height: 1.55;
}

.patient-info-drawer dt {
    font-weight: 850;
}

.patient-info-drawer dd {
    color: #071638;
    font-weight: 650;
    overflow-wrap: anywhere;
}

@media (max-width: 1320px) {
    .patient-overview-grid,
    .patient-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patient-identity-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .patient-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .patient-detail-tabs {
        overflow-x: auto;
    }

    .patient-detail-tabs a {
        flex: 0 0 auto;
        padding-inline: 12px;
    }

    .assessment-score-grid,
    .assessment-card-grid,
    .treatment-summary-grid,
    .exercise-summary-grid,
    .followup-summary-grid,
    .appointment-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .followup-insights-grid,
    .appointment-analytics-grid {
        grid-template-columns: 1fr;
    }

    .appointment-filter-row {
        grid-template-columns: 1fr;
    }

    .appointment-filter-controls {
        justify-content: flex-start;
    }

    .treatment-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .treatment-timeline-card {
        grid-column: 1 / -1;
    }

    .clinical-notes-card,
    .previous-assessments-card {
        grid-column: span 1;
    }
}

@media (max-width: 1120px) {
    .patient-detail-page.has-info-drawer {
        grid-template-columns: minmax(0, 1fr);
    }

    .patient-info-drawer {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .patient-detail-page {
        margin: 0 16px 24px;
    }

    .patient-identity-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .patient-detail-avatar {
        width: 64px;
        height: 64px;
        font-size: 21px;
    }

    .patient-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .patient-overview-grid,
    .patient-profile-grid {
        grid-template-columns: 1fr;
    }

    .patient-assessment-dashboard {
        padding: 16px;
    }

    .assessment-dashboard-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .assessment-date-picker,
    .assessment-date-picker summary,
    .assessment-date-picker > div {
        width: 100%;
    }

    .assessment-date-picker > div {
        right: auto;
        left: 0;
    }

    .assessment-score-grid,
    .assessment-card-grid,
    .assessment-bottom-actions,
    .treatment-summary-grid,
    .treatment-plan-grid,
    .treatment-bottom-actions,
    .exercise-summary-grid,
    .exercise-bottom-actions,
    .followup-summary-grid,
    .followup-insights-grid,
    .followup-bottom-actions,
    .appointment-summary-grid,
    .appointment-analytics-grid,
    .appointment-bottom-actions {
        grid-template-columns: 1fr;
    }

    .patient-treatment-dashboard,
    .patient-exercises-dashboard,
    .patient-followup-dashboard,
    .patient-appointments-dashboard {
        padding: 16px;
    }

    .treatment-dashboard-heading,
    .exercises-dashboard-heading,
    .followup-dashboard-heading,
    .appointment-tab-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .treatment-heading-actions,
    .exercises-heading-actions,
    .followup-heading-actions,
    .appointment-tab-actions {
        justify-content: stretch;
    }

    .treatment-heading-actions .primary-button,
    .treatment-heading-actions .secondary-button,
    .exercises-heading-actions .primary-button,
    .exercises-heading-actions .secondary-button,
    .followup-heading-actions .primary-button,
    .followup-heading-actions .secondary-button,
    .appointment-tab-actions .primary-button,
    .appointment-tab-actions .secondary-button,
    .appointment-new-menu,
    .appointment-new-menu summary {
        flex: 1 1 180px;
        justify-content: center;
    }

    .exercise-filter-row,
    .appointment-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .exercise-filter-row label,
    .appointment-search {
        flex-basis: auto;
        width: 100%;
    }

    .appointment-filter-controls select {
        flex: 1 1 170px;
        width: auto;
    }

    .appointment-type-chart {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .treatment-timeline-card {
        grid-column: auto;
    }

    .patient-detail-tabs {
        overflow-x: auto;
    }

    .patient-detail-tabs a {
        flex: 0 0 auto;
        padding-inline: 12px;
    }

    .patient-detail-page.is-followups-full .followup-summary-grid,
    .patient-detail-page.is-followups-full .followup-insights-grid,
    .patient-detail-page.is-tab-full-width .appointment-summary-grid,
    .patient-detail-page.is-tab-full-width .appointment-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .patient-detail-tabs a {
        min-height: 46px;
        padding-inline: 14px;
    }

    .patient-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .patient-header-actions .secondary-button,
    .patient-detail-action-menu,
    .patient-detail-action-menu summary {
        width: 100%;
    }

    .patient-detail-row,
    .patient-message-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .patient-detail-row > :last-child,
    .patient-message-row time {
        grid-column: 2;
        justify-self: start;
    }

    .patient-info-list div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .assessment-score-card {
        min-height: 78px;
        padding: 14px;
    }

    .complaint-card dl div,
    .vitals-card dl div,
    .functional-row,
    .rom-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .functional-row {
        padding: 10px 0;
    }

    .assessment-dots {
        justify-self: start;
    }

    .appointment-table-wrap {
        overflow-x: visible;
    }

    .appointment-profile-table,
    .appointment-profile-table thead,
    .appointment-profile-table tbody,
    .appointment-profile-table tr,
    .appointment-profile-table th,
    .appointment-profile-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .appointment-profile-table thead {
        display: none;
    }

    .appointment-profile-table tr {
        padding: 14px;
        border-bottom: 1px solid #e8eef6;
    }

    .appointment-profile-table td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        padding: 9px 0;
        border-bottom: 0;
    }

    .appointment-profile-table td::before {
        color: #52617c;
        font-size: 11px;
        font-weight: 900;
        content: attr(data-label);
    }

    .appointment-row-actions {
        justify-content: flex-start;
    }
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    height: 100vh;
    padding: 28px 20px;
    background: #ffffff;
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 48px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(22, 119, 232, .22);
}

.brand strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.brand small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-weight: 500;
}

.sidebar-nav {
    display: grid;
    gap: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    color: #53627d;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-link:hover,
.nav-link.active {
    background: #edf7ff;
    color: var(--blue);
}

.nav-link:hover {
    transform: translateX(2px);
}

.sidebar-card {
    margin-top: auto;
    padding: 18px;
    border: 1px solid #d6f0eb;
    border-radius: 20px;
    background: #effaf8;
}

.sidebar-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 14px;
    color: var(--teal);
    background: #dff5f0;
}

.sidebar-card strong {
    display: block;
    font-size: 16px;
}

.sidebar-card p {
    margin: 7px 0 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.sidebar-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--teal);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.main-panel {
    min-width: 0;
    padding: 24px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.mobile-menu {
    display: none;
}

.icon-button,
.notification-button,
.doctor-avatar,
.date-pill {
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: var(--shadow-soft);
}

.icon-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
}

.search-box {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    color: #8691a6;
    box-shadow: var(--shadow-soft);
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.date-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 16px;
    color: #3f4c68;
    font-weight: 700;
}

.notification-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
}

.notification-button span {
    position: absolute;
    top: -4px;
    right: -2px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #f01425;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.doctor-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    background: #eaf2fb;
}

.doctor-avatar span,
.avatar {
    background: linear-gradient(135deg, #ddecff, #dff7f1);
    color: #11507f;
    font-weight: 800;
}

.doctor-avatar span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.doctor-avatar i {
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #10c56e;
}

.dashboard-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 26px;
    border: 1px solid #dceef6;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(22, 119, 232, .10), rgba(12, 166, 160, .10)),
        #ffffff;
    box-shadow: var(--shadow);
}

.eyebrow {
    display: inline-flex;
    color: var(--teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-hero h1,
.placeholder-card h1 {
    margin: 8px 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.06;
    letter-spacing: 0;
}

.dashboard-hero p,
.placeholder-card p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.hero-summary {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 260px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
}

.hero-summary span {
    color: var(--teal);
    font-weight: 800;
}

.hero-summary strong {
    font-size: 24px;
}

.hero-summary small {
    color: var(--muted);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card,
.panel,
.action-card,
.birthday-card,
.placeholder-card {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.stat-card {
    display: grid;
    min-height: 168px;
    padding: 20px;
    border-radius: 24px;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover,
.action-card:hover,
.patient-mini-card:hover,
.compact-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.compact-row.no-hover:hover {
    transform: none;
    box-shadow: none;
}

.stat-icon,
.panel-icon,
.action-card span,
.note-icon,
.birthday-icon,
.placeholder-icon {
    display: grid;
    place-items: center;
    border-radius: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
}

.tone-blue {
    --tone: var(--blue);
    --tone-bg: #e9f3ff;
    --tone-border: #d6e9ff;
}

.tone-mint {
    --tone: var(--mint);
    --tone-bg: #eaf8f0;
    --tone-border: #d7efdf;
}

.tone-green {
    --tone: #1fa463;
    --tone-bg: #e8f8ef;
    --tone-border: #d7efdf;
}

.tone-purple {
    --tone: var(--purple);
    --tone-bg: #f1edff;
    --tone-border: #e3dcff;
}

.tone-orange {
    --tone: var(--orange);
    --tone-bg: #fff4ea;
    --tone-border: #ffe6ce;
}

.tone-teal {
    --tone: var(--teal);
    --tone-bg: #e6f8f6;
    --tone-border: #d3efeb;
}

.tone-pink {
    --tone: #e83d7c;
    --tone-bg: #fff0f6;
    --tone-border: #ffd8e6;
}

.stat-card,
.action-card {
    border-color: var(--tone-border);
    background: linear-gradient(145deg, var(--tone-bg), #ffffff 72%);
}

.stat-icon,
.action-card span,
.note-icon {
    background: var(--tone-bg);
    color: var(--tone);
}

.stat-title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.stat-card strong {
    font-size: 38px;
    line-height: 1;
}

.stat-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(330px, .95fr);
    gap: 22px;
    align-items: start;
}

.content-grid.equal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-stack {
    display: grid;
    gap: 22px;
}

.panel {
    padding: 20px;
    border-radius: 24px;
}

.panel-header,
.panel-title,
.section-heading {
    display: flex;
    align-items: center;
}

.panel-header {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-header h2,
.section-heading h2,
.birthday-card h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.panel-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.panel-header a,
.birthday-card a,
.soft-link {
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.panel-title {
    gap: 13px;
}

.panel-icon {
    width: 48px;
    height: 48px;
    color: #ffffff;
}

.panel-icon.blue {
    background: var(--blue);
}

.schedule-list,
.compact-list,
.notes-list {
    display: grid;
}

.schedule-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.schedule-row time {
    color: var(--blue);
    font-weight: 800;
}

.schedule-row strong,
.compact-row strong,
.note-row strong,
.patient-mini-card strong {
    display: block;
}

.schedule-row span,
.compact-row small,
.patient-mini-card small {
    color: var(--muted);
    font-weight: 600;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #e3f8ee;
    color: #09835f;
    font-size: 12px;
    font-weight: 800;
}

.status-badge.pending {
    background: #fff0db;
    color: #b66a04;
}

.status-badge.unpaid,
.status-badge.cancelled {
    background: #fff1f2;
    color: var(--red);
}

.status-badge.partial,
.status-badge.contacted,
.status-badge.priority-medium {
    background: #fff4ea;
    color: var(--orange);
}

.status-badge.paid,
.status-badge.booked,
.status-badge.priority-low {
    background: #e6f8f6;
    color: var(--teal);
}

.status-badge.priority-high {
    background: #fff1f2;
    color: var(--red);
}

.panel-button,
.soft-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 18px;
    border-radius: 15px;
}

.panel-button {
    background: linear-gradient(135deg, var(--blue), var(--teal));
    color: #ffffff;
    font-weight: 800;
}

.soft-link {
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.section-heading {
    justify-content: space-between;
    margin-bottom: 14px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.actions-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.actions-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.actions-grid.one {
    grid-template-columns: 1fr;
}

.action-card {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 140px;
    padding: 18px 12px;
    border-radius: 22px;
    gap: 10px;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
}

.action-card span {
    width: 50px;
    height: 50px;
}

.action-card strong {
    font-size: 15px;
}

.action-card small {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.35;
}

.compact-row,
.note-row,
.patient-mini-card {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.compact-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 13px;
}

.avatar-2 {
    background: linear-gradient(135deg, #ffe4ee, #eaf2ff);
    color: #8e315f;
}

.avatar-3 {
    background: linear-gradient(135deg, #f1efff, #e8faf3);
    color: #4f41a5;
}

.alert-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 10px;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff1f2;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
}

.note-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.note-row time {
    color: var(--muted);
    font-weight: 700;
}

.note-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.patient-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.patient-mini-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
}

.birthday-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-color: #ffedca;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff9ed, #ffffff);
}

.birthday-icon {
    width: 54px;
    height: 54px;
    background: #fff0bd;
    color: #c48a06;
}

.birthday-card p {
    margin: 5px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.placeholder-page {
    display: grid;
    min-height: calc(100vh - 120px);
    place-items: center;
}

.back-link {
    position: fixed;
    top: 30px;
    left: 326px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-weight: 800;
}

.back-link svg {
    transform: rotate(180deg);
}

.placeholder-card {
    max-width: 620px;
    padding: 38px;
    border-radius: 28px;
    text-align: center;
}

.placeholder-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    background: #eaf3ff;
    color: var(--blue);
}

.placeholder-card .panel-button {
    max-width: 240px;
    margin-inline: auto;
}

.auth-body {
    background:
        linear-gradient(135deg, rgba(22, 119, 232, .12), rgba(12, 166, 160, .12)),
        var(--bg);
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
}

.auth-card {
    width: min(100%, 460px);
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.auth-card .brand-mark {
    margin-bottom: 18px;
}

.auth-card h1,
.page-header h1 {
    margin: 8px 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: 0;
}

.auth-card p,
.page-header p,
.muted-copy,
.empty-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.auth-form,
.form-grid {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.field {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: #f9fcff;
    color: var(--ink);
    resize: vertical;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.filters-grid label,
.form-grid label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 800;
}

.filters-grid input,
.filters-grid select,
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: #f9fcff;
    color: var(--ink);
    resize: vertical;
}

.form-grid .span-2 {
    grid-column: 1 / -1;
}

.field small {
    color: var(--red);
    font-weight: 700;
}

.field-wide {
    grid-column: 1 / -1;
}

.check-field {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-weight: 700;
}

.primary-button,
.secondary-button,
.logout-button,
.row-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-weight: 850;
    cursor: pointer;
}

.primary-button {
    background: linear-gradient(135deg, var(--blue), var(--teal));
    color: #ffffff;
}

.secondary-button {
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--blue);
}

.primary-button.compact,
.secondary-button.compact {
    min-height: 42px;
    padding-inline: 15px;
}

.logout-button {
    width: 100%;
    background: #f5f8fc;
    color: #53627d;
}

.row-button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf7ff;
    color: var(--blue);
    font-size: 13px;
}

.auth-link {
    margin-top: 18px;
    text-align: center;
}

.auth-link a {
    color: var(--blue);
    font-weight: 850;
}

.demo-logins {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #dceef6;
    border-radius: 16px;
    background: #f7fbff;
    color: var(--muted);
    font-size: 13px;
}

.demo-logins strong {
    color: var(--ink);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid #dceef6;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(22, 119, 232, .10), rgba(12, 166, 160, .10)),
        #ffffff;
    box-shadow: var(--shadow-soft);
}

.stats-grid.six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stats-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats-grid.six .stat-card,
.stats-grid.five .stat-card {
    min-height: 145px;
    padding: 16px;
}

.stats-grid.six .stat-card strong,
.stats-grid.five .stat-card strong {
    font-size: 28px;
    overflow-wrap: anywhere;
}

.schedule-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

.schedule-summary::-webkit-details-marker {
    display: none;
}

.schedule-summary strong {
    display: block;
    font-size: 20px;
}

.schedule-summary small,
.appointment-detail small,
.exercise-row small,
.queue-row small {
    color: var(--muted);
    font-weight: 650;
}

.summary-action {
    color: var(--blue);
    font-weight: 850;
}

.schedule-list.expanded {
    margin-top: 18px;
}

.schedule-row {
    grid-template-columns: 88px minmax(170px, 1fr) auto auto auto;
}

.queue-list,
.appointment-list,
.exercise-list,
.simple-list {
    display: grid;
    gap: 12px;
}

.queue-row,
.appointment-row,
.exercise-row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

.queue-row {
    grid-template-columns: 78px minmax(0, 1fr) auto auto;
}

.appointment-row {
    grid-template-columns: minmax(190px, 1fr) 180px 170px auto auto;
}

.exercise-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
}

.room-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #f5f8fc;
    color: #53627d;
    font-size: 12px;
    font-weight: 850;
}

.status-badge.neutral {
    background: #eef3f8;
    color: #52617b;
}

.status-badge.waiting,
.status-badge.booked {
    background: #e9f3ff;
    color: var(--blue);
}

.status-badge.exercise-pending,
.status-badge.with-doctor {
    background: #f1edff;
    color: var(--purple);
}

.status-badge.completed {
    background: #e6f8f6;
    color: var(--teal);
}

.status-badge.in-treatment {
    background: #dff7e9;
    color: #119463;
}

.status-badge.waiting-orange {
    background: #fff1dc;
    color: #da7a0d;
}

.status-badge.in-progress,
.status-badge.draft {
    background: #f1edff;
    color: var(--purple);
}

.status-badge.active {
    background: #e6f8f6;
    color: var(--teal);
}

.status-badge.stopped,
.status-badge.inactive {
    background: #fff1f2;
    color: var(--red);
}

.status-badge.late,
.status-badge.no-show {
    background: #fff4ea;
    color: var(--orange);
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.table-panel {
    padding: 0;
    overflow: hidden;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

th,
td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: #53627d;
    background: #f8fbff;
    font-size: 13px;
    text-transform: uppercase;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-grid div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.detail-grid small {
    display: block;
    color: var(--muted);
    font-weight: 750;
    margin-bottom: 4px;
}

.detail-grid strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.notice {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #d7efdf;
    border-radius: 16px;
    background: #eaf8f0;
    color: #0b7b55;
    font-weight: 800;
    transition: opacity 180ms ease, transform 180ms ease, margin 180ms ease, padding 180ms ease;
}

.notice.is-hiding {
    opacity: 0;
    transform: translateY(-4px);
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.tabs a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: #53627d;
    font-weight: 850;
}

.tabs a.active {
    border-color: #cce8f2;
    background: #eaf8f7;
    color: var(--teal);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.appointment-highlight {
    background: linear-gradient(135deg, #effaf8, #ffffff);
}

.appointment-detail {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.appointment-detail h3 {
    margin: 8px 0;
    font-size: 26px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-card {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin-bottom: 14px;
    border-radius: 22px;
    background: radial-gradient(circle, #ffffff 48%, #d8f2ee 49%, #d8f2ee 64%, #ffffff 65%);
    color: var(--teal);
}

.progress-card strong {
    font-size: 44px;
    line-height: 1;
}

.progress-card span {
    color: var(--muted);
    font-weight: 800;
}

.simple-list div,
.simple-list a {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: #53627d;
    font-weight: 700;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: 260px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #53627d;
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-summary-card {
    margin-bottom: 18px;
}

.patient-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.patient-basic-grid {
    grid-template-columns: minmax(0, 1fr);
}

.patient-profile-action-menu summary {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
}

.patient-profile-action-menu summary svg {
    transform: rotate(90deg);
}

.patient-profile-action-menu[open] summary svg {
    transform: rotate(270deg);
}

.patient-profile-action-menu .patient-action-dropdown {
    min-width: 210px;
}

.summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
}

.section-anchor {
    scroll-margin-top: 20px;
    margin-top: 22px;
}

.note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.note-grid div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.note-grid h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.note-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.note-grid .span-2 {
    grid-column: 1 / -1;
}

.progress-mini-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.progress-mini-grid div {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #f8fbff;
}

.progress-mini-grid small {
    color: var(--muted);
    font-weight: 800;
}

.progress-mini-grid strong {
    font-size: 18px;
}

.progress-mini-grid span {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6edf4;
}

.progress-mini-grid span::before {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    content: "";
}

/* Public landing page */
.public-body {
    background: #ffffff;
}

.public-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 92px;
    padding: 0 clamp(20px, 5vw, 64px);
    border-bottom: 1px solid #e6eef8;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
}

.public-brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.public-brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #72c8ec, #075dbb);
    color: #ffffff;
    font-weight: 900;
}

.public-brand strong {
    display: block;
    color: #071638;
    font-size: 24px;
    line-height: 1;
}

.public-brand small {
    display: block;
    margin-top: 5px;
    color: #31415f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.public-links {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 2vw, 34px);
    color: #071638;
    font-size: 14px;
    font-weight: 800;
}

.public-links a {
    position: relative;
    padding: 36px 0 30px;
}

.public-links a.active,
.public-links a:hover {
    color: #075dbb;
}

.public-links a.active::after,
.public-links a:hover::after {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: #075dbb;
    content: "";
}

.public-actions,
.landing-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.public-login {
    color: #075dbb;
    font-weight: 900;
}

.public-button,
.public-outline,
.public-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 7px;
    font-weight: 900;
}

.public-button,
.public-cta-button {
    background: #075dbb;
    color: #ffffff;
    box-shadow: 0 15px 25px rgba(7, 93, 187, .18);
}

.public-outline {
    border: 1px solid #075dbb;
    background: #ffffff;
    color: #075dbb;
}

.public-button.large,
.public-outline.large {
    min-height: 58px;
    padding-inline: 28px;
}

.public-page {
    overflow: hidden;
}

.landing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(380px, 1.02fr);
    align-items: stretch;
    min-height: 700px;
    padding: clamp(54px, 6vw, 96px) clamp(24px, 5.6vw, 72px) 0;
    background:
        linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .96) 42%, rgba(221, 237, 252, .72) 100%),
        radial-gradient(circle at 82% 24%, #d8ecff, transparent 32%);
}

.landing-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    max-width: 620px;
    padding-bottom: 96px;
}

.landing-hero h1 {
    margin: 0;
    color: #071638;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.08;
    letter-spacing: 0;
}

.landing-hero h1::first-line {
    color: #071638;
}

.landing-hero h1 {
    color: #075dbb;
}

.landing-hero-copy p {
    max-width: 560px;
    margin: 26px 0 34px;
    color: #263a5e;
    font-size: 19px;
    line-height: 1.65;
}

.hero-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 58px;
}

.hero-feature-list span {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    color: #071638;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.hero-feature-list svg {
    padding: 8px;
    border: 2px solid #075dbb;
    border-radius: 999px;
    color: #075dbb;
}

.landing-hero-visual {
    position: relative;
    min-height: 620px;
    overflow: hidden;
}

.landing-hero-visual::before {
    position: absolute;
    inset: 0 0 0 4%;
    border-radius: 44px 0 0 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(224, 238, 251, .78)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 42px, rgba(221, 236, 250, .45) 43px 86px);
    content: "";
}

.doctor-illustration {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: min(440px, 72%);
    height: 560px;
}

.doctor-head,
.doctor-neck,
.doctor-body,
.doctor-arm,
.clinic-bed,
.clinic-chart {
    position: absolute;
    display: block;
}

.doctor-head {
    top: 22px;
    left: 50%;
    width: 126px;
    height: 146px;
    border-radius: 48% 48% 44% 44%;
    background: linear-gradient(180deg, #f2b58f, #c77c59);
    box-shadow: inset 0 16px 0 #50301f;
    transform: translateX(-50%);
}

.doctor-neck {
    top: 154px;
    left: 50%;
    width: 54px;
    height: 56px;
    border-radius: 0 0 20px 20px;
    background: #d6926f;
    transform: translateX(-50%);
}

.doctor-body {
    right: 10%;
    bottom: 0;
    left: 10%;
    height: 390px;
    border-radius: 90px 90px 18px 18px;
    background: linear-gradient(135deg, #0a64bc, #074d91);
    clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.doctor-body::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 110px;
    height: 94px;
    background: #063c73;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
    content: "";
}

.doctor-arm.left {
    right: 52%;
    bottom: 120px;
    width: 210px;
    height: 58px;
    border-radius: 999px;
    background: #d99370;
    transform: rotate(18deg);
}

.doctor-arm.right {
    left: 52%;
    bottom: 126px;
    width: 210px;
    height: 58px;
    border-radius: 999px;
    background: #c87f5c;
    transform: rotate(-18deg);
}

.clinic-bed {
    right: 57%;
    bottom: 135px;
    width: 230px;
    height: 108px;
    border-radius: 18px;
    background: #e6f3fb;
    box-shadow: inset 0 -24px 0 #5aaee0;
}

.clinic-chart {
    right: 2%;
    top: 110px;
    width: 160px;
    height: 170px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 0 0 1px rgba(7, 93, 187, .09);
}

.landing-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    width: min(100% - 64px, 1460px);
    margin: -68px auto 0;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #075dbb, #008ee2);
    color: #ffffff;
    box-shadow: 0 26px 54px rgba(7, 93, 187, .24);
}

.landing-stats div {
    display: grid;
    place-items: center;
    min-height: 170px;
    border-right: 1px solid rgba(255, 255, 255, .28);
    text-align: center;
}

.landing-stats strong {
    margin-top: 12px;
    font-size: 34px;
    line-height: 1;
}

.landing-stats span {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
}

.landing-section,
.about-clinic-section {
    width: min(100% - 64px, 1460px);
    margin: 0 auto;
}

.landing-section {
    padding: 38px 0 56px;
}

.landing-section-title {
    display: grid;
    place-items: center;
    margin-bottom: 32px;
}

.landing-section-title h2,
.about-clinic-section h2 {
    position: relative;
    margin: 0;
    color: #071638;
    font-size: 34px;
    line-height: 1.2;
}

.landing-section-title h2::after,
.about-clinic-section h2::after {
    display: block;
    width: 78px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: #075dbb;
    content: "";
}

.about-clinic-section h2::after {
    margin-inline: 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.service-card {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 230px;
    padding: 24px 18px;
    border: 1px solid #dbe7f2;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .05);
}

.service-card span {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin-bottom: 12px;
    color: #075dbb;
}

.service-card h3 {
    margin: 0 0 12px;
    color: #071638;
    font-size: 17px;
}

.service-card p {
    margin: 0;
    color: #263a5e;
    font-size: 13px;
    line-height: 1.65;
}

.about-clinic-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr);
    gap: 64px;
    align-items: center;
    padding: 52px 0;
}

.treatment-visual {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(216, 233, 248, .38)),
        repeating-linear-gradient(90deg, #f3f8fc 0 70px, #ffffff 71px 140px);
}

.therapy-table,
.therapy-patient,
.therapy-doctor {
    position: absolute;
    display: block;
}

.therapy-table {
    right: 12%;
    bottom: 74px;
    left: 9%;
    height: 58px;
    border-radius: 32px;
    background: #dbe9f2;
    box-shadow: 0 28px 0 #b8d4e7;
}

.therapy-patient {
    right: 12%;
    bottom: 136px;
    width: 72%;
    height: 32px;
    border-radius: 999px;
    background: #33445f;
}

.therapy-patient::before {
    position: absolute;
    right: -16px;
    top: -10px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #d99a78;
    content: "";
}

.therapy-doctor {
    left: 30%;
    bottom: 142px;
    width: 110px;
    height: 178px;
    border-radius: 50px 50px 12px 12px;
    background: #b8d8ee;
}

.therapy-doctor::before {
    position: absolute;
    top: -58px;
    left: 28px;
    width: 58px;
    height: 64px;
    border-radius: 50%;
    background: #c98767;
    box-shadow: inset 0 10px 0 #402b20;
    content: "";
}

.about-clinic-section p {
    color: #263a5e;
    font-size: 16px;
    line-height: 1.7;
}

.clinic-checks {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}

.clinic-checks li {
    position: relative;
    padding-left: 28px;
    color: #071638;
    font-weight: 800;
}

.clinic-checks li::before {
    position: absolute;
    left: 0;
    top: 3px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #075dbb;
    color: #ffffff;
    font-size: 10px;
    content: "✓";
}

.landing-cta {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) repeat(3, minmax(150px, .5fr)) auto;
    gap: 28px;
    align-items: center;
    width: min(100% - 42px, 1500px);
    margin: 0 auto;
    padding: 28px 34px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(135deg, #075dbb, #008ee2);
    color: #ffffff;
}

.cta-main {
    display: flex;
    align-items: center;
    gap: 24px;
}

.cta-main > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background: #ffffff;
    color: #075dbb;
}

.cta-main h2 {
    max-width: 380px;
    margin: 0 0 8px;
    font-size: 23px;
}

.cta-main p,
.cta-contact span {
    margin: 0;
    color: rgba(255, 255, 255, .88);
}

.cta-contact {
    display: grid;
    gap: 6px;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.public-cta-button {
    min-width: 210px;
    background: #ffffff;
    color: #075dbb;
}

.public-footer {
    width: min(100% - 42px, 1500px);
    margin: 0 auto 18px;
    padding: 42px 36px 18px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(135deg, #052b51, #053a6d);
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(140px, .75fr)) minmax(220px, 1fr);
    gap: 42px;
}

.public-footer .public-brand strong,
.public-footer h3 {
    color: #ffffff;
}

.public-footer .public-brand small,
.public-footer p,
.public-footer a {
    color: rgba(255, 255, 255, .82);
}

.public-footer a,
.public-footer input,
.public-footer button {
    display: block;
}

.public-footer a {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 650;
}

.public-footer h3 {
    margin: 0 0 16px;
}

.newsletter input {
    width: 100%;
    min-height: 48px;
    margin: 16px 0 12px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
}

.newsletter button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 6px;
    background: #0b73df;
    color: #ffffff;
    font-weight: 900;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
}

/* Doctor dashboard mockup polish */
.global-shell {
    grid-template-columns: 252px minmax(0, 1fr);
    background: #f6f9fc;
}

.global-shell .sidebar {
    gap: clamp(8px, 1.1vh, 14px);
    padding: clamp(12px, 1.8vh, 20px) 12px;
    background: linear-gradient(180deg, #07386b, #05264b);
    border-right: 0;
    color: #ffffff;
    overflow: hidden;
}

.global-shell .brand {
    gap: 10px;
    min-height: auto;
    padding: 0 8px clamp(6px, 1vh, 12px);
}

.global-shell .brand-mark {
    position: relative;
    width: clamp(44px, 6vh, 52px);
    height: clamp(44px, 6vh, 52px);
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 18%, #51caff 0 7px, transparent 8px),
        linear-gradient(135deg, transparent 33%, #2787ee 34% 49%, transparent 50%),
        linear-gradient(45deg, transparent 33%, #43baf5 34% 49%, transparent 50%);
    color: transparent;
    font-size: 0;
    box-shadow: none;
}

.global-shell .brand-mark::before,
.global-shell .brand-mark::after {
    position: absolute;
    display: block;
    content: "";
}

.global-shell .brand-mark::before {
    left: 12px;
    top: 17px;
    width: 26px;
    height: 30px;
    border-radius: 999px 999px 16px 16px;
    border: 7px solid #1677e8;
    border-top: 0;
    transform: rotate(28deg);
}

.global-shell .brand-mark::after {
    right: 4px;
    top: 9px;
    width: 24px;
    height: 37px;
    border-radius: 999px 999px 16px 16px;
    border: 7px solid #105ed1;
    border-top: 0;
    transform: rotate(-27deg);
}

.global-shell .brand strong {
    color: #ffffff;
    font-size: clamp(20px, 2.6vh, 23px);
}

.global-shell .brand small {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
}

.global-shell .sidebar-nav {
    gap: clamp(2px, .45vh, 5px);
    min-height: 0;
}

.global-shell .nav-link {
    min-height: clamp(33px, 4.75vh, 39px);
    padding: 0 12px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(13px, 1.8vh, 15px);
    font-weight: 700;
    gap: 10px;
}

.global-shell .nav-link:hover,
.global-shell .nav-link.active {
    background: #1266d3;
    color: #ffffff;
    transform: none;
}

.global-shell .nav-link em {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 999px;
    background: #287ef4;
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
}

.global-shell .sidebar-card {
    display: none;
}

.global-shell .logout-button {
    justify-content: flex-start;
    gap: 12px;
    min-height: clamp(38px, 5vh, 44px);
    padding-left: 12px;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
}

.global-shell .main-panel {
    padding: 0;
}

.global-shell .topbar {
    min-height: 52px;
    margin: 0;
    padding: 0 22px;
    border-bottom: 1px solid #dbe5f0;
    background: #ffffff;
}

.topbar-page-title {
    display: none;
}

.global-shell .topbar-page-title {
    display: block;
    min-width: 140px;
}

.global-shell .topbar-page-title strong {
    color: #061844;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.05;
}

.app-breadcrumbs {
    min-width: 0;
    max-width: min(42vw, 520px);
    color: #526b90;
}

.app-breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #8a9ab3;
    font-size: 13px;
    font-weight: 800;
}

.app-breadcrumbs a,
.app-breadcrumbs li > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 180px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    color: #31507f;
    text-decoration: none;
}

.app-breadcrumbs a:hover,
.app-breadcrumbs a:focus-visible {
    background: #eaf3ff;
    color: #075fd7;
    outline: 0;
}

.app-breadcrumbs li.is-current > span {
    color: #061b45;
    font-weight: 900;
}

.app-breadcrumbs li.is-home a {
    width: 30px;
    justify-content: center;
    padding: 0;
    color: #075fd7;
}

.app-breadcrumbs li.is-home a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.app-breadcrumbs li:not(.is-home) a > span,
.app-breadcrumbs li:not(.is-home) > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-breadcrumbs li > svg {
    flex: 0 0 auto;
    color: #9aabc1;
}

.global-shell .topbar .date-pill {
    width: 34px;
    min-height: 34px;
    padding: 0;
    justify-content: center;
    border: 0;
}

.global-shell .topbar .date-pill span {
    display: none;
}

.global-shell .settings-main-panel .topbar {
    gap: 22px;
}

.global-shell .settings-main-panel .topbar-page-title {
    display: block;
    min-width: 155px;
}

.global-shell .settings-main-panel .topbar-page-title strong {
    font-size: 24px;
    line-height: 1;
}

.global-shell .settings-main-panel .mobile-menu {
    display: none !important;
}

.global-shell .settings-main-panel .search-box {
    flex: 0 1 430px;
    max-width: 430px;
    margin-left: 0;
}

.global-shell .mobile-menu {
    display: none;
    box-shadow: none;
}

.global-shell .search-box {
    max-width: 260px;
    min-height: 34px;
    gap: 7px;
    padding: 0 12px;
    border-radius: 7px;
    box-shadow: none;
}

/* Roomier top-bar search on larger screens (~30% wider). */
@media (min-width: 1280px) {
    .global-shell .search-box {
        max-width: 340px;
    }
}

.global-shell .patient-detail-main-panel .topbar {
    min-height: 48px;
}

.global-shell .patient-detail-main-panel .search-box {
    flex: 0 1 430px;
    max-width: 430px;
    min-height: 34px;
    margin-left: auto;
    border-radius: 7px;
}

.global-shell .patient-detail-main-panel .profile-chip {
    min-height: 0;
}

.global-shell .topbar-actions {
    gap: 8px;
    margin-left: auto;
}

.global-shell .date-pill {
    border: 1px solid #d6e2ef;
    border-radius: 7px;
    box-shadow: none;
}

.global-shell .notification-button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.global-shell .notification-button svg,
.global-shell .date-pill svg {
    width: 16px;
    height: 16px;
}

.global-shell .notification-button span {
    top: -5px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-width: 2px;
    font-size: 9px;
}

.global-shell .notification-button,
.global-shell .doctor-avatar {
    box-shadow: none;
}

.global-shell .doctor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    overflow: hidden;
}

.global-shell .doctor-avatar span {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 30%, #f2ba95 0 7px, transparent 7.5px),
        radial-gradient(ellipse at 50% 20%, #3b2418 0 11px, transparent 11.5px),
        linear-gradient(160deg, transparent 0 44%, #0d71bf 45% 72%, #063d73 73% 100%),
        #eef5fb;
    color: transparent;
    font-size: 0;
}

.profile-chip {
    display: grid;
    gap: 2px;
    max-width: 180px;
    min-height: 52px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.profile-chip strong {
    color: #071638;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip small {
    color: #62708c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-shell .profile-chip {
    min-height: auto;
    align-content: center;
    max-width: 138px;
}

.global-shell .profile-chip strong {
    font-size: 13px;
}

.doctor-kpi-grid,
.doctor-dashboard-grid {
    margin-inline: 18px;
}

.doctor-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    margin-bottom: 12px;
}

.doctor-welcome h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: 26px;
    line-height: 1.2;
}

.doctor-welcome p {
    margin: 0;
    color: #62708c;
    font-size: 16px;
}

.dashboard-date {
    flex: 0 0 auto;
    min-height: 48px;
}

.doctor-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 14px;
}

.topbar-welcome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    max-width: 360px;
    padding: 0 16px;
    border: 1px solid #d8e9fb;
    border-radius: 10px;
    background: #f4f9ff;
    color: #071638;
    font-weight: 850;
    white-space: nowrap;
    animation: topbarWelcomeOut .22s ease forwards 5s;
}

.topbar-welcome span {
    font-size: 18px;
    line-height: 1;
}

@keyframes topbarWelcomeOut {
    to {
        width: 0;
        max-width: 0;
        min-width: 0;
        margin: 0;
        padding-inline: 0;
        border-width: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
    }
}

.doctor-kpi-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    min-height: 112px;
    padding: 14px;
    border: 1px solid #d8e3ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .04);
}

.doctor-kpi-card .stat-icon {
    grid-row: span 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.doctor-kpi-card strong {
    color: #071638;
    font-size: 28px;
    line-height: 1;
}

.doctor-kpi-card small {
    color: #071638;
    font-size: 12px;
    font-weight: 800;
}

.doctor-kpi-card em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #075dbb;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.doctor-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(410px, .95fr);
    gap: 14px;
    align-items: start;
    padding-bottom: 20px;
}

.doctor-left-column,
.doctor-right-column {
    display: grid;
    gap: 14px;
}

.doctor-panel {
    padding: 14px;
    border: 1px solid #d8e3ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .04);
}

.doctor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.doctor-panel-header h2 {
    margin: 0;
    color: #071638;
    font-size: 19px;
}

.doctor-panel-header a,
.doctor-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #075dbb;
    font-size: 14px;
    font-weight: 900;
}

.doctor-table-panel {
    padding-bottom: 16px;
}

.doctor-table {
    min-width: 0;
    table-layout: fixed;
}

.doctor-table-panel .responsive-table {
    overflow-x: hidden;
}

.doctor-table th:nth-child(1),
.doctor-table td:nth-child(1) {
    width: 100px;
}

.doctor-table th:nth-child(2),
.doctor-table td:nth-child(2) {
    width: 172px;
}

.doctor-table th:nth-child(4),
.doctor-table td:nth-child(4) {
    width: 130px;
}

.doctor-table th:nth-child(5),
.doctor-table td:nth-child(5) {
    width: 74px;
}

.doctor-table th {
    background: #f7f9fc;
    color: #071638;
    font-size: 13px;
    text-transform: none;
    padding: 8px 9px;
}

.doctor-table td {
    padding: 4px 9px;
    color: #071638;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctor-table td:nth-child(3),
.doctor-table td:nth-child(5) {
    overflow: visible;
    text-overflow: clip;
}

.doctor-table .table-patient strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctor-table .avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 11px;
}

.doctor-table .status-badge {
    min-height: 24px;
    padding: 0 10px;
    font-size: 11px;
}

.doctor-table .row-button {
    min-height: 28px;
    padding-inline: 13px;
}

.table-patient {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.doctor-card-link {
    justify-content: center;
    min-height: 28px;
    margin-top: 4px;
}

.doctor-list {
    display: grid;
}

.doctor-list-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 5px 0;
    border-bottom: 1px solid #e6eef8;
}

.doctor-list-row:last-child {
    border-bottom: 0;
}

.doctor-list-row strong {
    color: #071638;
}

.doctor-list-row small,
.doctor-list-row time {
    color: #53627d;
    font-size: 13px;
    font-weight: 700;
}

.patients-overview {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.patient-donut {
    display: grid;
    place-items: center;
    align-content: center;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ffffff 0 52%, transparent 53%),
        conic-gradient(#2fb879 0 138deg, #2d74ed 138deg 250deg, #f7961d 250deg 315deg, #8767f2 315deg 360deg);
}

.patient-donut strong {
    color: #071638;
    font-size: 34px;
    line-height: 1;
}

.patient-donut span {
    color: #53627d;
    font-weight: 750;
}

.overview-legend {
    display: grid;
    gap: 12px;
}

.overview-legend span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #071638;
    font-weight: 750;
}

.dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot.green { background: #2fb879; }
.dot.blue { background: #2d74ed; }
.dot.orange { background: #f7961d; }
.dot.purple { background: #8767f2; }

.doctor-list.compact .doctor-list-row {
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    min-height: 36px;
    padding: 4px 0;
}

.global-shell .sidebar {
    scrollbar-width: none;
}

.global-shell .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mini-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #edf5ff;
    color: #075dbb;
}

.note-row-modern {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
}

.doctor-list.compact .avatar {
    width: 30px;
    height: 30px;
}

.doctor-list.compact .status-badge {
    min-height: 24px;
    padding: 0 10px;
    font-size: 11px;
}

.avatar-photo {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 34%, #f2bd98 0 8px, transparent 8.5px),
        radial-gradient(ellipse at 50% 25%, #3b2418 0 12px, transparent 12.5px),
        linear-gradient(160deg, transparent 0 50%, #0d70bd 51% 74%, #eef7fb 75% 100%),
        #eaf4fb !important;
    color: transparent !important;
    font-size: 0 !important;
}

.doctor-panel-header .secondary-button.compact::after {
    margin-left: 3px;
    color: #7b8aa2;
    font-size: 11px;
    content: "⌄";
}

/* UI Phase 1: shared Laravel web polish */
:root {
    --radius-card: 16px;
    --radius-control: 10px;
    --shadow-ui: 0 12px 30px rgba(14, 42, 82, .055);
}

.main-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(245, 249, 252, 0) 180px),
        var(--bg);
}

.page-header,
.panel,
.stat-card,
.doctor-panel,
.doctor-kpi-card,
.action-card,
.birthday-card,
.placeholder-card,
.auth-card {
    border-color: #dfe9f4;
    box-shadow: var(--shadow-ui);
}

.page-header {
    padding: 22px;
    border-radius: var(--radius-card);
    background: #ffffff;
}

.page-header h1 {
    font-size: clamp(25px, 3vw, 34px);
}

.page-header > a,
.page-header > button,
.button-row,
.form-actions {
    flex-wrap: wrap;
}

.panel,
.doctor-panel {
    border-radius: var(--radius-card);
}

.panel-header {
    align-items: flex-start;
}

.panel-header h2,
.doctor-panel-header h2,
.section-heading h2,
.birthday-card h2 {
    font-size: 18px;
}

.stats-grid,
.doctor-kpi-grid {
    align-items: stretch;
}

.stat-card {
    min-height: 136px;
    border-radius: var(--radius-card);
}

.stat-card strong {
    font-size: clamp(26px, 3vw, 34px);
}

.doctor-kpi-card {
    min-height: 94px;
    border-radius: var(--radius-card);
}

.doctor-panel {
    padding: 14px;
}

.sidebar {
    gap: 18px;
}

.sidebar-nav {
    gap: 6px;
}

.nav-link {
    min-width: 0;
}

.nav-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link.active {
    box-shadow: inset 3px 0 0 currentColor;
}

.global-shell .nav-link.active {
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .9);
}

.topbar,
.topbar-actions {
    min-width: 0;
}

.search-box,
.date-pill,
.notification-button,
.doctor-avatar,
.icon-button {
    border: 1px solid #dfe9f4;
    box-shadow: none;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e6eef8;
    border-radius: 14px;
    background: #ffffff;
}

.table-panel {
    overflow: hidden;
}

.table-panel .responsive-table {
    border: 0;
    border-radius: 0;
}

table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

th {
    background: #f7fafe;
    color: #263a5e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

td,
th {
    padding: 12px 14px;
    border-bottom: 1px solid #e7eef7;
    vertical-align: middle;
}

td {
    color: #223454;
    font-size: 14px;
}

tbody tr:hover {
    background: #f9fcff;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td strong {
    color: #071638;
}

.row-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #d7e7fb;
    border-radius: 999px;
    background: #f2f8ff;
    color: #075dbb;
    font-size: 12px;
    white-space: nowrap;
}

.primary-button,
.secondary-button,
.logout-button {
    border-radius: var(--radius-control);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.primary-button:hover,
.secondary-button:hover,
.row-button:hover,
.panel-button:hover {
    transform: translateY(-1px);
}

.secondary-button {
    border-color: #d8e3ee;
    color: #075dbb;
}

button.secondary-button[disabled],
.secondary-button[disabled] {
    cursor: not-allowed;
    opacity: .62;
    transform: none;
}

.form-panel {
    max-width: 1120px;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field,
.filters-grid label,
.form-grid label {
    min-width: 0;
    color: #263a5e;
    font-size: 13px;
    font-weight: 850;
}

.field input,
.field select,
.field textarea,
.filters-grid input,
.filters-grid select,
.form-grid input,
.form-grid select,
.form-grid textarea {
    min-height: 44px;
    border-color: #d9e4ef;
    border-radius: var(--radius-control);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(14, 42, 82, .025);
}

.field textarea,
.form-grid textarea {
    line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filters-grid input:focus,
.filters-grid select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.field small,
.form-grid small {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 8px;
    background: #fff1f2;
    color: var(--red);
    font-size: 12px;
}

.form-actions,
.button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
}

.filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.filters-grid .secondary-button,
.filters-grid .primary-button {
    align-self: end;
}

.check-field,
.filters-grid label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.status-badge {
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid transparent;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.status-badge.active,
.status-badge.completed,
.status-badge.signed,
.status-badge.paid,
.status-badge.booked,
.status-badge.approved,
.status-badge.priority-low {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.status-badge.waiting,
.status-badge.pending,
.status-badge.pending-review,
.status-badge.draft,
.status-badge.partial,
.status-badge.contacted,
.status-badge.priority-medium {
    border-color: #ffe2bd;
    background: #fff6ea;
    color: #a85f00;
}

.status-badge.in-treatment,
.status-badge.in_progress,
.status-badge.in-progress,
.status-badge.open {
    border-color: #cfe5ff;
    background: #edf6ff;
    color: #075dbb;
}

.status-badge.cancelled,
.status-badge.no-show,
.status-badge.no_show,
.status-badge.unpaid,
.status-badge.rejected,
.status-badge.priority-high,
.status-badge.stopped {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.status-badge.inactive,
.status-badge.closed,
.status-badge.neutral {
    border-color: #dfe6ef;
    background: #f1f5f9;
    color: #4a5b73;
}

.empty-copy,
td[colspan] {
    color: #62708c;
    font-weight: 650;
}

td[colspan] {
    padding: 22px 16px;
    text-align: center;
}

.notice {
    border-color: #cdeedb;
    border-radius: var(--radius-card);
    background: #f0fbf5;
    color: #087a54;
}

.queue-row,
.appointment-row,
.exercise-row,
.compact-row,
.doctor-list-row {
    min-width: 0;
}

.queue-row > *,
.appointment-row > *,
.exercise-row > *,
.compact-row > *,
.doctor-list-row > * {
    min-width: 0;
}

.simple-list div,
.compact-row small,
.doctor-list-row small {
    overflow-wrap: anywhere;
}

.actions-grid.one {
    gap: 10px;
}

.actions-grid.one .action-card {
    grid-template-columns: 44px minmax(0, 1fr);
    place-items: stretch;
    align-items: center;
    min-height: 78px;
    padding: 14px;
    text-align: left;
}

.actions-grid.one .action-card span {
    width: 44px;
    height: 44px;
}

.actions-grid.one .action-card small {
    margin-top: 3px;
}

.appointment-detail,
.detail-grid,
.summary-grid,
.progress-mini-grid {
    min-width: 0;
}

.progress-card {
    border-radius: var(--radius-card);
}

.global-shell .doctor-table-panel .responsive-table {
    overflow-x: auto;
}

.doctor-table {
    min-width: 680px;
}

.doctor-table td {
    padding-block: 9px;
}

.doctor-list.compact .doctor-list-row {
    gap: 10px;
}

.doctor-card-link {
    border-top: 1px solid #e6eef8;
    padding-top: 12px;
}

/* Doctor assessments page */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.assessment-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.assessment-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.assessment-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.assessment-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.assessment-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.assessment-header-actions .primary-button,
.assessment-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.assessment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    min-width: 0;
}

.assessment-kpi-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 118px;
    padding: 18px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.assessment-kpi-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
}

.assessment-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 26px;
    line-height: 1;
}

.assessment-kpi-card span:not(.assessment-kpi-icon) {
    display: block;
    margin-top: 7px;
    color: #40506b;
    font-size: 13px;
    font-weight: 800;
}

.assessment-kpi-card a {
    display: inline-flex;
    margin-top: 12px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.assessment-kpi-card.tone-blue .assessment-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.assessment-kpi-card.tone-green .assessment-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.assessment-kpi-card.tone-purple .assessment-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.assessment-kpi-card.tone-orange .assessment-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.assessment-kpi-card.tone-red .assessment-kpi-icon {
    background: #ffe7e9;
    color: #ee2d3b;
}

.assessment-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.assessment-main-column,
.assessment-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.assessment-table-card,
.assessment-side-card,
.assessment-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.assessment-table-card {
    overflow: hidden;
}

.assessment-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(220px, 1.25fr) 112px 112px 118px 118px auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.assessment-filter-bar label {
    min-width: 0;
}

.assessment-filter-bar input,
.assessment-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.assessment-filter-bar input {
    padding: 0 12px;
}

.assessment-filter-bar select {
    padding: 0 34px 0 12px;
}

.assessment-filter-bar input:focus,
.assessment-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.assessment-search-field {
    position: relative;
}

.assessment-search-field input {
    padding-right: 42px;
}

.assessment-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.assessment-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.assessment-filter-bar .assessment-new-action,
.appointment-filter-bar .appointment-new-action {
    min-height: 42px;
    width: 190px;
    white-space: nowrap;
}

.assessment-filter-bar label:has(select[name="type"]),
.assessment-filter-bar label:has(select[name="status"]) {
    max-width: 112px;
}

.assessment-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.assessment-table-wrap {
    border: 0;
    border-radius: 0;
}

.assessment-table {
    min-width: 900px;
}

.assessment-table th,
.assessment-table td {
    padding: 14px 16px;
}

.assessment-table th {
    background: #f7fafe;
    color: #102247;
}

.assessment-table tbody tr.assessment-clickable-row {
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease;
}

.assessment-table tbody tr.assessment-clickable-row:hover,
.assessment-table tbody tr.assessment-clickable-row:focus {
    background: #eef6ff;
    box-shadow: inset 4px 0 0 #126bff;
    outline: 0;
}

.assessment-table tbody tr.assessment-clickable-row:hover .assessment-patient-cell strong,
.assessment-table tbody tr.assessment-clickable-row:focus .assessment-patient-cell strong {
    color: #0750d7;
}

.assessment-table td small,
.assessment-table td > small {
    display: block;
    margin-top: 6px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.assessment-patient-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.assessment-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6ecff, #f2e6d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.assessment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assessment-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.assessment-action-button.is-disabled,
.assessment-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.assessment-empty-state {
    display: grid;
    gap: 6px;
    padding: 20px;
    color: #526584;
}

.assessment-empty-state strong {
    color: #071638;
}

.assessment-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 16px;
    border-top: 1px solid #edf2f8;
}

.assessment-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.assessment-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.assessment-pagination a,
.assessment-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.assessment-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.assessment-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.assessment-side-card {
    padding: 16px;
}

.assessment-side-card h2 {
    margin: 0 0 16px;
    color: #102247;
    font-size: 15px;
}

.assessment-donut {
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ffffff 0 48%, transparent 49%),
        conic-gradient(
            #18b772 0 var(--complete),
            #ff9800 var(--complete) var(--pending),
            #3478f6 var(--pending) var(--progress),
            #ff3447 var(--progress) 100%
        );
}

.assessment-donut span {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffffff;
    color: #102247;
    box-shadow: inset 0 0 0 1px #edf2f8;
}

.assessment-donut strong {
    font-size: 25px;
    line-height: 1;
}

.assessment-donut small {
    margin-top: -8px;
    color: #637490;
    font-size: 11px;
    font-weight: 800;
}

.assessment-status-list,
.assessment-type-list,
.assessment-quick-list {
    display: grid;
    gap: 12px;
}

.assessment-status-list div,
.assessment-type-list div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.assessment-status-list strong,
.assessment-type-list span {
    color: #263a5e;
    font-size: 12px;
    font-weight: 800;
}

.assessment-status-list small,
.assessment-type-list strong {
    color: #102247;
    font-size: 12px;
    font-weight: 900;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.green {
    background: #18b772;
}

.dot.orange {
    background: #ff9800;
}

.dot.blue {
    background: #3478f6;
}

.dot.red {
    background: #ff3447;
}

.assessment-type-list div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f8;
}

.assessment-report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.assessment-quick-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 26px;
    color: #20304f;
    font-size: 12px;
    font-weight: 850;
}

.assessment-quick-list a[aria-disabled="true"] {
    color: #5f7190;
}

.assessment-quick-list svg {
    color: #075de8;
}

.assessment-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    background: #f4f9ff;
}

.assessment-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263a5e;
    font-size: 13px;
    font-weight: 750;
}

.assessment-info-bar svg {
    color: #075de8;
}

.assessment-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #d6e5f8;
    border-radius: 8px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor appointments page */
.appointment-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.appointment-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.appointment-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.appointment-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.appointment-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.appointment-header-actions .primary-button,
.appointment-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.appointment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    min-width: 0;
}

.appointment-kpi-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 118px;
    padding: 18px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.appointment-kpi-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
}

.appointment-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 26px;
    line-height: 1;
}

.appointment-kpi-card span:not(.appointment-kpi-icon) {
    display: block;
    margin-top: 7px;
    color: #40506b;
    font-size: 13px;
    font-weight: 800;
}

.appointment-kpi-card a {
    display: inline-flex;
    margin-top: 12px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.appointment-kpi-card.tone-blue .appointment-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.appointment-kpi-card.tone-green .appointment-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.appointment-kpi-card.tone-purple .appointment-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.appointment-kpi-card.tone-orange .appointment-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.appointment-kpi-card.tone-red .appointment-kpi-icon {
    background: #ffe7e9;
    color: #ee2d3b;
}

.appointment-workspace {
    display: block;
    min-width: 0;
}

.appointment-main-column,
.appointment-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.appointment-table-card,
.appointment-side-card {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.appointment-table-card {
    overflow: hidden;
}

.appointment-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 3px;
    align-items: start;
    min-width: 0;
}

.appointment-table-content {
    min-width: 0;
}

.appointment-filter-bar {
    display: grid;
    grid-template-columns: 190px minmax(185px, 1.26fr) minmax(112px, .64fr) minmax(112px, .64fr) minmax(170px, .9fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.appointment-filter-bar label {
    min-width: 0;
}

.appointment-filter-bar input,
.appointment-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.appointment-filter-bar input {
    padding: 0 12px;
}

.appointment-filter-bar select {
    padding: 0 34px 0 12px;
}

.appointment-filter-bar input:focus,
.appointment-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.appointment-search-field {
    position: relative;
}

.appointment-search-field input {
    padding-right: 42px;
}

.appointment-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.appointment-filter-bar .primary-button,
.appointment-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
    white-space: nowrap;
}

.appointment-filter-action {
    width: 100%;
}

.appointment-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.appointment-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.appointment-tabs a {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 14px;
    border-bottom: 3px solid transparent;
    color: #0c1b3d;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.appointment-tabs a.active {
    border-bottom-color: #075de8;
    color: #075de8;
}

.appointment-tabs em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075de8;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.appointment-table-wrap {
    border: 0;
    border-radius: 0;
}

.appointment-table {
    min-width: 900px;
}

.appointment-table th,
.appointment-table td {
    padding: 14px 16px;
}

.appointment-table th {
    background: #f7fafe;
    color: #102247;
}

.appointment-table td small,
.appointment-table td > small {
    display: block;
    margin-top: 6px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.appointment-patient-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.appointment-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6ecff, #f2e6d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.appointment-table .status-badge.booked,
.appointment-table .status-badge.with-doctor,
.appointment-table .status-badge.with_doctor {
    border-color: #cfe5ff;
    background: #edf6ff;
    color: #075dbb;
}

.appointment-table .status-badge.confirmed,
.appointment-table .status-badge.in-treatment,
.appointment-table .status-badge.in_treatment,
.appointment-table .status-badge.completed {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.appointment-table .status-badge.waiting,
.appointment-table .status-badge.pending,
.appointment-table .status-badge.exercise-pending,
.appointment-table .status-badge.exercise_pending {
    border-color: #ffe2bd;
    background: #fff6ea;
    color: #a85f00;
}

.appointment-table .status-badge.cancelled,
.appointment-table .status-badge.no-show,
.appointment-table .status-badge.no_show {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    background: #f1f5f9;
    color: #4a5b73;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.payment-badge.paid {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.payment-badge.unpaid {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.payment-badge.partial {
    border-color: #ffe2bd;
    background: #fff6ea;
    color: #a85f00;
}

.appointment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointment-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.appointment-action-button.is-disabled,
.appointment-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.appointment-empty-state {
    display: grid;
    gap: 6px;
    padding: 20px;
    color: #526584;
}

.appointment-empty-state strong {
    color: #071638;
}

.appointment-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 16px;
    border-top: 1px solid #edf2f8;
}

.appointment-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.appointment-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.appointment-pagination a,
.appointment-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.appointment-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.appointment-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.appointment-side-card {
    padding: 16px;
}

.appointment-side-card h2,
.appointment-calendar-header h2 {
    margin: 0;
    color: #102247;
    font-size: 16px;
}

.appointment-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.appointment-calendar-header span {
    color: #102247;
    font-size: 14px;
    font-weight: 900;
}

.appointment-mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px 6px;
    margin-bottom: 18px;
}

.appointment-mini-calendar strong,
.appointment-mini-calendar span {
    display: grid;
    place-items: center;
    min-height: 26px;
    border-radius: 8px;
    color: #102247;
    font-size: 11px;
    font-weight: 850;
}

.appointment-mini-calendar strong {
    color: #637490;
    font-size: 10px;
}

.appointment-mini-calendar span.selected {
    background: #075de8;
    color: #ffffff;
}

.appointment-mini-calendar span.muted {
    color: #aab6c7;
}

.appointment-status-list,
.appointment-quick-list {
    display: grid;
    gap: 12px;
}

.appointment-status-list div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.appointment-status-list strong {
    color: #263a5e;
    font-size: 12px;
    font-weight: 800;
}

.appointment-status-list small {
    color: #102247;
    font-size: 12px;
    font-weight: 900;
}

.dot.indigo {
    background: #3478f6;
}

.dot.purple {
    background: #8b5cf6;
}

.dot.gray {
    background: #7b8798;
}

.appointment-quick-list {
    margin-top: 16px;
}

.appointment-quick-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    color: #20304f;
    font-size: 12px;
    font-weight: 850;
}

.appointment-quick-list a[aria-disabled="true"] {
    color: #5f7190;
}

.appointment-quick-list svg {
    color: #075de8;
}

/* Doctor patients page */
.patient-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.patient-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.patient-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.patient-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.patient-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.patient-header-actions .primary-button,
.patient-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.patient-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    min-width: 0;
}

.patient-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.patient-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.patient-kpi-card span:not(.patient-kpi-icon) {
    display: block;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.patient-kpi-card strong {
    display: block;
    margin-top: 8px;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.patient-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.patient-kpi-card.tone-blue .patient-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.patient-kpi-card.tone-green .patient-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.patient-kpi-card.tone-purple .patient-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.patient-kpi-card.tone-orange .patient-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.patient-table-card {
    overflow: visible;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.patient-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(240px, 1.35fr) minmax(130px, .65fr) minmax(130px, .65fr) minmax(160px, .85fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.patient-filter-bar label {
    min-width: 0;
}

.patient-filter-bar input,
.patient-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.patient-filter-bar input {
    padding: 0 12px;
}

.patient-filter-bar select {
    padding: 0 34px 0 12px;
}

.patient-filter-bar input:focus,
.patient-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.patient-search-field {
    position: relative;
}

.patient-search-field input {
    padding-right: 42px;
}

.patient-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.patient-filter-bar .primary-button {
    min-height: 42px;
    gap: 7px;
}

.patient-filter-add {
    white-space: nowrap;
}

.patient-clear-link {
    white-space: nowrap;
}

.patient-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.patient-table {
    min-width: 920px;
}

.patient-table th,
.patient-table td {
    padding: 9px 16px;
}

.patient-table th {
    background: #f7fafe;
    color: #102247;
}

.patient-clickable-row {
    cursor: pointer;
    outline: 0;
    transition: background .16s ease, box-shadow .16s ease;
}

.patient-clickable-row:hover,
.patient-clickable-row:focus-visible {
    background: #edf6ff;
    box-shadow: inset 4px 0 0 #0d6efd;
}

.patient-clickable-row:hover .patient-name-link,
.patient-clickable-row:focus-visible .patient-name-link {
    color: #005ce6;
}

.patient-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.patient-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6ecff, #f2e6d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.patient-name-link {
    color: #071b4a;
    font-weight: 900;
    text-decoration: none;
}

.patient-name-link:hover,
.patient-name-link:focus-visible {
    color: #005ce6;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.patient-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #172642;
    white-space: nowrap;
}

.patient-phone svg {
    color: #7890ae;
}

.patient-table .status-badge.active {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.patient-table .status-badge.inactive,
.patient-table .status-badge.discharged {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.patient-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.patient-action-menu {
    position: relative;
}

.patient-action-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid #b8d1ee;
    border-radius: 999px;
    background: #eef5ff;
    color: #075de8;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    list-style: none;
}

.patient-action-menu summary::-webkit-details-marker {
    display: none;
}

.patient-action-menu[open] summary {
    border-color: #075de8;
    background: #e0efff;
}

.patient-action-menu[open] summary svg {
    transform: rotate(180deg);
}

.patient-action-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    z-index: 15;
    display: grid;
    min-width: 190px;
    padding: 8px 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}

.patient-action-dropdown a,
.patient-action-dropdown span:not(.patient-action-divider) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.patient-action-dropdown a:hover {
    background: #f8f9fa;
    color: #1e2125;
}

.patient-action-dropdown span[aria-disabled="true"] {
    color: #8b96a3;
    cursor: not-allowed;
    opacity: .72;
}

.patient-action-divider {
    display: block;
    height: 1px;
    margin: 8px 0;
    overflow: hidden;
    background: #e9ecef;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.table-action-menu {
    position: relative;
    z-index: 1;
}

.table-action-menu[open] {
    z-index: 80;
}

.table-action-menu summary {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #b8d1ee;
    border-radius: 999px;
    background: #eef5ff;
    color: #075de8;
    cursor: pointer;
    list-style: none;
}

.table-action-menu summary::-webkit-details-marker {
    display: none;
}

.table-action-menu[open] summary {
    border-color: #075de8;
    background: #e0efff;
}

.table-action-menu[open] summary svg {
    transform: rotate(180deg);
}

.table-action-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 90;
    display: grid;
    min-width: 154px;
    padding: 6px;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 43, 82, .14);
}

.appointment-table-card:has(.table-action-menu[open]),
.assessment-table-card:has(.table-action-menu[open]),
.treatment-table-card:has(.table-action-menu[open]),
.exercise-table-card:has(.table-action-menu[open]),
.prescribed-table-card:has(.table-action-menu[open]),
.follow-table-card:has(.table-action-menu[open]),
.documents-table-card:has(.table-action-menu[open]),
.invoice-table-card:has(.table-action-menu[open]) {
    overflow: visible;
}

.appointment-table-wrap:has(.table-action-menu[open]),
.assessment-table-wrap:has(.table-action-menu[open]),
.treatment-table-wrap:has(.table-action-menu[open]),
.exercise-table-wrap:has(.table-action-menu[open]),
.prescribed-table-wrap:has(.table-action-menu[open]),
.follow-table-wrap:has(.table-action-menu[open]),
.documents-table-wrap:has(.table-action-menu[open]),
.invoice-table-wrap:has(.table-action-menu[open]) {
    overflow: visible;
}

.table-action-dropdown a,
.table-action-dropdown span,
.table-action-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #172642;
    font-size: 13px;
    font-weight: 850;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
}

.table-action-dropdown form {
    margin: 0;
}

.table-action-dropdown a:hover,
.table-action-dropdown button:hover {
    background: #eef5ff;
    color: #075de8;
}

.table-action-dropdown span[aria-disabled="true"] {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.patient-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.patient-empty-state strong {
    color: #071638;
}

.patient-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.patient-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.patient-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.patient-pagination a,
.patient-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.patient-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.patient-pagination .gap {
    border-color: transparent;
    background: transparent;
}

/* Doctor treatment notes page */
.treatment-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.treatment-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.treatment-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.treatment-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.treatment-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.treatment-header-actions .primary-button,
.treatment-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.treatment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 18px;
    min-width: 0;
}

.treatment-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.treatment-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.treatment-kpi-card span:not(.treatment-kpi-icon) {
    display: block;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.treatment-kpi-card strong {
    display: block;
    margin-top: 8px;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.treatment-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.treatment-kpi-card.tone-blue .treatment-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.treatment-kpi-card.tone-green .treatment-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.treatment-kpi-card.tone-orange .treatment-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.treatment-kpi-card.tone-purple .treatment-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.treatment-kpi-card.tone-red .treatment-kpi-icon {
    background: #ffe7ea;
    color: #f33642;
}

.treatment-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.treatment-main-column,
.treatment-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.treatment-table-card,
.treatment-side-card,
.treatment-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.treatment-table-card {
    overflow: hidden;
}

.treatment-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(200px, 1.35fr) minmax(118px, .72fr) minmax(118px, .72fr) minmax(118px, .72fr) minmax(104px, .5fr) minmax(104px, .5fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-ui);
    background: #ffffff;
}

.treatment-filter-bar label {
    min-width: 0;
}

.treatment-filter-bar input,
.treatment-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.treatment-filter-bar input {
    padding: 0 12px;
}

.treatment-filter-bar select {
    padding: 0 34px 0 12px;
}

.treatment-filter-bar input:focus,
.treatment-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.treatment-search-field {
    position: relative;
}

.treatment-search-field input {
    padding-right: 42px;
}

.treatment-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.treatment-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.treatment-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.treatment-date-field {
    font-size: 12px;
}

.treatment-date-field::placeholder {
    font-size: 11px;
    letter-spacing: .02em;
    color: #8593aa;
    font-weight: 700;
}

.treatment-table-wrap {
    border: 0;
    border-radius: 0;
}

.treatment-table {
    min-width: 900px;
}

.treatment-table th,
.treatment-table td {
    padding: 14px 16px;
}

.treatment-table th {
    background: #f7fafe;
    color: #102247;
}

.treatment-table td small,
.treatment-table td > small {
    display: block;
    margin-top: 5px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.treatment-patient-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.treatment-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8eeff, #f5e4d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.treatment-avatar.small {
    width: 34px;
    height: 34px;
    font-size: 11px;
}

.treatment-table .status-badge.completed {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.treatment-table .status-badge.draft,
.treatment-table .status-badge.pending {
    border-color: #ffe2bd;
    background: #fff3e5;
    color: #c46d06;
}

.treatment-table .status-badge.in-progress {
    border-color: #d3e5ff;
    background: #edf5ff;
    color: #075de8;
}

.treatment-table .status-badge.pending-sign-off,
.treatment-table .status-badge.cancelled {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.treatment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.treatment-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.treatment-action-button.is-disabled,
.treatment-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.treatment-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.treatment-empty-state strong {
    color: #071638;
}

.treatment-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.treatment-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.treatment-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.treatment-pagination a,
.treatment-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.treatment-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.treatment-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.treatment-side-card {
    padding: 18px;
}

.treatment-side-card h2 {
    margin: 0 0 18px;
    color: #102247;
    font-size: 15px;
    line-height: 1.25;
}

.treatment-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: conic-gradient(#20b96c 0 var(--complete), #fb9b22 var(--complete) var(--draft), #3b7eea var(--draft) var(--progress), #f33642 var(--progress) 100%);
}

.treatment-donut::after {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.treatment-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.treatment-donut strong {
    color: #102247;
    font-size: 25px;
    line-height: 1;
}

.treatment-donut small {
    margin-top: 4px;
    color: #637490;
    font-size: 11px;
    font-weight: 800;
}

.treatment-status-list,
.treatment-quick-list,
.treatment-draft-list {
    display: grid;
    gap: 12px;
}

.treatment-status-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.treatment-status-list strong {
    color: #172642;
    font-size: 12px;
}

.treatment-status-list small {
    color: #40506b;
    font-size: 11px;
    font-weight: 800;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.dot.green {
    background: #20b96c;
}

.dot.orange {
    background: #fb9b22;
}

.dot.blue {
    background: #3b7eea;
}

.dot.red {
    background: #f33642;
}

.treatment-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.treatment-card-title-row h2 {
    margin: 0;
}

.treatment-card-title-row a,
.treatment-report-link {
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.treatment-quick-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    color: #172642;
    font-size: 12px;
    font-weight: 850;
}

.treatment-quick-list a[aria-disabled="true"] {
    cursor: default;
}

.treatment-quick-list svg {
    color: #075de8;
}

.treatment-draft-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    color: #172642;
}

.treatment-draft-list strong {
    display: block;
    font-size: 12px;
}

.treatment-draft-list small {
    display: block;
    margin-top: 4px;
    color: #526584;
    font-size: 10px;
    font-weight: 700;
}

.treatment-draft-list em {
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff3e5;
    color: #c46d06;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.treatment-draft-list p {
    margin: 0;
    color: #526584;
    font-size: 13px;
    font-weight: 750;
}

.treatment-report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.treatment-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #f7fbff;
}

.treatment-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.treatment-info-bar svg {
    color: #075de8;
}

.treatment-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cfe0f5;
    border-radius: 9px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor exercises page */
.exercise-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.exercise-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.exercise-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.exercise-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.exercise-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.exercise-header-actions .primary-button,
.exercise-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.exercise-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 18px;
    min-width: 0;
}

.exercise-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.exercise-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.exercise-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.exercise-kpi-card span:not(.exercise-kpi-icon) {
    display: block;
    margin-top: 8px;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.exercise-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.exercise-kpi-card.tone-blue .exercise-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.exercise-kpi-card.tone-green .exercise-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.exercise-kpi-card.tone-purple .exercise-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.exercise-kpi-card.tone-orange .exercise-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.exercise-kpi-card.tone-red .exercise-kpi-icon {
    background: #ffe7ea;
    color: #f33642;
}

.exercise-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.exercise-main-column,
.exercise-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.exercise-table-card,
.exercise-side-card,
.exercise-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.exercise-table-card {
    overflow: hidden;
}

.exercise-filter-bar {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) minmax(150px, .8fr) minmax(170px, .85fr) minmax(160px, .85fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.exercise-filter-bar label {
    min-width: 0;
}

.exercise-filter-bar input,
.exercise-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.exercise-filter-bar input {
    padding: 0 12px;
}

.exercise-filter-bar select {
    padding: 0 34px 0 12px;
}

.exercise-filter-bar input:focus,
.exercise-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.exercise-search-field {
    position: relative;
}

.exercise-search-field input {
    padding-right: 42px;
}

.exercise-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.exercise-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.exercise-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.exercise-table-wrap {
    border: 0;
    border-radius: 0;
}

.exercise-table {
    min-width: 1040px;
}

.exercise-table th,
.exercise-table td {
    padding: 14px 16px;
}

.exercise-table th {
    background: #f7fafe;
    color: #102247;
}

.exercise-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.exercise-name-cell small,
.exercise-used-list small {
    display: block;
    margin-top: 5px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.exercise-thumb {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 76px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8eef7, #f7fbff 45%, #eaded4);
    color: #12325d;
    box-shadow: inset 0 0 0 1px rgba(16, 34, 71, .06);
    font-size: 12px;
    font-weight: 900;
}

.exercise-thumb.small {
    width: 42px;
    height: 30px;
    border-radius: 7px;
    font-size: 10px;
}

.exercise-thumb i {
    position: absolute;
    right: 8px;
    bottom: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(7, 22, 56, .78);
}

.exercise-thumb i::after {
    position: absolute;
    left: 7px;
    top: 5px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #ffffff;
    content: "";
}

.exercise-category-badge,
.exercise-difficulty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.exercise-category-badge.strength {
    background: #eaf3ff;
    color: #075de8;
}

.exercise-category-badge.flexibility {
    background: #f0e8ff;
    color: #7c3cff;
}

.exercise-category-badge.stability {
    background: #fff4cf;
    color: #b56b00;
}

.exercise-category-badge.mobility {
    background: #ffe7ea;
    color: #e02f3a;
}

.exercise-category-badge.balance {
    background: #dff8f5;
    color: #068a80;
}

.exercise-category-badge.endurance {
    background: #fff0df;
    color: #d96f00;
}

.exercise-category-badge.other {
    background: #edf2f7;
    color: #526584;
}

.exercise-difficulty-badge.beginner {
    background: #e8f8ef;
    color: #087a54;
}

.exercise-difficulty-badge.intermediate {
    background: #fff3e5;
    color: #c46d06;
}

.exercise-difficulty-badge.advanced {
    background: #fff1f3;
    color: #c52332;
}

.exercise-table .status-badge.active {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.exercise-table .status-badge.inactive,
.exercise-table .status-badge.archived {
    border-color: #e0e7ef;
    background: #f3f6fa;
    color: #526584;
}

.exercise-table .status-badge.draft {
    border-color: #ffe2bd;
    background: #fff3e5;
    color: #c46d06;
}

.exercise-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exercise-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.exercise-action-button.is-disabled,
.exercise-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.exercise-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.exercise-empty-state strong {
    color: #071638;
}

.exercise-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.exercise-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.exercise-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.exercise-pagination a,
.exercise-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.exercise-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.exercise-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.exercise-side-card {
    padding: 18px;
}

.exercise-side-card h2 {
    margin: 0 0 18px;
    color: #102247;
    font-size: 15px;
    line-height: 1.25;
}

.exercise-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.exercise-card-title-row h2 {
    margin: 0;
}

.exercise-card-title-row a {
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.exercise-category-list,
.exercise-used-list,
.exercise-quick-list {
    display: grid;
    gap: 12px;
}

.exercise-category-list div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.exercise-category-list strong,
.exercise-used-list strong,
.exercise-quick-list a {
    color: #172642;
    font-size: 12px;
    font-weight: 850;
}

.exercise-category-list small {
    color: #40506b;
    font-size: 12px;
    font-weight: 900;
}

.exercise-category-dot {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #ffffff;
}

.exercise-category-dot.strength {
    background: #5c8df4;
}

.exercise-category-dot.flexibility {
    background: #914bdf;
}

.exercise-category-dot.stability {
    background: #f3c12f;
}

.exercise-category-dot.mobility {
    background: #20b96c;
}

.exercise-category-dot.balance {
    background: #38a7c8;
}

.exercise-category-dot.endurance {
    background: #ef7d33;
}

.exercise-category-dot.other {
    background: #f0525f;
}

.exercise-used-list a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #172642;
}

.exercise-used-list p {
    margin: 0;
    color: #526584;
    font-size: 13px;
    font-weight: 750;
}

.exercise-quick-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.exercise-quick-list a[aria-disabled="true"] {
    cursor: default;
}

.exercise-quick-list svg {
    color: #075de8;
}

.exercise-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #f7fbff;
}

.exercise-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.exercise-info-bar svg {
    color: #075de8;
}

.exercise-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cfe0f5;
    border-radius: 9px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor prescribed exercises page */
.prescribed-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.prescribed-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.prescribed-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.prescribed-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.prescribed-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.prescribed-header-actions .primary-button,
.prescribed-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.prescribed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.prescribed-main,
.prescribed-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.prescribed-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    min-width: 0;
}

.prescribed-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.prescribed-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.prescribed-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.prescribed-kpi-card span:not(.prescribed-kpi-icon) {
    display: block;
    margin-top: 8px;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.prescribed-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.prescribed-kpi-card.tone-blue .prescribed-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.prescribed-kpi-card.tone-green .prescribed-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.prescribed-kpi-card.tone-orange .prescribed-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.prescribed-kpi-card.tone-red .prescribed-kpi-icon {
    background: #ffe7ea;
    color: #f33642;
}

.prescribed-table-card,
.prescribed-side-card,
.prescribed-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.prescribed-table-card {
    overflow: hidden;
}

.prescribed-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.25fr) minmax(130px, .7fr) minmax(150px, .8fr) minmax(130px, .7fr) minmax(135px, .72fr) minmax(135px, .72fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.prescribed-filter-bar label {
    min-width: 0;
}

.prescribed-filter-bar input,
.prescribed-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.prescribed-filter-bar input {
    padding: 0 12px;
}

.prescribed-filter-bar select {
    padding: 0 34px 0 12px;
}

.prescribed-filter-bar input:focus,
.prescribed-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.prescribed-search-field {
    position: relative;
}

.prescribed-search-field input {
    padding-right: 42px;
}

.prescribed-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.prescribed-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.prescribed-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.prescribed-tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 14px 18px 0;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.prescribed-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border-bottom: 3px solid transparent;
    color: #102247;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.prescribed-tabs a.active {
    border-bottom-color: #075de8;
    color: #075de8;
}

.prescribed-tabs em {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075de8;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.prescribed-table-wrap {
    border: 0;
    border-radius: 0;
}

.prescribed-table {
    min-width: 900px;
}

.prescribed-table th,
.prescribed-table td {
    padding: 14px 16px;
}

.prescribed-table th {
    background: #f7fafe;
    color: #102247;
}

.prescribed-table td small,
.prescribed-table td > small {
    display: block;
    margin-top: 5px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.prescribed-patient-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.prescribed-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8eeff, #f5e4d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.prescribed-table .status-badge.active {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.prescribed-table .status-badge.expiring-soon {
    border-color: #ffe2bd;
    background: #fff3e5;
    color: #c46d06;
}

.prescribed-table .status-badge.completed {
    border-color: #d3e5ff;
    background: #edf5ff;
    color: #075de8;
}

.prescribed-table .status-badge.paused {
    border-color: #e2d4ff;
    background: #f3edff;
    color: #7c3cff;
}

.prescribed-table .status-badge.stopped,
.prescribed-table .status-badge.cancelled {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.prescribed-progress {
    display: grid;
    gap: 8px;
    width: min(120px, 100%);
}

.prescribed-progress strong {
    color: #102247;
    font-size: 12px;
    font-weight: 900;
}

.prescribed-progress span {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8f6;
}

.prescribed-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #075de8;
}

.prescribed-progress i.complete {
    background: #20b96c;
}

.prescribed-progress i.low {
    background: #fb9b22;
}

.prescribed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prescribed-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.prescribed-action-button.is-disabled,
.prescribed-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.prescribed-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.prescribed-empty-state strong {
    color: #071638;
}

.prescribed-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.prescribed-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.prescribed-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.prescribed-pagination a,
.prescribed-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.prescribed-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.prescribed-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.prescribed-side-card {
    padding: 18px;
}

.prescribed-side-card h2 {
    margin: 0 0 18px;
    color: #102247;
    font-size: 15px;
    line-height: 1.25;
}

.prescribed-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: conic-gradient(#20b96c 0 var(--active), #fb9b22 var(--active) var(--expiring), #3b7eea var(--expiring) var(--completed), #7c3cff var(--completed) 100%);
}

.prescribed-donut::after {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.prescribed-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.prescribed-donut strong {
    color: #102247;
    font-size: 25px;
    line-height: 1;
}

.prescribed-donut small {
    margin-top: 4px;
    color: #637490;
    font-size: 11px;
    font-weight: 800;
}

.prescribed-status-list,
.prescribed-quick-list,
.prescribed-area-list {
    display: grid;
    gap: 12px;
}

.prescribed-status-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.prescribed-status-list strong,
.prescribed-quick-list a,
.prescribed-area-list span {
    color: #172642;
    font-size: 12px;
    font-weight: 850;
}

.prescribed-status-list small,
.prescribed-area-list strong {
    color: #40506b;
    font-size: 11px;
    font-weight: 900;
}

.prescribed-quick-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.prescribed-quick-list a[aria-disabled="true"] {
    cursor: default;
}

.prescribed-quick-list svg {
    color: #075de8;
}

.prescribed-area-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 25px;
}

.prescribed-area-list p {
    margin: 0;
    color: #526584;
    font-size: 13px;
    font-weight: 750;
}

.prescribed-report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.prescribed-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #f7fbff;
}

.prescribed-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.prescribed-info-bar svg {
    color: #075de8;
}

.prescribed-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cfe0f5;
    border-radius: 9px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor exercise logs page */
.log-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.log-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.log-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.log-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.log-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.log-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.log-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 18px;
    min-width: 0;
}

.log-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.log-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.log-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.log-kpi-card span:not(.log-kpi-icon) {
    display: block;
    margin-top: 8px;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.log-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.log-kpi-card.tone-blue .log-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.log-kpi-card.tone-green .log-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.log-kpi-card.tone-orange .log-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.log-kpi-card.tone-purple .log-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.log-kpi-card.tone-red .log-kpi-icon {
    background: #ffe7ea;
    color: #f33642;
}

.log-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.log-main-column,
.log-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.log-table-card,
.log-side-card,
.log-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.log-table-card {
    overflow: hidden;
}

.log-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(140px, .8fr) minmax(150px, .85fr) minmax(140px, .8fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.log-filter-bar label {
    min-width: 0;
}

.log-filter-bar input,
.log-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.log-filter-bar input {
    padding: 0 12px;
}

.log-filter-bar select {
    padding: 0 34px 0 12px;
}

.log-filter-bar input:focus,
.log-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.log-search-field {
    position: relative;
}

.log-search-field input {
    padding-right: 42px;
}

.log-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.log-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.log-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.log-table-wrap {
    border: 0;
    border-radius: 0;
}

.log-table {
    min-width: 1080px;
}

.log-table th,
.log-table td {
    padding: 14px 16px;
}

.log-table th {
    background: #f7fafe;
    color: #102247;
}

.log-table td small,
.log-table td > small {
    display: block;
    margin-top: 5px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.log-patient-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.log-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8eeff, #f5e4d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.log-completion-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.log-completion-badge.complete {
    background: #e8f8ef;
    color: #087a54;
}

.log-completion-badge.partial {
    background: #fff3e5;
    color: #c46d06;
}

.log-completion-badge.missed {
    background: #fff1f3;
    color: #c52332;
}

.log-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.log-action-button.is-disabled,
.log-action-button:disabled,
.log-action-button[aria-disabled="true"] {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.log-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.log-empty-state strong {
    color: #071638;
}

.log-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.log-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.log-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.log-pagination a,
.log-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.log-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.log-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.log-side-card {
    padding: 18px;
}

.log-side-card h2 {
    margin: 0 0 18px;
    color: #102247;
    font-size: 15px;
    line-height: 1.25;
}

.log-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: conic-gradient(#20b96c 0 var(--complete), #fb9b22 var(--complete) var(--partial), #f33642 var(--partial) 100%);
}

.log-donut::after {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.log-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.log-donut strong {
    color: #102247;
    font-size: 25px;
    line-height: 1;
}

.log-donut small {
    margin-top: 4px;
    color: #637490;
    font-size: 11px;
    font-weight: 800;
}

.log-status-list,
.log-top-list,
.log-quick-list {
    display: grid;
    gap: 12px;
}

.log-status-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.log-status-list strong,
.log-top-list strong,
.log-quick-list a {
    color: #172642;
    font-size: 12px;
    font-weight: 850;
}

.log-status-list small,
.log-top-list small {
    color: #40506b;
    font-size: 11px;
    font-weight: 900;
}

.log-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.log-card-title-row h2 {
    margin: 0;
}

.log-card-title-row a {
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.log-top-list div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.log-top-list p {
    margin: 0;
    color: #526584;
    font-size: 13px;
    font-weight: 750;
}

.log-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 30px;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(135deg, #e8eef7, #f7fbff 45%, #eaded4);
    color: #12325d;
    font-size: 10px;
    font-weight: 900;
}

.log-thumb i {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(7, 22, 56, .78);
}

.log-thumb i::after {
    position: absolute;
    left: 5px;
    top: 4px;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid #ffffff;
    content: "";
}

.log-quick-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.log-quick-list a[aria-disabled="true"] {
    cursor: default;
}

.log-quick-list svg {
    color: #075de8;
}

.log-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #f7fbff;
}

.log-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.log-info-bar svg {
    color: #075de8;
}

.log-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cfe0f5;
    border-radius: 9px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor follow-ups page */
.follow-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.follow-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.follow-page-header h1 {
    margin: 0 0 8px;
    color: #071638;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.1;
}

.follow-page-header p {
    margin: 0;
    color: #526584;
    font-size: 15px;
}

.follow-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.follow-header-actions .primary-button,
.follow-header-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
}

.follow-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 18px;
    min-width: 0;
}

.follow-kpi-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 20px;
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.follow-kpi-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.follow-kpi-card strong {
    display: block;
    color: #071638;
    font-size: 27px;
    line-height: 1;
}

.follow-kpi-card span:not(.follow-kpi-icon) {
    display: block;
    margin-top: 8px;
    color: #637490;
    font-size: 13px;
    font-weight: 850;
}

.follow-kpi-card a {
    display: inline-flex;
    margin-top: 10px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.follow-kpi-card.tone-blue .follow-kpi-icon {
    background: #eaf3ff;
    color: #0b66d8;
}

.follow-kpi-card.tone-green .follow-kpi-icon {
    background: #e3f8eb;
    color: #0a9c63;
}

.follow-kpi-card.tone-orange .follow-kpi-icon {
    background: #fff0df;
    color: #fb8500;
}

.follow-kpi-card.tone-purple .follow-kpi-icon {
    background: #f0e8ff;
    color: #7c3cff;
}

.follow-kpi-card.tone-red .follow-kpi-icon {
    background: #ffe7ea;
    color: #f33642;
}

.follow-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.follow-main-column,
.follow-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.follow-table-card,
.follow-side-card,
.follow-info-bar {
    border: 1px solid #dfe9f4;
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-ui);
}

.follow-table-card {
    overflow: hidden;
}

.follow-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(220px, 1.3fr) repeat(3, minmax(140px, .8fr)) auto auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.follow-new-inline-button {
    min-height: 42px;
    gap: 7px;
    white-space: nowrap;
}

.follow-filter-bar label {
    min-width: 0;
}

.follow-filter-bar input,
.follow-filter-bar select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #172642;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.follow-filter-bar input {
    padding: 0 12px;
}

.follow-filter-bar select {
    padding: 0 34px 0 12px;
}

.follow-filter-bar input:focus,
.follow-filter-bar select:focus {
    outline: 0;
    border-color: #8fc4ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .12);
}

.follow-search-field {
    position: relative;
}

.follow-search-field input {
    padding-right: 42px;
}

.follow-search-field svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #6a7d9c;
    transform: translateY(-50%);
}

.follow-filter-bar .secondary-button {
    min-height: 42px;
    gap: 7px;
}

.follow-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    color: #53657f;
    font-size: 13px;
    font-weight: 850;
}

.follow-tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 14px 18px 0;
    border-bottom: 1px solid #e7eef7;
    background: #ffffff;
}

.follow-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border-bottom: 3px solid transparent;
    color: #102247;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.follow-tabs a.active {
    border-bottom-color: #075de8;
    color: #075de8;
}

.follow-tabs em {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075de8;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.follow-table-wrap {
    border: 0;
    border-radius: 0;
}

.follow-table {
    min-width: 980px;
}

.follow-table th,
.follow-table td {
    padding: 14px 16px;
}

.follow-table th {
    background: #f7fafe;
    color: #102247;
}

.follow-table td small,
.follow-table td > small {
    display: block;
    margin-top: 5px;
    color: #526584;
    font-size: 12px;
    font-weight: 700;
}

.follow-patient-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.follow-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8eeff, #f5e4d6);
    color: #12325d;
    box-shadow: 0 5px 12px rgba(14, 42, 82, .12);
    font-size: 12px;
    font-weight: 900;
}

.follow-avatar.small {
    width: 34px;
    height: 34px;
    font-size: 11px;
}

.follow-type-badge,
.follow-upcoming-list em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.follow-type-badge.progress-review,
.follow-upcoming-list em.progress-review {
    background: #eaf3ff;
    color: #075de8;
}

.follow-type-badge.reassessment,
.follow-upcoming-list em.reassessment {
    background: #f0e8ff;
    color: #7c3cff;
}

.follow-type-badge.follow-up-visit,
.follow-upcoming-list em.follow-up-visit {
    background: #e8f8ef;
    color: #087a54;
}

.follow-type-badge.treatment-follow-up,
.follow-upcoming-list em.treatment-follow-up {
    background: #fff3e5;
    color: #c46d06;
}

.follow-type-badge.routine-follow-up,
.follow-upcoming-list em.routine-follow-up {
    background: #edf2f7;
    color: #526584;
}

.follow-table .status-badge.upcoming,
.follow-table .status-badge.booked {
    border-color: #d3e5ff;
    background: #edf5ff;
    color: #075de8;
}

.follow-table .status-badge.pending {
    border-color: #ffe2bd;
    background: #fff3e5;
    color: #c46d06;
}

.follow-table .status-badge.contacted {
    border-color: #e2d4ff;
    background: #f3edff;
    color: #7c3cff;
}

.follow-table .status-badge.completed {
    border-color: #cdeedb;
    background: #e8f8ef;
    color: #087a54;
}

.follow-table .status-badge.overdue {
    border-color: #ffd6dc;
    background: #fff1f3;
    color: #c52332;
}

.follow-table .status-badge.cancelled {
    border-color: #e0e7ef;
    background: #f3f6fa;
    color: #526584;
}

.follow-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.follow-action-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe9f4;
    border-radius: 50%;
    background: #ffffff;
    color: #075de8;
}

.follow-action-button.is-disabled,
.follow-action-button:disabled {
    color: #8aa0bf;
    cursor: not-allowed;
    opacity: .72;
}

.follow-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: #526584;
}

.follow-empty-state strong {
    color: #071638;
}

.follow-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 18px;
    border-top: 1px solid #edf2f8;
}

.follow-table-footer p {
    margin: 0;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.follow-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.follow-pagination a,
.follow-pagination span {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe9f4;
    border-radius: 9px;
    background: #ffffff;
    color: #0c1b3d;
    font-size: 13px;
    font-weight: 900;
}

.follow-pagination .active {
    border-color: #075de8;
    background: #075de8;
    color: #ffffff;
}

.follow-pagination .gap {
    border-color: transparent;
    background: transparent;
}

.follow-side-card {
    padding: 18px;
}

.follow-side-card h2 {
    margin: 0 0 18px;
    color: #102247;
    font-size: 15px;
    line-height: 1.25;
}

.follow-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: conic-gradient(#20b96c 0 var(--complete), #fb9b22 var(--complete) var(--upcoming), #f33642 var(--upcoming) var(--overdue), #8aa0bf var(--overdue) 100%);
}

.follow-donut::after {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.follow-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
}

.follow-donut strong {
    color: #102247;
    font-size: 25px;
    line-height: 1;
}

.follow-donut small {
    margin-top: 4px;
    color: #637490;
    font-size: 11px;
    font-weight: 800;
}

.follow-status-list,
.follow-upcoming-list,
.follow-quick-list {
    display: grid;
    gap: 12px;
}

.follow-status-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.follow-status-list strong,
.follow-upcoming-list strong,
.follow-quick-list a {
    color: #172642;
    font-size: 12px;
    font-weight: 850;
}

.follow-status-list small,
.follow-upcoming-list small {
    color: #40506b;
    font-size: 11px;
    font-weight: 900;
}

.follow-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.follow-card-title-row h2 {
    margin: 0;
}

.follow-card-title-row a {
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
}

.follow-upcoming-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    color: #172642;
}

.follow-upcoming-list p {
    margin: 0;
    color: #526584;
    font-size: 13px;
    font-weight: 750;
}

.follow-quick-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.follow-quick-list a[aria-disabled="true"] {
    cursor: default;
}

.follow-quick-list svg {
    color: #075de8;
}

.follow-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #f7fbff;
}

.follow-info-bar span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40506b;
    font-size: 13px;
    font-weight: 750;
}

.follow-info-bar svg {
    color: #075de8;
}

.follow-info-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cfe0f5;
    border-radius: 9px;
    background: #ffffff;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* Doctor messages and reports pages */
.message-page,
.reports-page {
    display: grid;
    gap: 22px;
    margin: 28px;
    min-width: 0;
}

.reports-page {
    gap: 3px;
    margin: 3px;
}

.message-page *,
.reports-page * {
    box-sizing: border-box;
}

.message-page-header,
.reports-page-header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.message-page-header h1,
.reports-page-header h1 {
    color: var(--ink);
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0 0 8px;
}

.message-page-header p,
.reports-page-header p {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
}

.reports-page-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.message-header-actions,
.reports-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.message-header-actions .icon-only {
    min-width: 46px;
    padding-inline: 12px;
}

.message-workspace {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(280px, 370px) minmax(0, 1fr) minmax(260px, 330px);
    min-width: 0;
}

.message-conversations,
.message-chat-card,
.message-side-card,
.reports-kpi-card,
.reports-chart-card,
.reports-table-card,
.reports-side-card,
.reports-info-bar {
    background: rgba(255, 255, 255, .97);
    border: 1px solid #d9e5f3;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 43, 82, .06);
}

.message-conversations,
.reports-table-card {
    min-width: 0;
    overflow: hidden;
}

.message-search-bar {
    border-bottom: 1px solid #e3ebf5;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 14px;
}

.message-search-bar label {
    align-items: center;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    color: #526584;
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 0 12px;
}

.message-search-bar input {
    border: 0;
    color: #061844;
    font: inherit;
    min-height: 42px;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.message-search-bar button,
.message-chat-actions button,
.reports-actions a,
.reports-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    color: #075de8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.message-tabs {
    border-bottom: 1px solid #e3ebf5;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 14px;
}

.message-tabs a {
    align-items: center;
    border-bottom: 3px solid transparent;
    color: #061844;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 800;
    gap: 7px;
    min-height: 54px;
    text-decoration: none;
}

.message-tabs a.active {
    border-color: #075de8;
    color: #075de8;
}

.message-tabs em,
.message-thread-meta em {
    align-items: center;
    background: #ff3347;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
}

.message-thread-list {
    max-height: 620px;
    overflow-y: auto;
}

.message-thread-row {
    align-items: center;
    border-bottom: 1px solid #e3ebf5;
    color: #061844;
    display: grid;
    gap: 12px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 14px;
    text-decoration: none;
}

.message-thread-row.active {
    background: #f0f6ff;
}

.message-avatar {
    align-items: center;
    background: linear-gradient(135deg, #d9e9ff, #f2f7ff);
    border-radius: 50%;
    color: #061844;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 48px;
}

.message-avatar.large {
    height: 58px;
    width: 58px;
}

.message-avatar i {
    background: #18b667;
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: 4px;
    height: 12px;
    position: absolute;
    right: 2px;
    width: 12px;
}

.message-thread-copy,
.message-thread-copy strong,
.message-thread-copy span,
.message-thread-meta {
    min-width: 0;
}

.message-thread-copy {
    display: grid;
    gap: 5px;
}

.message-thread-copy strong {
    align-items: center;
    display: flex;
    gap: 8px;
}

.message-thread-copy strong small {
    background: #efe4ff;
    border-radius: 999px;
    color: #7c3aed;
    font-size: 11px;
    padding: 4px 8px;
}

.message-thread-copy span {
    color: #526584;
    font-size: 13px;
    line-height: 1.4;
}

.message-thread-meta {
    align-items: flex-end;
    color: #526584;
    display: grid;
    font-size: 12px;
    gap: 9px;
    justify-items: end;
}

.message-list-footer,
.reports-table-footer {
    align-items: center;
    color: #526584;
    display: flex;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    padding: 14px;
}

.message-list-footer div,
.reports-table-footer nav {
    display: flex;
    gap: 8px;
}

.message-list-footer button,
.message-list-footer strong,
.reports-table-footer button,
.reports-table-footer strong {
    align-items: center;
    border: 1px solid #d9e5f3;
    border-radius: 8px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    min-width: 38px;
}

.message-list-footer strong,
.reports-table-footer strong {
    background: #075de8;
    border-color: #075de8;
    color: #fff;
}

.message-chat-card {
    display: grid;
    grid-template-rows: auto minmax(420px, 1fr) auto;
    min-width: 0;
    overflow: hidden;
}

.message-chat-header {
    align-items: center;
    border-bottom: 1px solid #e3ebf5;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px 20px;
}

.message-chat-person {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.message-chat-person strong {
    color: #061844;
    display: block;
    font-size: 17px;
}

.message-chat-person small {
    color: #526584;
    display: block;
    margin-top: 3px;
}

.message-back {
    color: #075de8;
    font-size: 23px;
    font-weight: 900;
    text-decoration: none;
}

.message-chat-actions {
    display: flex;
    gap: 10px;
}

.message-bubbles {
    background:
        linear-gradient(rgba(249, 252, 255, .94), rgba(249, 252, 255, .94)),
        radial-gradient(circle at 18px 18px, rgba(15, 95, 217, .08) 0 1px, transparent 2px);
    background-size: auto, 46px 46px;
    display: grid;
    gap: 12px;
    overflow-y: auto;
    padding: 18px 24px;
}

.message-date-separator {
    color: #526584;
    font-size: 13px;
    font-weight: 800;
    justify-self: center;
}

.message-bubble {
    display: flex;
    max-width: min(68%, 520px);
}

.message-bubble.outgoing {
    justify-self: end;
}

.message-bubble.incoming {
    justify-self: start;
}

.message-bubble > div {
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    color: #061844;
    padding: 12px 14px;
}

.message-bubble.outgoing > div {
    background: #eaf4ff;
    border-color: #c9ddff;
}

.message-bubble.internal > div {
    background: #fff7ed;
}

.message-bubble p {
    line-height: 1.55;
    margin: 0;
}

.message-bubble small {
    color: #526584;
    display: block;
    font-size: 12px;
    margin-top: 8px;
    text-align: right;
}

.message-internal-label {
    color: #b45309;
    display: block;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.message-bubble.attachment {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 42px;
    padding: 12px;
    width: min(460px, 72%);
}

.message-bubble.attachment > div {
    align-items: center;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 0;
}

.message-file-icon,
.report-type-icon {
    align-items: center;
    background: #eaf4ff;
    border-radius: 10px;
    color: #075de8;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.message-bubble.attachment a {
    align-items: center;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    color: #075de8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.message-compose {
    align-items: center;
    border-top: 1px solid #e3ebf5;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) 42px 48px;
    padding: 14px;
}

.message-compose input {
    border: 0;
    color: #061844;
    font: inherit;
    min-width: 0;
    outline: 0;
}

.message-compose button {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 50%;
    color: #075de8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.message-compose .message-send-button {
    background: #075de8;
    border-color: #075de8;
    color: #fff;
    height: 48px;
    width: 48px;
}

.message-details-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.message-side-card,
.reports-chart-card,
.reports-side-card {
    min-width: 0;
    padding: 16px;
}

.message-side-card h2,
.reports-chart-card h2,
.reports-table-card h2,
.reports-side-card h2 {
    color: #061844;
    font-size: 15px;
    margin: 0;
}

.message-card-title,
.reports-card-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.message-card-title a,
.message-side-link,
.reports-side-card a {
    color: #075de8;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.message-patient-summary {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.message-patient-summary strong,
.message-file-list strong {
    color: #061844;
    display: block;
}

.message-patient-summary small,
.message-file-list small,
.message-muted {
    color: #526584;
    font-size: 12px;
}

.message-detail-list {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.message-detail-list div {
    display: grid;
    gap: 3px;
}

.message-detail-list dt {
    color: #526584;
    font-size: 12px;
}

.message-detail-list dd {
    color: #061844;
    font-weight: 800;
    margin: 0;
}

.message-file-list,
.message-quick-actions,
.reports-quick-list {
    display: grid;
    margin-top: 14px;
}

.message-file-list a,
.message-quick-actions a,
.reports-quick-list a {
    align-items: center;
    border-bottom: 1px solid #e3ebf5;
    color: #061844;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr);
    min-width: 0;
    padding: 10px 0;
    text-decoration: none;
}

.message-quick-actions a,
.reports-quick-list a {
    grid-template-columns: 22px minmax(0, 1fr);
    font-weight: 800;
}

.message-empty-state,
.message-chat-empty,
.reports-empty-state {
    color: #526584;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 34px 18px;
    text-align: center;
}

.message-empty-state strong,
.message-chat-empty strong {
    color: #061844;
}

.reports-date-range {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    color: #075de8;
    display: flex;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
}

.reports-date-range input {
    border: 0;
    color: #061844;
    font: inherit;
    outline: 0;
    width: 132px;
}

.reports-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    margin-top: 3px !important;
    min-width: 0;
}

.reports-kpi-card {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 118px;
    padding: 18px;
}

.reports-kpi-icon {
    align-items: center;
    border-radius: 15px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.reports-kpi-card.tone-blue .reports-kpi-icon,
.reports-kpi-card.tone-red .reports-kpi-icon {
    background: #eaf4ff;
    color: #075de8;
}

.reports-kpi-card.tone-green .reports-kpi-icon {
    background: #dcfce7;
    color: #16a34a;
}

.reports-kpi-card.tone-orange .reports-kpi-icon {
    background: #ffedd5;
    color: #f97316;
}

.reports-kpi-card.tone-purple .reports-kpi-icon {
    background: #f3e8ff;
    color: #9333ea;
}

.reports-kpi-card small,
.reports-kpi-card em {
    color: #526584;
    display: block;
    font-size: 12px;
    font-style: normal;
}

.reports-kpi-card strong {
    color: #061844;
    display: inline-block;
    font-size: 27px;
    line-height: 1;
    margin: 8px 6px 6px 0;
}

.reports-trend {
    color: #16a34a;
    font-size: 13px;
    font-weight: 900;
}

.reports-trend.down {
    color: #ef4444;
}

.reports-trend.flat {
    color: #526584;
}

.reports-chart-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, .95fr);
    min-width: 0;
}

.reports-card-title span {
    align-items: center;
    color: #526584;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
}

.reports-card-title i,
.reports-outcome-list .dot {
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.legend-blue,
.dot.blue {
    background: #075de8;
}

.legend-red,
.dot.red {
    background: #ef4444;
}

.legend-green,
.dot.green {
    background: #10b981;
}

.legend-purple {
    background: #7c3aed;
}

.dot.orange {
    background: #f59e0b;
}

.reports-line-chart svg {
    display: block;
    height: auto;
    margin-top: 14px;
    width: 100%;
}

.reports-line-chart .grid path {
    stroke: #dbe5f2;
    stroke-width: 1;
}

.reports-line-chart .line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.reports-line-chart .completed {
    stroke: #075de8;
}

.reports-line-chart .no-show {
    stroke: #ef4444;
}

.reports-line-chart text {
    fill: #526584;
    font-size: 12px;
    text-anchor: middle;
}

.reports-bar-chart {
    align-items: end;
    display: grid;
    gap: 16px;
    grid-auto-flow: column;
    min-height: 190px;
    overflow-x: auto;
    padding-top: 18px;
}

.reports-bar-group {
    display: grid;
    gap: 10px;
    justify-items: center;
    min-width: 54px;
}

.reports-bars {
    align-items: end;
    display: flex;
    gap: 7px;
    height: 140px;
}

.reports-bars span {
    border-radius: 7px 7px 0 0;
    display: block;
    width: 14px;
}

.reports-bars .new {
    background: linear-gradient(180deg, #10b981, #059669);
}

.reports-bars .returning {
    background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

.reports-bar-group small {
    color: #526584;
    font-size: 12px;
}

.reports-outcome-wrap {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: 170px minmax(0, 1fr);
    margin-top: 22px;
}

.reports-donut {
    align-items: center;
    aspect-ratio: 1;
    background:
        radial-gradient(circle, #fff 0 48%, transparent 49%),
        conic-gradient(#20b86b 0 var(--improved), #3b82f6 var(--improved) calc(var(--improved) + var(--stable)), #f59e0b calc(var(--improved) + var(--stable)) calc(var(--improved) + var(--stable) + var(--no-change)), #ef4444 0);
    border-radius: 50%;
    display: grid;
    justify-items: center;
    place-content: center;
}

.reports-donut strong {
    color: #061844;
    font-size: 28px;
    line-height: 1;
}

.reports-donut span {
    color: #526584;
    font-size: 12px;
}

.reports-outcome-list {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reports-outcome-list li {
    align-items: center;
    color: #061844;
    display: grid;
    font-size: 13px;
    gap: 8px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
}

.reports-workspace {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    min-width: 0;
}

.reports-table-card h2 {
    padding: 18px 20px 12px;
}

.reports-table-wrap {
    overflow-x: auto;
}

.reports-table {
    border-collapse: collapse;
    min-width: 900px;
    width: 100%;
}

.reports-table th,
.reports-table td {
    border-top: 1px solid #e3ebf5;
    color: #061844;
    font-size: 13px;
    padding: 14px 18px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.reports-table th {
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

.reports-table td:first-child {
    align-items: center;
    display: flex;
    gap: 10px;
}

.report-type-icon.tone-green {
    background: #dcfce7;
    color: #16a34a;
}

.report-type-icon.tone-purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.report-type-icon.tone-orange {
    background: #ffedd5;
    color: #f97316;
}

.report-type-icon.tone-blue {
    background: #eaf4ff;
    color: #075de8;
}

.report-type-icon.tone-red {
    background: #fee2e2;
    color: #ef4444;
}

.report-doctor {
    align-items: center;
    display: inline-flex;
    gap: 9px;
}

.report-doctor em {
    align-items: center;
    background: #eaf4ff;
    border-radius: 50%;
    color: #075de8;
    display: inline-flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.reports-actions {
    display: inline-flex;
    gap: 8px;
}

.reports-side-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.reports-side-card.insight {
    align-content: start;
    display: grid;
    gap: 14px;
}

.reports-side-card.insight p {
    color: #526584;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.reports-side-card.insight a {
    border: 1px solid #075de8;
    border-radius: 9px;
    justify-self: start;
    padding: 10px 14px;
}

.reports-info-bar {
    align-items: center;
    color: #526584;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    padding: 15px 18px;
}

.reports-info-bar span {
    align-items: center;
    display: flex;
    gap: 12px;
}

/* Doctor documents page */
.documents-page {
    display: grid;
    gap: 22px;
    margin: 28px;
    min-width: 0;
}

.documents-page * {
    box-sizing: border-box;
}

.documents-page-header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.documents-page-header h1 {
    color: #061844;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0 0 8px;
}

.documents-page-header p {
    color: #526584;
    font-size: 15px;
    margin: 0;
}

.documents-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.documents-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    min-width: 0;
}

.documents-kpi-card,
.documents-table-card,
.documents-storage-card {
    background: rgba(255, 255, 255, .97);
    border: 1px solid #d9e5f3;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 43, 82, .06);
}

.documents-kpi-card {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 118px;
    padding: 18px;
}

.documents-kpi-icon {
    align-items: center;
    border-radius: 15px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.documents-kpi-card.tone-blue .documents-kpi-icon {
    background: #eaf4ff;
    color: #075de8;
}

.documents-kpi-card.tone-green .documents-kpi-icon {
    background: #dcfce7;
    color: #16a34a;
}

.documents-kpi-card.tone-purple .documents-kpi-icon {
    background: #f3e8ff;
    color: #9333ea;
}

.documents-kpi-card.tone-orange .documents-kpi-icon {
    background: #ffedd5;
    color: #f97316;
}

.documents-kpi-card.tone-gray .documents-kpi-icon {
    background: #eef3f8;
    color: #64748b;
}

.documents-kpi-card small {
    color: #526584;
    display: block;
    font-size: 12px;
}

.documents-kpi-card strong {
    color: #061844;
    display: block;
    font-size: 27px;
    line-height: 1;
    margin: 8px 0 9px;
}

.documents-kpi-card a {
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.documents-table-card {
    min-width: 0;
    overflow: hidden;
}

.documents-filter-bar {
    align-items: center;
    border-bottom: 1px solid #e3ebf5;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1.25fr) minmax(140px, .7fr) minmax(150px, .75fr) minmax(160px, .8fr) minmax(230px, 1.1fr) auto auto;
    min-width: 0;
    padding: 16px;
}

.documents-search-field,
.documents-filter-bar label:not(.documents-search-field) {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 10px;
    color: #526584;
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 0 12px;
}

.documents-filter-bar input,
.documents-filter-bar select {
    background: transparent;
    border: 0;
    color: #061844;
    font: inherit;
    min-height: 42px;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.documents-date-range input {
    width: 112px;
}

.documents-view-toggle {
    display: flex;
    gap: 6px;
    justify-content: end;
}

.documents-view-toggle button {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 9px;
    color: #075de8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.documents-view-toggle button.active {
    background: #eaf4ff;
    border-color: #b9d3ff;
}

.documents-table-wrap {
    overflow-x: auto;
}

.documents-table {
    border-collapse: collapse;
    min-width: 1060px;
    width: 100%;
}

.documents-table th,
.documents-table td {
    border-bottom: 1px solid #e3ebf5;
    color: #061844;
    font-size: 13px;
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.documents-table th {
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

.documents-table td small {
    color: #526584;
    display: block;
    margin-top: 3px;
}

.documents-name-cell {
    align-items: center;
    color: #061844;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr);
    min-width: 0;
    text-decoration: none;
}

.documents-name-cell strong {
    display: block;
}

.documents-file-icon {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.documents-file-icon.tone-red {
    background: #fee2e2;
    color: #ef4444;
}

.documents-file-icon.tone-green {
    background: #dcfce7;
    color: #16a34a;
}

.documents-file-icon.tone-blue {
    background: #dbeafe;
    color: #2563eb;
}

.documents-file-icon.tone-teal {
    background: #ccfbf1;
    color: #0f766e;
}

.documents-file-icon.tone-gray {
    background: #eef3f8;
    color: #64748b;
}

.documents-category-badge {
    border-radius: 7px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 9px;
}

.documents-category-badge.exercise-plan {
    background: #dbeafe;
    color: #075de8;
}

.documents-category-badge.assessment {
    background: #dcfce7;
    color: #16803f;
}

.documents-category-badge.medical-reports {
    background: #f3e8ff;
    color: #7c3aed;
}

.documents-category-badge.forms {
    background: #ffe4e6;
    color: #e11d48;
}

.documents-category-badge.other,
.documents-category-badge.referral,
.documents-category-badge.x-ray {
    background: #eef3f8;
    color: #475569;
}

.documents-uploader {
    align-items: center;
    display: inline-flex;
    gap: 9px;
}

.documents-uploader em {
    align-items: center;
    background: #eaf4ff;
    border-radius: 50%;
    color: #075de8;
    display: inline-flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.documents-actions {
    display: inline-flex;
    gap: 8px;
}

.documents-actions a,
.documents-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e5f3;
    border-radius: 9px;
    color: #075de8;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.documents-empty-state {
    color: #526584;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 36px 18px;
    text-align: center;
}

.documents-empty-state strong {
    color: #061844;
}

.documents-table-footer {
    align-items: center;
    color: #526584;
    display: flex;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.documents-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.documents-pagination a,
.documents-pagination span {
    align-items: center;
    border: 1px solid #d9e5f3;
    border-radius: 8px;
    color: #061844;
    display: inline-flex;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    padding-inline: 10px;
    text-decoration: none;
}

.documents-pagination .active {
    background: #075de8;
    border-color: #075de8;
    color: #fff;
}

.documents-storage-card {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, auto) minmax(160px, 1fr) auto;
    justify-self: end;
    min-width: min(100%, 380px);
    padding: 13px 16px;
}

.documents-storage-icon {
    align-items: center;
    background: #eaf4ff;
    border-radius: 12px;
    color: #075de8;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.documents-storage-card strong {
    color: #061844;
    display: block;
    font-size: 13px;
}

.documents-storage-card small {
    color: #526584;
    font-size: 12px;
}

.documents-storage-meter {
    background: #e3ebf5;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.documents-storage-meter span {
    background: #075de8;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.documents-storage-card em {
    color: #061844;
    font-style: normal;
    font-weight: 900;
}

.global-shell .assessment-kpi-grid,
.global-shell .appointment-kpi-grid,
.global-shell .treatment-kpi-grid,
.global-shell .exercise-kpi-grid,
.global-shell .log-kpi-grid,
.global-shell .follow-kpi-grid,
.global-shell .reports-kpi-grid,
.global-shell .documents-kpi-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
}

.global-shell .patient-kpi-grid,
.global-shell .prescribed-kpi-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.global-shell [class*="-kpi-card"] {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    min-height: 90px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.global-shell [class*="-kpi-card"]:hover {
    border-color: #b8d1ee;
    box-shadow: 0 18px 34px rgba(15, 43, 82, .08);
    transform: translateY(-1px);
}

.global-shell [class*="-kpi-card"]:focus-visible {
    outline: 3px solid rgba(7, 93, 232, .2);
    outline-offset: 2px;
}

.global-shell [class*="-kpi-icon"],
.global-shell .doctor-kpi-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.global-shell .doctor-kpi-card .stat-icon {
    grid-row: 1 / span 2;
}

.global-shell .doctor-kpi-card strong,
.global-shell .doctor-kpi-card small {
    grid-column: 2;
}

.global-shell .doctor-kpi-card {
    row-gap: 4px;
}

.global-shell .doctor-kpi-card small {
    margin-top: 0;
    line-height: 1.15;
}

.global-shell [class*="-kpi-card"] strong {
    font-size: 25px;
}

.global-shell .reports-kpi-card strong,
.global-shell .documents-kpi-card strong {
    display: block;
    margin: 6px 0 0;
}

.global-shell [class*="-kpi-card"] span:not([class*="-kpi-icon"]):not(.stat-icon),
.global-shell [class*="-kpi-card"] small {
    margin-top: 6px;
}

.global-shell :is(
    .assessment-page,
    .appointment-page,
    .patient-page,
    .treatment-page,
    .exercise-page,
    .prescribed-page,
    .log-page,
    .follow-page,
    .message-page,
    .reports-page,
    .documents-page,
    .calendar-page,
    .reminder-page,
    .invoice-page,
    .settings-page,
    .doctor-dashboard-page
) {
    gap: 3px;
    padding: 3px;
}

.global-shell :is(
    .doctor-kpi-grid,
    .assessment-kpi-grid,
    .appointment-kpi-grid,
    .patient-kpi-grid,
    .treatment-kpi-grid,
    .exercise-kpi-grid,
    .prescribed-kpi-grid,
    .log-kpi-grid,
    .follow-kpi-grid,
    .reports-kpi-grid,
    .documents-kpi-grid,
    .reports-chart-grid,
    .message-workspace,
    .reports-workspace,
    .calendar-layout,
    .calendar-side-stack,
    .reminder-workspace,
    .reminder-side-column,
    .invoice-workspace,
    .invoice-side-column,
    .settings-workspace,
    .settings-side-column,
    .settings-quick-grid,
    .assessment-workspace,
    .appointment-workspace,
    .treatment-workspace,
    .exercise-workspace,
    .prescribed-layout,
    .log-workspace,
    .follow-workspace,
    .doctor-dashboard-grid,
    .doctor-left-column,
    .doctor-right-column,
    .assessment-main-column,
    .assessment-side-column,
    .appointment-main-column,
    .appointment-side-column,
    .treatment-main-column,
    .treatment-side-column,
    .exercise-main-column,
    .exercise-side-column,
    .prescribed-main,
    .prescribed-side-column,
    .log-main-column,
    .log-side-column,
    .follow-main-column,
    .follow-side-column,
    .reports-side-column
) {
    gap: 3px;
}

.global-shell :is(
    .doctor-kpi-grid,
    .assessment-kpi-grid,
    .appointment-kpi-grid,
    .patient-kpi-grid,
    .treatment-kpi-grid,
    .exercise-kpi-grid,
    .prescribed-kpi-grid,
    .log-kpi-grid,
    .follow-kpi-grid,
    .reports-kpi-grid,
    .documents-kpi-grid,
    .doctor-dashboard-grid
) {
    margin: 0;
}

.doctor-dashboard-page {
    display: grid;
    gap: 3px;
    padding: 3px;
}

.doctor-dashboard-page .doctor-kpi-grid,
.doctor-dashboard-page .doctor-dashboard-grid {
    margin: 0;
}

.doctor-dashboard-page .doctor-kpi-grid {
    gap: 3px;
    margin-top: 0;
    margin-bottom: 0;
}

.doctor-dashboard-page .doctor-dashboard-grid {
    gap: 3px;
    padding-bottom: 3px;
}

.doctor-dashboard-page .doctor-left-column,
.doctor-dashboard-page .doctor-right-column {
    gap: 3px;
}

.doctor-dashboard-page .doctor-panel {
    padding: 10px;
}

.doctor-dashboard-page .doctor-panel-header {
    margin-bottom: 5px;
}

/* Doctor calendar page */
.calendar-page {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px 26px 26px;
}

.calendar-title-row,
.calendar-toolbar,
.calendar-layout,
.calendar-side-card,
.calendar-board-card {
    min-width: 0;
}

.calendar-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.calendar-title-row h1 {
    margin: 0 0 4px;
    color: #071b4a;
    font-size: 30px;
    line-height: 1.1;
}

.calendar-title-row p {
    margin: 0;
    color: #24406e;
    font-weight: 650;
}

.calendar-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f66e8, #0057d9);
    color: #ffffff;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(0, 87, 217, .18);
}

.calendar-view-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.calendar-view-tab-group {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    width: min(360px, 100%);
    border: 1px solid #dce7f3;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-view-tab-group a {
    display: grid;
    place-items: center;
    min-height: 40px;
    border-right: 1px solid #e7eef7;
    color: #071b4a;
    font-weight: 850;
}

.calendar-view-tab-group a:last-child {
    border-right: 0;
}

.calendar-view-tab-group a.active {
    background: #e9f1ff;
    color: #005ce6;
}

.calendar-mode-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    margin-left: auto;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-mode-toggle a {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-right: 1px solid #e7eef7;
    color: #071b4a;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.calendar-mode-toggle a:last-child {
    border-right: 0;
}

.calendar-mode-toggle a.active {
    background: #005ce6;
    color: #ffffff;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.calendar-date-nav,
.calendar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.calendar-date-nav strong {
    margin-left: 18px;
    color: #071b4a;
    font-size: 18px;
    white-space: nowrap;
}

.calendar-icon-link,
.calendar-today-link,
.calendar-filters button,
.calendar-settings-link,
.calendar-filters select {
    min-height: 42px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font-weight: 850;
}

.calendar-icon-link {
    display: grid;
    place-items: center;
    width: 44px;
    font-size: 26px;
    line-height: 1;
}

.calendar-today-link {
    display: inline-grid;
    place-items: center;
    padding: 0 18px;
}

.calendar-filters select {
    width: 138px;
    padding: 0 12px;
}

.calendar-fixed-doctor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.calendar-filters button,
.calendar-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    color: #005ce6;
}

.calendar-filters .calendar-add-schedule-button {
    border-color: #005ce6;
    background: #005ce6;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 92, 230, .16);
}

.calendar-settings-link {
    width: 44px;
    padding: 0;
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 294px;
    gap: 14px;
}

.calendar-layout.is-doctor-view {
    grid-template-columns: minmax(0, 1fr);
}

.calendar-board-card,
.calendar-side-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.calendar-board-card {
    overflow: hidden;
}

.calendar-resource-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    border-bottom: 1px solid #e4ecf5;
    background: #ffffff;
    overflow-x: auto;
}

.calendar-resource-strip span {
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.calendar-resource-strip strong,
.calendar-resource-strip em {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #f8fbff;
    color: #005ce6;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.calendar-resource-strip em {
    border-color: transparent;
    background: #eef6ff;
    color: #24406e;
}

.calendar-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.calendar-week-header,
.calendar-time-grid {
    display: grid;
    grid-template-columns: 70px repeat(var(--calendar-days), minmax(118px, 1fr));
    min-width: calc(70px + (118px * var(--calendar-days)));
}

.calendar-week-header {
    border-bottom: 1px solid #e4ecf5;
    background: #fbfdff;
}

.calendar-corner,
.calendar-day-heading,
.calendar-all-day-label,
.calendar-all-day-cell {
    border-right: 1px solid #e4ecf5;
}

.calendar-day-heading {
    display: grid;
    place-items: center;
    min-height: 70px;
    padding: 10px;
    color: #071b4a;
    text-align: center;
}

.calendar-day-heading strong {
    color: #005ce6;
    font-size: 15px;
}

.calendar-day-heading span {
    color: #506080;
    font-size: 12px;
    font-weight: 800;
}

.calendar-day-heading em {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #005ce6;
    color: #ffffff;
    font-style: normal;
    font-weight: 900;
}

.calendar-all-day-label {
    display: grid;
    place-items: center;
    min-height: 42px;
    color: #24406e;
    font-size: 13px;
    font-weight: 900;
}

.calendar-all-day-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px;
}

.calendar-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.calendar-time-grid {
    position: relative;
    grid-auto-rows: 78px;
}

.calendar-time-label,
.calendar-hour-cell {
    border-right: 1px solid #e4ecf5;
    border-bottom: 1px solid #e4ecf5;
}

.calendar-time-label {
    padding: 12px 10px 0;
    color: #42608d;
    font-size: 12px;
    font-weight: 850;
}

.calendar-hour-cell {
    min-width: 0;
    padding: 6px;
    background: #ffffff;
}

.calendar-hour-cell.is-schedule-slot {
    position: relative;
    overflow: visible;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.calendar-hour-cell.is-schedule-slot:hover {
    background: #f4f8ff;
}

.calendar-event-card {
    display: grid;
    gap: 3px;
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.18;
    overflow: hidden;
}

.calendar-event-card strong,
.calendar-event-card span,
.calendar-event-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-card span {
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
}

.calendar-event-card small {
    color: #24406e;
    font-weight: 750;
}

.calendar-schedule-card {
    display: grid;
    width: 100%;
    gap: 5px;
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1.18;
    text-align: left;
    cursor: pointer;
}

.calendar-schedule-card.is-span-block {
    position: absolute;
    top: calc(6px + var(--schedule-top, 0px));
    left: calc(6px + var(--schedule-left, 0%));
    z-index: 3;
    width: calc(var(--schedule-width, 100%) - 10px);
    height: var(--schedule-height, 68px);
    min-height: 42px;
    align-content: start;
    box-shadow: 0 8px 18px rgba(13, 42, 78, .08);
}

.calendar-schedule-card.is-span-block:hover {
    z-index: 7;
    box-shadow: 0 14px 28px rgba(13, 42, 78, .14);
}

.calendar-schedule-card.is-readonly,
.calendar-schedule-agenda-row.is-readonly {
    cursor: default;
}

.calendar-schedule-card + .calendar-schedule-card {
    margin-top: 6px;
}

.calendar-schedule-card strong,
.calendar-schedule-card span,
.calendar-schedule-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-schedule-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
}

.calendar-schedule-card b {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: currentColor;
    font-size: 10px;
}

.calendar-schedule-card small {
    color: #24406e;
    font-weight: 750;
}

.calendar-schedule-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: #e4ecf5;
}

.calendar-schedule-month-day {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 118px;
    padding: 10px;
    border: 0;
    background: #ffffff;
    color: #071b4a;
    text-align: left;
    cursor: pointer;
}

.calendar-schedule-month-day.is-empty {
    background: #f8fbff;
}

.calendar-schedule-month-day.is-today strong {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #005ce6;
    color: #ffffff;
}

.calendar-schedule-month-day span,
.calendar-schedule-month-day em {
    display: block;
    min-width: 0;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-schedule-agenda {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.calendar-schedule-agenda-row {
    display: grid;
    grid-template-columns: 190px 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.calendar-schedule-agenda-row b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
}

.calendar-schedule-agenda-row span {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: #24406e;
    font-size: 12px;
    font-weight: 800;
}

.calendar-schedule-agenda-row strong {
    color: #071b4a;
    font-size: 13px;
    font-weight: 950;
}

.calendar-schedule-modal {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #071b4a;
    box-shadow: 0 24px 70px rgba(13, 42, 78, .22);
}

.calendar-schedule-modal::backdrop {
    background: rgba(7, 27, 74, .38);
}

.calendar-schedule-modal form {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.calendar-schedule-modal header,
.calendar-schedule-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.calendar-schedule-modal h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 950;
}

.calendar-schedule-modal [data-schedule-close] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
    color: #24406e;
    font-size: 18px;
    line-height: 1;
}

.calendar-schedule-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.calendar-schedule-fields label {
    display: grid;
    gap: 6px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.calendar-schedule-fields input,
.calendar-schedule-fields select,
.calendar-schedule-fields textarea {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.calendar-schedule-fields textarea {
    min-height: 78px;
    padding-top: 10px;
    resize: vertical;
}

.calendar-schedule-notes {
    grid-column: 1 / -1;
}

.calendar-schedule-days,
.calendar-schedule-delete-options {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #f8fbff;
}

.calendar-schedule-days legend {
    padding: 0 4px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
}

.calendar-schedule-day,
.calendar-schedule-delete-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    background: #ffffff;
    color: #24406e;
    font-size: 12px;
    font-weight: 850;
}

.calendar-schedule-day input,
.calendar-schedule-delete-options input {
    width: auto;
    min-height: auto;
    accent-color: #005ce6;
}

.notice.notice-error {
    border-color: #fecaca;
    background: #fff5f5;
    color: #b91c1c;
}

.calendar-now-line {
    position: absolute;
    top: calc((78px * 6) + 39px);
    left: 0;
    right: 0;
    z-index: 4;
    border-top: 2px solid #ef2d3f;
    pointer-events: none;
}

.calendar-now-line::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef2d3f;
}

.calendar-now-line span {
    position: absolute;
    left: 4px;
    top: -12px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ef2d3f;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.calendar-side-stack {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.calendar-side-card {
    padding: 16px;
}

.calendar-side-card h2 {
    margin: 0 0 14px;
    color: #071b4a;
    font-size: 16px;
}

.mini-calendar-card header,
.calendar-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.mini-calendar-card header a,
.calendar-side-heading a {
    color: #005ce6;
    font-weight: 900;
}

.mini-calendar-weekdays,
.mini-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.mini-calendar-weekdays span,
.mini-calendar-days a,
.mini-calendar-days span {
    display: grid;
    place-items: center;
    min-height: 30px;
    color: #28446f;
    font-size: 12px;
    font-weight: 850;
}

.mini-calendar-days a.active {
    border-radius: 999px;
    background: #005ce6;
    color: #ffffff;
}

.mini-calendar-days a.today:not(.active) {
    border-radius: 999px;
    background: #e9f1ff;
    color: #005ce6;
}

.calendar-summary-list,
.calendar-upcoming-list,
.calendar-legend {
    display: grid;
    gap: 12px;
}

.calendar-summary-list span,
.calendar-legend span {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #24406e;
    font-size: 13px;
    font-weight: 800;
}

.calendar-legend span {
    grid-template-columns: 12px minmax(0, 1fr);
}

.calendar-summary-list i,
.calendar-legend i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.calendar-upcoming-list > div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
}

.calendar-upcoming-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.calendar-upcoming-list p {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #071b4a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.calendar-upcoming-list small,
.calendar-empty {
    color: #506080;
    font-weight: 750;
}

.tone-blue {
    color: #005ce6;
    background: #e8f1ff;
    border-color: #cfe1ff;
}

.tone-green {
    color: #087c55;
    background: #e6f7ef;
    border-color: #c9ecd9;
}

.tone-purple {
    color: #6940c8;
    background: #f1eaff;
    border-color: #e1d3ff;
}

.tone-amber {
    color: #925200;
    background: #fff4df;
    border-color: #ffe3b3;
}

.tone-red {
    color: #c9283b;
    background: #ffe8eb;
    border-color: #ffd0d6;
}

/* Doctor reminders page */
.reminder-page {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px 26px 26px;
}

.reminder-title-row,
.reminder-workspace,
.reminder-main-column,
.reminder-side-column,
.reminder-table-card,
.reminder-side-card {
    min-width: 0;
}

.reminder-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.reminder-title-row h1 {
    margin: 0 0 4px;
    color: #071b4a;
    font-size: 30px;
    line-height: 1.1;
}

.reminder-title-row p {
    margin: 0;
    color: #24406e;
    font-weight: 650;
}

.reminder-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f66e8, #0057d9);
    color: #ffffff;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(0, 87, 217, .18);
}

.reminder-primary-action[aria-disabled="true"] {
    opacity: .95;
}

.reminder-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.reminder-kpi-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 104px;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.reminder-kpi-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.reminder-kpi-card div {
    display: grid;
    gap: 3px;
}

.reminder-kpi-card small {
    color: #24406e;
    font-weight: 850;
}

.reminder-kpi-card strong {
    color: #071b4a;
    font-size: 26px;
    line-height: 1;
}

.reminder-kpi-card em {
    color: #005ce6;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.reminder-kpi-card.tone-blue .reminder-kpi-icon,
.reminder-row-icon.tone-blue,
.reminder-upcoming-icon.tone-blue {
    color: #005ce6;
    background: #e8f1ff;
}

.reminder-kpi-card.tone-green .reminder-kpi-icon,
.reminder-row-icon.tone-green,
.reminder-upcoming-icon.tone-green {
    color: #087c55;
    background: #e6f7ef;
}

.reminder-kpi-card.tone-orange .reminder-kpi-icon,
.reminder-row-icon.tone-orange,
.reminder-upcoming-icon.tone-orange {
    color: #c86600;
    background: #fff1df;
}

.reminder-kpi-card.tone-red .reminder-kpi-icon,
.reminder-row-icon.tone-red,
.reminder-upcoming-icon.tone-red {
    color: #c9283b;
    background: #ffe8eb;
}

.reminder-kpi-card.tone-purple .reminder-kpi-icon,
.reminder-row-icon.tone-purple,
.reminder-upcoming-icon.tone-purple {
    color: #6940c8;
    background: #f1eaff;
}

.reminder-row-icon.tone-teal,
.reminder-upcoming-icon.tone-teal {
    color: #087f7d;
    background: #e2f7f4;
}

.reminder-row-icon.tone-gray,
.reminder-upcoming-icon.tone-gray {
    color: #506080;
    background: #eef2f7;
}

.reminder-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 282px;
    gap: 14px;
}

.reminder-table-card,
.reminder-side-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.reminder-filter-bar {
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) repeat(5, minmax(108px, .72fr)) auto auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #e7eef7;
}

.reminder-filter-bar label,
.reminder-search-field {
    min-width: 0;
}

.reminder-filter-bar input,
.reminder-filter-bar select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font-weight: 800;
}

.reminder-filter-bar select,
.reminder-date-field input {
    padding: 0 12px;
}

.reminder-search-field {
    position: relative;
}

.reminder-search-field input {
    padding: 0 42px 0 14px;
}

.reminder-search-field svg {
    position: absolute;
    right: 13px;
    top: 50%;
    color: #6c7fa1;
    transform: translateY(-50%);
}

.reminder-clear-link {
    color: #005ce6;
    font-size: 13px;
    font-weight: 900;
}

.reminder-tabs {
    display: flex;
    gap: 22px;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 14px;
    border-bottom: 1px solid #e7eef7;
}

.reminder-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    border-bottom: 3px solid transparent;
    color: #071b4a;
    font-weight: 900;
    white-space: nowrap;
}

.reminder-tabs a.active {
    border-color: #005ce6;
    color: #005ce6;
}

.reminder-tabs em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e9f1ff;
    color: #005ce6;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.reminder-table-wrap {
    overflow: visible;
}

.reminder-table {
    width: 100%;
    border-collapse: collapse;
}

.reminder-table th {
    padding: 14px 12px;
    background: #fbfdff;
    color: #071b4a;
    font-size: 12px;
    text-align: left;
}

.reminder-table td {
    padding: 12px;
    border-top: 1px solid #e7eef7;
    color: #071b4a;
    font-size: 13px;
    font-weight: 750;
    vertical-align: middle;
}

.reminder-title-cell,
.reminder-patient-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

a.reminder-title-cell {
    color: inherit;
    text-decoration: none;
}

a.reminder-title-cell:hover strong,
a.reminder-title-cell:focus strong {
    color: #075de8;
}

.reminder-title-cell > span:last-child,
.reminder-patient-cell > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.reminder-title-cell strong,
.reminder-title-cell small,
.reminder-patient-cell strong,
.reminder-patient-cell small,
.reminder-table td small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-title-cell small,
.reminder-patient-cell small,
.reminder-table td small,
.reminder-muted {
    color: #506080;
    font-size: 12px;
    font-weight: 750;
}

.reminder-row-icon,
.reminder-avatar,
.reminder-upcoming-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-weight: 900;
}

.reminder-avatar {
    border-radius: 50%;
    color: #071b4a;
    background: #eef4fb;
    font-size: 11px;
}

.reminder-type-badge,
.reminder-priority-badge,
.reminder-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

a.reminder-type-badge {
    text-decoration: none;
}

.reminder-type-badge.green,
.reminder-status-badge.upcoming,
.reminder-status-badge.completed {
    color: #087c55;
    background: #e6f7ef;
}

.reminder-type-badge.blue,
.reminder-priority-badge.low,
.reminder-status-badge.pending {
    color: #005ce6;
    background: #e8f1ff;
}

.reminder-type-badge.purple {
    color: #6940c8;
    background: #f1eaff;
}

.reminder-type-badge.orange,
.reminder-priority-badge.medium,
.reminder-status-badge.due_today {
    color: #c86600;
    background: #fff1df;
}

.reminder-type-badge.teal {
    color: #087f7d;
    background: #e2f7f4;
}

.reminder-type-badge.gray,
.reminder-status-badge.cancelled {
    color: #506080;
    background: #eef2f7;
}

.reminder-priority-badge.high,
.reminder-status-badge.overdue {
    color: #c9283b;
    background: #ffe8eb;
}

.reminder-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid #e7eef7;
}

.reminder-table-footer p {
    margin: 0;
    color: #24406e;
    font-size: 13px;
    font-weight: 800;
}

.reminder-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reminder-pagination a,
.reminder-pagination span {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    color: #071b4a;
    font-weight: 900;
}

.reminder-pagination .active {
    border-color: #005ce6;
    background: #005ce6;
    color: #ffffff;
}

.reminder-empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px;
    color: #506080;
}

.reminder-empty-state strong {
    color: #071b4a;
}

.reminder-side-column {
    display: grid;
    align-content: start;
    gap: 14px;
}

.reminder-side-card {
    padding: 16px;
}

.reminder-side-card h2 {
    margin: 0 0 14px;
    color: #071b4a;
    font-size: 16px;
}

.reminder-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.reminder-side-heading h2 {
    margin: 0;
}

.reminder-side-heading a {
    color: #005ce6;
    font-size: 12px;
    font-weight: 900;
}

.reminder-summary-list,
.reminder-upcoming-list {
    display: grid;
    gap: 12px;
}

.reminder-summary-list span {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #24406e;
    font-size: 13px;
    font-weight: 850;
}

.reminder-summary-list span.total {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 10px;
    border-top: 1px solid #e7eef7;
}

.reminder-summary-list i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.reminder-summary-list i.high {
    background: #ef4455;
}

.reminder-summary-list i.medium {
    background: #ff9d2e;
}

.reminder-summary-list i.low {
    background: #0f66e8;
}

.reminder-summary-list i.completed {
    background: #22b26f;
}

.reminder-upcoming-list > div,
.reminder-upcoming-list > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.reminder-upcoming-list > a:hover p,
.reminder-upcoming-list > a:focus p {
    color: #075de8;
}

.reminder-upcoming-list p {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #071b4a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.reminder-upcoming-list small,
.reminder-empty-copy {
    color: #506080;
    font-weight: 750;
}

/* Doctor invoices page */
.invoice-page {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 3px;
}

.invoice-title-row,
.invoice-workspace,
.invoice-main-column,
.invoice-side-column,
.invoice-table-card,
.invoice-side-card {
    min-width: 0;
}

.invoice-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3px;
}

.invoice-title-row h1 {
    margin: 0 0 4px;
    color: #071b4a;
    font-size: 30px;
    line-height: 1.1;
}

.invoice-title-row p {
    margin: 0;
    color: #24406e;
    font-weight: 650;
}

.invoice-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex-wrap: wrap;
}

.invoice-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
}

.invoice-kpi-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.invoice-kpi-card::after {
    content: "";
    position: absolute;
    right: -20px;
    top: -24px;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--invoice-kpi-accent, #075de8) 14%, transparent);
}

.invoice-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 42, 78, .11);
}

.invoice-kpi-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--invoice-kpi-accent, #075de8);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 20px rgba(13, 42, 78, .10);
}

.invoice-kpi-card div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
}

.invoice-kpi-card small {
    color: #24406e;
    font-weight: 850;
}

.invoice-kpi-card strong {
    color: #071b4a;
    font-size: 26px;
    line-height: 1;
}

.invoice-kpi-card em {
    color: var(--invoice-kpi-accent, #005ce6);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.invoice-kpi-card.tone-blue {
    --invoice-kpi-accent: #075de8;
    border-color: #c9ddff;
    background: linear-gradient(135deg, #f6faff 0%, #e9f2ff 100%);
}

.invoice-kpi-card.tone-green {
    --invoice-kpi-accent: #078f5a;
    border-color: #bdebd5;
    background: linear-gradient(135deg, #f4fff9 0%, #dcf8ea 100%);
}

.invoice-kpi-card.tone-orange {
    --invoice-kpi-accent: #d96b00;
    border-color: #ffd4a3;
    background: linear-gradient(135deg, #fffaf2 0%, #fff0df 100%);
}

.invoice-kpi-card.tone-red {
    --invoice-kpi-accent: #d92842;
    border-color: #ffc4cc;
    background: linear-gradient(135deg, #fff8f8 0%, #ffe8eb 100%);
}

.invoice-kpi-card.tone-gray {
    --invoice-kpi-accent: #566579;
    border-color: #d8e1eb;
    background: linear-gradient(135deg, #fbfcfe 0%, #eef2f7 100%);
}

.invoice-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 3px;
}

.invoice-table-card,
.invoice-side-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.invoice-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(118px, .74fr)) repeat(2, minmax(126px, .72fr)) auto auto;
    gap: 3px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #e7eef7;
}

.invoice-filter-bar label,
.invoice-search-field {
    min-width: 0;
}

.invoice-filter-bar input,
.invoice-filter-bar select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.invoice-filter-bar select,
.invoice-date-field input {
    padding: 0 12px;
}

.invoice-search-field {
    position: relative;
}

.invoice-search-field input {
    padding: 0 42px 0 14px;
}

.invoice-search-field svg {
    position: absolute;
    right: 13px;
    top: 50%;
    color: #6c7fa1;
    transform: translateY(-50%);
}

.invoice-clear-link {
    color: #005ce6;
    font-size: 13px;
    font-weight: 900;
}

.invoice-table-wrap {
    overflow: visible;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table th {
    padding: 14px 12px;
    background: #fbfdff;
    color: #071b4a;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.invoice-table td {
    padding: 12px;
    border-top: 1px solid #e7eef7;
    color: #071b4a;
    font-size: 13px;
    font-weight: 750;
    vertical-align: middle;
}

.invoice-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #005ce6;
}

.invoice-number-cell,
.invoice-patient-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.invoice-number-cell > span:first-child {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #005ce6;
    background: #e8f1ff;
}

.invoice-number-cell strong {
    color: #005ce6;
}

.invoice-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #071b4a;
    background: #eef4fb;
    font-size: 11px;
    font-weight: 900;
}

.invoice-patient-cell > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.invoice-patient-cell strong,
.invoice-patient-cell small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-patient-cell small {
    color: #506080;
    font-size: 12px;
    font-weight: 750;
}

.invoice-due-date.is-overdue {
    color: #d72338;
    font-weight: 900;
}

.invoice-type-badge,
.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.invoice-type-badge.consultation,
.invoice-status-badge.partial {
    color: #005ce6;
    background: #e8f1ff;
}

.invoice-type-badge.therapy_session {
    color: #6940c8;
    background: #f1eaff;
}

.invoice-type-badge.assessment,
.invoice-status-badge.pending {
    color: #c86600;
    background: #fff1df;
}

.invoice-type-badge.follow_up,
.invoice-status-badge.paid {
    color: #087c55;
    background: #e6f7ef;
}

.invoice-type-badge.exercise_package {
    color: #087f7d;
    background: #e2f7f4;
}

.invoice-type-badge.other,
.invoice-status-badge.cancelled {
    color: #566579;
    background: #eef2f7;
}

.invoice-status-badge.overdue {
    color: #c9283b;
    background: #ffe8eb;
}

.invoice-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid #e7eef7;
}

.invoice-table-footer p {
    margin: 0;
    color: #24406e;
    font-size: 13px;
    font-weight: 800;
}

.invoice-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-pagination a,
.invoice-pagination span {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    color: #071b4a;
    font-weight: 900;
}

.invoice-pagination .active {
    border-color: #005ce6;
    background: #005ce6;
    color: #ffffff;
}

.invoice-empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px;
    color: #506080;
}

.invoice-empty-state strong {
    color: #071b4a;
}

.invoice-side-column {
    display: grid;
    align-content: start;
    gap: 14px;
}

.invoice-side-card {
    padding: 16px;
}

.invoice-side-card h2 {
    margin: 0 0 14px;
    color: #071b4a;
    font-size: 16px;
}

.invoice-donut {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin: 8px auto 16px;
    border-radius: 50%;
    background: conic-gradient(#18b978 0 var(--paid), #ffa31f var(--paid) var(--pending), #ef4455 var(--pending) var(--overdue), #a7b0c1 var(--overdue) 100%);
}

.invoice-donut span {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: #ffffff;
    color: #071b4a;
    text-align: center;
}

.invoice-donut small {
    color: #506080;
    font-size: 12px;
    font-weight: 800;
}

.invoice-donut strong {
    font-size: 15px;
    line-height: 1.15;
}

.invoice-summary-list {
    display: grid;
    gap: 11px;
}

.invoice-summary-list div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: #24406e;
    font-size: 13px;
    font-weight: 850;
}

.invoice-summary-list .dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.invoice-summary-list .dot.green {
    background: #18b978;
}

.invoice-summary-list .dot.orange {
    background: #ffa31f;
}

.invoice-summary-list .dot.red {
    background: #ef4455;
}

.invoice-summary-list .dot.gray {
    background: #a7b0c1;
}

.invoice-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.invoice-side-heading h2 {
    margin: 0;
}

.invoice-side-heading a {
    color: #005ce6;
    font-size: 12px;
    font-weight: 900;
}

.invoice-side-list {
    display: grid;
    gap: 12px;
}

.invoice-side-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.invoice-side-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.invoice-side-icon.success {
    color: #087c55;
    background: #e6f7ef;
}

.invoice-side-icon.danger {
    color: #c9283b;
    background: #ffe8eb;
}

.invoice-side-list span:not(.invoice-side-icon) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.invoice-side-list strong,
.invoice-side-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-side-list small,
.invoice-empty-copy {
    color: #506080;
    font-size: 12px;
    font-weight: 750;
}

.invoice-side-list em {
    color: #071b4a;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

/* Create invoice page */
.create-invoice-page {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.create-invoice-header,
.create-invoice-actions,
.create-invoice-title,
.create-invoice-patient-picker,
.create-invoice-bottom-card,
.create-invoice-item-footer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.create-invoice-header {
    justify-content: space-between;
}

.create-invoice-title > span {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: #eaf3ff;
    color: #075fd7;
}

.create-invoice-title h1,
.create-invoice-title p,
.create-invoice-card h2,
.create-invoice-patient-card h2,
.create-invoice-bottom-card h2 {
    margin: 0;
}

.create-invoice-title h1 {
    color: #061b45;
    font-size: 22px;
}

.create-invoice-title p {
    margin-top: 6px;
    color: #31507f;
    font-size: 14px;
}

.create-invoice-save-menu {
    position: relative;
}

.create-invoice-save-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    background: #075fd7;
    color: #fff;
    font-weight: 900;
    list-style: none;
}

.create-invoice-save-menu summary::-webkit-details-marker {
    display: none;
}

.create-invoice-save-menu div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(6, 27, 69, .14);
}

.create-invoice-save-menu button {
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #061b45;
    text-align: left;
    font-weight: 800;
}

.create-invoice-save-menu button:hover {
    background: #f4f8ff;
    color: #075fd7;
}

.create-invoice-patient-card,
.create-invoice-card,
.create-invoice-bottom-card {
    border: 1px solid #dfe8f4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(6, 27, 69, .05);
}

.create-invoice-patient-card {
    display: grid;
    grid-template-columns: 1.08fr .95fr 1fr;
    gap: 12px;
    padding: 16px;
}

.create-invoice-patient-card article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 138px;
    padding: 14px;
    border: 1px solid #e4edf8;
    border-radius: 10px;
}

.create-invoice-patient-card h2,
.create-invoice-card h2,
.create-invoice-bottom-card h2 {
    color: #061b45;
    font-size: 15px;
}

.create-invoice-patient-card p,
.create-invoice-patient-card a {
    margin: 0;
    color: #31507f;
    font-size: 14px;
    text-decoration: none;
}

.create-invoice-patient-card article > button {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #075fd7;
}

.create-invoice-patient-picker > span {
    display: inline-grid;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #eaf3ff;
    color: #075fd7;
    font-weight: 900;
}

.create-invoice-patient-picker select {
    width: 100%;
    border: 0;
    background: transparent;
    color: #061b45;
    font-size: 16px;
    font-weight: 900;
}

.create-invoice-patient-picker a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: #075fd7;
    font-weight: 800;
}

.create-invoice-patient-card article:nth-child(2) p,
.create-invoice-patient-card article:nth-child(3) p {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    line-height: 1.7;
}

.create-invoice-workspace {
    display: grid;
    grid-template-columns: minmax(360px, .85fr) minmax(0, 1.45fr);
    gap: 0;
}

.create-invoice-card {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.create-invoice-details-card {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.create-invoice-items-card {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.create-invoice-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.create-invoice-field-grid label,
.create-invoice-bottom-card label {
    display: grid;
    gap: 8px;
    color: #061b45;
    font-size: 14px;
    font-weight: 800;
}

.create-invoice-field-grid b {
    color: #e11d48;
}

.create-invoice-field-grid .wide {
    grid-column: 1 / -1;
}

.create-invoice-field-grid input,
.create-invoice-field-grid select,
.create-invoice-field-grid textarea,
.create-invoice-items-table input,
.create-invoice-items-table select,
.create-invoice-total-panel input,
.create-invoice-total-panel select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.create-invoice-field-grid textarea {
    resize: vertical;
}

.create-invoice-field-grid small,
.create-invoice-error {
    color: #e11d48;
    font-size: 12px;
}

.create-invoice-field-grid label.wide small {
    justify-self: end;
    color: #31507f;
}

.create-invoice-items-wrap {
    overflow-x: auto;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
}

.create-invoice-items-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.create-invoice-items-table th,
.create-invoice-items-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e8eef7;
    color: #061b45;
    font-size: 13px;
    text-align: left;
}

.create-invoice-items-table th {
    background: #f8fbff;
    font-weight: 900;
}

.create-invoice-items-table tr:last-child td {
    border-bottom: 0;
}

.create-invoice-items-table td:nth-child(3),
.create-invoice-items-table td:nth-child(4),
.create-invoice-items-table td:nth-child(5) {
    width: 96px;
}

.create-invoice-items-table td:last-child {
    width: 70px;
    text-align: center;
}

.create-invoice-items-table button[data-item-delete] {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #fff5f6;
    color: #ff2f4e;
}

.create-invoice-items-table button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.create-invoice-item-footer {
    align-items: flex-start;
    justify-content: space-between;
}

.create-invoice-total-panel {
    display: grid;
    gap: 0;
    min-width: min(100%, 460px);
    padding: 14px 18px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #f8fbff;
}

.create-invoice-total-panel > div {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(160px, 220px) 90px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #061b45;
}

.create-invoice-total-panel > div:first-child,
.create-invoice-total-panel > div:nth-child(3),
.create-invoice-total-panel > div.total {
    grid-template-columns: minmax(0, 1fr) auto;
}

.create-invoice-total-panel label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 8px;
}

.create-invoice-total-panel strong {
    text-align: right;
}

.create-invoice-total-panel .total {
    margin-top: 4px;
    border-top: 1px solid #cfdceb;
    color: #075fd7;
    font-size: 17px;
    font-weight: 900;
}

.create-invoice-bottom-card {
    display: grid;
    grid-template-columns: .75fr 1.35fr .7fr;
    align-items: stretch;
    padding: 20px;
}

.create-invoice-bottom-card article {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 150px;
    padding: 0 24px;
    border-right: 1px solid #e4edf8;
}

.create-invoice-bottom-card article:first-child {
    padding-left: 0;
}

.create-invoice-bottom-card article:last-child {
    border-right: 0;
}

.create-invoice-bottom-card label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #31507f;
    font-weight: 500;
}

.create-invoice-bottom-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #075fd7;
}

.create-invoice-upload {
    position: relative;
    justify-content: center;
    min-height: 104px;
    border: 1px dashed #b8c8dc;
    border-radius: 10px;
    color: #075fd7;
    text-align: center;
}

.create-invoice-upload input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.create-invoice-upload span {
    color: #31507f;
    font-size: 12px;
}

.create-invoice-item-cards {
    display: none;
}

.create-invoice-preview-dialog {
    width: min(860px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(6, 27, 69, .24);
}

.create-invoice-preview-dialog::backdrop {
    background: rgba(6, 27, 69, .34);
}

.create-invoice-preview-dialog article {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.create-invoice-preview-dialog header,
.create-invoice-preview-dialog footer,
.create-invoice-preview-body section,
.create-invoice-preview-body footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.create-invoice-preview-dialog h2,
.create-invoice-preview-dialog p {
    margin: 0;
}

.create-invoice-preview-dialog header > button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #f4f7fb;
    color: #31507f;
}

.create-invoice-preview-body {
    display: grid;
    gap: 14px;
}

.create-invoice-preview-body table {
    width: 100%;
    border-collapse: collapse;
}

.create-invoice-preview-body th,
.create-invoice-preview-body td {
    padding: 10px;
    border-bottom: 1px solid #e8eef7;
    text-align: left;
}

@media (max-width: 1180px) {
    .calendar-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reminder-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reminder-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .reminder-side-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .invoice-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .invoice-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-side-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .create-invoice-patient-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .create-invoice-patient-card article:last-child {
        grid-column: 1 / -1;
    }

    .create-invoice-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .create-invoice-details-card,
    .create-invoice-items-card {
        border-radius: 12px;
        border-left: 1px solid #dfe8f4;
    }

    .create-invoice-bottom-card {
        grid-template-columns: 1fr;
    }

    .create-invoice-bottom-card article {
        min-height: auto;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid #e4edf8;
    }

    .create-invoice-bottom-card article:first-child {
        padding-top: 0;
    }

    .create-invoice-bottom-card article:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (max-width: 820px) {
    .calendar-title-row,
    .calendar-view-tabs,
    .calendar-toolbar,
    .reminder-title-row,
    .invoice-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-primary-action,
    .calendar-view-tab-group,
    .calendar-date-nav,
    .calendar-filters {
        width: 100%;
    }

    .calendar-date-nav,
    .calendar-filters {
        flex-wrap: wrap;
    }

    .calendar-date-nav strong {
        width: 100%;
        margin-left: 0;
    }

    .calendar-filters select {
        flex: 1 1 160px;
        width: auto;
    }

    .calendar-side-stack {
        grid-template-columns: 1fr;
    }

    .reminder-kpi-grid,
    .reminder-side-column {
        grid-template-columns: 1fr;
    }

    .reminder-filter-bar {
        grid-template-columns: 1fr;
    }

    .reminder-table-wrap {
        overflow-x: auto;
    }

    .reminder-table {
        min-width: 780px;
    }

    .reminder-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-header-actions {
        justify-content: stretch;
    }

    .invoice-header-actions a {
        width: 100%;
    }

    .invoice-kpi-grid,
    .invoice-side-column {
        grid-template-columns: 1fr;
    }

    .invoice-filter-bar {
        grid-template-columns: 1fr;
    }

    .invoice-table-wrap {
        overflow-x: auto;
    }

    .invoice-table {
        min-width: 900px;
    }

    .invoice-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .create-invoice-header,
    .create-invoice-actions,
    .create-invoice-item-footer,
    .create-invoice-preview-dialog footer {
        align-items: stretch;
        flex-direction: column;
    }

    .create-invoice-actions > *,
    .create-invoice-save-menu summary,
    .create-invoice-item-footer > .secondary-button,
    .create-invoice-preview-dialog footer > * {
        width: 100%;
        justify-content: center;
    }

    .create-invoice-patient-card,
    .create-invoice-field-grid {
        grid-template-columns: 1fr;
    }

    .create-invoice-patient-card article:last-child,
    .create-invoice-field-grid .wide {
        grid-column: auto;
    }

    .create-invoice-items-wrap {
        display: none;
    }

    .create-invoice-item-cards {
        display: grid;
        gap: 12px;
    }

    .create-invoice-item-cards article {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid #dfe8f4;
        border-radius: 10px;
        background: #fff;
    }

    .create-invoice-item-cards header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .create-invoice-item-cards label {
        display: grid;
        gap: 6px;
        color: #061b45;
        font-size: 13px;
        font-weight: 800;
    }

    .create-invoice-item-cards input {
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid #cfdceb;
        border-radius: 8px;
    }

    .create-invoice-item-cards button {
        border: 0;
        background: transparent;
        color: #ff2f4e;
        font-weight: 900;
    }

    .create-invoice-total-panel,
    .create-invoice-total-panel > div,
    .create-invoice-total-panel label {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .create-invoice-total-panel strong {
        text-align: left;
    }
}

/* Prescription details page */
.prescription-detail-back {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #061b45;
}

.prescription-detail-back svg {
    transform: rotate(180deg);
}

.prescription-detail-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 28px;
    background: #f7fbff;
}

.prescription-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.prescription-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.prescription-detail-main,
.prescription-detail-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.prescription-summary-card,
.prescription-plan-card,
.prescription-side-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.prescription-summary-card {
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(0, 2fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
}

.prescription-patient-block {
    display: flex;
    align-items: center;
    gap: 18px;
}

.prescription-patient-block > span {
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    background: #f0e4ff;
    color: #722ed1;
    font-size: 24px;
    font-weight: 900;
}

.prescription-patient-block h1 {
    margin: 0 0 8px;
    color: #061b45;
    font-size: 18px;
}

.prescription-patient-block p,
.prescription-patient-block small {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: #31507f;
    font-size: 14px;
}

.prescription-patient-block b,
.prescription-created-meta b,
.prescription-history-card small b {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.prescription-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prescription-meta-grid > div {
    padding: 0 24px;
    border-left: 1px solid #dfe8f4;
}

.prescription-meta-grid span,
.prescription-meta-grid strong {
    display: block;
}

.prescription-meta-grid span {
    margin-bottom: 10px;
    color: #647799;
    font-size: 13px;
    font-weight: 800;
}

.prescription-meta-grid strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #061b45;
    font-size: 14px;
}

.prescription-meta-grid em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff0df;
    color: #d96b00;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.prescription-tabs {
    display: flex;
    gap: 36px;
    padding: 0 18px;
    border-bottom: 1px solid #dfe8f4;
}

.prescription-tabs a {
    position: relative;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    color: #061b45;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.prescription-tabs a.active {
    color: #075fd7;
}

.prescription-tabs a.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #075fd7;
}

.prescription-plan-card {
    padding: 18px;
}

.prescription-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.prescription-metric-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
}

.prescription-metric-card > span {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #075fd7;
}

.prescription-metric-card:nth-child(4) > span {
    background: #f0e4ff;
    color: #8d34e6;
}

.prescription-metric-card small,
.prescription-metric-card em {
    display: block;
    color: #31507f;
    font-size: 13px;
    font-style: normal;
}

.prescription-metric-card strong {
    display: block;
    margin: 7px 0;
    color: #061b45;
    font-size: 20px;
}

.prescription-plan-card h2 {
    margin: 0 0 14px;
    color: #061b45;
    font-size: 18px;
}

.prescription-exercise-table-wrap {
    overflow-x: auto;
}

.prescription-exercise-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
}

.prescription-exercise-table th,
.prescription-exercise-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #e5edf7;
    color: #061b45;
    text-align: left;
    vertical-align: middle;
}

.prescription-exercise-table th {
    background: #f8fbff;
    font-size: 13px;
    font-weight: 900;
}

.prescription-exercise-cell {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.prescription-exercise-cell img {
    width: 108px;
    height: 78px;
    border-radius: 7px;
    object-fit: cover;
}

.prescription-exercise-cell strong,
.prescription-side-card h2 {
    color: #061b45;
    font-size: 16px;
}

.prescription-exercise-cell em {
    display: inline-flex;
    margin-left: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075fd7;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.prescription-exercise-cell p {
    margin: 10px 0 7px;
    color: #29456e;
    font-size: 13px;
    line-height: 1.45;
}

.prescription-exercise-cell a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #075fd7;
    font-size: 13px;
    font-weight: 900;
}

.prescription-stack {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
}

.prescription-frequency {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prescription-frequency span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #075fd7;
    font-size: 12px;
    font-weight: 900;
}

.prescription-progress strong {
    display: block;
    margin-bottom: 10px;
}

.prescription-progress span {
    display: block;
    width: 112px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e5f5;
}

.prescription-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #075fd7;
}

.prescription-note-section {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 14px;
    border-bottom: 1px solid #e5edf7;
}

.prescription-note-section > span {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    background: #f0e4ff;
    color: #8d34e6;
}

.prescription-note-section h3 {
    margin: 0 0 10px;
    color: #061b45;
    font-size: 15px;
}

.prescription-note-section ul,
.prescription-note-section p {
    margin: 0;
    color: #29456e;
    font-size: 14px;
    line-height: 1.7;
}

.prescription-created-meta {
    margin: 0;
    color: #647799;
    text-align: center;
    font-size: 13px;
}

.prescription-side-card {
    padding: 20px;
}

.prescription-side-card h2 {
    margin: 0 0 18px;
}

.prescription-side-card dl {
    display: grid;
    gap: 18px;
    margin: 0 0 18px;
}

.prescription-side-card dl div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.prescription-side-card dt {
    color: #061b45;
    font-weight: 900;
}

.prescription-side-card dd {
    margin: 0;
    color: #061b45;
}

.prescription-side-card > a,
.prescription-quick-actions a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #075fd7;
    font-weight: 900;
    text-decoration: none;
}

.prescription-quick-actions {
    display: grid;
    gap: 18px;
}

.prescription-history-card {
    display: grid;
    gap: 14px;
}

.prescription-history-card a:not(.view-all) {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 12px;
    color: #061b45;
    text-decoration: none;
}

.prescription-history-card i {
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
    background: #c6d3e6;
}

.prescription-history-card a:first-of-type i {
    background: #075fd7;
}

.prescription-history-card strong,
.prescription-history-card small {
    display: block;
}

.prescription-history-card small {
    margin-top: 6px;
    color: #526b90;
}

.prescription-history-card em {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff0df;
    color: #d96b00;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.prescription-history-card .view-all {
    margin-top: 8px;
}

.prescription-help-card {
    background: linear-gradient(135deg, #f8fbff, #edf6ff);
}

.prescription-help-card p {
    margin: 0 0 16px;
    color: #29456e;
}

@media (max-width: 1280px) {
    .prescription-detail-layout,
    .prescription-summary-card {
        grid-template-columns: 1fr;
    }

    .prescription-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .prescription-meta-grid > div {
        border-left: 0;
        padding: 0;
    }
}

@media (max-width: 820px) {
    .prescription-detail-actions,
    .prescription-tabs {
        flex-wrap: wrap;
    }

    .prescription-metric-grid,
    .prescription-meta-grid {
        grid-template-columns: 1fr;
    }

    .prescription-detail-actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Doctor settings page */
.settings-page {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 0;
}

.global-shell .settings-page {
    padding: 0 22px 22px;
}

.settings-title-row,
.settings-workspace,
.settings-tab-bar,
.settings-form-card,
.settings-side-column,
.settings-side-card,
.settings-quick-card {
    min-width: 0;
}

.settings-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.settings-title-row h1,
.settings-card-header h2,
.settings-side-card h2,
.settings-quick-card h2 {
    margin: 0;
    color: #071b4a;
}

.settings-title-row h1 {
    font-size: 30px;
    line-height: 1.1;
}

.settings-title-row p,
.settings-card-header p,
.settings-quick-card p,
.settings-muted-note {
    margin: 4px 0 0;
    color: #24406e;
    font-weight: 650;
}

.settings-page :where(p, small, span, em, label, input, select, textarea, button, a, td, th, dt, dd, li) {
    font-weight: 400 !important;
}

.settings-page :where(strong, b) {
    font-weight: 500 !important;
}

.settings-page :where(input, select, textarea)::placeholder {
    font-weight: 400 !important;
}

.settings-page :where(h1, h2, h3, h4, .settings-card-header h2, .settings-side-card h2, .settings-quick-card h2, .settings-billing-card-title h2, .settings-insurance-settings-header h2, .settings-insurance-provider-header h2, .settings-packages-heading h2, .settings-notifications-heading h1, .settings-users-title h1, .settings-system-title h1) {
    font-weight: 750 !important;
}

.settings-page :where(.settings-tab-item.is-active, .settings-tab-item.is-active span, .settings-billing-subtabs .is-active, .settings-insurance-pill.is-active) {
    font-weight: 650 !important;
}

.settings-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
    gap: 18px;
}

.settings-form-card,
.settings-side-card,
.settings-quick-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-tab-bar {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: hidden;
    margin-inline: -22px;
    padding-inline: 8px;
    border-bottom: 1px solid #dbe5f0;
    background: #ffffff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.settings-tab-bar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.settings-tab-item {
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: max-content;
    min-height: 58px;
    padding: 0 clamp(8px, .8vw, 14px);
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.settings-tab-item::after {
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
}

.settings-tab-item.is-active {
    color: #005ce6;
}

.settings-tab-item.is-active::after {
    background: #005ce6;
}

@media (min-width: 921px) and (max-width: 1440px) {
    .settings-tab-item {
        gap: 5px;
        min-height: 54px;
        padding-inline: 4px;
        font-size: 11px;
    }

    .settings-tab-item svg {
        width: 16px;
        height: 16px;
    }

    .settings-tab-item::after {
        right: 4px;
        left: 4px;
    }
}

.settings-form-card {
    padding: 16px;
}

.settings-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.settings-card-header h2,
.settings-side-card h2,
.settings-quick-card h2 {
    font-size: 18px;
}

.settings-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 16px;
    align-items: start;
}

.settings-logo-column {
    display: grid;
    align-content: start;
    gap: 6px;
    order: 2;
}

.settings-fields-grid {
    order: 1;
}

.settings-logo-column label,
.settings-fields-grid label,
.settings-password-form label {
    color: #071b4a;
    font-size: 11px;
    font-weight: 700;
}

.settings-logo-preview {
    display: grid;
    place-items: center;
    min-height: 104px;
    padding: 10px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    text-align: center;
}

.settings-logo-mark,
.settings-profile-avatar > span {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #005ce6 0%, #14b8a6 100%);
    font-weight: 900;
}

.settings-logo-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin-bottom: 6px;
}

.settings-logo-preview strong {
    color: #071b4a;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.settings-logo-preview small {
    color: #24406e;
    font-size: 11px;
    font-weight: 500;
}

.settings-small-button,
.settings-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #005ce6;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.settings-small-button.danger {
    color: #d21f3c;
}

.settings-small-button:disabled,
.settings-outline-button[disabled] {
    cursor: default;
    opacity: .78;
}

.settings-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(142px, 1fr));
    gap: 10px;
}

.settings-fields-grid label,
.settings-password-form label {
    display: grid;
    gap: 5px;
}

.settings-fields-grid .span-2 {
    grid-column: span 2;
}

.settings-fields-grid input,
.settings-fields-grid select,
.settings-fields-grid textarea,
.settings-password-form input {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    outline: none;
}

.settings-fields-grid input::placeholder,
.settings-fields-grid textarea::placeholder,
.settings-password-form input::placeholder {
    color: #6d7f9e;
    font-weight: 400;
}

.settings-fields-grid textarea {
    min-height: 58px;
    padding-top: 8px;
    resize: vertical;
}

.settings-fields-grid input[readonly],
.settings-fields-grid select:disabled,
.settings-fields-grid textarea[readonly],
.settings-password-form input:disabled {
    background: #fbfdff;
    color: #24406e;
}

.settings-fields-grid label > small {
    color: #d21f3c;
}

.settings-toggle-row.settings-toggle-row-wide {
    grid-template-columns: 36px minmax(0, 1fr) 42px;
    padding: 0;
}

.settings-side-column {
    display: grid;
    gap: 3px;
    align-content: start;
}

.settings-side-card {
    padding: 18px;
}

.settings-side-card.profile {
    text-align: left;
}

.settings-profile-avatar {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 18px auto 16px;
}

.settings-profile-avatar > span {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    font-size: 22px;
}

.settings-profile-avatar i {
    position: absolute;
    right: 0;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #005ce6;
    color: #ffffff;
}

.settings-side-card dl {
    display: grid;
    gap: 0;
    margin: 0 0 14px;
}

.settings-side-card dl div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #edf2f8;
}

.settings-side-card dt,
.settings-side-card dd {
    margin: 0;
    color: #24406e;
    font-size: 12px;
    font-weight: 750;
}

.settings-side-card dd {
    color: #071b4a;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.settings-outline-button {
    width: 100%;
}

.settings-toggle-list,
.settings-password-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.settings-toggle-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.settings-toggle-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.settings-toggle-icon.tone-blue { color: #005ce6; background: #e8f1ff; }
.settings-toggle-icon.tone-green { color: #087c55; background: #e6f7ef; }
.settings-toggle-icon.tone-purple { color: #6c2bd9; background: #f0e6ff; }
.settings-toggle-icon.tone-orange { color: #c86600; background: #fff1df; }

.settings-toggle-row strong,
.settings-quick-action strong {
    display: block;
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
}

.settings-toggle-row small,
.settings-quick-action small {
    color: #24406e;
    font-size: 11px;
    font-weight: 650;
}

.settings-toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-row i {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #c9d5e6;
}

.settings-toggle-row i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(7, 27, 74, .18);
}

.settings-toggle-row input:checked + i {
    background: #005ce6;
}

.settings-toggle-row input:checked + i::after {
    transform: translateX(16px);
}

.settings-patients-form {
    display: grid;
    gap: 18px;
}

.settings-patients-title-row {
    align-items: center;
}

.settings-patients-title-row h1 {
    font-size: 22px;
}

.settings-patient-section-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-patients-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.settings-patient-section-card {
    display: grid;
    align-content: start;
    gap: 20px;
    min-height: 228px;
    padding: 20px;
    scroll-margin-top: 90px;
}

.settings-patient-card-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.settings-patient-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.settings-patient-card-icon.tone-blue { color: #005ce6; background: #e8f1ff; }
.settings-patient-card-icon.tone-green { color: #087c55; background: #dcfce7; }
.settings-patient-card-icon.tone-purple { color: #6c2bd9; background: #f0e7ff; }
.settings-patient-card-icon.tone-orange { color: #c86600; background: #fff1df; }
.settings-patient-card-icon.tone-red { color: #e11d48; background: #ffe4ec; }

.settings-patient-card-header h2 {
    margin: 0;
    color: #071b4a;
    font-size: 16px;
    font-weight: 900;
}

.settings-patient-card-header p {
    margin: 4px 0 0;
    color: #536f9c;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 650;
}

.settings-patient-section-fields {
    display: grid;
    gap: 16px;
}

.settings-patient-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(128px, 160px);
    align-items: center;
    gap: 12px;
}

.settings-patient-field label {
    display: block;
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
}

.settings-patient-field small {
    display: block;
    margin-top: 5px;
    color: #536f9c;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 650;
}

.settings-patient-field input[type="text"],
.settings-patient-field select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

.settings-patient-field input[type="text"]:focus,
.settings-patient-field select:focus {
    border-color: #005ce6;
    outline: 3px solid rgba(0, 92, 230, .14);
}

.settings-patient-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 52px;
    min-height: 28px;
    cursor: pointer;
}

.settings-patient-toggle i {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border: 1px solid #b9c6d8;
    border-radius: 999px;
    background: #c9d5e6;
    box-shadow: inset 0 1px 2px rgba(7, 27, 74, .08);
    transition: background 160ms ease, border-color 160ms ease;
}

.settings-patient-toggle i::after {
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 6px rgba(7, 27, 74, .22);
    transition: transform 160ms ease;
}

.settings-patient-toggle input:checked + i {
    border-color: #005ce6;
    background: #005ce6;
}

.settings-patient-toggle input:checked + i::after {
    transform: translateX(20px);
}

.settings-field-error {
    grid-column: 2;
    color: #d21f3c !important;
}

.settings-password-form label span {
    position: relative;
}

.settings-password-form label svg {
    position: absolute;
    right: 11px;
    top: 50%;
    color: #5f7191;
    transform: translateY(-50%);
}

.settings-password-form input {
    padding-right: 38px;
}

.settings-password-form button {
    width: 100%;
}

.settings-quick-card {
    padding: 18px;
}

.settings-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin-top: 16px;
}

.settings-quick-action {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    min-height: 70px;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    color: #071b4a;
    text-decoration: none;
}

.settings-quick-action span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.settings-quick-action.tone-green span { color: #087c55; background: #e6f7ef; }
.settings-quick-action.tone-orange span { color: #c86600; background: #fff1df; }
.settings-quick-action.tone-blue span { color: #005ce6; background: #e8f1ff; }
.settings-quick-action.tone-purple span { color: #6c2bd9; background: #f0e6ff; }

@media (max-width: 1320px) {
    .settings-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-clinic-general-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .settings-workspace,
    .settings-form-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-doctor-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-patients-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-patient-section-card {
        gap: 16px;
    }

    .settings-tab-bar {
        overflow-x: auto;
        padding-inline: 4px;
    }

    .settings-tab-item {
        flex: 0 0 auto;
    }

    .clinic-doctor-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-side-column,
    .settings-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-title-row,
    .settings-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-card-header {
        display: flex;
    }

    .settings-fields-grid {
        grid-template-columns: 1fr;
    }

    .settings-clinic-general-header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-clinic-general-grid,
    .clinic-settings-fields,
    .clinic-hours-editor > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .clinic-settings-fields .span-2 {
        grid-column: auto;
    }

    .settings-clinic-type-card,
    .settings-doctor-management-card header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-clinic-type-card label,
    .settings-clinic-doctor-save {
        width: 100%;
    }

    .settings-patients-sections,
    .settings-patient-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-patient-toggle {
        width: auto;
    }

    .settings-field-error {
        grid-column: 1;
    }

    .settings-fields-grid .span-2 {
        grid-column: auto;
    }
}

.settings-profile-page {
    gap: 20px;
}

.settings-clinic-page {
    gap: 20px;
}

.settings-clinic-general-form {
    display: grid;
    gap: 18px;
}

.settings-clinic-general-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
}

.settings-clinic-general-header h1 {
    margin: 0;
    color: #071b4a;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 950;
}

.settings-clinic-general-header p {
    margin: 7px 0 0;
    color: #536f9c;
    font-size: 13px;
    font-weight: 650;
}

.settings-clinic-general-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.clinic-settings-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    min-height: 330px;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.clinic-settings-card > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.clinic-settings-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.clinic-settings-card-icon.tone-blue { color: #005ce6; background: #e8f1ff; }
.clinic-settings-card-icon.tone-purple { color: #6c2bd9; background: #f0e7ff; }
.clinic-settings-card-icon.tone-green { color: #087c55; background: #dcfce7; }
.clinic-settings-card-icon.tone-orange { color: #c86600; background: #fff1df; }
.clinic-settings-card-icon.tone-red { color: #e11d48; background: #ffe4ec; }
.clinic-settings-card-icon.tone-teal { color: #0e7490; background: #dff7fb; }

.clinic-settings-card h2 {
    margin: 0;
    color: #071b4a;
    font-size: 16px;
    font-weight: 900;
}

.clinic-settings-card p {
    margin: 4px 0 0;
    color: #536f9c;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 650;
}

.clinic-settings-fields,
.clinic-doctor-list,
.clinic-compact-list,
.clinic-service-list,
.clinic-hours-editor {
    display: grid;
    gap: 10px;
}

.clinic-settings-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clinic-settings-fields .span-2 {
    grid-column: span 2;
}

.clinic-settings-fields label,
.clinic-doctor-row label,
.clinic-compact-list label,
.clinic-service-list label {
    display: grid;
    gap: 5px;
    color: #071b4a;
    font-size: 11px;
    font-weight: 850;
}

.clinic-settings-fields input,
.clinic-doctor-row input,
.clinic-doctor-row select,
.clinic-compact-list input,
.clinic-service-list input,
.clinic-service-list select,
.clinic-hours-editor select {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

.clinic-settings-fields input:focus,
.clinic-doctor-row input:focus,
.clinic-doctor-row select:focus,
.clinic-compact-list input:focus,
.clinic-service-list input:focus,
.clinic-service-list select:focus,
.clinic-hours-editor select:focus {
    border-color: #005ce6;
    outline: 3px solid rgba(0, 92, 230, .14);
}

.clinic-mode-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #f8fbff;
}

.clinic-mode-segment label {
    display: grid;
    place-items: center;
    min-height: 38px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.clinic-mode-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.clinic-mode-segment label.is-active,
.clinic-mode-segment label:has(input:checked) {
    background: #005ce6;
    color: #ffffff;
}

.clinic-doctor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) 86px 62px;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #f8fbff;
}

.clinic-doctor-row .single-only {
    display: none;
}

.settings-clinic-general-form.is-single-doctor .clinic-doctor-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-clinic-general-form.is-single-doctor .clinic-doctor-row:nth-child(n+2),
.settings-clinic-general-form.is-single-doctor [data-add-doctor] {
    display: none;
}

.settings-clinic-general-form.is-single-doctor .clinic-doctor-row .single-only {
    display: grid;
}

.clinic-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.clinic-row-actions button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    color: #005ce6;
}

.clinic-row-actions button:last-child {
    color: #ef4444;
}

.clinic-compact-list section,
.clinic-service-list > div {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #f8fbff;
}

.clinic-compact-list section > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.clinic-compact-list strong,
.clinic-compact-list em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.clinic-compact-list strong {
    background: #e8f1ff;
    color: #005ce6;
}

.clinic-compact-list em {
    background: #dcfce7;
    color: #15803d;
}

.clinic-hours-editor > div {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(92px, .85fr) minmax(92px, .85fr);
    align-items: center;
    gap: 8px;
}

.clinic-day-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.clinic-day-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #005ce6;
}

.settings-card-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #005ce6;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.settings-card-add-button.subtle {
    color: #24406e;
}

.clinic-compact-card {
    min-height: 0;
    gap: 12px;
    padding: 16px;
}

.settings-compact-list {
    display: grid;
    gap: 8px;
}

.settings-compact-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-clinic-general-form.is-single-branch [data-settings-list="branch"] [data-settings-row]:nth-child(n+2),
.settings-clinic-general-form.is-single-branch [data-settings-add="branch"],
.settings-clinic-general-form.is-single-doctor [data-settings-list="doctor"] [data-settings-row]:nth-child(n+2),
.settings-clinic-general-form.is-single-doctor [data-settings-add="doctor"] {
    display: none;
}

.settings-row-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
}

.settings-row-icon.tone-blue { color: #005ce6; background: #e8f1ff; }
.settings-row-icon.tone-purple { color: #6c2bd9; background: #f0e7ff; }
.settings-row-icon.tone-green { color: #087c55; background: #dcfce7; }
.settings-row-icon.tone-orange { color: #c86600; background: #fff1df; }
.settings-row-icon.tone-red { color: #e11d48; background: #ffe4ec; }
.settings-row-icon.tone-teal { color: #0e7490; background: #dff7fb; }

.settings-row-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.settings-row-text strong,
.settings-row-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-row-text strong {
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
}

.settings-row-text small {
    color: #536f9c;
    font-size: 11px;
    font-weight: 700;
}

.settings-hours-row-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settings-hours-row-text small {
    text-align: right;
}

.settings-row-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #005ce6;
    font-size: 11px;
    font-weight: 850;
}

.settings-hidden-info {
    display: none;
}

.settings-general-modal {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #071b4a;
    box-shadow: 0 24px 70px rgba(13, 42, 78, .22);
}

.settings-general-modal.is-doctor-profile {
    width: min(820px, calc(100vw - 32px));
}

.settings-general-modal::backdrop {
    background: rgba(7, 27, 74, .38);
}

.settings-general-modal-shell {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.settings-general-modal header,
.settings-general-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-general-modal h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 950;
}

.settings-general-modal [data-modal-close] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
    color: #24406e;
    font-size: 18px;
    line-height: 1;
}

.settings-modal-delete {
    margin-right: auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff5f5;
    color: #dc2626;
    font-size: 12px;
    font-weight: 900;
}

.settings-modal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-general-modal.is-doctor-profile .settings-modal-fields {
    grid-template-columns: 190px repeat(2, minmax(0, 1fr));
}

.settings-doctor-schedule-summary {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 104px;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-doctor-schedule-summary h3 {
    margin: 0 0 8px;
    color: #071b4a;
    font-size: 14px;
    font-weight: 950;
}

.settings-doctor-schedule-summary p {
    margin: 3px 0;
    color: #24406e;
    font-size: 12px;
    font-weight: 750;
}

.settings-doctor-schedule-summary button {
    white-space: nowrap;
}

.settings-modal-fields label {
    display: grid;
    gap: 6px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-modal-fields input,
.settings-modal-fields select,
.settings-modal-fields textarea {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.settings-modal-photo-field {
    grid-row: span 4;
}

.settings-modal-photo-picker {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 14px;
    border: 1px dashed #cfe0f6;
    border-radius: 10px;
    background: #f8fbff;
}

.settings-modal-photo-picker img {
    width: 112px;
    height: 112px;
    border-radius: 999px;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .12);
}

.settings-modal-photo-picker input[type="file"] {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 11px;
}

.settings-modal-fields textarea {
    min-height: 82px;
    padding-top: 10px;
    resize: vertical;
}

.settings-modal-check {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.settings-modal-check input {
    width: 17px;
    min-height: 17px;
    accent-color: #005ce6;
}

.settings-schedule-prompt {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #071b4a;
    box-shadow: 0 24px 70px rgba(13, 42, 78, .22);
}

.settings-schedule-prompt::backdrop {
    background: rgba(7, 27, 74, .38);
}

.settings-schedule-prompt-shell {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.settings-schedule-prompt h2,
.settings-schedule-prompt p {
    margin: 0;
}

.settings-schedule-prompt h2 {
    font-size: 18px;
    font-weight: 950;
}

.settings-schedule-prompt p {
    color: #24406e;
    font-weight: 750;
}

.settings-schedule-prompt-shell div {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.settings-clinic-doctor-form {
    display: grid;
    gap: 14px;
}

.settings-clinic-type-card,
.settings-doctor-management-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-clinic-type-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
}

.settings-clinic-type-card > div,
.settings-doctor-management-card header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.settings-clinic-type-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e8f1ff;
    color: #005ce6;
}

.settings-clinic-type-card h2,
.settings-doctor-management-card h2 {
    margin: 0;
    color: #071b4a;
    font-size: 18px;
    font-weight: 900;
}

.settings-clinic-type-card p,
.settings-doctor-management-card p {
    margin: 5px 0 0;
    color: #536f9c;
    font-size: 12px;
    font-weight: 650;
}

.settings-clinic-type-card label {
    display: grid;
    gap: 7px;
    min-width: 220px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-clinic-type-card select,
.settings-doctor-row input,
.settings-doctor-row select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.settings-clinic-type-card select:focus,
.settings-doctor-row input:focus,
.settings-doctor-row select:focus {
    border-color: #005ce6;
    outline: 3px solid rgba(0, 92, 230, .14);
}

.settings-doctor-management-card {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.settings-doctor-management-card header {
    justify-content: space-between;
}

.settings-doctor-list {
    display: grid;
    gap: 10px;
}

.settings-doctor-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(180px, 1fr) minmax(130px, .6fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-doctor-row label {
    display: grid;
    gap: 6px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-doctor-disabled-note {
    display: none;
    padding: 12px 14px;
    border: 1px dashed #cfe0f6;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-clinic-doctor-form.is-single-doctor .settings-doctor-management-card {
    opacity: .68;
}

.settings-clinic-doctor-form.is-single-doctor .settings-doctor-list,
.settings-clinic-doctor-form.is-single-doctor [data-add-doctor] {
    display: none;
}

.settings-clinic-doctor-form.is-single-doctor .settings-doctor-disabled-note {
    display: block;
}

.settings-clinic-doctor-save {
    justify-self: end;
}

.settings-clinic-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-clinic-grid {
    display: grid;
    grid-template-columns: 1.1fr .88fr 1.08fr;
    gap: 14px;
}

.settings-clinic-card {
    min-width: 0;
    padding: 20px;
}

.settings-clinic-card h2,
.settings-clinic-card header h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #071b4a;
    font-size: 16px;
    font-weight: 900;
}

.settings-clinic-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-clinic-card header a {
    color: #005ce6;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.settings-card-edit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 92, 230, .08);
    white-space: nowrap;
}

.settings-clinic-info-card {
    grid-column: span 1;
}

.settings-clinic-info-main {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 22px;
    margin-top: 18px;
}

.settings-clinic-info-main img {
    width: 158px;
    height: 128px;
    border-radius: 8px;
    object-fit: cover;
}

.settings-clinic-info-main h3 {
    margin: 4px 0 12px;
    color: #071b4a;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.settings-clinic-info-main p {
    margin: 0 0 12px;
    color: #071b4a;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 750;
}

.settings-clinic-info-main ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-clinic-info-main li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 750;
}

.settings-clinic-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 30px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #edf2f8;
}

.settings-clinic-details div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.settings-clinic-details dt,
.settings-clinic-details dd {
    margin: 0;
    color: #24406e;
    font-size: 12px;
    font-weight: 750;
}

.settings-clinic-details dd {
    color: #071b4a;
    font-weight: 850;
}

.settings-hours-list {
    display: grid;
    margin-top: 14px;
}

.settings-hours-list p,
.settings-services-list p,
.settings-staff-list p,
.settings-clinic-stats-list p {
    margin: 0;
    border-bottom: 1px solid #edf2f8;
}

.settings-hours-list p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    color: #071b4a;
    font-size: 13px;
    font-weight: 750;
}

.settings-hours-list strong {
    color: #071b4a;
    font-weight: 850;
}

.settings-hours-list .is-closed strong {
    color: #ef4444;
}

.settings-branches-list {
    display: grid;
    gap: 14px;
}

.settings-branches-list section {
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
}

.settings-branches-list section > div,
.settings-staff-list p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-branches-list strong {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #e8f1ff;
    color: #005ce6;
    font-size: 11px;
    font-weight: 900;
}

.settings-branches-list em,
.settings-staff-list em {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.settings-branches-list p {
    margin: 10px 0;
    color: #24406e;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.settings-branches-list small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 700;
}

.settings-branches-form,
.settings-inline-manage-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e6edf5;
}

.settings-branch-editor,
.settings-inline-editor {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-branch-editor legend,
.settings-inline-editor legend {
    padding: 0 8px;
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
}

.settings-branch-editor label,
.settings-inline-editor label {
    display: grid;
    gap: 6px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-branch-editor input,
.settings-branch-editor textarea,
.settings-inline-editor input,
.settings-inline-editor textarea {
    width: 100%;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.settings-branch-editor input,
.settings-inline-editor input {
    min-height: 40px;
    padding: 0 12px;
}

.settings-branch-editor textarea,
.settings-inline-editor textarea {
    resize: vertical;
    min-height: 68px;
    padding: 10px 12px;
}

.settings-branch-editor input:focus,
.settings-branch-editor textarea:focus,
.settings-inline-editor input:focus,
.settings-inline-editor textarea:focus {
    outline: 3px solid rgba(0, 92, 230, .14);
    border-color: #005ce6;
}

.settings-branch-hours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-services-list,
.settings-staff-list,
.settings-clinic-stats-list {
    display: grid;
}

.settings-services-list p {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.settings-services-list p > span,
.settings-clinic-stats-list p > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.settings-services-list .tone-blue { color: #005ce6; background: #e8f1ff; }
.settings-services-list .tone-teal { color: #0ea5a4; background: #dffbf7; }
.settings-services-list .tone-red { color: #ef4444; background: #fee2e2; }
.settings-services-list .tone-purple { color: #8b5cf6; background: #f0e7ff; }

.settings-services-list strong,
.settings-staff-list strong,
.settings-clinic-stats-list strong {
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-services-list small {
    color: #071b4a;
    font-size: 12px;
    font-weight: 750;
}

.settings-staff-list p {
    padding: 8px 0;
}

.settings-staff-list p > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #005ce6, #0ea5a4);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.settings-staff-list strong {
    flex: 1 1 auto;
}

.settings-staff-list small {
    display: block;
    margin-top: 3px;
    color: #24406e;
    font-size: 11px;
    font-weight: 650;
}

.settings-clinic-card h2 span {
    color: #24406e;
    font-weight: 750;
}

.settings-clinic-stats-list p {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.settings-clinic-stats-list p > span {
    color: #005ce6;
    background: #e8f1ff;
}

.settings-clinic-stats-list b {
    color: #071b4a;
    font-size: 14px;
    font-weight: 900;
}

.settings-clinic-stats-list em {
    color: #16a34a;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.settings-clinic-stats-list em.down {
    color: #16a34a;
}

.settings-profile-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: 20px;
}

.settings-profile-form-card {
    padding: 24px;
}

.settings-profile-card-header {
    margin-bottom: 26px;
}

.settings-profile-card-header p {
    margin-top: 12px;
    color: #1f47a6;
    font-size: 12px;
}

.settings-profile-form {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 28px 32px;
}

.settings-profile-photo-column {
    grid-row: span 2;
    display: grid;
    align-content: start;
    gap: 9px;
}

.settings-profile-photo-column > label,
.settings-profile-form label {
    color: #071b4a;
    font-size: 11px;
    font-weight: 850;
}

.settings-profile-photo-card {
    min-height: 222px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 15px 18px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
}

.settings-profile-photo-card img,
.settings-profile-summary-header img {
    border-radius: 50%;
    object-fit: cover;
    background: #edf2f8;
}

.settings-profile-photo-card img {
    width: 106px;
    height: 106px;
    margin-bottom: 18px;
}

.settings-photo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 138px;
    min-height: 36px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.settings-photo-button svg {
    color: #005ce6;
}

.settings-photo-button.danger {
    margin-top: 12px;
    border-color: transparent;
    color: #ff1f1f;
}

.settings-photo-button.danger svg {
    color: #ff1f1f;
}

.settings-profile-fields,
.settings-profile-wide-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
}

.settings-profile-form label {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.settings-profile-form input,
.settings-profile-form select,
.settings-profile-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.settings-profile-form label > small {
    color: #d21f3c;
    font-size: 11px;
    font-weight: 750;
}

.settings-profile-form input::placeholder {
    color: #8b9ab7;
    font-weight: 650;
}

.settings-profile-form select {
    padding-right: 36px;
}

.settings-profile-form textarea {
    min-height: 78px;
    padding-top: 12px;
    line-height: 1.5;
    resize: vertical;
}

.settings-profile-form .has-trailing-icon span {
    position: relative;
}

.settings-profile-form .has-trailing-icon svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #071b4a;
    transform: translateY(-50%);
}

.settings-profile-form .has-trailing-icon input {
    padding-right: 38px;
}

.settings-profile-wide,
.settings-profile-wide-row,
.settings-profile-save {
    grid-column: 1 / -1;
}

.settings-profile-save {
    justify-self: start;
    min-height: 38px;
    border-radius: 8px;
    background: #005ce6;
    box-shadow: 0 10px 20px rgba(0, 92, 230, .2);
}

.settings-profile-side-column {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.settings-profile-summary-card,
.settings-profile-preferences-card {
    padding: 26px 28px;
}

.settings-profile-summary-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 27px 8px 21px;
}

.settings-profile-summary-header img {
    width: 99px;
    height: 99px;
}

.settings-profile-summary-header strong {
    display: block;
    color: #071b4a;
    font-size: 18px;
    font-weight: 900;
}

.settings-profile-summary-header span {
    display: block;
    margin-top: 9px;
    color: #005ce6;
    font-size: 13px;
    font-weight: 850;
}

.settings-profile-summary-list {
    border-top: 1px solid #edf2f8;
}

.settings-profile-summary-list p {
    min-height: 40px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0;
    border-bottom: 1px solid #edf2f8;
    color: #071b4a;
    font-size: 12px;
    font-weight: 750;
}

.settings-profile-summary-list svg {
    color: #071b4a;
}

.settings-profile-summary-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-profile-preferences-card h2 {
    margin-bottom: 22px;
}

.settings-preference-list {
    gap: 9px;
    margin-top: 0;
}

.settings-preference-row {
    min-height: 46px;
    grid-template-columns: 26px minmax(0, 1fr) 42px;
    gap: 16px;
}

.settings-preference-row .settings-toggle-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent;
    color: #071b4a;
}

@media (max-width: 1320px) {
    .settings-clinic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-profile-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-profile-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .settings-clinic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-profile-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-profile-photo-column {
        grid-row: auto;
    }

    .settings-profile-photo-card {
        max-width: 220px;
    }

    .settings-profile-side-column {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .settings-clinic-card {
        padding: 18px;
    }

    .settings-clinic-info-main,
    .settings-clinic-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-clinic-info-main img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .settings-branch-hours-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-clinic-stats-list p {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }

    .settings-clinic-stats-list em {
        grid-column: 2 / -1;
    }

    .settings-profile-form-card,
    .settings-profile-summary-card,
    .settings-profile-preferences-card {
        padding: 18px;
    }

    .settings-profile-fields,
    .settings-profile-wide-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-profile-summary-header {
        align-items: flex-start;
        gap: 16px;
        padding-inline: 0;
    }

    .settings-profile-summary-header img {
        width: 76px;
        height: 76px;
    }
}

.global-shell :is(
    .page-header,
    [class$="-page-header"],
    [class*="-page-header"],
    .calendar-title-row,
    .reminder-title-row,
    .invoice-title-row,
    .settings-title-row
) > div:first-child,
.global-shell :is(
    .page-header,
    [class$="-page-header"],
    [class*="-page-header"],
    .calendar-title-row,
    .reminder-title-row,
    .invoice-title-row,
    .settings-title-row
) > :is(.eyebrow, h1, p) {
    display: none !important;
}

.global-shell :is(
    .page-header,
    [class$="-page-header"],
    [class*="-page-header"],
    .calendar-title-row,
    .reminder-title-row,
    .invoice-title-row,
    .settings-title-row
) {
    justify-content: flex-end;
    min-height: 0;
}

@media (max-width: 1320px) {
    .documents-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .documents-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .documents-page {
        margin: 18px;
    }

    .documents-page-header {
        display: grid;
    }

    .documents-header-actions,
    .documents-header-actions .primary-button,
    .documents-header-actions .secondary-button {
        width: 100%;
    }

    .documents-kpi-grid,
    .documents-filter-bar {
        grid-template-columns: 1fr;
    }

    .documents-storage-card {
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .documents-page {
        gap: 16px;
        margin-inline: 12px;
    }

    .documents-page-header h1 {
        font-size: 28px;
    }

    .documents-kpi-card,
    .documents-table-card,
    .documents-storage-card {
        border-radius: 14px;
    }

    .documents-filter-bar {
        padding: 12px;
    }

    .documents-date-range {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .documents-date-range span {
        display: none;
    }

    .documents-date-range input {
        width: 100%;
    }

    .documents-table-footer,
    .documents-storage-card {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .documents-table-footer {
        display: grid;
    }

    .documents-pagination {
        justify-content: start;
    }
}

@media (max-width: 1320px) {
    .message-workspace {
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    }

    .message-details-column {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reports-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reports-chart-grid,
    .reports-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .message-page,
    .reports-page {
        margin: 18px;
    }

    .reports-page {
        margin: 3px;
    }

    .message-page-header,
    .reports-page-header {
        display: grid;
    }

    .message-header-actions,
    .reports-header-actions,
    .message-header-actions .primary-button,
    .message-header-actions .secondary-button,
    .reports-header-actions .primary-button,
    .reports-header-actions .secondary-button {
        width: 100%;
    }

    .message-workspace,
    .message-details-column,
    .reports-kpi-grid,
    .reports-chart-grid,
    .reports-outcome-wrap {
        grid-template-columns: 1fr;
    }

    .message-chat-card {
        grid-template-rows: auto minmax(360px, 1fr) auto;
    }

    .message-bubble,
    .message-bubble.attachment {
        max-width: 88%;
        width: auto;
    }

    .reports-date-range {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .message-page,
    .reports-page {
        gap: 16px;
        margin-inline: 12px;
    }

    .reports-page {
        margin: 3px;
    }

    .message-page-header h1,
    .reports-page-header h1 {
        font-size: 28px;
    }

    .message-thread-row {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .message-thread-meta {
        grid-column: 2;
        justify-items: start;
    }

    .message-chat-header,
    .message-list-footer,
    .reports-table-footer {
        align-items: flex-start;
        display: grid;
    }

    .message-chat-actions {
        width: 100%;
    }

    .message-compose {
        grid-template-columns: 38px minmax(0, 1fr) 38px 44px;
        padding: 10px;
    }

    .message-compose button {
        height: 38px;
        width: 38px;
    }

    .message-compose .message-send-button {
        height: 44px;
        width: 44px;
    }

    .reports-kpi-card,
    .reports-chart-card,
    .reports-side-card,
    .reports-info-bar {
        border-radius: 14px;
    }

    .reports-date-range {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .reports-date-range span {
        display: none;
    }

    .reports-date-range input {
        width: 100%;
    }

    .reports-info-bar span {
        align-items: flex-start;
    }
}

@media (max-width: 1320px) {
    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-cta,
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assessment-kpi-grid,
    .appointment-kpi-grid,
    .patient-kpi-grid,
    .treatment-kpi-grid,
    .exercise-kpi-grid,
    .prescribed-kpi-grid,
    .log-kpi-grid,
    .follow-kpi-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .assessment-filter-bar,
    .appointment-filter-bar,
    .patient-filter-bar,
    .treatment-filter-bar,
    .exercise-filter-bar,
    .prescribed-filter-bar,
    .log-filter-bar,
    .follow-filter-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .assessment-filter-bar {
        grid-template-columns: auto minmax(180px, 1fr) 104px 104px 104px 104px auto auto;
    }

    .appointment-filter-bar {
        grid-template-columns: 190px minmax(180px, 1fr) 108px 108px 150px auto auto;
    }
}

@media (max-width: 1200px) {
    .public-nav {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-block: 18px;
    }

    .public-links,
    .public-actions {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .public-links a {
        padding: 8px 0 12px;
        white-space: nowrap;
    }

    .public-links a.active::after,
    .public-links a:hover::after {
        bottom: 3px;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 48px;
    }

    .landing-hero-copy {
        max-width: 760px;
        padding-bottom: 42px;
    }

    .landing-hero-visual {
        min-height: 520px;
    }

    .hero-feature-list,
    .landing-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-clinic-section {
        grid-template-columns: 1fr;
    }

    .global-shell {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .global-shell .nav-link {
        font-size: 15px;
    }

    .stats-grid,
    .stats-grid.six,
    .stats-grid.five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-grid,
    .content-grid.equal {
        grid-template-columns: 1fr;
    }

    .actions-grid,
    .actions-grid.four,
    .actions-grid.five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .assessment-workspace,
    .appointment-workspace,
    .treatment-workspace,
    .exercise-workspace,
    .prescribed-layout,
    .log-workspace,
    .follow-workspace {
        grid-template-columns: 1fr;
    }

    .assessment-side-column,
    .appointment-side-column,
    .treatment-side-column,
    .exercise-side-column,
    .prescribed-side-column,
    .log-side-column,
    .follow-side-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .doctor-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .doctor-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .assessment-side-column,
    .appointment-side-column,
    .treatment-side-column,
    .exercise-side-column,
    .prescribed-side-column,
    .log-side-column,
    .follow-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .public-actions,
    .landing-buttons,
    .cta-main {
        align-items: stretch;
        flex-direction: column;
    }

    .service-grid,
    .landing-cta,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .landing-section,
    .about-clinic-section {
        width: min(100% - 32px, 1460px);
    }

    .landing-stats,
    .public-footer,
    .landing-cta {
        width: min(100% - 24px, 1500px);
    }

    .global-shell {
        display: block;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        display: flex;
        width: min(84vw, 300px);
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 38px rgba(7, 22, 56, .22);
    }

    body.sidebar-open .sidebar,
    body.sidebar-open .global-shell .sidebar {
        transform: translateX(0) !important;
    }

    body.sidebar-open::after {
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(7, 22, 56, .32);
        content: "";
    }

    .main-panel {
        padding: 16px;
    }

    .mobile-menu {
        display: grid;
    }

    .global-shell .mobile-menu {
        display: grid;
    }

    .global-shell .topbar-page-title {
        display: none;
    }

    .search-box {
        display: none;
    }

    .topbar {
        justify-content: space-between;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .global-shell .topbar {
        padding: 12px 16px;
    }

    .global-shell .main-panel {
        padding: 0;
    }

    .doctor-welcome,
    .doctor-kpi-grid,
    .doctor-action-row,
    .doctor-dashboard-grid {
        margin-inline: 16px;
    }

    .doctor-welcome {
        display: grid;
    }

    .doctor-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patients-overview {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        display: grid;
        padding: 20px;
    }

    .hero-summary {
        min-width: 0;
    }

    .back-link {
        position: static;
        justify-self: start;
        margin-bottom: 14px;
    }

    .page-header,
    .appointment-detail {
        display: grid;
    }

    .page-header {
        padding: 18px;
    }

    .page-header > a,
    .page-header > button {
        justify-self: start;
    }

    .schedule-row,
    .queue-row,
    .appointment-row {
        grid-template-columns: 1fr;
    }

    .calendar-grid,
    .filters-grid,
    .form-grid,
    .detail-grid,
    .summary-grid,
    .note-grid {
        grid-template-columns: 1fr;
    }

    .form-actions,
    .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .primary-button,
    .form-actions .secondary-button,
    .button-row .primary-button,
    .button-row .secondary-button {
        width: 100%;
    }

    .assessment-page,
    .appointment-page,
    .patient-page,
    .treatment-page,
    .exercise-page,
    .prescribed-page,
    .log-page,
    .follow-page {
        margin-inline: 16px;
    }

    .assessment-page-header,
    .assessment-table-footer,
    .assessment-info-bar,
    .appointment-page-header,
    .appointment-table-footer,
    .patient-page-header,
    .patient-table-footer,
    .treatment-page-header,
    .treatment-table-footer,
    .treatment-info-bar,
    .exercise-page-header,
    .exercise-table-footer,
    .exercise-info-bar,
    .prescribed-page-header,
    .prescribed-table-footer,
    .prescribed-info-bar,
    .log-page-header,
    .log-table-footer,
    .log-info-bar,
    .follow-page-header,
    .follow-table-footer,
    .follow-info-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .assessment-header-actions,
    .appointment-header-actions,
    .patient-header-actions,
    .treatment-header-actions,
    .exercise-header-actions,
    .prescribed-header-actions,
    .log-header-actions,
    .follow-header-actions {
        justify-content: flex-start;
    }

    .assessment-kpi-grid,
    .appointment-kpi-grid,
    .patient-kpi-grid,
    .treatment-kpi-grid,
    .exercise-kpi-grid,
    .prescribed-kpi-grid,
    .log-kpi-grid,
    .follow-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assessment-filter-bar,
    .appointment-filter-bar,
    .patient-filter-bar,
    .treatment-filter-bar,
    .exercise-filter-bar,
    .prescribed-filter-bar,
    .log-filter-bar,
    .follow-filter-bar {
        grid-template-columns: 1fr;
    }

    .assessment-filter-bar .secondary-button,
    .assessment-filter-bar .assessment-new-action,
    .assessment-clear-link,
    .appointment-filter-bar .secondary-button,
    .appointment-clear-link,
    .patient-filter-bar .primary-button,
    .patient-clear-link,
    .treatment-filter-bar .secondary-button,
    .treatment-clear-link,
    .exercise-filter-bar .secondary-button,
    .exercise-clear-link,
    .prescribed-filter-bar .secondary-button,
    .prescribed-clear-link,
    .log-filter-bar .secondary-button,
    .log-clear-link,
    .follow-new-inline-button,
    .follow-filter-bar .secondary-button,
    .follow-clear-link {
        width: 100%;
    }

    .assessment-side-column,
    .appointment-side-column,
    .treatment-side-column,
    .exercise-side-column,
    .prescribed-side-column,
    .log-side-column,
    .follow-side-column {
        grid-template-columns: 1fr;
    }

    .assessment-pagination,
    .appointment-pagination,
    .patient-pagination,
    .treatment-pagination,
    .exercise-pagination,
    .prescribed-pagination,
    .log-pagination,
    .follow-pagination {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .public-brand strong {
        font-size: 20px;
    }

    .landing-hero h1 {
        font-size: 40px;
    }

    .hero-feature-list,
    .landing-stats,
    .doctor-kpi-grid {
        grid-template-columns: 1fr;
    }

    .landing-stats div {
        min-height: 132px;
    }

    .landing-hero-visual {
        min-height: 360px;
    }

    .doctor-illustration {
        right: -16%;
        width: 92%;
        height: 380px;
        transform: scale(.78);
        transform-origin: bottom right;
    }

    .clinic-bed,
    .clinic-chart {
        display: none;
    }

    .footer-bottom {
        display: grid;
    }

    .doctor-list-row,
    .doctor-list.compact .doctor-list-row,
    .note-row-modern {
        grid-template-columns: 42px minmax(0, 1fr) !important;
    }

    .doctor-list-row time,
    .doctor-list-row .status-badge {
        grid-column: 2;
        justify-self: start;
    }

    .date-pill span {
        display: none;
    }

    .stats-grid,
    .stats-grid.six,
    .stats-grid.five,
    .actions-grid,
    .actions-grid.four,
    .actions-grid.five,
    .patient-card-grid {
        grid-template-columns: 1fr;
    }

    .user-chip {
        display: none;
    }

    .topbar-actions {
        gap: 8px;
    }

    .notification-button,
    .doctor-avatar,
    .date-pill,
    .icon-button {
        width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .doctor-avatar span {
        width: 34px;
        height: 34px;
    }

    .panel,
    .doctor-panel {
        padding: 15px;
    }

    .responsive-table {
        margin-inline: -2px;
    }

    .schedule-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .status-badge {
        justify-self: start;
    }

    .assessment-page,
    .appointment-page,
    .patient-page,
    .treatment-page,
    .exercise-page,
    .prescribed-page,
    .log-page,
    .follow-page {
        gap: 16px;
        margin-inline: 12px;
    }

    .assessment-page-header h1,
    .appointment-page-header h1,
    .patient-page-header h1,
    .treatment-page-header h1,
    .exercise-page-header h1,
    .prescribed-page-header h1,
    .log-page-header h1,
    .follow-page-header h1 {
        font-size: 28px;
    }

    .assessment-header-actions,
    .assessment-header-actions .primary-button,
    .assessment-header-actions .secondary-button,
    .appointment-header-actions,
    .appointment-header-actions .primary-button,
    .appointment-header-actions .secondary-button,
    .patient-header-actions,
    .patient-header-actions .primary-button,
    .patient-header-actions .secondary-button,
    .treatment-header-actions,
    .treatment-header-actions .primary-button,
    .treatment-header-actions .secondary-button,
    .exercise-header-actions,
    .exercise-header-actions .primary-button,
    .exercise-header-actions .secondary-button,
    .prescribed-header-actions,
    .prescribed-header-actions .primary-button,
    .prescribed-header-actions .secondary-button,
    .log-header-actions,
    .log-header-actions .secondary-button,
    .follow-header-actions,
    .follow-header-actions .primary-button,
    .follow-header-actions .secondary-button {
        width: 100%;
    }

    .assessment-kpi-grid,
    .appointment-kpi-grid,
    .patient-kpi-grid,
    .treatment-kpi-grid,
    .exercise-kpi-grid,
    .prescribed-kpi-grid,
    .log-kpi-grid,
    .follow-kpi-grid {
        grid-template-columns: 1fr;
    }

    .assessment-kpi-card,
    .appointment-kpi-card,
    .patient-kpi-card,
    .treatment-kpi-card,
    .exercise-kpi-card,
    .prescribed-kpi-card,
    .log-kpi-card,
    .follow-kpi-card {
        min-height: 104px;
        padding: 15px;
    }

    .assessment-table-card,
    .assessment-side-card,
    .assessment-info-bar,
    .appointment-table-card,
    .appointment-side-card,
    .patient-table-card,
    .treatment-table-card,
    .treatment-side-card,
    .treatment-info-bar,
    .exercise-table-card,
    .exercise-side-card,
    .exercise-info-bar,
    .prescribed-table-card,
    .prescribed-side-card,
    .prescribed-info-bar,
    .log-table-card,
    .log-side-card,
    .log-info-bar,
    .follow-table-card,
    .follow-side-card,
    .follow-info-bar {
        border-radius: 14px;
    }

    .assessment-filter-bar,
    .appointment-filter-bar,
    .patient-filter-bar,
    .treatment-filter-bar,
    .exercise-filter-bar,
    .prescribed-filter-bar,
    .log-filter-bar,
    .follow-filter-bar {
        padding: 12px;
    }

    .assessment-table-footer,
    .appointment-table-footer,
    .patient-table-footer,
    .treatment-table-footer,
    .exercise-table-footer,
    .prescribed-table-footer,
    .log-table-footer,
    .follow-table-footer {
        padding: 12px;
    }

    .assessment-pagination a,
    .assessment-pagination span,
    .appointment-pagination a,
    .appointment-pagination span,
    .patient-pagination a,
    .patient-pagination span,
    .treatment-pagination a,
    .treatment-pagination span,
    .exercise-pagination a,
    .exercise-pagination span,
    .prescribed-pagination a,
    .prescribed-pagination span,
    .log-pagination a,
    .log-pagination span,
    .follow-pagination a,
    .follow-pagination span {
        min-width: 34px;
        height: 34px;
    }

    .assessment-info-bar span,
    .treatment-info-bar span,
    .exercise-info-bar span,
    .prescribed-info-bar span,
    .log-info-bar span,
    .follow-info-bar span {
        align-items: flex-start;
    }

    .appointment-tabs a {
        min-height: 50px;
        padding-inline: 14px;
    }

    .appointment-mini-calendar {
        gap: 6px 4px;
    }

    .birthday-card {
        grid-template-columns: 48px 1fr;
    }

    .birthday-card a {
        grid-column: 2;
    }

    .placeholder-card {
        padding: 26px;
    }
}

@media (max-width: 1180px) {
    .document-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .consent-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .patient-messages-dashboard {
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    }

    .patient-message-info-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .patient-documents-dashboard {
        padding: 16px;
    }

    .document-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-toolbar,
    .document-toolbar-actions,
    .document-filter-controls,
    .document-filter-controls label,
    .document-search,
    .document-search input,
    .document-filter-controls select {
        width: 100%;
    }

    .document-toolbar-actions .primary-button,
    .document-toolbar-actions .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .document-bottom-actions {
        grid-template-columns: 1fr;
    }

    .patient-consents-dashboard {
        padding: 16px;
    }

    .consent-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consent-filter-bar,
    .consent-filter-controls,
    .consent-filter-controls label,
    .consent-search,
    .consent-search input,
    .consent-filter-controls select {
        width: 100%;
    }

    .consent-status-filters {
        width: 100%;
    }

    .consent-status-filters button {
        flex: 1 1 140px;
    }

    .consent-bottom-actions {
        grid-template-columns: 1fr;
    }

    .patient-messages-dashboard {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .patient-chat-thread {
        min-height: 620px;
    }

    .patient-chat-message {
        max-width: 88%;
    }

    .patient-message-info-card dl div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

@media (max-width: 640px) {
    .document-summary-grid {
        grid-template-columns: 1fr;
    }

    .document-table {
        min-width: 0;
    }

    .document-table thead {
        display: none;
    }

    .document-table,
    .document-table tbody,
    .document-table tr,
    .document-table td {
        display: block;
        width: 100%;
    }

    .document-table tr {
        padding: 14px;
        border-bottom: 1px solid #e8eef6;
    }

    .document-table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 0;
        text-align: right;
    }

    .document-table td::before {
        content: attr(data-label);
        flex: none;
        color: #52617c;
        text-align: left;
        font-size: 12px;
        font-weight: 900;
    }

    .document-table td:first-child {
        display: block;
        text-align: left;
    }

    .document-table td:first-child::before {
        display: none;
    }

    .document-name-cell,
    .document-uploader {
        justify-content: flex-start;
        text-align: left;
    }

    .document-row-actions {
        justify-content: flex-end;
    }

    .document-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .consent-summary-grid {
        grid-template-columns: 1fr;
    }

    .consent-table {
        min-width: 0;
    }

    .consent-table thead {
        display: none;
    }

    .consent-table,
    .consent-table tbody,
    .consent-table tr,
    .consent-table td {
        display: block;
        width: 100%;
    }

    .consent-table tr {
        padding: 14px;
        border-bottom: 1px solid #e8eef6;
    }

    .consent-table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 0;
        text-align: right;
    }

    .consent-table td::before {
        content: attr(data-label);
        flex: none;
        color: #52617c;
        text-align: left;
        font-size: 12px;
        font-weight: 900;
    }

    .consent-table td:first-child {
        display: block;
        text-align: left;
    }

    .consent-table td:first-child::before {
        display: none;
    }

    .consent-name-cell {
        min-width: 0;
    }

    .consent-row-actions {
        justify-content: flex-end;
    }

    .consent-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-message-conversations > header,
    .patient-chat-header,
    .patient-message-info-card > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-chat-actions {
        width: 100%;
    }

    .patient-chat-actions > button,
    .patient-chat-more,
    .patient-chat-more summary {
        flex: 1;
    }

    .patient-chat-body {
        padding: 16px;
    }

    .patient-chat-message {
        max-width: 100%;
    }

    .patient-chat-composer {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
    }

    .patient-chat-composer button[type="submit"] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.treatment-note-create-panel {
    padding-bottom: 0;
}

.treatment-note-create-page {
    display: grid;
    gap: 22px;
    margin: 22px 28px 0;
    min-width: 0;
}

.treatment-note-create-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.treatment-note-create-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #eaf4ff;
    color: #075de8;
}

.treatment-note-create-header h1 {
    margin: 0;
    color: #071638;
    font-size: 27px;
    line-height: 1.12;
}

.treatment-note-create-header p {
    margin: 7px 0 0;
    color: #52617c;
    font-size: 14px;
    font-weight: 650;
}

.treatment-note-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    min-width: 0;
    padding-bottom: 86px;
}

.treatment-note-form-column,
.treatment-note-side-column {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.treatment-note-card,
.treatment-note-side-card {
    border: 1px solid #dce7f2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(14, 42, 82, .055);
}

.treatment-note-card {
    padding: 18px 20px;
}

.treatment-note-card > header,
.treatment-note-side-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.treatment-note-card h2,
.treatment-note-side-card h2 {
    margin: 0;
    color: #071638;
    font-size: 16px;
    line-height: 1.2;
}

.card-title-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
}

.card-title-icon.tone-blue { background: #eaf4ff; color: #075de8; }
.card-title-icon.tone-green { background: #dcf8e7; color: #11a058; }
.card-title-icon.tone-purple { background: #f0e4ff; color: #8238e8; }
.card-title-icon.tone-orange { background: #fff0d9; color: #ff8a00; }

.session-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    margin-top: 18px;
}

.tn-field {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.tn-field span,
.tn-slider-field label {
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.tn-field b {
    color: #ef1c2d;
}

.tn-field input,
.tn-field select {
    width: 100%;
    height: 42px;
    border: 1px solid #cfddea;
    border-radius: 8px;
    background: #ffffff;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    outline: none;
    padding: 0 13px;
}

.tn-field select {
    appearance: none;
    padding-right: 34px;
}

.tn-field::after {
    position: absolute;
    right: 13px;
    bottom: 16px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #56709c;
    border-bottom: 2px solid #56709c;
    content: "";
    transform: rotate(45deg);
    pointer-events: none;
}

.tn-field.has-icon::after {
    display: none;
}

.tn-field.has-icon svg {
    position: absolute;
    right: 13px;
    bottom: 13px;
    color: #56709c;
}

.tn-field.has-icon input {
    padding-right: 40px;
}

.tn-field input:focus,
.tn-field select:focus,
.rich-note-editor textarea:focus {
    border-color: #69a8ff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .1);
}

.tn-field small {
    color: #d21f3c;
    font-size: 12px;
    font-weight: 750;
}

.tn-slider-field {
    display: grid;
    gap: 9px;
}

.tn-slider-field > div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 22px 68px;
    align-items: center;
    gap: 12px;
    color: #263a63;
    font-size: 12px;
    font-weight: 800;
}

.tn-slider-field input[type="range"] {
    width: 100%;
    accent-color: #0d6efd;
}

.tn-slider-field output {
    display: grid;
    place-items: center;
    height: 34px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    color: #52617c;
    font-size: 14px;
    font-weight: 900;
}

.status-field {
    max-width: 320px;
}

.status-field select {
    padding-left: 36px;
}

.status-field::before {
    position: absolute;
    left: 14px;
    bottom: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c56f;
    content: "";
}

.soap-note-card {
    display: grid;
    grid-template-columns: minmax(220px, .58fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.soap-note-card aside {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.soap-note-card p {
    margin: 6px 0 0;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.rich-note-editor {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    background: #ffffff;
}

.rich-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #e8eef6;
    background: #fbfdff;
}

.rich-toolbar button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #294574;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.rich-toolbar button:hover {
    background: #edf5ff;
    color: #0d6efd;
}

.rich-note-editor textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 0;
    color: #071638;
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
    outline: 0;
    padding: 14px 14px 28px;
}

.character-count {
    position: absolute;
    right: 13px;
    bottom: 10px;
    color: #52617c;
    font-size: 12px;
    font-weight: 750;
}

.treatment-note-side-card {
    padding: 18px 20px;
}

.patient-summary-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eef6;
}

.patient-summary-top > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: #eaf4ff;
    color: #075de8;
    font-size: 18px;
    font-weight: 950;
}

.patient-summary-top strong {
    display: block;
    color: #071638;
    font-size: 18px;
    font-weight: 950;
}

.patient-summary-top small {
    display: block;
    margin-top: 7px;
    color: #263a63;
    font-size: 12px;
    font-weight: 750;
}

.patient-summary-card section {
    margin-top: 16px;
}

.treatment-note-side-card h3 {
    margin: 0 0 16px;
    color: #071638;
    font-size: 13px;
}

.treatment-note-side-card dl {
    display: grid;
    gap: 16px;
    margin: 0;
}

.treatment-note-side-card dl div {
    display: grid;
    grid-template-columns: minmax(118px, .8fr) minmax(0, 1fr);
    gap: 12px;
}

.treatment-note-side-card dt,
.treatment-note-side-card dd {
    margin: 0;
    color: #263a63;
    font-size: 12px;
    font-weight: 850;
}

.treatment-note-side-card dd {
    color: #071638;
    font-weight: 850;
}

.tn-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.tn-status-pill.active {
    background: #d8f4e5;
    color: #0e9f56;
}

.recent-notes-card header {
    justify-content: space-between;
}

.recent-notes-card header a,
.shortcuts-card a,
.recent-notes-card > a {
    color: #075de8;
    text-decoration: none;
}

.recent-notes-card > a,
.shortcuts-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 11px 0;
    border-bottom: 1px solid #e8eef6;
}

.recent-notes-card > a:last-child,
.shortcuts-card a:last-child {
    border-bottom: 0;
}

.recent-notes-card strong {
    color: #263a63;
    font-size: 12px;
}

.recent-notes-card small {
    display: block;
    margin-top: 5px;
    color: #52617c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.shortcuts-card {
    display: grid;
    gap: 8px;
}

.shortcuts-card a {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    color: #071638;
    font-size: 13px;
    font-weight: 850;
}

.shortcuts-card a span {
    flex: 1;
}

.shortcuts-card a svg {
    color: #0d6efd;
}

.treatment-note-secure {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 12px;
    background: #edf5ff;
    color: #071638;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.treatment-note-secure svg {
    flex: none;
    color: #0d6efd;
}

.treatment-note-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 -28px;
    padding: 18px 32px;
    border-top: 1px solid #dce7f2;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -14px 32px rgba(14, 42, 82, .08);
    backdrop-filter: blur(10px);
}

.treatment-note-action-bar > div {
    display: flex;
    gap: 14px;
}

.treatment-note-action-bar .secondary-button,
.treatment-note-action-bar .primary-button {
    min-width: 116px;
    justify-content: center;
}

.treatment-note-action-bar .draft-button {
    border-color: #dbe8f7;
    background: #eef5ff;
    color: #075de8;
}

@media (max-width: 1180px) {
    .treatment-note-create-layout {
        grid-template-columns: 1fr;
    }

    .treatment-note-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .treatment-note-secure {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .treatment-note-create-page {
        margin: 18px 16px 0;
    }

    .session-fields-grid,
    .treatment-note-side-column {
        grid-template-columns: 1fr;
    }

    .soap-note-card {
        grid-template-columns: 1fr;
    }

    .treatment-note-action-bar {
        align-items: stretch;
        flex-direction: column;
        margin-inline: -16px;
    }

    .treatment-note-action-bar > div {
        flex-direction: column;
    }

    .treatment-note-action-bar .secondary-button,
    .treatment-note-action-bar .primary-button {
        width: 100%;
    }
}

.new-appointment-panel {
    padding-bottom: 0;
}

.new-appointment-page {
    display: grid;
    gap: 8px;
    margin: 6px 28px 0;
    min-width: 0;
}

.new-appointment-header {
    display: grid;
    gap: 8px;
}

.new-appointment-header .topbar-back-link {
    width: fit-content;
}

.new-appointment-header .topbar-back-link svg {
    transform: rotate(180deg);
}

.new-appointment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 24px;
    min-width: 0;
    padding-bottom: 92px;
}

.new-appointment-main {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.new-appointment-card,
.new-appointment-summary-card {
    border: 1px solid #dce7f2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(14, 42, 82, .055);
}

.new-appointment-card {
    padding: 20px;
}

.new-appointment-card > header,
.appointment-subsection > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-appointment-card h2,
.new-appointment-summary-card h2,
.appointment-subsection h3 {
    margin: 0;
    color: #071638;
    font-size: 17px;
    line-height: 1.2;
}

.new-appointment-section-icon,
.appointment-subsection header span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: #eaf4ff;
    color: #075de8;
}

.appointment-field {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.appointment-field.full {
    margin-top: 18px;
}

.patient-select-card .appointment-field.full {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
}

.patient-select-card .appointment-field.full small {
    grid-column: 2;
}

.appointment-field span,
.appointment-visit-type > span,
.appointment-pain-field > label {
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.appointment-field b {
    color: #ef1c2d;
}

.appointment-field input,
.appointment-field select,
.appointment-field textarea {
    width: 100%;
    border: 1px solid #cfddea;
    border-radius: 8px;
    background: #ffffff;
    color: #071638;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.appointment-field input,
.appointment-field select {
    height: 42px;
    padding: 0 13px;
}

.appointment-field select {
    appearance: none;
    padding-right: 36px;
}

.appointment-field::after {
    position: absolute;
    right: 13px;
    bottom: 16px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #56709c;
    border-bottom: 2px solid #56709c;
    content: "";
    transform: rotate(45deg);
    pointer-events: none;
}

.appointment-field.has-icon::after,
.appointment-field.text-area-field::after {
    display: none;
}

.appointment-field.has-icon svg {
    position: absolute;
    right: 13px;
    bottom: 13px;
    color: #56709c;
}

.appointment-field.has-icon input {
    padding-right: 40px;
}

.appointment-field textarea {
    min-height: 58px;
    resize: vertical;
    padding: 13px;
    line-height: 1.5;
}

.appointment-field input[readonly] {
    background: #f5f7fb;
    color: #61708c;
}

.appointment-field input:focus,
.appointment-field select:focus,
.appointment-field textarea:focus {
    border-color: #69a8ff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .1);
}

.appointment-field small {
    color: #d21f3c;
    font-size: 12px;
    font-weight: 750;
}

.selected-appointment-patient {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #fbfdff;
}

.selected-appointment-patient > span,
.appointment-summary-top > span {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    flex: none;
    border-radius: 50%;
    background: #eaf4ff;
    color: #075de8;
    font-size: 15px;
    font-weight: 950;
}

.selected-appointment-patient strong,
.appointment-summary-top strong {
    display: block;
    color: #071638;
    font-size: 14px;
    font-weight: 950;
}

.selected-appointment-patient small,
.appointment-summary-top small {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #263a63;
    font-size: 12px;
    font-weight: 750;
}

.selected-appointment-patient em {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #263a63;
}

.selected-appointment-patient button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #7b8cab;
}

.appointment-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
    margin-top: 18px;
}

.appointment-field.wide {
    grid-column: span 2;
}

.appointment-visit-type {
    display: grid;
    gap: 8px;
    grid-column: span 2;
}

.appointment-visit-type > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.appointment-visit-type label {
    display: grid;
    place-items: center;
    height: 42px;
    border: 1px solid #cfddea;
    border-radius: 8px;
    background: #ffffff;
    color: #071638;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
}

.appointment-visit-type label.active,
.appointment-visit-type label:has(input:checked) {
    border-color: #0d6efd;
    background: #eef5ff;
    color: #075de8;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .12);
}

.appointment-visit-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-details-card .status-field::before {
    left: 16px;
    bottom: 16px;
}

.appointment-details-card .status-field select {
    padding-left: 42px;
}

.appointment-subsection {
    margin: 18px -20px -20px;
    padding: 18px 20px 20px;
    border-top: 1px solid #e8eef6;
}

.reason-grid,
.additional-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 24px;
    margin-top: 18px;
}

.appointment-pain-field {
    display: grid;
    align-content: start;
    gap: 12px;
}

.appointment-pain-field > div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 22px 86px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    color: #071638;
    font-size: 12px;
    font-weight: 900;
}

.appointment-pain-field input[type="range"] {
    width: 100%;
    accent-color: #0d6efd;
}

.appointment-pain-field output {
    display: grid;
    place-items: center;
    height: 42px;
    border: 1px solid #dce7f2;
    border-radius: 8px;
    background: #ffffff;
    color: #52617c;
    font-size: 14px;
    font-weight: 950;
}

.additional-info-grid {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr) minmax(180px, .48fr);
}

.new-appointment-summary-card {
    align-self: start;
    padding: 22px 20px 20px;
}

.appointment-summary-top {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid #e8eef6;
}

.appointment-summary-top > span {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.appointment-summary-top strong {
    font-size: 18px;
}

.appointment-summary-top a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #075de8;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.new-appointment-summary-card dl {
    display: grid;
    gap: 19px;
    margin: 26px 0 0;
}

.new-appointment-summary-card dl div {
    display: grid;
    grid-template-columns: minmax(128px, .8fr) minmax(0, 1fr);
    gap: 14px;
}

.new-appointment-summary-card dt,
.new-appointment-summary-card dd {
    margin: 0;
    color: #263a63;
    font-size: 12px;
    font-weight: 900;
}

.new-appointment-summary-card dd {
    color: #071638;
}

.new-appointment-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    background: #d8f4e5;
    color: #0e9f56;
    font-size: 11px;
    font-weight: 950;
}

.new-appointment-required-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 14px;
    border: 1px solid #f4dd9d;
    border-radius: 8px;
    background: #fff5db;
    color: #7a4d00;
    font-size: 12px;
    font-weight: 800;
}

.new-appointment-required-note svg {
    flex: none;
    color: #f59e0b;
}

.new-appointment-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -10px -28px 0;
    padding: 18px 34px;
    border-top: 1px solid #dce7f2;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -14px 32px rgba(14, 42, 82, .08);
    backdrop-filter: blur(10px);
}

.new-appointment-action-bar > div {
    display: flex;
    gap: 18px;
}

.new-appointment-action-bar .secondary-button,
.new-appointment-action-bar .primary-button {
    min-width: 138px;
    justify-content: center;
}

.new-appointment-action-bar .primary-button {
    min-width: 210px;
}

.new-appointment-action-bar .draft-button {
    min-width: 172px;
}

@media (max-width: 1180px) {
    .new-appointment-layout {
        grid-template-columns: 1fr;
    }

    .new-appointment-summary-card {
        order: 2;
    }

    .new-appointment-action-bar {
        order: 3;
    }
}

@media (max-width: 1320px) {
    .appointment-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointment-field.wide {
        grid-column: auto;
    }

    .appointment-visit-type {
        grid-column: auto;
    }
}

@media (max-width: 860px) {
    .new-appointment-page {
        margin: 18px 16px 0;
    }

    .appointment-details-grid,
    .reason-grid,
    .additional-info-grid {
        grid-template-columns: 1fr;
    }

    .patient-select-card .appointment-field.full {
        grid-template-columns: 1fr;
    }

    .patient-select-card .appointment-field.full small {
        grid-column: auto;
    }

    .appointment-field.wide,
    .appointment-visit-type {
        grid-column: auto;
    }

    .new-appointment-action-bar {
        align-items: stretch;
        flex-direction: column;
        margin-inline: -16px;
    }

    .new-appointment-action-bar > div {
        flex-direction: column;
    }

    .new-appointment-action-bar .secondary-button,
    .new-appointment-action-bar .primary-button {
        width: 100%;
        min-width: 0;
    }
}

/* Settings Assessment Templates tab */
.settings-assessments-page {
    background: #f7fbff;
}

.settings-assessments-workspace {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
}

.settings-assessments-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-assessments-heading > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #f0e4ff;
    color: #8d34e6;
}

.settings-assessments-heading h1 {
    margin: 0 0 8px;
    color: #061b45;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0;
}

.settings-assessments-heading p {
    margin: 0;
    color: #29456e;
    font-size: 14px;
}

.settings-assessments-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.76fr);
    gap: 22px;
    align-items: start;
}

.settings-assessment-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.settings-template-list-card,
.settings-template-editor-card,
.settings-assessment-preferences {
    padding: 20px;
}

.settings-template-list-card > header,
.settings-template-editor-card > header,
.settings-template-sections > header,
.settings-assessment-preferences > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-template-list-card h2,
.settings-template-editor-card h2,
.settings-template-sections h3,
.settings-assessment-preferences h2 {
    margin: 0;
    color: #061b45;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
}

.settings-template-list-card p,
.settings-template-sections p {
    margin: 7px 0 0;
    color: #29456e;
    font-size: 13px;
}

.settings-template-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.settings-template-search {
    position: relative;
    width: 260px;
}

.settings-template-search input {
    width: 100%;
    min-height: 40px;
    padding: 0 40px 0 13px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    color: #061b45;
    font-size: 13px;
    font-weight: 750;
}

.settings-template-search svg {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #526b90;
    transform: translateY(-50%);
}

.settings-template-table-wrap {
    margin: 20px -20px 0;
    overflow-x: auto;
}

.settings-template-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.settings-template-table th,
.settings-template-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #e5edf7;
    text-align: left;
    vertical-align: middle;
}

.settings-template-table th {
    background: #f8fbff;
    color: #21385d;
    font-size: 13px;
    font-weight: 900;
}

.settings-template-row {
    cursor: pointer;
}

.settings-template-row:hover,
.settings-template-row.is-selected {
    background: #f5faff;
    box-shadow: inset 4px 0 0 #075fd7;
}

.settings-template-table td strong {
    color: #061b45;
    font-size: 14px;
}

.settings-template-table td span {
    display: block;
    max-width: 230px;
    color: #29456e;
    font-size: 13px;
    line-height: 1.45;
}

.settings-drag-handle {
    color: #6f86aa;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
}

.settings-template-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.settings-template-status.active {
    background: #dff8ea;
    color: #07833f;
}

.settings-template-status.inactive {
    background: #e9eef6;
    color: #52627a;
}

.settings-template-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.settings-template-row-actions button,
.settings-section-row button {
    display: inline-grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #cfe0f5;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    cursor: pointer;
}

.settings-template-row-actions svg,
.settings-section-row svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-template-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
}

.settings-template-footer p {
    margin: 0;
    color: #29456e;
    font-size: 13px;
}

.settings-template-footer nav {
    display: flex;
    gap: 8px;
}

.settings-template-footer button {
    display: inline-grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #d8e4f3;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-weight: 900;
}

.settings-template-footer button:first-child svg {
    transform: rotate(180deg);
}

.settings-template-footer button.active {
    border-color: #075fd7;
    background: #075fd7;
    color: #ffffff;
}

.settings-template-delete {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #e11d48;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.settings-template-form {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.settings-template-form label {
    display: grid;
    gap: 8px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-template-form b {
    color: #e11d48;
}

.settings-template-form input,
.settings-template-form textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    color: #061b45;
    font-size: 13px;
    font-weight: 700;
}

.settings-template-form textarea {
    min-height: 78px;
    padding-block: 10px;
    resize: vertical;
}

.settings-template-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-template-status-row strong,
.settings-template-status-row span {
    display: block;
    color: #061b45;
    font-weight: 900;
}

.settings-template-status-row small {
    display: block;
    margin-top: 7px;
    color: #526b90;
    font-size: 12px;
}

.settings-template-sections {
    margin-top: 28px;
}

.settings-template-sections > header button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #cfe0f5;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-size: 13px;
    font-weight: 900;
}

.settings-section-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.settings-section-row {
    display: grid;
    grid-template-columns: 24px 32px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e4edf7;
    border-radius: 7px;
    background: #fbfdff;
}

.settings-section-row em {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #eef3fa;
    color: #526b90;
    font-style: normal;
    font-weight: 900;
}

.settings-section-row strong,
.settings-section-row small {
    display: block;
}

.settings-section-row strong {
    color: #061b45;
    font-size: 13px;
}

.settings-section-row small {
    margin-top: 3px;
    color: #526b90;
    font-size: 12px;
}

.settings-section-row button {
    display: inline-flex;
    gap: 6px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
}

.settings-section-row button.danger {
    color: #e11d48;
}

.settings-template-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
}

.settings-template-actions .primary-button,
.settings-template-actions .secondary-button {
    min-width: 132px;
    justify-content: center;
}

.settings-assessment-preferences > header {
    justify-content: flex-start;
    margin-bottom: 20px;
}

.settings-assessment-preferences > header > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #f0e4ff;
    color: #8d34e6;
}

.settings-assessment-preference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 40px;
}

.settings-assessment-preference {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.settings-assessment-preference strong,
.settings-assessment-preference small {
    display: block;
}

.settings-assessment-preference strong {
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-assessment-preference small {
    margin-top: 5px;
    color: #526b90;
    font-size: 12px;
}

.settings-assessment-preference select {
    min-width: 180px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #061b45;
    font-size: 13px;
    font-weight: 750;
}

@media (max-width: 1280px) {
    .settings-assessments-grid,
    .settings-assessment-preference-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .settings-assessments-workspace {
        padding: 16px;
    }

    .settings-template-list-card > header,
    .settings-template-editor-card > header,
    .settings-template-sections > header,
    .settings-template-footer,
    .settings-template-actions,
    .settings-template-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-template-search,
    .settings-template-tools .primary-button,
    .settings-template-actions .primary-button,
    .settings-template-actions .secondary-button {
        width: 100%;
    }

    .settings-section-row,
    .settings-assessment-preference {
        grid-template-columns: 1fr;
    }
}

/* Settings Appointment tab */
.settings-appointment-page {
    background: #f7fbff;
}

.settings-appointment-workspace {
    padding: 4px;
}

.settings-appointment-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: 4px;
    align-items: start;
}

.settings-appointment-card {
    align-self: start;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.settings-appointment-main-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-items: start;
    gap: 4px;
    padding: 4px;
}

.settings-appointment-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5edf7;
}

.settings-appointment-heading > span,
.settings-appointment-section-title > span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-appointment-heading > span {
    width: 48px;
    height: 48px;
}

.settings-appointment-heading h1 {
    margin: 0 0 8px;
    color: #061b45;
    font-size: 24px;
    line-height: 1.15;
}

.settings-appointment-heading p,
.settings-appointment-section-title p {
    margin: 0;
    color: #29456e;
    font-size: 14px;
    line-height: 1.55;
}

.settings-appointment-section {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 4px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.settings-appointment-section-title {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.settings-appointment-section-title > span {
    width: 34px;
    height: 34px;
}

.settings-appointment-section-title h2 {
    margin: 0 0 3px;
    color: #075fd7;
    font-size: 15px;
    line-height: 1.2;
}

.settings-appointment-fields {
    display: grid;
    gap: 4px;
}

.settings-appointment-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, .72fr);
    align-items: center;
    gap: 4px;
}

.settings-appointment-field label:first-child strong,
.settings-appointment-field label:first-child small {
    display: block;
}

.settings-appointment-field strong {
    color: #061b45;
    font-size: 12px;
    font-weight: 900;
}

.settings-appointment-field small {
    margin-top: 2px;
    color: #29456e;
    font-size: 11px;
}

.settings-appointment-field select,
.settings-appointment-unit-field input,
.settings-booking-preview-box input,
.settings-appointment-dialog input,
.settings-appointment-dialog select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #061b45;
    font-size: 12px;
    font-weight: 750;
}

.settings-appointment-field select {
    padding: 0 10px;
}

.settings-appointment-unit-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
}

.settings-appointment-unit-field input {
    border: 0;
    border-radius: 0;
    padding: 0 10px;
}

.settings-appointment-unit-field em {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #061b45;
    font-style: normal;
    font-size: 12px;
}

.settings-appointment-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #075fd7;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-size: 12px;
    font-weight: 900;
}

.settings-appointment-checks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-appointment-checks label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #061b45;
    font-size: 12px;
    font-weight: 800;
}

.settings-appointment-checks input {
    width: 16px;
    height: 16px;
    accent-color: #075fd7;
}

.settings-appointment-save {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
    padding-top: 2px;
}

.settings-appointment-save .primary-button {
    min-width: 156px;
    justify-content: center;
}

.settings-appointment-side {
    display: grid;
    grid-auto-rows: max-content;
    align-items: start;
    gap: 4px;
}

.settings-booking-preview,
.settings-quick-actions,
.settings-appointment-help {
    padding: 4px;
}

.settings-booking-preview h2,
.settings-quick-actions h2,
.settings-appointment-help h2 {
    margin: 0 0 10px;
    color: #061b45;
    font-size: 16px;
}

.settings-booking-preview p,
.settings-appointment-help p {
    margin: 0 0 12px;
    color: #29456e;
    font-size: 12px;
}

.settings-booking-preview-box {
    padding: 4px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
}

.settings-booking-preview-box label,
.settings-booking-preview-box strong {
    display: block;
    margin-bottom: 10px;
    color: #061b45;
    font-size: 12px;
    font-weight: 900;
}

.settings-booking-preview-box label span {
    position: relative;
    display: block;
    margin-top: 6px;
}

.settings-booking-preview-box input {
    padding: 0 34px 0 10px;
}

.settings-booking-preview-box label svg {
    position: absolute;
    right: 12px;
    top: 50%;
    color: #526b90;
    transform: translateY(-50%);
}

.settings-booking-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.settings-booking-slots button {
    display: grid;
    place-items: center;
    gap: 1px;
    min-height: 32px;
    border: 1px solid #d6e2f1;
    border-radius: 6px;
    background: #ffffff;
    color: #061b45;
    font-size: 12px;
    font-weight: 800;
}

.settings-booking-slots button span,
.settings-booking-slots button small {
    display: block;
    line-height: 1.15;
}

.settings-booking-slots button small {
    color: #526b90;
    font-size: 10px;
}

.settings-booking-slots button small b {
    font-weight: 500;
}

.settings-booking-slots button.selected {
    border-color: #075fd7;
    background: #075fd7;
    color: #ffffff;
}

.settings-booking-slots button.selected small {
    color: #dcecff;
}

.settings-booking-summary {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    margin-top: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #eaf8f0;
    color: #07833f;
}

.settings-booking-summary strong {
    display: block;
    margin-bottom: 6px;
    color: #07833f;
    font-size: 12px;
}

.settings-booking-summary p {
    margin: 0;
    color: #1d4f38;
    font-size: 12px;
    line-height: 1.45;
}

.settings-quick-actions {
    display: grid;
    gap: 4px;
}

.settings-quick-actions button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 4px;
    min-height: 46px;
    padding: 6px;
    border: 1px solid #e5edf7;
    border-radius: 7px;
    background: #fbfdff;
    color: #061b45;
    text-align: left;
}

.settings-quick-actions button:hover,
.settings-quick-actions button:focus {
    border-color: #b8d4ff;
    background: #f3f8ff;
}

.settings-quick-actions button > span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 7px;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-quick-actions button > i {
    display: block;
    min-width: 0;
    font-style: normal;
}

.settings-quick-actions button > svg {
    color: #6d7f9e;
    justify-self: end;
}

.settings-quick-actions b,
.settings-quick-actions small {
    display: block;
}

.settings-quick-actions b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.settings-quick-actions small {
    margin-top: 2px;
    color: #29456e;
    font-size: 11px;
    line-height: 1.25;
}

.settings-appointment-help {
    background: linear-gradient(135deg, #f8fbff, #edf6ff);
}

.settings-appointment-dialog {
    width: min(620px, calc(100vw - 32px));
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(6, 27, 69, 0.18);
}

.settings-appointment-dialog::backdrop {
    background: rgba(6, 27, 69, 0.28);
}

.settings-appointment-dialog form {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.settings-appointment-dialog header,
.settings-appointment-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-appointment-dialog header button {
    border: 0;
    background: transparent;
    color: #526b90;
}

.settings-appointment-dialog h2 {
    margin: 0;
    color: #061b45;
    font-size: 18px;
}

.settings-appointment-dialog p {
    margin: 0;
    color: #29456e;
}

.settings-appointment-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-appointment-dialog label {
    display: grid;
    gap: 7px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 1300px) {
    .settings-appointment-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    }

    .settings-appointment-main-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .settings-appointment-workspace {
        padding: 16px;
    }

    .settings-appointment-section,
    .settings-appointment-field,
    .settings-appointment-dialog-grid {
        grid-template-columns: 1fr;
    }

    .settings-appointment-layout {
        grid-template-columns: 1fr;
    }

    .settings-booking-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-appointment-checks,
    .settings-appointment-save,
    .settings-appointment-dialog footer {
        justify-content: stretch;
    }

    .settings-appointment-save .primary-button,
    .settings-appointment-dialog footer .primary-button,
    .settings-appointment-dialog footer .secondary-button {
        width: 100%;
    }
}

.search-box,
.global-shell .search-box,
.global-shell .settings-main-panel .search-box,
.global-shell .patient-detail-main-panel .search-box,
.patient-search-field,
.assessment-search-field,
.appointment-search-field,
.treatment-search-field,
.exercise-search-field,
.prescribed-search-field,
.log-search-field,
.follow-search-field,
.documents-search-field,
.reminder-search-field,
.invoice-search-field,
.message-search-bar label,
.consent-search,
.document-search,
.appointment-search,
.patient-message-search {
    max-width: 240px;
}

.search-box input,
.global-shell .search-box input,
.patient-search-field input,
.assessment-search-field input,
.appointment-search-field input,
.treatment-search-field input,
.exercise-search-field input,
.prescribed-search-field input,
.log-search-field input,
.follow-search-field input,
.documents-search-field input,
.reminder-search-field input,
.invoice-search-field input,
.message-search-bar input,
.consent-search input,
.document-search input,
.appointment-search input,
.patient-message-search input {
    max-width: 240px;
}

@media (max-width: 640px) {
    .search-box,
    .patient-search-field,
    .assessment-search-field,
    .appointment-search-field,
    .treatment-search-field,
    .exercise-search-field,
    .prescribed-search-field,
    .log-search-field,
    .follow-search-field,
    .documents-search-field,
    .reminder-search-field,
    .invoice-search-field,
    .message-search-bar label,
    .consent-search,
    .document-search,
    .appointment-search,
    .patient-message-search,
    .search-box input,
    .patient-search-field input,
    .assessment-search-field input,
    .appointment-search-field input,
    .treatment-search-field input,
    .exercise-search-field input,
    .prescribed-search-field input,
    .log-search-field input,
    .follow-search-field input,
    .documents-search-field input,
    .reminder-search-field input,
    .invoice-search-field input,
    .message-search-bar input,
    .consent-search input,
    .document-search input,
    .appointment-search input,
    .patient-message-search input {
        max-width: 120px;
    }
}
/* Assessment read-only detail page */
.assessment-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #075fd7;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.assessment-detail-back svg {
    transform: rotate(180deg);
}

.assessment-detail-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 -28px -28px;
    color: #071b42;
}

.assessment-detail-patient-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 44px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-top: 1px solid #edf3fb;
    border-bottom: 1px solid #e5edf7;
}

.assessment-detail-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.assessment-detail-avatar {
    position: relative;
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e9f3ff;
    color: #075fd7;
    font-size: 26px;
    font-weight: 900;
}

.assessment-detail-avatar::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 3px;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #61c9a8;
}

.assessment-detail-identity h1 {
    margin: 0 0 8px;
    color: #061b45;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0;
}

.assessment-detail-identity p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin: 0;
    color: #061b45;
    font-size: 15px;
}

.assessment-detail-identity p span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 10px 3px 0;
    border-radius: 50%;
    background: #071b42;
}

.assessment-detail-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.assessment-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    border: 1px solid #d6e2f2;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.assessment-detail-button.ghost {
    background: #ffffff;
    color: #075fd7;
    box-shadow: 0 6px 18px rgba(7, 27, 66, 0.04);
}

.assessment-detail-button.primary {
    border-color: #075fd7;
    background: #075fd7;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(7, 95, 215, 0.22);
}

.assessment-detail-button.primary svg {
    transform: rotate(90deg);
}

.assessment-detail-menu {
    position: relative;
}

.assessment-detail-menu summary {
    list-style: none;
}

.assessment-detail-menu summary::-webkit-details-marker {
    display: none;
}

.assessment-detail-menu > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    width: 220px;
    padding: 8px;
    border: 1px solid #dbe6f3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(6, 27, 69, 0.14);
}

.assessment-detail-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: #17325c;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.assessment-detail-menu a:hover {
    background: #f4f8ff;
    color: #075fd7;
}

.assessment-detail-tabs {
    display: flex;
    align-items: center;
    gap: 34px;
    overflow-x: auto;
    padding: 0 44px;
    border-bottom: 1px solid #e5edf7;
    background: #ffffff;
}

.assessment-detail-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    color: #597095;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.assessment-detail-tabs a.active {
    color: #075fd7;
}

.assessment-detail-tabs a.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #075fd7;
}

.assessment-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    padding: 16px 16px 28px 28px;
    background: #f7fbff;
}

.assessment-detail-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.assessment-detail-card,
.assessment-patient-info-panel {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.assessment-detail-card {
    padding: 24px;
}

.assessment-detail-card-title,
.assessment-info-title,
.assessment-info-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.assessment-detail-card-title h2,
.assessment-info-title h2,
.assessment-info-section-title h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #061b45;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
}

.assessment-detail-card-title h2 svg {
    color: #075fd7;
}

.assessment-detail-card-title a,
.assessment-info-section-title a,
.assessment-clinical-summary a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #075fd7;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.assessment-detail-meta {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 0;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
}

.assessment-detail-meta > div {
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid #d9e4f2;
}

.assessment-detail-meta > div:last-child {
    border-right: 0;
}

.assessment-detail-meta span {
    display: block;
    margin-bottom: 9px;
    color: #65799b;
    font-size: 13px;
    font-weight: 800;
}

.assessment-detail-meta strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #071b42;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.assessment-detail-meta svg {
    color: #075fd7;
}

.assessment-detail-status,
.assessment-soap-row summary em,
.assessment-recent-card em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 13px;
    border-radius: 999px;
    background: #dff8ea;
    color: #07833f;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.assessment-clinical-summary {
    margin-top: 20px;
}

.assessment-clinical-summary h3 {
    margin: 0 0 12px;
    color: #061b45;
    font-size: 16px;
    letter-spacing: 0;
}

.assessment-clinical-summary p {
    margin: 0 0 13px;
    color: #2f456b;
    font-size: 14px;
    line-height: 1.65;
}

.assessment-clinical-summary a svg {
    transform: rotate(90deg);
}

.assessment-soap-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.assessment-soap-row {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.assessment-soap-row summary {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: 12px 20px 12px 16px;
    cursor: pointer;
    list-style: none;
}

.assessment-soap-row summary::-webkit-details-marker {
    display: none;
}

.assessment-soap-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    color: var(--soap-color);
    background: var(--soap-bg);
}

.assessment-soap-row.tone-blue {
    --soap-color: #075fd7;
    --soap-bg: #e6f1ff;
}

.assessment-soap-row.tone-green {
    --soap-color: #0f9b58;
    --soap-bg: #dcf8ea;
}

.assessment-soap-row.tone-purple {
    --soap-color: #8d34e6;
    --soap-bg: #f0e4ff;
}

.assessment-soap-row.tone-orange {
    --soap-color: #f07400;
    --soap-bg: #fff0dd;
}

.assessment-soap-copy {
    min-width: 0;
}

.assessment-soap-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #061b45;
    font-size: 16px;
    line-height: 1.25;
}

.assessment-soap-copy small {
    display: block;
    color: #52688c;
    font-size: 13px;
    line-height: 1.45;
}

.assessment-soap-chevron {
    color: #52688c;
    transition: transform 0.2s ease;
}

.assessment-soap-row[open] .assessment-soap-chevron {
    transform: rotate(90deg);
}

.assessment-soap-expanded {
    padding: 0 20px 20px 84px;
}

.assessment-soap-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.assessment-soap-field-grid > div {
    padding: 13px 14px;
    border: 1px solid #e2ebf6;
    border-radius: 8px;
    background: #fbfdff;
}

.assessment-soap-field-grid span,
.assessment-soap-table-wrap h3 {
    display: block;
    margin: 0 0 6px;
    color: #5c7194;
    font-size: 12px;
    font-weight: 850;
}

.assessment-soap-field-grid p {
    margin: 0;
    color: #102951;
    font-size: 14px;
    line-height: 1.5;
}

.assessment-soap-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
}

.assessment-soap-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e2ebf6;
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}

.assessment-soap-table th,
.assessment-soap-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e2ebf6;
    text-align: left;
}

.assessment-soap-table th {
    background: #f4f8ff;
    color: #4c6387;
    font-size: 12px;
    font-weight: 900;
}

.assessment-soap-table td {
    color: #102951;
}

.assessment-attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.assessment-attachment-tile {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    color: #061b45;
    text-decoration: none;
}

.assessment-attachment-tile > span {
    display: inline-grid;
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e6edf6;
    border-radius: 7px;
    color: #ff3030;
    background: #ffffff;
}

.assessment-attachment-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.assessment-attachment-tile strong {
    overflow: hidden;
    color: #061b45;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assessment-attachment-tile small {
    color: #52688c;
    font-size: 13px;
}

.assessment-patient-info-panel {
    align-self: start;
    overflow: hidden;
}

.assessment-info-title {
    padding: 22px;
    border-bottom: 1px solid #dfe8f4;
}

.assessment-info-title button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f6fc;
    color: #607697;
    cursor: pointer;
}

.assessment-info-section {
    padding: 24px 22px;
    border-bottom: 1px solid #edf2f8;
}

.assessment-info-section:last-child {
    border-bottom: 0;
}

.assessment-info-section-title {
    margin-bottom: 20px;
}

.assessment-info-section-title h3 {
    font-size: 14px;
}

.assessment-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.assessment-info-list div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
}

.assessment-info-list dt {
    color: #071b42;
    font-size: 14px;
    font-weight: 900;
}

.assessment-info-list dd {
    margin: 0;
    color: #122b54;
    font-size: 14px;
}

.assessment-recent-section {
    background: #ffffff;
}

.assessment-recent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
}

.assessment-recent-card:first-of-type {
    background: #eef6ff;
    border-color: #e1efff;
}

.assessment-recent-card span,
.assessment-recent-card small {
    display: block;
    color: #496184;
    font-size: 13px;
}

.assessment-recent-card strong {
    display: block;
    margin: 8px 0;
    color: #061b45;
    font-size: 14px;
    font-weight: 900;
}

@media (max-width: 1320px) {
    .assessment-detail-meta {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .assessment-detail-meta > div:nth-child(3n) {
        border-right: 0;
    }

    .assessment-detail-meta > div:nth-child(n + 4) {
        border-top: 1px solid #d9e4f2;
    }
}

@media (max-width: 1120px) {
    .assessment-detail-layout {
        grid-template-columns: 1fr;
        padding-right: 28px;
    }

    .assessment-patient-info-panel {
        align-self: stretch;
    }
}

@media (max-width: 820px) {
    .assessment-detail-page {
        margin: 0 -18px -18px;
    }

    .assessment-detail-patient-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .assessment-detail-actions {
        width: 100%;
        justify-content: stretch;
    }

    .assessment-detail-actions > a,
    .assessment-detail-menu,
    .assessment-detail-menu summary {
        width: 100%;
    }

    .assessment-detail-tabs {
        gap: 24px;
        padding: 0 20px;
    }

    .assessment-detail-layout {
        padding: 16px 16px 24px;
    }

    .assessment-detail-card {
        padding: 18px;
    }

    .assessment-detail-meta,
    .assessment-attachment-grid,
    .assessment-soap-field-grid {
        grid-template-columns: 1fr;
    }

    .assessment-detail-meta > div,
    .assessment-detail-meta > div:nth-child(3n) {
        border-right: 0;
        border-top: 1px solid #d9e4f2;
    }

    .assessment-detail-meta > div:first-child {
        border-top: 0;
    }

    .assessment-soap-row summary {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        padding: 12px;
    }

    .assessment-soap-chevron {
        display: none;
    }

    .assessment-soap-expanded {
        padding: 0 12px 14px;
    }

    .assessment-info-list div {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .assessment-detail-identity {
        align-items: flex-start;
    }

    .assessment-detail-avatar {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .assessment-detail-identity h1 {
        font-size: 24px;
    }

    .assessment-soap-row summary {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .assessment-soap-row summary em {
        grid-column: 2;
        justify-self: start;
    }

.assessment-attachment-tile {
    grid-template-columns: 46px minmax(0, 1fr);
    }
}

/* Settings System tab */
.settings-system-page {
    background: #f7fbff;
}

.settings-system-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 20px 20px;
}

.settings-system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-system-card {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.settings-system-card header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-system-card header > span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-system-card h2 {
    margin: 0;
    color: #061b45;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
}

.settings-system-fields {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.settings-system-field,
.settings-system-action-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.85fr) minmax(220px, 1fr);
    gap: 18px;
    align-items: center;
}

.settings-system-field label:first-child,
.settings-system-action-row label {
    min-width: 0;
}

.settings-system-field strong,
.settings-system-action-row strong {
    display: block;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.settings-system-field small,
.settings-system-action-row small {
    display: block;
    margin-top: 3px;
    color: #31507f;
    font-size: 12px;
    line-height: 1.25;
}

.settings-system-field input:not([type="checkbox"]),
.settings-system-field select {
    width: 100%;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #061b45;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.settings-system-field select {
    appearance: auto;
}

.settings-system-field input:focus,
.settings-system-field select:focus {
    border-color: #0b63df;
    box-shadow: 0 0 0 3px rgba(7, 95, 215, 0.1);
}

.settings-system-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 26px;
    justify-self: end;
}

.settings-system-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-system-switch i {
    position: relative;
    display: block;
    width: 48px;
    height: 26px;
    border-radius: 999px;
    background: #8b9bb4;
    box-shadow: inset 0 1px 3px rgba(6, 27, 69, 0.14);
    transition: background 0.18s ease;
}

.settings-system-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(6, 27, 69, 0.18);
    transition: transform 0.18s ease;
}

.settings-system-switch input:checked + i {
    background: #075fd7;
}

.settings-system-switch input:checked + i::after {
    transform: translateX(22px);
}

.settings-notifications-form {
    display: grid;
    gap: 18px;
}

.settings-notifications-heading,
.settings-notifications-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-notifications-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
}

.settings-notifications-heading > span,
.settings-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.settings-notifications-heading > span {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #e8f0ff;
    color: #075fd7;
}

.settings-notifications-heading h1,
.settings-notifications-card h2 {
    margin: 0;
    color: #071b4a;
}

.settings-notifications-heading h1 {
    font-size: 24px;
    line-height: 1.15;
}

.settings-notifications-heading p,
.settings-notifications-card p,
.settings-notification-category-copy small,
.settings-notification-item small,
.settings-channel-row small,
.settings-quiet-note {
    margin: 4px 0 0;
    color: #24406e;
    font-weight: 650;
}

.settings-notifications-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr);
    gap: 22px;
    align-items: start;
}

.settings-notifications-card {
    padding: 22px;
}

.settings-notifications-card > header,
.settings-notification-preferences > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-notifications-card h2 {
    font-size: 18px;
    line-height: 1.2;
}

.settings-notification-link {
    border: 0;
    background: transparent;
    color: #075fd7;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.settings-notification-link:focus-visible,
.settings-notification-category-button:focus-visible,
.settings-documentation-button:focus-visible {
    outline: 3px solid rgba(7, 95, 215, .18);
    outline-offset: 3px;
}

.settings-notification-accordion {
    display: grid;
}

.settings-notification-category {
    border-bottom: 1px solid #dce7f4;
}

.settings-notification-category.is-expanded {
    margin-bottom: 14px;
    border: 1px solid #cddcf0;
    border-radius: 8px;
}

.settings-notification-category-button {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-notification-category.is-expanded .settings-notification-category-button {
    padding: 16px;
}

.settings-notification-category-copy strong,
.settings-notification-item strong,
.settings-channel-row strong,
.settings-quiet-toggle strong {
    display: block;
    color: #071b4a;
    font-size: 14px;
    font-weight: 900;
}

.settings-notification-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.settings-notification-icon.tone-blue {
    background: #e8f0ff;
    color: #075fd7;
}

.settings-notification-icon.tone-purple {
    background: #f1e7ff;
    color: #7c3aed;
}

.settings-notification-icon.tone-green {
    background: #ddf8ef;
    color: #079669;
}

.settings-notification-icon.tone-orange {
    background: #fff0d9;
    color: #f59e0b;
}

.settings-notification-icon.tone-pink {
    background: #ffe5eb;
    color: #e11d48;
}

.settings-notification-chevron {
    color: #18396c;
    transition: transform .18s ease;
}

.settings-notification-category.is-expanded .settings-notification-chevron {
    transform: rotate(90deg);
}

.settings-notification-items {
    display: grid;
    gap: 14px;
    padding: 0 18px 18px 80px;
}

.settings-notification-items[hidden],
.settings-users-filter-panel[hidden],
.settings-users-menu[hidden] {
    display: none;
}

.settings-notification-item,
.settings-channel-row,
.settings-quiet-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.settings-channel-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 10px 0;
}

.settings-notifications-side {
    display: grid;
    gap: 18px;
}

.settings-channel-list,
.settings-quiet-hours {
    display: grid;
    gap: 14px;
}

.settings-quiet-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.settings-quiet-time-grid label,
.settings-quiet-zone {
    display: grid;
    gap: 8px;
    color: #071b4a;
    font-size: 13px;
    font-weight: 900;
}

.settings-quiet-time-grid input,
.settings-quiet-zone select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfdced;
    border-radius: 6px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-weight: 750;
    padding: 0 12px;
}

.settings-quiet-time-grid input:focus,
.settings-quiet-zone select:focus {
    border-color: #0b63df;
    box-shadow: 0 0 0 3px rgba(7, 95, 215, 0.1);
    outline: none;
}

.settings-quiet-note {
    padding: 10px 12px;
    border-radius: 7px;
    background: #f4f8fd;
    font-size: 12px;
}

.settings-help-card {
    min-height: 150px;
}

.settings-documentation-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #075fd7;
    border-radius: 7px;
    color: #075fd7;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.settings-notifications-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
}

.settings-notifications-actions .primary-button {
    min-width: 150px;
}

.settings-users-workspace,
.settings-users-layout,
.settings-users-main,
.settings-users-side {
    min-width: 0;
}

.settings-users-workspace {
    position: relative;
}

.settings-users-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(340px, .88fr);
    gap: 22px;
    align-items: start;
}

.settings-users-main,
.settings-users-side {
    display: grid;
    gap: 18px;
}

.settings-users-card {
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(13, 42, 78, .04);
}

.settings-users-table-card {
    overflow: hidden;
}

.settings-users-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid #dfe8f4;
}

.settings-users-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-users-title > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #f0e7ff;
    color: #075fd7;
}

.settings-users-title h1,
.settings-users-card h2 {
    margin: 0;
    color: #071b4a;
}

.settings-users-title h1 {
    font-size: 24px;
    line-height: 1.15;
}

.settings-users-title p {
    margin: 5px 0 0;
    color: #24406e;
    font-weight: 650;
}

.settings-users-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-users-search {
    position: relative;
    min-width: 260px;
}

.settings-users-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 42px 0 14px;
    border: 1px solid #cfdbeb;
    border-radius: 7px;
    color: #071b4a;
    font: inherit;
    font-weight: 700;
}

.settings-users-search svg {
    position: absolute;
    top: 12px;
    right: 13px;
    color: #24406e;
}

.settings-users-filter-button,
.settings-users-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.settings-users-filter-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #dfe8f4;
    background: #f7faff;
}

.settings-users-filter-panel label,
.settings-users-dialog-grid label {
    display: grid;
    gap: 7px;
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
}

.settings-users-filter-panel select,
.settings-users-dialog-grid input,
.settings-users-dialog-grid select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #ffffff;
    color: #071b4a;
    font: inherit;
    font-weight: 700;
    padding: 0 12px;
}

.settings-users-filter-panel > div {
    display: flex;
    align-items: end;
    gap: 8px;
}

.settings-users-table-wrap {
    overflow-x: auto;
}

.settings-users-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.settings-users-table th,
.settings-users-table td {
    padding: 17px 24px;
    border-bottom: 1px solid #dfe8f4;
    color: #071b4a;
    text-align: left;
    vertical-align: middle;
}

.settings-users-table th {
    background: #fbfdff;
    color: #24406e;
    font-size: 12px;
    font-weight: 900;
}

.settings-users-table td {
    font-size: 13px;
    font-weight: 700;
}

.settings-users-table tr {
    cursor: pointer;
}

.settings-users-table tr.is-selected,
.settings-users-table tbody tr:hover {
    background: #f6f9ff;
}

.settings-user-cell,
.settings-user-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-user-cell strong,
.settings-user-detail-head strong {
    display: block;
    color: #071b4a;
    font-size: 14px;
    font-weight: 950;
}

.settings-user-cell small,
.settings-user-detail-head small {
    display: block;
    margin-top: 3px;
    color: #24406e;
    font-weight: 700;
}

.settings-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}

.settings-user-avatar.large {
    width: 64px;
    height: 64px;
    font-size: 17px;
}

.settings-user-avatar.tone-purple,
.settings-role-badge.tone-purple {
    background: #ede2ff;
    color: #7c3aed;
}

.settings-user-avatar.tone-blue,
.settings-role-badge.tone-blue {
    background: #e2efff;
    color: #075fd7;
}

.settings-user-avatar.tone-sky,
.settings-role-badge.tone-sky {
    background: #e5f3ff;
    color: #0476d9;
}

.settings-user-avatar.tone-orange,
.settings-role-badge.tone-orange {
    background: #fff1dc;
    color: #e27900;
}

.settings-user-avatar.tone-pink,
.settings-role-badge.tone-pink {
    background: #f2e5ff;
    color: #8b5cf6;
}

.settings-user-avatar.tone-teal,
.settings-role-badge.tone-teal {
    background: #dcf7f4;
    color: #009b9b;
}

.settings-user-avatar.tone-rose,
.settings-role-badge.tone-rose {
    background: #ffe5f1;
    color: #db2777;
}

.settings-role-badge,
.settings-user-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.settings-user-status.active {
    background: #dcf8e8;
    color: #078642;
}

.settings-user-status.inactive {
    background: #e9eef6;
    color: #44536a;
}

.settings-user-actions {
    display: inline-flex;
    gap: 10px;
}

.settings-user-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    cursor: pointer;
}

.settings-user-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-users-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    color: #24406e;
    font-size: 13px;
    font-weight: 750;
}

.settings-users-pagination {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.settings-users-pagination button,
.settings-users-pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
}

.settings-users-pagination button:first-child svg {
    transform: rotate(180deg);
}

.settings-users-pagination strong {
    border-color: #075fd7;
    background: #075fd7;
    color: #ffffff;
}

.settings-users-side .settings-users-card,
.settings-role-overview-card {
    padding: 22px;
}

.settings-users-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.settings-users-card h2 {
    font-size: 18px;
    line-height: 1.2;
}

.settings-user-detail-head {
    position: relative;
    margin-bottom: 20px;
}

.settings-user-detail-head .settings-user-status {
    margin-left: auto;
}

.settings-user-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
}

.settings-user-detail-grid small,
.settings-user-permissions > strong {
    display: block;
    margin-bottom: 7px;
    color: #24406e;
    font-size: 12px;
    font-weight: 900;
}

.settings-user-detail-grid strong {
    color: #071b4a;
    font-size: 14px;
}

.settings-user-permissions {
    margin-top: 22px;
}

.settings-user-permissions p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.settings-user-permissions em {
    padding: 7px 10px;
    border-radius: 7px;
    background: #f1f5fb;
    color: #071b4a;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.settings-users-chart-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.settings-users-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 138px;
    height: 138px;
    border-radius: 50%;
}

.settings-users-donut::after {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.settings-users-donut strong,
.settings-users-donut span {
    position: relative;
    z-index: 1;
}

.settings-users-donut strong {
    color: #071b4a;
    font-size: 24px;
    font-weight: 950;
}

.settings-users-donut span {
    margin-top: 28px;
    color: #24406e;
    font-size: 11px;
    font-weight: 850;
}

.settings-users-role-legend {
    display: grid;
    gap: 11px;
}

.settings-users-role-legend p {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #071b4a;
    font-size: 12px;
    font-weight: 850;
}

.settings-users-role-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.settings-users-role-legend span {
    color: #24406e;
}

.settings-users-quick-card {
    display: grid;
    gap: 8px;
}

.settings-users-quick-card h2 {
    margin-bottom: 8px;
}

.settings-users-quick-card button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: #071b4a;
    text-align: left;
    cursor: pointer;
}

.settings-users-quick-card button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eef5ff;
    color: #075fd7;
}

.settings-users-quick-card strong {
    display: block;
    font-size: 14px;
}

.settings-users-quick-card small {
    display: block;
    margin-top: 3px;
    color: #24406e;
    font-weight: 650;
}

.settings-role-overview-card h2 {
    margin-bottom: 18px;
}

.settings-role-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.settings-role-overview-grid article {
    display: grid;
    gap: 8px;
    min-height: 82px;
}

.settings-role-overview-grid span {
    color: #071b4a;
    font-size: 12px;
    font-weight: 900;
}

.settings-role-overview-grid strong {
    color: #071b4a;
    font-size: 22px;
    font-weight: 950;
}

.settings-role-overview-grid small {
    color: #24406e;
    font-size: 12px;
    font-weight: 650;
}

.settings-users-menu {
    position: fixed;
    z-index: 50;
    display: grid;
    min-width: 190px;
    padding: 8px;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(10, 32, 67, .18);
}

.settings-users-menu button {
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #071b4a;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
}

.settings-users-menu button:hover {
    background: #f3f7fc;
}

.settings-users-menu .danger {
    color: #dc2626;
}

.settings-users-dialog {
    width: min(720px, calc(100vw - 32px));
    border: 0;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 24px 64px rgba(8, 31, 67, .28);
}

.settings-users-dialog::backdrop {
    background: rgba(6, 20, 45, .42);
}

.settings-users-dialog header,
.settings-users-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #dfe8f4;
}

.settings-users-dialog footer {
    justify-content: flex-end;
    border-top: 1px solid #dfe8f4;
    border-bottom: 0;
}

.settings-users-dialog h2 {
    margin: 0;
    color: #071b4a;
}

.settings-users-dialog header button {
    width: 34px;
    height: 34px;
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #ffffff;
    color: #071b4a;
    font-size: 22px;
    cursor: pointer;
}

.settings-users-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px;
}

.settings-users-dialog-grid .wide {
    grid-column: 1 / -1;
}

.settings-users-permission-box {
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-users-permission-box > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.settings-users-permission-box label,
.settings-users-checkbox {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
}

.settings-users-permission-box input,
.settings-users-checkbox input {
    width: 16px;
    height: 16px;
}

.settings-users-info-dialog {
    width: min(620px, calc(100vw - 32px));
}

.settings-users-info-dialog > div {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.settings-users-info-dialog section {
    padding: 14px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-users-info-dialog strong {
    display: block;
    color: #071b4a;
    margin-bottom: 6px;
}

.settings-users-info-dialog p {
    margin: 0 0 6px;
    color: #24406e;
    font-weight: 650;
}

@media (max-width: 1180px) {
    .settings-notifications-layout {
        grid-template-columns: 1fr;
    }

    .settings-users-layout,
    .settings-users-filter-panel {
        grid-template-columns: 1fr;
    }

    .settings-role-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .settings-notifications-heading,
    .settings-notifications-card {
        padding: 16px;
    }

    .settings-notification-category-button {
        grid-template-columns: 42px minmax(0, 1fr) 22px;
        gap: 12px;
        padding-inline: 0;
    }

    .settings-notification-items {
        padding: 0 0 16px 0;
    }

    .settings-notification-item,
    .settings-channel-row,
    .settings-quiet-toggle,
    .settings-quiet-time-grid {
        grid-template-columns: 1fr;
    }

    .settings-notifications-actions .primary-button,
    .settings-documentation-button {
        width: 100%;
        justify-content: center;
    }

    .settings-users-heading,
    .settings-users-tools,
    .settings-users-table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-users-search,
    .settings-users-tools .primary-button,
    .settings-users-filter-button {
        width: 100%;
        min-width: 0;
    }

    .settings-users-chart-grid,
    .settings-user-detail-grid,
    .settings-users-dialog-grid,
    .settings-role-overview-grid {
        grid-template-columns: 1fr;
    }
}

.settings-system-action-row button {
    justify-self: end;
    min-width: 92px;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.settings-system-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.settings-system-save-row .primary-button {
    min-width: 168px;
    justify-content: center;
    border-radius: 7px;
}

@media (max-width: 1180px) {
    .settings-system-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .settings-system-form {
        padding: 14px;
    }

    .settings-system-card {
        padding: 16px;
    }

    .settings-system-field,
    .settings-system-action-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .settings-system-switch,
    .settings-system-action-row button {
        justify-self: start;
    }

    .settings-system-save-row .primary-button {
        width: 100%;
    }
}

/* Shared responsive filter/action rows */
.assessment-filter-bar,
.appointment-filter-bar,
.patient-filter-bar,
.treatment-filter-bar,
.exercise-filter-bar,
.prescribed-filter-bar,
.log-filter-bar,
.follow-filter-bar,
.documents-filter-bar,
.reminder-filter-bar,
.invoice-filter-bar,
.consent-filter-bar,
.reports-header-actions,
.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.assessment-search-field,
.appointment-search-field,
.patient-search-field,
.treatment-search-field,
.exercise-search-field,
.prescribed-search-field,
.log-search-field,
.follow-search-field,
.documents-search-field,
.reminder-search-field,
.invoice-search-field,
.consent-search-field,
.reports-header-actions label:has(input[type="search"]),
.calendar-filters label:has(input[type="search"]) {
    flex: 1 1 280px;
    min-width: min(100%, 240px);
}

.assessment-filter-bar label:not(.assessment-search-field),
.appointment-filter-bar label:not(.appointment-search-field),
.patient-filter-bar label:not(.patient-search-field),
.treatment-filter-bar label:not(.treatment-search-field),
.exercise-filter-bar label:not(.exercise-search-field),
.prescribed-filter-bar label:not(.prescribed-search-field),
.log-filter-bar label:not(.log-search-field),
.follow-filter-bar label:not(.follow-search-field),
.documents-filter-bar label:not(.documents-search-field),
.reminder-filter-bar label:not(.reminder-search-field),
.invoice-filter-bar label:not(.invoice-search-field),
.consent-filter-bar label:not(.consent-search-field),
.reports-header-actions label,
.calendar-filters label {
    flex: 0 1 170px;
    min-width: 145px;
    max-width: 240px;
}

.assessment-filter-bar input,
.assessment-filter-bar select,
.appointment-filter-bar input,
.appointment-filter-bar select,
.patient-filter-bar input,
.patient-filter-bar select,
.treatment-filter-bar input,
.treatment-filter-bar select,
.exercise-filter-bar input,
.exercise-filter-bar select,
.prescribed-filter-bar input,
.prescribed-filter-bar select,
.log-filter-bar input,
.log-filter-bar select,
.follow-filter-bar input,
.follow-filter-bar select,
.documents-filter-bar input,
.documents-filter-bar select,
.reminder-filter-bar input,
.reminder-filter-bar select,
.invoice-filter-bar input,
.invoice-filter-bar select,
.consent-filter-bar input,
.consent-filter-bar select,
.reports-header-actions input,
.reports-header-actions select,
.calendar-filters input,
.calendar-filters select {
    width: 100%;
    min-width: 0;
}

.assessment-filter-bar .primary-button,
.assessment-filter-bar .secondary-button,
.appointment-filter-bar .primary-button,
.appointment-filter-bar .secondary-button,
.patient-filter-bar .primary-button,
.patient-filter-bar .secondary-button,
.treatment-filter-bar .primary-button,
.treatment-filter-bar .secondary-button,
.exercise-filter-bar .primary-button,
.exercise-filter-bar .secondary-button,
.prescribed-filter-bar .primary-button,
.prescribed-filter-bar .secondary-button,
.log-filter-bar .primary-button,
.log-filter-bar .secondary-button,
.follow-filter-bar .primary-button,
.follow-filter-bar .secondary-button,
.documents-filter-bar .primary-button,
.documents-filter-bar .secondary-button,
.reminder-filter-bar .primary-button,
.reminder-filter-bar .secondary-button,
.invoice-filter-bar .primary-button,
.invoice-filter-bar .secondary-button,
.consent-filter-bar .primary-button,
.consent-filter-bar .secondary-button,
.reports-header-actions .primary-button,
.reports-header-actions .secondary-button,
.calendar-filters .primary-button,
.calendar-filters .secondary-button,
.assessment-filter-bar button,
.appointment-filter-bar button,
.patient-filter-bar button,
.treatment-filter-bar button,
.exercise-filter-bar button,
.prescribed-filter-bar button,
.log-filter-bar button,
.follow-filter-bar button,
.documents-filter-bar button,
.reminder-filter-bar button,
.invoice-filter-bar button,
.consent-filter-bar button,
.reports-header-actions button,
.calendar-filters button {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
}

.invoice-filter-bar {
    flex-wrap: nowrap;
    gap: 8px;
}

.invoice-filter-bar .secondary-button {
    flex: 0 0 auto;
}

.invoice-filter-bar .invoice-search-field {
    flex: 1 1 210px;
    min-width: 180px;
}

.invoice-filter-bar label:not(.invoice-search-field) {
    flex: 0 1 128px;
    min-width: 112px;
}

.assessment-filter-bar .assessment-new-action,
.appointment-filter-bar .appointment-new-action,
.appointment-filter-bar .appointment-filter-action,
.patient-filter-add,
.follow-new-inline-button {
    width: auto;
    min-width: max-content;
}

.assessment-page-header,
.appointment-page-header,
.patient-page-header,
.treatment-page-header,
.exercise-page-header,
.prescribed-page-header,
.log-page-header,
.follow-page-header,
.documents-page-header,
.reminder-page-header,
.invoice-page-header,
.reports-page-header {
    flex-wrap: wrap;
}

.assessment-header-actions,
.appointment-header-actions,
.patient-header-actions,
.treatment-header-actions,
.exercise-header-actions,
.prescribed-header-actions,
.log-header-actions,
.follow-header-actions,
.documents-header-actions,
.reminder-header-actions,
.invoice-header-actions,
.message-header-actions,
.reports-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 760px) {
    .assessment-filter-bar,
    .appointment-filter-bar,
    .patient-filter-bar,
    .treatment-filter-bar,
    .exercise-filter-bar,
    .prescribed-filter-bar,
    .log-filter-bar,
    .follow-filter-bar,
    .documents-filter-bar,
    .reminder-filter-bar,
    .invoice-filter-bar,
    .consent-filter-bar,
    .reports-header-actions,
    .calendar-filters {
        align-items: stretch;
    }

    .assessment-filter-bar > *,
    .appointment-filter-bar > *,
    .patient-filter-bar > *,
    .treatment-filter-bar > *,
    .exercise-filter-bar > *,
    .prescribed-filter-bar > *,
    .log-filter-bar > *,
    .follow-filter-bar > *,
    .documents-filter-bar > *,
    .reminder-filter-bar > *,
    .invoice-filter-bar > *,
    .consent-filter-bar > *,
    .reports-header-actions > *,
    .calendar-filters > * {
        flex-basis: 100%;
        max-width: none;
        width: 100%;
    }

    .assessment-filter-bar .primary-button,
    .assessment-filter-bar .secondary-button,
    .appointment-filter-bar .primary-button,
    .appointment-filter-bar .secondary-button,
    .patient-filter-bar .primary-button,
    .patient-filter-bar .secondary-button,
    .treatment-filter-bar .primary-button,
    .treatment-filter-bar .secondary-button,
    .exercise-filter-bar .primary-button,
    .exercise-filter-bar .secondary-button,
    .prescribed-filter-bar .primary-button,
    .prescribed-filter-bar .secondary-button,
    .log-filter-bar .primary-button,
    .log-filter-bar .secondary-button,
    .follow-filter-bar .primary-button,
    .follow-filter-bar .secondary-button,
    .documents-filter-bar .primary-button,
    .documents-filter-bar .secondary-button,
    .reminder-filter-bar .primary-button,
    .reminder-filter-bar .secondary-button,
    .invoice-filter-bar .primary-button,
    .invoice-filter-bar .secondary-button,
    .consent-filter-bar .primary-button,
    .consent-filter-bar .secondary-button,
    .reports-header-actions .primary-button,
    .reports-header-actions .secondary-button,
    .calendar-filters .primary-button,
    .calendar-filters .secondary-button,
    .assessment-filter-bar button,
    .appointment-filter-bar button,
    .patient-filter-bar button,
    .treatment-filter-bar button,
    .exercise-filter-bar button,
    .prescribed-filter-bar button,
    .log-filter-bar button,
    .follow-filter-bar button,
    .documents-filter-bar button,
    .reminder-filter-bar button,
    .invoice-filter-bar button,
    .consent-filter-bar button,
    .reports-header-actions button,
    .calendar-filters button {
        justify-content: center;
        width: 100%;
    }

    .assessment-header-actions,
    .appointment-header-actions,
    .patient-header-actions,
    .treatment-header-actions,
    .exercise-header-actions,
    .prescribed-header-actions,
    .log-header-actions,
    .follow-header-actions,
    .documents-header-actions,
    .reminder-header-actions,
    .invoice-header-actions,
    .message-header-actions,
    .reports-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .assessment-header-actions > *,
    .appointment-header-actions > *,
    .patient-header-actions > *,
    .treatment-header-actions > *,
    .exercise-header-actions > *,
    .prescribed-header-actions > *,
    .log-header-actions > *,
    .follow-header-actions > *,
    .documents-header-actions > *,
    .reminder-header-actions > *,
    .invoice-header-actions > *,
    .message-header-actions > *,
    .reports-header-actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Settings Exercises Library tab */
.global-shell .settings-exercises-page {
    background: #f7fbff;
    padding-left: 4px;
    padding-right: 4px;
}

.settings-exercises-library {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 14px;
}

.settings-exercises-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.settings-exercises-header h1 {
    margin: 0 0 8px;
    color: #061b45;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: 0;
}

.settings-exercises-header p {
    margin: 0;
    color: #274269;
    font-size: 15px;
    line-height: 1.5;
}

.settings-exercises-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.settings-exercises-tools label {
    min-width: 0;
}

.settings-exercises-tools select,
.settings-exercises-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #061b45;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.settings-exercises-tools select {
    min-width: 190px;
    padding: 0 12px;
}

.settings-exercises-search {
    position: relative;
    width: 280px;
}

.settings-exercises-tools .primary-button.compact {
    min-height: 34px;
}

.settings-exercises-search input {
    padding: 0 42px 0 14px;
}

.settings-exercises-search svg {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #526b90;
    transform: translateY(-50%);
}

.settings-exercises-layout {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 2px;
    align-items: start;
}

.settings-exercises-table-card,
.settings-exercise-editor {
    overflow: hidden;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, 0.05);
}

.settings-exercises-table-wrap {
    overflow-x: auto;
}

.settings-exercises-table {
    width: 100%;
    min-width: 820px;
    table-layout: fixed;
    border-collapse: collapse;
}

.settings-exercises-table th,
.settings-exercises-table td {
    padding: 5px 14px;
    border-bottom: 1px solid #e5edf7;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
}

.settings-exercises-table th {
    padding-block: 8px;
}

.settings-exercises-table th:nth-child(1),
.settings-exercises-table td:nth-child(1) {
    width: 58.7%;
}

.settings-exercises-table th:nth-child(2),
.settings-exercises-table td:nth-child(2) {
    width: 15%;
}

.settings-exercises-table th:nth-child(3),
.settings-exercises-table td:nth-child(3) {
    width: 14%;
    padding-right: 2px;
}

.settings-exercises-table th:nth-child(4),
.settings-exercises-table td:nth-child(4) {
    width: 12.3%;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
}

.settings-exercises-table th {
    background: #f8fbff;
    color: #21385d;
    font-size: 13px;
    font-weight: 900;
}

.settings-exercise-row {
    cursor: pointer;
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

.settings-exercise-row:hover,
.settings-exercise-row.is-selected {
    background: #f5faff;
    box-shadow: inset 4px 0 0 #075fd7;
}

.settings-exercise-name {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.settings-exercise-name img {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: #eef4fb;
}

.settings-exercise-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 2px;
}

.settings-exercise-name strong {
    display: block;
    min-width: 0;
    color: #061b45;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-exercise-inactive-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fde4d8;
    color: #d5451b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.settings-exercise-name small {
    display: -webkit-box;
    max-width: 100%;
    color: #29456e;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.settings-exercise-category {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #061b45;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.settings-exercise-category i {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
}

.settings-exercise-category svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-exercise-category.tone-purple i { background: #f0e4ff; color: #8d34e6; }
.settings-exercise-category.tone-orange i { background: #fff0dd; color: #f07400; }
.settings-exercise-category.tone-blue i { background: #e6f1ff; color: #075fd7; }
.settings-exercise-category.tone-green i { background: #dcf8ea; color: #0f9b58; }
.settings-exercise-category.tone-pink i { background: #ffe8f0; color: #e11d48; }
.settings-exercise-category.tone-teal i { background: #def7f8; color: #0e7490; }
.settings-exercise-category.tone-amber i { background: #fff3cf; color: #d97706; }
.settings-exercise-category.tone-violet i { background: #eee9ff; color: #6d35d6; }

.settings-exercise-difficulty,
.settings-exercise-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.settings-exercise-difficulty.beginner,
.settings-exercise-status.active {
    background: #dff8ea;
    color: #07833f;
}

.settings-exercise-difficulty.intermediate {
    background: #fff0d7;
    color: #a75300;
}

.settings-exercise-difficulty.advanced {
    background: #ffe1e8;
    color: #d0183a;
}

.settings-exercise-status.inactive {
    background: #e9eef6;
    color: #52627a;
}

.settings-exercise-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.settings-exercise-row-actions button {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #cfe0f5;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    cursor: pointer;
}

.settings-exercise-row-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-exercise-empty {
    padding: 28px;
    color: #526b90;
    text-align: center;
}

.settings-exercises-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 18px;
}

.settings-exercises-footer p {
    margin: 0;
    color: #29456e;
    font-size: 13px;
}

.settings-exercises-footer nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-exercises-footer button {
    display: inline-grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #d8e4f3;
    border-radius: 7px;
    background: #ffffff;
    color: #075fd7;
    font-weight: 900;
}

.settings-exercises-footer button:first-child svg {
    transform: rotate(180deg);
}

.settings-exercises-footer button.active {
    border-color: #075fd7;
    background: #075fd7;
    color: #ffffff;
}

.settings-exercise-editor {
    padding: 16px 22px;
}

.settings-exercise-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.settings-exercise-editor h2 {
    margin: 0;
    color: #061b45;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: 0;
}

.settings-exercise-delete {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #e11d48;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.settings-exercise-form-grid,
.settings-exercise-small-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-exercise-small-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-exercise-editor label {
    display: grid;
    gap: 7px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-exercise-editor b {
    color: #e11d48;
}

.settings-exercise-editor input,
.settings-exercise-editor select,
.settings-exercise-editor textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d6e2f1;
    border-radius: 7px;
    background: #ffffff;
    color: #061b45;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.settings-exercise-editor textarea {
    min-height: 58px;
    padding-block: 10px;
    resize: vertical;
}

.settings-exercise-editor input:focus,
.settings-exercise-editor select:focus,
.settings-exercise-editor textarea:focus {
    border-color: #075fd7;
    box-shadow: 0 0 0 3px rgba(7, 95, 215, 0.1);
}

.settings-exercise-wide {
    margin-top: 10px;
}

.settings-exercise-wide small {
    color: #526b90;
    font-size: 12px;
    font-weight: 700;
}

.settings-exercise-video {
    position: relative;
    display: grid;
    height: 150px;
    margin-top: 10px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #eef4fb;
}

.settings-exercise-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-exercise-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 27, 69, 0.02), rgba(6, 27, 69, 0.35));
}

.settings-exercise-video > span {
    position: absolute;
    z-index: 1;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 27, 69, 0.72);
    color: #ffffff;
}

.settings-exercise-video small {
    position: absolute;
    z-index: 1;
    bottom: 18px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.settings-exercise-video.has-video small {
    display: none;
}

.settings-exercise-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.settings-exercise-status-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-exercise-status-row strong {
    display: block;
    margin-bottom: 4px;
    color: #061b45;
    font-size: 14px;
}

.settings-exercise-status-row span {
    color: #061b45;
    font-size: 18px;
    font-weight: 900;
}

.settings-exercise-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
}

.settings-exercise-actions .primary-button,
.settings-exercise-actions .secondary-button {
    min-width: 64px;
    padding-inline: 12px;
    justify-content: center;
}

@media (max-width: 1320px) {
    .settings-exercises-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .settings-exercises-header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-exercises-tools,
    .settings-exercises-tools > *,
    .settings-exercises-search {
        width: 100%;
    }

    .settings-exercise-form-grid,
    .settings-exercise-small-grid {
        grid-template-columns: 1fr;
    }

    .settings-exercises-footer,
    .settings-exercise-editor > header {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Settings treatment notes tab */
.settings-treatment-workspace {
    display: grid;
    gap: 20px;
    padding: 20px;
}

.settings-treatment-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-treatment-heading > span,
.settings-treatment-preferences > header > span {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    background: #f1e5ff;
    color: #8d34e6;
}

.settings-treatment-heading h1,
.settings-treatment-heading p,
.settings-treatment-card h2,
.settings-treatment-card h3,
.settings-treatment-card p {
    margin: 0;
}

.settings-treatment-heading h1 {
    color: #061b45;
    font-size: 22px;
    line-height: 1.2;
}

.settings-treatment-heading p,
.settings-treatment-card p {
    color: #31507f;
    font-size: 14px;
}

.settings-treatment-grid {
    display: grid;
    grid-template-columns: minmax(540px, 1.18fr) minmax(420px, .86fr);
    gap: 20px;
    align-items: start;
}

.settings-treatment-card {
    min-width: 0;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, .05);
}

.settings-treatment-list-card,
.settings-treatment-editor,
.settings-treatment-preferences {
    padding: 20px;
}

.settings-treatment-list-card > header,
.settings-treatment-editor > header,
.settings-treatment-sections > header,
.settings-treatment-preferences > header,
.settings-treatment-dialog-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-treatment-card h2 {
    color: #061b45;
    font-size: 18px;
}

.settings-treatment-card h3 {
    color: #061b45;
    font-size: 16px;
}

.settings-treatment-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-treatment-tools label {
    position: relative;
    display: block;
    width: min(240px, 36vw);
}

.settings-treatment-tools input,
.settings-treatment-form-grid input,
.settings-treatment-form-grid select,
.settings-treatment-form-grid textarea,
.settings-treatment-pref select,
.settings-treatment-pref input,
.settings-treatment-section-form input,
.settings-treatment-section-form select,
.settings-treatment-section-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cfdceb;
    border-radius: 6px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.settings-treatment-tools input {
    padding: 0 42px 0 14px;
}

.settings-treatment-tools svg {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #31507f;
    transform: translateY(-50%);
}

.settings-treatment-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border-top: 1px solid #e5edf7;
}

.settings-treatment-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.settings-treatment-table th,
.settings-treatment-table td {
    padding: 16px 14px;
    border-bottom: 1px solid #e5edf7;
    color: #061b45;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.settings-treatment-table th {
    background: #f8fbff;
    color: #29456e;
    font-weight: 900;
}

.settings-treatment-template-row.is-selected td {
    background: #f8fbff;
}

.settings-treatment-drag {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #6d83a7;
    font-weight: 900;
    cursor: grab;
}

.settings-treatment-category,
.settings-treatment-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.settings-treatment-category.tone-evaluation { background: #f1e5ff; color: #7b2ed8; }
.settings-treatment-category.tone-follow-up { background: #eaf3ff; color: #075fd7; }
.settings-treatment-category.tone-treatment { background: #dcf8ea; color: #078045; }
.settings-treatment-category.tone-post-surgery { background: #fff0df; color: #d96b00; }
.settings-treatment-category.tone-summary { background: #fff5cf; color: #a66b00; }
.settings-treatment-category.tone-consultation { background: #dff7fb; color: #047c8a; }
.settings-treatment-category.tone-plan { background: #ffe5ef; color: #d61f5c; }
.settings-treatment-category.tone-other { background: #eef3f9; color: #526b90; }

.settings-treatment-status.active {
    background: #dcf8ea;
    color: #078045;
}

.settings-treatment-status.inactive {
    background: #edf2f8;
    color: #526b90;
}

.settings-treatment-row-actions {
    display: inline-flex;
    gap: 10px;
}

.settings-treatment-row-actions button,
.settings-treatment-section-row > button:not(.settings-treatment-drag) {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #cfdceb;
    border-radius: 6px;
    background: #fff;
    color: #075fd7;
}

.settings-treatment-row-actions button:last-child,
.settings-treatment-section-row > button:last-child {
    color: #ff2f4e;
}

.settings-treatment-row-actions svg,
.settings-treatment-section-row svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-treatment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
}

.settings-treatment-footer p {
    color: #31507f;
}

.settings-treatment-footer nav {
    display: flex;
    gap: 8px;
}

.settings-treatment-footer button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #cfdceb;
    border-radius: 6px;
    background: #fff;
    color: #075fd7;
}

.settings-treatment-footer button.active {
    border-color: #075fd7;
    background: #075fd7;
    color: #fff;
}

.settings-treatment-footer button:first-child svg {
    transform: rotate(180deg);
}

.settings-treatment-delete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #ff2f4e;
    font-weight: 900;
}

.settings-treatment-form-grid,
.settings-treatment-section-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.settings-treatment-form-grid label,
.settings-treatment-section-form label {
    display: grid;
    gap: 8px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-treatment-form-grid b,
.settings-treatment-section-form b {
    color: #ff2f4e;
}

.settings-treatment-form-grid .wide,
.settings-treatment-section-form .wide {
    grid-column: 1 / -1;
}

.settings-treatment-form-grid input,
.settings-treatment-form-grid select,
.settings-treatment-form-grid textarea,
.settings-treatment-section-form input,
.settings-treatment-section-form select,
.settings-treatment-section-form textarea {
    padding: 9px 12px;
}

.settings-treatment-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.settings-treatment-status strong,
.settings-treatment-status span,
.settings-treatment-status small {
    display: block;
}

.settings-treatment-status strong {
    margin-bottom: 9px;
    color: #061b45;
}

.settings-treatment-status span {
    color: #061b45;
    font-weight: 800;
}

.settings-treatment-status small {
    margin-top: 7px;
    color: #526b90;
}

.settings-treatment-sections {
    margin-top: 26px;
}

.settings-treatment-section-list {
    display: grid;
    gap: 0;
    margin-top: 14px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    overflow: hidden;
}

.settings-treatment-section-row {
    display: grid;
    grid-template-columns: 28px 30px minmax(0, 1fr) 90px 34px 34px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5edf7;
    background: #fff;
}

.settings-treatment-section-row:last-child {
    border-bottom: 0;
}

.settings-treatment-section-row > span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #edf2f8;
    color: #31507f;
    font-size: 12px;
    font-weight: 900;
}

.settings-treatment-section-row strong {
    color: #061b45;
    font-size: 13px;
}

.settings-treatment-section-row small {
    color: #526b90;
    font-size: 12px;
}

.settings-treatment-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
}

.settings-treatment-preferences > header {
    justify-content: flex-start;
}

.settings-treatment-pref-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 34px;
    margin-top: 20px;
}

.settings-treatment-pref {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.settings-treatment-pref.select-pref {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
}

.settings-treatment-pref strong,
.settings-treatment-pref small {
    display: block;
}

.settings-treatment-pref strong {
    color: #061b45;
    font-size: 13px;
}

.settings-treatment-pref small {
    margin-top: 4px;
    color: #526b90;
    font-size: 12px;
}

.settings-treatment-pref select,
.settings-treatment-pref input {
    padding: 0 12px;
}

.settings-treatment-empty {
    padding: 24px;
    color: #526b90;
    text-align: center;
}

.settings-treatment-dialog {
    width: min(680px, calc(100vw - 40px));
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(6, 27, 69, .24);
}

.settings-treatment-dialog::backdrop {
    background: rgba(6, 27, 69, .36);
}

.settings-treatment-dialog-panel {
    padding: 20px;
}

.settings-treatment-dialog-panel > header button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dfe8f4;
    border-radius: 6px;
    background: #fff;
    color: #061b45;
    font-size: 20px;
}

.settings-treatment-dialog-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-treatment-dialog-toggles > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfdceb;
    border-radius: 6px;
}

.settings-treatment-dialog-panel > footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 1280px) {
    .settings-treatment-grid {
        grid-template-columns: 1fr;
    }

    .settings-treatment-tools label {
        width: min(320px, 50vw);
    }
}

@media (max-width: 860px) {
    .settings-treatment-workspace {
        padding: 16px;
    }

    .settings-treatment-list-card > header,
    .settings-treatment-tools,
    .settings-treatment-footer,
    .settings-treatment-editor-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-treatment-tools label {
        width: 100%;
    }

    .settings-treatment-form-grid,
    .settings-treatment-section-form,
    .settings-treatment-pref-grid {
        grid-template-columns: 1fr;
    }

    .settings-treatment-pref,
    .settings-treatment-pref.select-pref {
        grid-template-columns: 1fr;
    }

    .settings-treatment-section-row {
        grid-template-columns: 28px 30px minmax(0, 1fr) 34px 34px;
    }

    .settings-treatment-section-row small {
        grid-column: 3 / 4;
    }
}

/* Settings billing tab */
.global-shell .settings-billing-page {
    padding-right: 4px;
    padding-left: 4px;
}

.settings-billing-workspace {
    display: grid;
    gap: 8px;
    padding: 4px;
}

.settings-billing-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-billing-heading > span,
.settings-billing-card-title > span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-billing-heading h1,
.settings-billing-heading p,
.settings-billing-card h2,
.settings-billing-card p {
    margin: 0;
}

.settings-billing-heading h1,
.settings-billing-card h2 {
    color: #061b45;
}

.settings-billing-heading h1 {
    font-size: 19px;
    line-height: 1.2;
}

.settings-billing-heading p,
.settings-billing-card p,
.settings-billing-card small {
    color: #31507f;
    font-size: 12px;
}

.settings-billing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.settings-billing-main,
.settings-billing-side {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.settings-billing-card {
    min-width: 0;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(6, 27, 69, .04);
    padding: 10px;
}

.settings-billing-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.settings-billing-card > header.compact {
    justify-content: flex-start;
}

.settings-billing-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-billing-card h2 {
    font-size: 16px;
}

.settings-billing-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 4px;
}

.settings-billing-subtabs button,
.settings-billing-subtabs a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #29456e;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.settings-billing-subtabs button.is-active,
.settings-billing-subtabs a.is-active {
    color: #075fd7;
    border-bottom-color: #075fd7;
}

.settings-billing-business {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin-top: 8px;
}

.settings-billing-business strong,
.settings-billing-business p {
    display: block;
}

.settings-billing-business strong,
.settings-billing-row-copy strong,
.settings-billing-channel-group strong {
    margin-bottom: 7px;
    color: #061b45;
    font-size: 14px;
}

.settings-billing-business-form,
.settings-billing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 8px;
}

.settings-billing-business-form label,
.settings-billing-form-grid label {
    display: grid;
    gap: 4px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-billing-business-form .wide,
.settings-billing-form-grid .wide {
    grid-column: 1 / -1;
}

.settings-billing-business-form input,
.settings-billing-business-form textarea,
.settings-billing-form-grid input,
.settings-billing-form-grid select,
.settings-billing-form-grid textarea,
.settings-billing-row select,
.settings-billing-row textarea,
.settings-billing-suffix input,
.settings-billing-overview select {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #cfdceb;
    border-radius: 6px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.settings-billing-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    grid-column: 1 / -1;
}

.settings-billing-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.settings-billing-preferences .settings-billing-row {
    grid-template-columns: minmax(0, 1fr) minmax(116px, 160px);
    gap: 6px;
    align-items: center;
    padding: 7px;
    border: 1px solid #e5edf7;
    border-radius: 6px;
}

.settings-billing-preferences .settings-billing-row:first-child {
    border-top: 1px solid #e5edf7;
}

.settings-billing-preferences .settings-billing-row-copy {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
}

.settings-billing-preferences .settings-billing-row-copy > span {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.settings-billing-preferences .settings-billing-row-copy strong {
    margin-bottom: 2px;
    font-size: 12px;
}

.settings-billing-preferences .settings-billing-row-copy small {
    font-size: 11px;
    line-height: 1.25;
}

.settings-billing-preferences .settings-billing-row select,
.settings-billing-preferences .settings-billing-row textarea,
.settings-billing-preferences .settings-billing-suffix input {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
}

.settings-billing-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #e5edf7;
}

.settings-billing-row:first-child {
    border-top: 0;
}

.settings-billing-row.notes-row {
    align-items: start;
}

.settings-billing-row-copy {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.settings-billing-row-copy > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #eef4ff;
    color: #075fd7;
}

.settings-billing-suffix {
    position: relative;
    display: block;
}

.settings-billing-suffix em {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #31507f;
    font-style: normal;
    transform: translateY(-50%);
}

.settings-billing-suffix input {
    padding-right: 34px;
}

.settings-billing-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.settings-billing-save-row .primary-button {
    min-width: 128px;
    justify-content: center;
}

.settings-billing-overview header {
    align-items: flex-start;
}

.settings-billing-overview select {
    width: auto;
    min-width: 122px;
    padding-right: 34px;
}

.settings-billing-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.settings-billing-metric {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 62px;
    padding: 10px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
}

.settings-billing-metric > span {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
}

.settings-billing-metric.tone-blue { background: #f8fbff; }
.settings-billing-metric.tone-blue > span { background: #eaf3ff; color: #075fd7; }
.settings-billing-metric.tone-green { background: #f5fffb; }
.settings-billing-metric.tone-green > span { background: #dcf8ea; color: #078045; }
.settings-billing-metric.tone-orange { background: #fffaf3; }
.settings-billing-metric.tone-orange > span { background: #fff0df; color: #d96b00; }
.settings-billing-metric.tone-red { background: #fff7f7; }
.settings-billing-metric.tone-red > span { background: #ffe9eb; color: #ff2f4e; }

.settings-billing-metric small,
.settings-billing-metric strong {
    display: block;
}

.settings-billing-metric strong {
    margin-top: 4px;
    color: #061b45;
    font-size: 18px;
}

.settings-billing-recent-table-wrap,
.settings-billing-package-table-wrap {
    margin-top: 8px;
    overflow-x: auto;
}

.settings-billing-recent-table,
.settings-billing-package-table {
    width: 100%;
    border-collapse: collapse;
}

.settings-billing-recent-table th,
.settings-billing-recent-table td,
.settings-billing-package-table th,
.settings-billing-package-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5edf7;
    color: #061b45;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.settings-billing-recent-table th,
.settings-billing-package-table th {
    color: #29456e;
    font-weight: 900;
}

.settings-billing-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.settings-billing-status.paid,
.settings-billing-status.active {
    background: #dcf8ea;
    color: #078045;
}

.settings-billing-status.pending {
    background: #fff0df;
    color: #d96b00;
}

.settings-billing-status.overdue {
    background: #ffe9eb;
    color: #ff2f4e;
}

.settings-billing-actions > div {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.settings-billing-actions a,
.settings-billing-actions button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #e5edf7;
    background: transparent;
    color: #061b45;
    text-align: left;
    text-decoration: none;
}

.settings-billing-actions a:last-child,
.settings-billing-actions button:last-child {
    border-bottom: 0;
}

.settings-billing-actions a > span,
.settings-billing-actions button > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #eef4ff;
    color: #075fd7;
}

.settings-billing-actions strong,
.settings-billing-actions small {
    display: block;
    grid-column: 2 / 3;
}

.settings-billing-actions strong {
    color: #061b45;
    font-size: 13px;
}

.settings-billing-actions small {
    margin-top: 2px;
}

.settings-billing-method-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.settings-billing-method-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 100px minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #e5edf7;
}

.settings-billing-method-row:first-child {
    border-top: 0;
}

.settings-billing-method-row strong,
.settings-billing-method-row small {
    display: block;
}

.settings-billing-method-row input {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #cfdceb;
    border-radius: 6px;
}

.settings-billing-method-row button,
.settings-billing-table-actions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfdceb;
    border-radius: 6px;
    background: #fff;
    color: #075fd7;
    font-size: 13px;
    font-weight: 800;
}

.settings-billing-table-actions {
    display: inline-flex;
    gap: 8px;
}

.settings-billing-table-actions button:last-child {
    color: #ff2f4e;
}

.settings-packages-card {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, .06);
}

.settings-packages-header,
.settings-packages-toolbar,
.settings-packages-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-packages-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-packages-heading > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-packages-heading h2,
.settings-packages-heading p {
    margin: 0;
}

.settings-packages-heading h2 {
    color: #061b45;
    font-size: 18px;
}

.settings-packages-heading p {
    margin-top: 6px;
    color: #31507f;
    font-size: 13px;
}

.settings-packages-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.settings-package-stat {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 94px;
    padding: 16px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
}

.settings-package-stat > span {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
}

.settings-package-stat small,
.settings-package-stat strong,
.settings-package-stat em {
    display: block;
}

.settings-package-stat small {
    color: #061b45;
    font-size: 12px;
    font-weight: 900;
}

.settings-package-stat strong {
    margin-top: 8px;
    color: #061b45;
    font-size: 22px;
}

.settings-package-stat em {
    margin-top: 6px;
    color: #31507f;
    font-size: 12px;
    font-style: normal;
}

.settings-package-stat.tone-blue > span { background: #eaf3ff; color: #075fd7; }
.settings-package-stat.tone-green > span { background: #dcf8ea; color: #078045; }
.settings-package-stat.tone-orange > span { background: #fff0df; color: #d96b00; }
.settings-package-stat.tone-purple > span { background: #efe7ff; color: #7c3aed; }

.settings-packages-toolbar > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.settings-packages-toolbar select,
.settings-packages-search input,
.settings-package-form-grid input,
.settings-package-form-grid select,
.settings-package-form-grid textarea {
    min-height: 38px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.settings-packages-toolbar select {
    min-width: 170px;
    padding: 0 40px 0 14px;
    font-size: 13px;
    font-weight: 800;
}

.settings-packages-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: min(100%, 300px);
}

.settings-packages-search svg {
    position: absolute;
    right: 14px;
    color: #31507f;
}

.settings-packages-search input {
    width: 100%;
    padding: 0 42px 0 14px;
}

.settings-billing-package-table-wrap {
    border: 1px solid #dfe8f4;
    border-radius: 10px;
}

.settings-billing-package-table {
    min-width: 980px;
}

.settings-billing-package-table th {
    background: #f8fbff;
    color: #061b45;
    font-size: 12px;
}

.settings-billing-package-table th,
.settings-billing-package-table td {
    padding: 15px 16px;
}

.settings-package-name {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.settings-package-name strong,
.settings-package-name small {
    display: block;
}

.settings-package-name small {
    margin-top: 5px;
    color: #31507f;
}

.settings-package-avatar {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
}

.settings-package-avatar svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-package-avatar.tone-green { background: #dcf8ea; color: #078045; }
.settings-package-avatar.tone-orange { background: #fff0df; color: #d96b00; }
.settings-package-avatar.tone-blue { background: #eaf3ff; color: #075fd7; }
.settings-package-avatar.tone-purple { background: #efe7ff; color: #7c3aed; }
.settings-package-avatar.tone-pink { background: #ffe8f1; color: #db2777; }
.settings-package-avatar.tone-teal { background: #ddfbf7; color: #0f766e; }

.settings-package-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.settings-package-status.active { background: #dcf8ea; color: #078045; }
.settings-package-status.inactive { background: #e7edf5; color: #31507f; }
.settings-package-status.draft { background: #fff0df; color: #d96b00; }
.settings-package-status.archived { background: #f1f5f9; color: #64748b; }

.settings-packages-footer nav {
    display: inline-flex;
    gap: 8px;
}

.settings-packages-footer button {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font-weight: 900;
}

.settings-packages-footer button:first-child svg {
    transform: rotate(180deg);
}

.settings-packages-footer button.is-active {
    border-color: #075fd7;
    background: #075fd7;
    color: #fff;
}

.settings-packages-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #e8eef7;
}

.settings-packages-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 30px;
    border: 1px dashed #cfdceb;
    border-radius: 10px;
    color: #061b45;
}

.settings-packages-mobile-list {
    display: none;
}

.settings-package-dialog,
.settings-package-delete-dialog {
    width: min(720px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(6, 27, 69, .24);
}

.settings-package-delete-dialog {
    width: min(480px, calc(100vw - 28px));
}

.settings-package-dialog::backdrop,
.settings-package-delete-dialog::backdrop {
    background: rgba(6, 27, 69, .34);
}

.settings-package-dialog [data-package-form],
.settings-package-delete-dialog > div {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.settings-package-dialog header,
.settings-package-dialog footer,
.settings-package-delete-dialog header,
.settings-package-delete-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-package-dialog h2,
.settings-package-delete-dialog h2,
.settings-package-delete-dialog p {
    margin: 0;
}

.settings-package-dialog header > button,
.settings-package-delete-dialog header > button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #f4f7fb;
    color: #31507f;
}

.settings-package-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-package-form-grid label {
    display: grid;
    gap: 6px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-package-form-grid .wide {
    grid-column: 1 / -1;
}

.settings-package-form-grid input,
.settings-package-form-grid select,
.settings-package-form-grid textarea {
    width: 100%;
    padding: 8px 10px;
}

.settings-package-form-grid small {
    min-height: 14px;
    color: #e11d48;
    font-size: 11px;
}

.settings-danger-button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    background: #ffe9eb;
    color: #e11d48;
    font-weight: 900;
}

.settings-package-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    padding: 12px 16px;
    border-radius: 10px;
    background: #dcf8ea;
    color: #078045;
    box-shadow: 0 14px 36px rgba(6, 27, 69, .18);
    font-weight: 900;
}

.settings-billing-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.settings-billing-toggle-row span {
    min-width: 0;
}

.settings-billing-channel-group {
    display: grid;
    gap: 6px;
}

.settings-billing-channel-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.settings-billing-channel-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

.settings-insurance-settings-card {
    display: grid;
    gap: 0;
    min-width: 0;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, .06);
}

.settings-insurance-settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4edf8;
}

.settings-insurance-settings-header > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #eaf3ff;
    color: #075fd7;
}

.settings-insurance-settings-header h2,
.settings-insurance-settings-header p,
.settings-insurance-setting-row h3,
.settings-insurance-setting-row p,
.settings-insurance-notes-row h3,
.settings-insurance-notes-row p,
.settings-insurance-info-box p {
    margin: 0;
}

.settings-insurance-settings-header h2 {
    color: #061b45;
    font-size: 18px;
}

.settings-insurance-settings-header p,
.settings-insurance-setting-row p,
.settings-insurance-notes-row p {
    margin-top: 3px;
    color: #31507f;
    font-size: 13px;
}

.settings-insurance-setting-list {
    display: grid;
}

.settings-insurance-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #e4edf8;
}

.settings-insurance-setting-row h3,
.settings-insurance-notes-row h3 {
    color: #061b45;
    font-size: 14px;
}

.settings-insurance-setting-row > .settings-system-switch {
    justify-self: start;
}

.settings-insurance-select {
    display: grid;
    gap: 6px;
}

.settings-insurance-select select {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.settings-insurance-select small {
    min-height: 14px;
    color: #e11d48;
    font-size: 12px;
}

.settings-insurance-manage-button {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #075fd7;
    border-radius: 8px;
    background: #fff;
    color: #075fd7;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.settings-insurance-notes-row {
    display: grid;
    gap: 8px;
    padding: 14px 0 10px;
}

.settings-insurance-notes-row textarea {
    width: 100%;
    min-height: 76px;
    padding: 10px 12px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    color: #061b45;
    font: inherit;
    resize: vertical;
}

.settings-insurance-notes-row label {
    display: grid;
    gap: 4px;
}

.settings-insurance-notes-row small {
    justify-self: end;
    color: #31507f;
    font-size: 12px;
}

.settings-insurance-setting-row.is-muted,
.settings-insurance-notes-row.is-muted {
    opacity: .62;
}

.settings-insurance-info-box {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #cde2ff;
    border-radius: 10px;
    background: #eef6ff;
}

.settings-insurance-info-box > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #075fd7;
    color: #fff;
}

.settings-insurance-info-box strong {
    display: block;
    margin-bottom: 2px;
    color: #061b45;
}

.settings-insurance-info-box p {
    color: #31507f;
    font-size: 13px;
}

.settings-insurance-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.settings-insurance-save-row .primary-button {
    min-width: 164px;
    justify-content: center;
}

.settings-insurance-forms {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, .06);
}

.settings-insurance-forms-layout {
    display: grid;
    grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.settings-insurance-form-list-card,
.settings-insurance-form-editor {
    min-width: 0;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
}

.settings-insurance-form-list-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 12px;
}

.settings-insurance-forms-toolbar {
    display: grid;
    gap: 10px;
}

.settings-insurance-forms-toolbar select {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #d4e0ee;
    border-radius: 8px;
    color: #061b45;
    font: inherit;
}

.settings-insurance-form-list {
    display: grid;
    gap: 8px;
}

.settings-insurance-form-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    padding: 11px;
    border: 1px solid #e1eaf5;
    border-radius: 8px;
    background: #f8fbff;
    color: #061b45;
    text-align: left;
}

.settings-insurance-form-item.is-selected {
    border-color: #075fd7;
    background: #eef6ff;
}

.settings-insurance-form-item strong,
.settings-insurance-form-item small,
.settings-insurance-form-item em,
.settings-insurance-form-count,
.settings-insurance-form-empty,
.settings-insurance-form-editor h3,
.settings-insurance-form-editor p,
.settings-insurance-form-fields h4 {
    margin: 0;
}

.settings-insurance-form-item strong {
    display: block;
    font-size: 13px;
}

.settings-insurance-form-item small {
    display: block;
    margin-top: 3px;
    color: #31507f;
    font-size: 12px;
}

.settings-insurance-form-item mark,
.settings-insurance-form-item em {
    display: inline-flex;
    justify-content: center;
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.settings-insurance-form-item mark {
    background: #dcf8ea;
    color: #078045;
}

.settings-insurance-form-item mark.inactive {
    background: #e7edf6;
    color: #47617e;
}

.settings-insurance-form-item em {
    margin-top: 6px;
    border: 1px solid #b9d4ff;
    background: #fff;
    color: #075fd7;
}

.settings-insurance-form-count,
.settings-insurance-form-empty {
    color: #31507f;
    font-size: 12px;
}

.settings-insurance-form-editor {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.settings-insurance-form-editor > header,
.settings-insurance-form-fields > div,
.settings-insurance-form-editor > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-insurance-form-editor h3 {
    color: #061b45;
    font-size: 17px;
}

.settings-insurance-form-editor p {
    margin-top: 3px;
    color: #31507f;
    font-size: 13px;
}

.settings-insurance-form-delete {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #ffd3dc;
    border-radius: 8px;
    background: #fff4f6;
    color: #e11d48;
    font-weight: 900;
}

.settings-insurance-form-delete:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.settings-insurance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-insurance-form-grid label,
.settings-insurance-field-row label,
.settings-insurance-default-toggle {
    display: grid;
    gap: 6px;
    color: #061b45;
    font-size: 12px;
    font-weight: 900;
}

.settings-insurance-form-grid .wide {
    grid-column: 1 / -1;
}

.settings-insurance-form-grid input,
.settings-insurance-form-grid select,
.settings-insurance-form-grid textarea,
.settings-insurance-field-row input,
.settings-insurance-field-row select {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    color: #061b45;
    font: inherit;
}

.settings-insurance-form-grid textarea {
    padding-top: 9px;
    resize: vertical;
}

.settings-insurance-default-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #f8fbff;
}

.settings-insurance-default-toggle small {
    display: block;
    margin-top: 2px;
    color: #31507f;
    font-weight: 700;
}

.settings-insurance-form-fields {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.settings-insurance-form-fields h4 {
    color: #061b45;
    font-size: 14px;
}

.settings-insurance-form-fields [data-insurance-form-fields] {
    display: grid;
    gap: 8px;
}

.settings-insurance-field-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 150px 104px 34px;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid #e1eaf5;
    border-radius: 8px;
    background: #fbfdff;
}

.settings-insurance-required {
    display: flex !important;
    align-items: center;
    min-height: 38px;
}

.settings-insurance-required input {
    width: 16px;
    min-height: 16px;
}

.settings-insurance-field-row button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #ffd3dc;
    border-radius: 8px;
    background: #fff4f6;
    color: #e11d48;
}

.settings-insurance-field-row button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-save-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    padding: 12px 16px;
    border-radius: 10px;
    background: #dcf8ea;
    color: #078045;
    box-shadow: 0 14px 36px rgba(6, 27, 69, .18);
    font-weight: 900;
}

.settings-insurance-providers {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid #dfe8f4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(6, 27, 69, .06);
}

.settings-insurance-provider-header,
.settings-insurance-toolbar,
.settings-insurance-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-insurance-provider-header h2,
.settings-insurance-provider-header p,
.settings-provider-dialog h2,
.settings-provider-dialog p {
    margin: 0;
}

.settings-insurance-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-insurance-title-row h2 {
    color: #061b45;
    font-size: 18px;
}

.settings-insurance-provider-header p {
    margin-top: 10px;
    color: #31507f;
    font-size: 14px;
}

.settings-insurance-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    color: #29456e;
    font-weight: 900;
    text-decoration: none;
}

.settings-insurance-pill.is-active {
    border-color: #0b6dff;
    color: #075fd7;
}

.settings-insurance-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.settings-insurance-stat {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 16px;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    background: #fff;
}

.settings-insurance-stat > span {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 14px;
}

.settings-insurance-stat small,
.settings-insurance-stat strong,
.settings-insurance-stat em {
    display: block;
}

.settings-insurance-stat small {
    color: #061b45;
    font-size: 12px;
    font-weight: 900;
}

.settings-insurance-stat strong {
    margin-top: 8px;
    color: #061b45;
    font-size: 22px;
}

.settings-insurance-stat em {
    margin-top: 6px;
    color: #31507f;
    font-size: 12px;
    font-style: normal;
}

.settings-insurance-stat.tone-blue > span { background: #eaf3ff; color: #075fd7; }
.settings-insurance-stat.tone-green > span { background: #dcf8ea; color: #078045; }
.settings-insurance-stat.tone-orange > span { background: #fff0df; color: #d96b00; }
.settings-insurance-stat.tone-purple > span { background: #efe7ff; color: #7c3aed; }
.settings-insurance-stat.tone-orange strong { color: #d96b00; }
.settings-insurance-stat.tone-green strong { color: #066b48; }

.settings-insurance-toolbar > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.settings-insurance-toolbar select,
.settings-insurance-search input,
.settings-provider-form-grid input,
.settings-provider-form-grid select,
.settings-provider-form-grid textarea {
    min-height: 38px;
    border: 1px solid #cfdceb;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font: inherit;
}

.settings-insurance-toolbar select {
    min-width: 170px;
    padding: 0 40px 0 14px;
    font-size: 13px;
    font-weight: 800;
}

.settings-insurance-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: min(100%, 300px);
}

.settings-insurance-search svg {
    position: absolute;
    right: 14px;
    color: #31507f;
}

.settings-insurance-search input {
    width: 100%;
    padding: 0 42px 0 14px;
}

.settings-insurance-table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
}

.settings-insurance-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.settings-insurance-table th,
.settings-insurance-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef7;
    color: #061b45;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.settings-insurance-table th {
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

.settings-insurance-table tr:last-child td {
    border-bottom: 0;
}

.settings-insurance-table td small,
.settings-insurance-table td strong {
    display: block;
}

.settings-insurance-table td small {
    margin-top: 5px;
    color: #31507f;
}

.settings-provider-name {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.settings-provider-name > span,
.settings-provider-details-heading > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    background: #eef4ff;
    color: #075fd7;
    font-size: 12px;
    font-weight: 900;
}

.settings-provider-type,
.settings-provider-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.settings-provider-type.health-insurance { background: #eaf3ff; color: #075fd7; }
.settings-provider-type.general-insurance { background: #efe7ff; color: #6d28d9; }
.settings-provider-type.corporate-insurance { background: #ddfbf7; color: #0f766e; }
.settings-provider-type.government-scheme { background: #dcf8ea; color: #078045; }
.settings-provider-status.active { background: #dcf8ea; color: #078045; }
.settings-provider-status.inactive { background: #ffe9eb; color: #e11d48; }
.settings-provider-status.pending { background: #fff0df; color: #d96b00; }

.settings-provider-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.settings-provider-actions > button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #061b45;
}

.settings-provider-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-provider-more div {
    right: 0;
    left: auto;
}

.settings-provider-more button.danger {
    color: #e11d48;
}

.settings-insurance-mobile-list {
    display: none;
}

.settings-insurance-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 32px;
    border: 1px dashed #cfdceb;
    border-radius: 10px;
    color: #061b45;
}

.settings-insurance-pagination nav {
    display: inline-flex;
    gap: 8px;
}

.settings-insurance-pagination button {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dfe8f4;
    border-radius: 8px;
    background: #fff;
    color: #061b45;
    font-weight: 900;
}

.settings-insurance-pagination button:first-child svg {
    transform: rotate(180deg);
}

.settings-insurance-pagination button.is-active {
    border-color: #075fd7;
    background: #075fd7;
    color: #fff;
}

.settings-provider-dialog {
    width: min(720px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(6, 27, 69, .24);
}

.settings-provider-dialog::backdrop {
    background: rgba(6, 27, 69, .34);
}

.settings-provider-dialog [data-provider-form],
.settings-provider-dialog form,
.settings-provider-dialog article {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.settings-provider-dialog header,
.settings-provider-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-provider-dialog header > button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #f4f7fb;
    color: #31507f;
}

.settings-provider-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-provider-form-grid label {
    display: grid;
    gap: 6px;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
}

.settings-provider-form-grid .wide {
    grid-column: 1 / -1;
}

.settings-provider-form-grid input,
.settings-provider-form-grid select,
.settings-provider-form-grid textarea {
    width: 100%;
    padding: 8px 10px;
}

.settings-provider-details {
    width: min(780px, calc(100vw - 28px));
}

.settings-provider-details-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-provider-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
}

.settings-provider-detail-grid dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.settings-provider-detail-grid div {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eef7;
}

.settings-provider-detail-grid dt,
.settings-provider-detail-grid h3 {
    color: #31507f;
    font-size: 12px;
    font-weight: 900;
}

.settings-provider-detail-grid dd,
.settings-provider-detail-grid p {
    margin: 4px 0 0;
    color: #061b45;
    font-size: 14px;
}

@media (max-width: 1320px) {
    .settings-billing-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .settings-billing-workspace {
        padding: 4px;
    }

    .settings-billing-preferences {
        grid-template-columns: 1fr;
    }

    .settings-billing-business,
    .settings-billing-business-form,
    .settings-billing-form-grid,
    .settings-billing-metrics,
    .settings-billing-row,
    .settings-billing-method-row {
        grid-template-columns: 1fr;
    }

    .settings-billing-card > header,
    .settings-billing-actions a,
    .settings-billing-actions button {
        align-items: flex-start;
    }

    .settings-billing-inline-actions,
    .settings-billing-save-row {
        justify-content: stretch;
    }

    .settings-billing-inline-actions > *,
    .settings-billing-save-row .primary-button {
        width: 100%;
    }

    .settings-insurance-settings-card {
        padding: 16px;
    }

    .settings-insurance-setting-row {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
    }

    .settings-insurance-save-row {
        justify-content: stretch;
    }

    .settings-insurance-save-row .primary-button,
    .settings-insurance-manage-button {
        width: 100%;
        justify-content: center;
    }

    .settings-insurance-providers {
        padding: 14px;
    }

    .settings-insurance-forms {
        padding: 14px;
    }

    .settings-insurance-forms-layout,
    .settings-insurance-form-grid,
    .settings-insurance-field-row {
        grid-template-columns: 1fr;
    }

    .settings-insurance-form-editor > header,
    .settings-insurance-form-fields > div,
    .settings-insurance-form-editor > footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-insurance-form-delete,
    .settings-insurance-form-editor > footer .primary-button,
    .settings-insurance-form-editor > footer .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .settings-insurance-provider-header,
    .settings-insurance-toolbar,
    .settings-insurance-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-insurance-provider-header .primary-button,
    .settings-insurance-search,
    .settings-insurance-toolbar select {
        width: 100%;
    }

    .settings-insurance-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-packages-header,
    .settings-packages-toolbar,
    .settings-packages-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-packages-header .primary-button,
    .settings-packages-search,
    .settings-packages-toolbar select,
    .settings-packages-save-row .primary-button {
        width: 100%;
    }

    .settings-packages-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-package-form-grid,
    .settings-provider-form-grid,
    .settings-provider-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .settings-billing-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .settings-insurance-stats {
        grid-template-columns: 1fr;
    }

    .settings-packages-stats {
        grid-template-columns: 1fr;
    }

    .settings-packages-heading {
        align-items: flex-start;
    }

    .settings-billing-package-table-wrap:has(.settings-billing-package-table) {
        display: none;
    }

    .settings-packages-mobile-list {
        display: grid;
        gap: 12px;
    }

    .settings-package-mobile-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid #dfe8f4;
        border-radius: 10px;
        background: #fff;
    }

    .settings-package-mobile-card header,
    .settings-package-mobile-card footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .settings-package-mobile-card dl {
        display: grid;
        gap: 8px;
        margin: 0;
    }

    .settings-package-mobile-card dt {
        color: #31507f;
        font-size: 12px;
        font-weight: 900;
    }

    .settings-package-mobile-card dd {
        margin: 3px 0 0;
        color: #061b45;
        font-size: 13px;
    }

    .settings-insurance-table-wrap {
        display: none;
    }

    .settings-insurance-mobile-list {
        display: grid;
        gap: 12px;
    }

    .settings-provider-mobile-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid #dfe8f4;
        border-radius: 10px;
        background: #fff;
    }

    .settings-provider-mobile-card header,
    .settings-provider-mobile-card footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .settings-provider-mobile-card dl {
        display: grid;
        gap: 8px;
        margin: 0;
    }

    .settings-provider-mobile-card div {
        min-width: 0;
    }

    .settings-provider-mobile-card dt {
        color: #31507f;
        font-size: 12px;
        font-weight: 900;
    }

    .settings-provider-mobile-card dd {
        margin: 3px 0 0;
        color: #061b45;
        font-size: 13px;
    }

    .settings-insurance-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    .app-breadcrumbs {
        max-width: min(46vw, 360px);
    }

    .app-breadcrumbs.is-long li:not(.is-home):not(.is-current) {
        display: none;
    }

    .app-breadcrumbs.is-long li.is-current::before {
        content: "...";
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 2px 0 4px;
        color: #8a9ab3;
        font-weight: 900;
    }

    .app-breadcrumbs li.is-current > span {
        max-width: 190px;
    }
}

@media (max-width: 760px) {
    .app-breadcrumbs {
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .app-breadcrumbs li.is-current > span {
        max-width: calc(100vw - 132px);
    }
}

.reports-page {
    gap: 3px !important;
    margin: 3px !important;
}

.reports-page-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.reports-kpi-grid {
    margin-top: 3px !important;
}