:root {
    --primary: #00aeef;
    --disabled: #a5e6ff;
    --button: #efefef;
    --red: #d73f3f;
    --text: #646464;
    --stroke: #eaeaea;
    --yellow: #ffac12;

    --placeholder: #c2c2c2;
    --white: #ffffff;
    --secondary: #f0f6ff;
    --blue-stroke: #e3eeff;
    --black: #000000;
    --nav-blue: #d1f3ff;

    --gradient: linear-gradient(135deg, #209ad3, #1d73ff);
}

/* Auth and laboratory portal */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: #fafafa;
    font-family: "Instrument Sans", Arial, sans-serif;
}

.auth-card {
    width: min(680px, calc(100vw - 32px));
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 40px;
    padding: 36px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
}

.auth-logo {
    width: 136px;
    justify-self: center;
}

.auth-heading {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.auth-heading h1 {
    margin: 0;
    color: #111;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.auth-heading p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.auth-form {
    display: grid;
    align-content: start;
    gap: 20px;
}

.auth-form label {
    display: grid;
    gap: 9px;
    color: rgba(0, 0, 0, 0.56);
    font-size: 12px;
}

.auth-form input {
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.42);
    border-radius: 8px;
    background: #fff;
    color: #111;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
}

.auth-form input::placeholder {
    color: #b9b9b9;
}

.auth-status {
    margin: -8px 0 0;
    padding: 11px 13px;
    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 8px;
    background: #edfaff;
    color: #0d6f93;
    font-size: 13px;
    line-height: 1.4;
}

.auth-links {
    display: flex;
    justify-content: flex-end;
    margin-top: -8px;
    font-size: 13px;
}

.auth-links-center {
    justify-content: center;
    margin-top: -4px;
}

.auth-links a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -8px 0 40px;
    color: var(--primary);
    font-size: 12px;
}

.auth-help span {
    width: 13px;
    height: 13px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
}

.auth-form button {
    height: 47px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
}

.auth-error {
    margin: -12px 0 0;
    color: #d73f3f;
    font-size: 13px;
}

.auth-form .field-error {
    margin-top: -3px;
    color: #d73f3f;
    font-size: 12px;
}

/* Auth password input with integrated eye icon */
.auth-password-label {
    position: relative;
}

.auth-form input[data-auth-password-input] {
    padding-right: 45px;
}

.auth-password-icon {
    position: absolute;
    right: 15px;
    top: 65%;
    transform: translateY(-50%);
    background: none !important;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-password-icon:hover {
    opacity: 0.7;
}

.auth-password-icon:focus-visible {
    outline: 2px solid #00AEEF;
    outline-offset: 2px;
    border-radius: 2px;
}

.auth-password-eye-open,
.auth-password-eye-closed {
    width: 20px;
    height: 20px;
}

.auth-password-eye-open {
    display: block;
}

.auth-password-eye-closed {
    display: none;
}

.auth-password-icon.is-visible .auth-password-eye-open {
    display: none;
}

.auth-password-icon.is-visible .auth-password-eye-closed {
    display: block;
}

.admin-top-actions form {
    margin: 0;
}

.admin-top-actions button.top-action {
    font: inherit;
    cursor: pointer;
}

.lab-shell .admin-top-actions form {
    margin: 0;
}

.lab-shell .top-action {
    font: inherit;
    cursor: pointer;
}

.lab-portal-page {
    display: grid;
    gap: 24px;
}

.lab-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.lab-stat-card {
    min-height: 122px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.lab-stat-card strong {
    display: block;
    color: var(--primary);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}

.lab-stat-card span {
    display: block;
    margin-top: 12px;
    color: #5e5e5e;
    font-size: 16px;
}

.lab-stat-card img {
    width: 48px;
    height: 48px;
    opacity: 0.42;
}

.lab-orders-panel {
    min-height: calc(100dvh - 340px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.lab-orders-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lab-orders-panel__head h2 {
    margin: 0;
    color: #111;
    font-size: 22px;
    font-weight: 800;
}

.lab-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.lab-order-tile {
    min-height: 140px;
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #fff;
}

.lab-order-tile h3 {
    margin: 0;
    color: #111;
    font-size: 16px;
    font-weight: 800;
}

.lab-order-tile__meta,
.lab-order-tile__meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 12px;
}

.lab-order-tile__meta i {
    width: 1px;
    height: 14px;
    background: #d9d9d9;
}

.lab-order-tile__meta img {
    width: 14px;
    height: 14px;
}

.lab-order-tile__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #111;
    font-size: 15px;
}

.lab-order-tile__bottom a {
    min-width: 112px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #ededed;
    color: #111;
    font-size: 15px;
    text-decoration: none;
}

.ar-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    background: #efefef;
    color: #1a1a1a;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.ar-sort-button img {
    width: 22px;
    height: 22px;
}

.lab-portal-pagination,
.ar-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.ar-page-button,
.ar-page-number,
.ar-page-ellipsis {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #2b3036;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.ar-page-button {
    border: 1px solid #d4d4d4;
    background: #fff;
}

.ar-page-button img {
    width: 18px;
    height: 18px;
}

.ar-page-button.is-disabled {
    opacity: 0.45;
}

.ar-page-number.is-active {
    border: 1px solid var(--primary);
    background: rgba(0, 174, 239, 0.08);
    color: #101820;
}

.ar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 14px;
}

.ar-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.lab-detail-summary {
    display: grid;
    grid-template-columns: 2fr repeat(5, minmax(0, 1fr));
    gap: 28px;
    padding: 28px 30px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.lab-detail-summary div,
.lab-detail-card div {
    display: grid;
    gap: 8px;
}

.lab-detail-summary strong,
.lab-detail-card strong {
    color: #111;
    font-size: 16px;
    font-weight: 500;
}

.lab-detail-summary span,
.lab-detail-card span,
.lab-detail-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.lab-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.lab-detail-card {
    min-height: 178px;
    display: grid;
    align-content: start;
    gap: 24px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.lab-detail-card h2 {
    margin: 0;
    color: #111;
    font-size: 16px;
    font-weight: 500;
}

.lab-detail-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-status-form {
    display: grid;
    gap: 26px;
}

.lab-status-form label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111;
    font-size: 14px;
}

.lab-status-form input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.lab-status-form button {
    width: fit-content;
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: #9fe2fb;
    color: #fff;
    cursor: pointer;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
}

.lab-clinic-card {
    grid-column: 1 / 2;
}

/* Prescription templates and prescriptions */
.setup-tabs.rx-tabs {
    display: inline-flex;
    width: fit-content;
    border-radius: 8px;
    overflow: visible;
    background: #f0f0f0;
}

.setup-tabs.rx-tabs a {
    min-width: 98px;
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3e4a5c;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
}

.setup-tabs.rx-tabs a.is-active {
    background: #fff;
    border-color: #9faebd;
    color: #151922;
}

.rx-template-grid .setup-list-item,
.rx-template-grid .setup-list-item:visited {
    color: inherit;
    text-decoration: none;
}

.rx-whatsapp-form,
.rx-prescription-form,
.rx-note-form {
    display: grid;
    gap: 16px;
}

.rx-template-medicines {
    display: grid;
    gap: 24px;
}

.rx-whatsapp-form .setup-control--textarea {
    min-height: 126px;
}

.rx-prescription-modal__panel,
.rx-note-modal__panel {
    width: min(540px, calc(100vw - 40px));
}

.rx-prescription-modal__panel {
    max-height: calc(100vh - 64px);
    scrollbar-width: thin;
    scrollbar-color: #00aeef #eff7fc;
}

.setup-modal__panel.rx-prescription-modal__panel::-webkit-scrollbar {
    width: 7px;
}

.setup-modal__panel.rx-prescription-modal__panel::-webkit-scrollbar-track {
    background: #eff7fc;
    border-radius: 999px;
}

.setup-modal__panel.rx-prescription-modal__panel::-webkit-scrollbar-thumb {
    background: #00aeef;
    border-radius: 999px;
}

.rx-lang-tabs {
    margin-top: -6px;
}

.rx-medicine-box {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 18px 20px;
    display: grid;
    gap: 5px;
}

.rx-medicine-box h3 {
    margin: 0;
    color: #0b0b0b;
    font-size: 15px;
    font-weight: 600;
}

.rx-medicine-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rx-remove-medicine {
    border: 0;
    background: transparent;
    color: #ff2c2c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.rx-remove-medicine[hidden],
.rx-remove-medicine:disabled {
    display: none;
}

.rx-med-grid {
    display: grid;
    gap: 14px;
}

.rx-med-grid--top {
    grid-template-columns: minmax(0, 1fr) 120px;
}

.rx-chip-block {
    display: grid;
    gap: 10px;
}

.rx-chip-block > span {
    color: #0b0b0b;
    font-size: 15px;
    font-weight: 600;
    padding-top: 15px;
}

.rx-add-more {
    width: fit-content;
    border: 0;
    background: transparent;
    color: #00aeef;
    font-size: 18px;
    font-weight: 500;
    padding: 2px 0;
    cursor: pointer;
}

.rx-template-submit {
    width: 76px;
}

.rx-template-card {
    padding-top: 30px;
    padding-bottom: 30px;
}

.rx-template-grid {
    gap: 20px;
}

.rx-template-grid .setup-list-item {
    min-height: 78px;
}

.rx-note-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}

.rx-note-item:hover,
.rx-note-item:focus-within {
    border-color: #00aeef;
}

.rx-note-item .setup-list-item__main {
    border: none;
    background: transparent;
    border-radius: 16px 0 0 16px;
}

.rx-note-item .setup-card-actions {
    border: none;
    background: transparent;
    border-radius: 0 16px 16px 0;
}

.rx-note-item .setup-list-item__body {
    justify-items: start;
    text-align: left;
}

.rx-note-item .setup-list-item__body strong,
.rx-note-item .setup-list-item__body em {
    width: 100%;
    text-align: left;
}

.rx-radio-row {
    display: flex;
    align-items: center;
    gap: 34px;
}

.rx-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 14px;
    font-weight: 600;
}

.rx-radio input {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    background: #ffffff;
    display: inline-grid;
    place-content: center;
    margin: 0;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.rx-radio input::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    background: #00aeef;
    transition: transform 0.16s ease;
}

.rx-radio input:checked {
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.rx-radio input:checked::before {
    transform: scale(1);
}

.rx-radio:has(input:checked) {
    color: rgba(0, 0, 0, 0.62);
    font-weight: 700;
}

.rx-detail-card {
    padding: 28px 30px 30px;
}

.rx-template-detail-card {
    min-height: 312px;
    padding: 30px 30px;
    gap: 36px;
}

.rx-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rx-detail-head h2 {
    margin: 0;
    color: #050505;
    font-size: 26px;
    font-weight: 800;
}

.rx-template-edit-btn {
    width: 74px;
    height: 46px;
    padding: 0;
    justify-content: center;
}

.rx-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.rx-med-detail {
    min-height: 78px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.rx-med-detail strong {
    color: #0a0a0a;
    font-size: 16px;
    font-weight: 800;
}

.rx-med-detail strong span {
    color: #00aeef;
}

.rx-med-detail em {
    color: rgba(0, 0, 0, 0.48);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.rx-med-detail p {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
}

.rx-med-detail > img {
    width: 16px;
    height: 16px;
}

.rx-template-detail-page .rx-detail-grid {
    gap: 20px 20px;
}

.rx-template-detail-page .rx-med-detail {
    min-height: 78px;
    border-radius: 14px;
    padding: 12px 18px 14px 16px;
    grid-template-columns: minmax(0, 1fr) 18px;
    box-shadow: none;
    align-items: start;
}

.rx-med-detail__main {
    min-width: 0;
}

.rx-med-detail__title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.rx-med-detail__title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.rx-med-detail__meta {
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
    line-height: 1.2;
}

.rx-med-detail__meta span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.rx-med-detail__meta span:last-child {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
}

.rx-med-detail__meta img {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.rx-med-detail__chev {
    width: 16px;
    height: 16px;
    justify-self: end;
}

.rx-page {
    display: grid;
    gap: 28px;
}

.rx-list-scroll {
    max-height: 600px;
    overflow-y: scroll;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #00aeef #eff7fc;
}

.rx-list-card {
    padding: 30px;
}

.rx-page--list .rx-list-card {
    min-height: auto;
    padding: 30px;
    overflow: visible;
}

.rx-page--list .rx-list-toolbar {
    align-items: center;
    flex-direction: row;
    margin-bottom: 30px;
}

.rx-page--list .bill-search {
    width: min(400px, 100%);
    flex: 0 0 min(400px, 100%);
    height: 47px;
    border-color: rgba(0, 0, 0, 0.34);
    border-radius: 10px;
}

.rx-page--list .bill-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 20px;
    flex: 0 0 auto;
}

.rx-page--list .bill-actions .pt-sort {
    width: auto;
}

.rx-page--list .bill-actions .pt-btn {
    height: 46px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 115px;
}

.rx-page--list .bill-actions .pt-btn--primary {
    min-width: 169px;
}

.rx-page--list .bill-actions .pt-sort__btn {
    min-width: 110px;
}

.rx-page--list .pt-sort__menu {
    top: calc(100% + 10px);
}

.rx-page--list .rx-list-scroll {
    max-height: none;
    overflow: visible;
    padding: 0;
}

.rx-page--list .bill-group__title {
    margin: 0 0 16px;
    color: #141820;
    font-size: 20px;
    font-weight: 500;
}

.rx-page--list .rx-prescription-grid {
    gap: 20px;
    margin-bottom: 28px;
}

.rx-page--list .rx-prescription-card {
    min-height: 79px;
    border-color: rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 14px;
    box-shadow: none;
}

.rx-page--list .rx-prescription-card__body {
    gap: 8px;
}

.rx-page--list .rx-prescription-card__body strong {
    font-size: 16px;
    line-height: 1.2;
}

.rx-page--list .rx-prescription-card__body em {
    font-size: 12px;
}

.rx-page--list .rx-prescription-card .bill-soft-btn {
    min-width: 66px;
    height: 34px;
    border-radius: 8px;
    padding: 0 14px;
}

.rx-list-pagination {
    margin-top: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.rx-pagination-per-page {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.rx-page-link,
.rx-page-ellipsis {
    min-width: 34px;
    height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3f4652;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.rx-page-link {
    border: 1px solid transparent;
    background: transparent;
}

.rx-page-link:first-child,
.rx-page-link:last-child {
    border-color: rgba(0, 0, 0, 0.12);
    background: #ffffff;
}

.rx-page-link.is-active {
    color: #0a0a0a;
    border-color: var(--primary);
    background: #ffffff;
}

.rx-page-link.is-disabled {
    opacity: 0.42;
    pointer-events: none;
}

.rx-page-link img {
    width: 18px;
    height: 18px;
    display: block;
}

.rx-list-scroll::-webkit-scrollbar,
.bill-patient-list::-webkit-scrollbar,
.rx-repeat-list::-webkit-scrollbar,
.setup-doctor-list::-webkit-scrollbar,
.setup-list-grid::-webkit-scrollbar,
.treatment-list-grid::-webkit-scrollbar,
.medicine-grid::-webkit-scrollbar {
    width: 10px;
}

.rx-list-scroll::-webkit-scrollbar-track,
.bill-patient-list::-webkit-scrollbar-track,
.rx-repeat-list::-webkit-scrollbar-track,
.setup-doctor-list::-webkit-scrollbar-track,
.setup-list-grid::-webkit-scrollbar-track,
.treatment-list-grid::-webkit-scrollbar-track,
.medicine-grid::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.rx-list-scroll::-webkit-scrollbar-thumb,
.bill-patient-list::-webkit-scrollbar-thumb,
.rx-repeat-list::-webkit-scrollbar-thumb,
.setup-doctor-list::-webkit-scrollbar-thumb,
.setup-list-grid::-webkit-scrollbar-thumb,
.treatment-list-grid::-webkit-scrollbar-thumb,
.medicine-grid::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb);
    border-radius: 999px;
}

.rx-prescription-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.rx-prescription-card {
    min-height: 78px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
}

.rx-prescription-card .bill-soft-btn {
    min-width: 66px;
    text-align: center;
}

.rx-prescription-card__icon,
.rx-patient-head__chat {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #ecf2fc;
    display: grid;
    place-items: center;
}

.rx-prescription-card__icon img,
.rx-patient-head__chat img {
    width: 24px;
    height: 24px;
}

.rx-patient-head__chat {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.rx-patient-head__chat:hover {
    background: #00aeef;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.2);
}

.rx-patient-head__chat:hover img {
    filter: brightness(0) invert(1);
}

.rx-prescription-card__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.rx-prescription-card__body strong {
    color: #0b0b0b;
    font-size: 16px;
    font-weight: 800;
}

.rx-prescription-card__body em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-style: normal;
}

.rx-prescription-card__body img {
    width: 13px;
    height: 13px;
}

.rx-create-layout,
.rx-view-layout {
    display: grid;
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 26px;
}

.rx-create-panel {
    min-height: 780px;
    padding: 24px;
}

.rx-create-form {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rx-create-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rx-create-form [data-rx-create-medicines] {
    display: grid;
    gap: 24px;
}

.rx-create-med-grid {
    grid-template-columns: minmax(220px, 1.5fr) 100px minmax(160px, 0.8fr) 100px;
}

.rx-create-chip-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
}

.rx-send-btn {
    width: 82px;
    margin-top: auto;
}

.rx-view-layout {
    align-items: start;
}

.rx-view-left,
.rx-view-summary,
.rx-view-prescription-card,
.rx-print-card {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.06);
}

.rx-view-left {
    padding: 28px 24px;
    display: grid;
    gap: 26px;
    max-height: calc(100vh - 190px);
    overflow: hidden;
}

.rx-patient-head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 16px;
}

.rx-patient-head > img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.rx-patient-head strong {
    display: block;
    color: #0b0b0b;
    font-size: 17px;
    font-weight: 800;
}

.rx-patient-head span {
    color: rgba(0, 0, 0, 0.52);
    font-size: 13px;
}

.rx-view-left h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.rx-appointment-list {
    max-height: 610px;
    overflow-y: auto;
    display: grid;
    gap: 16px;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #00aeef #eff7fc;
}

.rx-appointment-list::-webkit-scrollbar {
    width: 6px;
}

.rx-appointment-list::-webkit-scrollbar-track {
    background: #eff7fc;
    border-radius: 999px;
}

.rx-appointment-list::-webkit-scrollbar-thumb {
    background: #00aeef;
    border-radius: 999px;
}

.rx-appointment-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
}

.rx-appointment-card.is-active {
    border-color: #00aeef;
}

.rx-appointment-card strong {
    font-size: 17px;
    font-weight: 800;
}

.rx-appointment-card p {
    margin: 16px 0 0;
    display: flex;
    gap: 16px;
    color: rgba(0, 0, 0, 0.54);
    font-size: 12px;
}

.rx-appointment-card p span,
.rx-view-summary p span,
.rx-med-detail p span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.rx-appointment-card p img,
.rx-view-summary p img,
.rx-med-detail p img {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}

.rx-view-right {
    display: grid;
    gap: 26px;
}

.rx-view-summary {
    padding: 18px 24px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 20px;
}

.rx-view-summary strong {
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
}

.rx-view-summary p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
}

.rx-summary-radio-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.rx-summary-radio-row i,
.rx-view-summary p i,
.rx-print-card > i {
    width: 1px;
    height: 18px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.12);
}

.rx-view-prescription-card,
.rx-print-card {
    padding: 24px;
}

.rx-view-actions,
.rx-print-actions {
    display: inline-flex;
    gap: 12px;
}

.rx-repeat-btn {
    gap: 8px;
}

.rx-repeat-btn img {
    width: 16px;
    height: 16px;
}

.rx-view-medicine-list {
    margin-top: 22px;
    grid-template-columns: 1fr;
}

.rx-view-medicine-list .rx-med-detail {
    grid-template-columns: minmax(0, 1fr) 18px;
}

.rx-view-medicine-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00aeef;
}

.rx-print-card {
    display: flex;
    align-items: center;
    gap: 22px;
}

.rx-print-card .rx-radio:nth-of-type(2) span {
    font-size: 0;
}

.rx-print-card .rx-radio:nth-of-type(2) span::before {
    content: "\0A97\0AC1\0A9C\0AB0\0ABE\0AA4\0AC0";
    font-size: 14px;
}

.rx-print-actions {
    margin-left: auto;
}

.rx-view-page {
    max-width: 1122px;
    margin: 0 auto;
}

.rx-view-page .rx-view-layout {
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 26px;
}

.rx-view-page .rx-view-left {
    min-height: 780px;
    max-height: calc(100vh - 190px);
    padding: 28px 24px 16px;
    gap: 26px;
}

.rx-view-page .rx-appointment-list {
    max-height: calc(100vh - 390px);
    min-height: 0;
}

.rx-view-page .rx-appointment-card {
    min-height: 88px;
    padding: 20px;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease;
}

.rx-view-page .rx-appointment-card:hover,
.rx-view-page .rx-appointment-card:focus {
    border-color: rgba(0, 174, 239, 0.45);
    outline: none;
}

.rx-view-page .rx-appointment-card.is-active {
    border-color: #00aeef;
    background: #ffffff;
}

.rx-view-page .rx-view-right {
    min-height: 780px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.rx-view-page .rx-view-summary {
    min-height: 82px;
    padding: 18px 24px;
    align-items: center;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.25fr);
}

.rx-view-page .rx-view-summary strong {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.72);
    font-size: 14px;
    font-weight: 800;
}

.rx-view-page .rx-view-summary p {
    flex-wrap: wrap;
    gap: 14px;
}

.rx-view-page .rx-view-summary p em {
    font-style: normal;
}

.rx-view-page .rx-detail-head h2 {
    font-size: 18px;
    font-weight: 500;
}

.rx-view-page .rx-view-prescription-card {
    min-height: 360px;
    padding: 28px 24px 24px;
}

.rx-view-page .rx-view-actions .bill-soft-btn {
    min-width: 112px;
    height: 30px;
    border-radius: 7px;
    padding: 0 14px;
    white-space: nowrap;
}

.rx-view-page .rx-view-medicine-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
}

.rx-view-page .rx-view-medicine-list .rx-med-detail {
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: start;
    padding: 14px 16px;
}

.rx-view-page .rx-med-detail__title b {
    font: inherit;
}

.rx-view-page .rx-med-detail__meta {
    flex-wrap: wrap;
    gap: 14px 18px;
}

.rx-view-page .rx-med-detail__meta span {
    white-space: nowrap;
}

.rx-view-page .rx-view-medicine-list input[type="checkbox"] {
    justify-self: end;
    align-self: start;
    margin-top: 5px;
}

.rx-view-page .rx-print-card {
    min-height: 82px;
    margin-top: auto;
    padding: 18px 24px;
}

.rx-view-page .rx-print-actions .bill-soft-btn {
    min-width: 122px;
    height: 34px;
    white-space: nowrap;
}

.rx-repeat-panel {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        background 220ms ease;
}

.rx-repeat-panel.is-open {
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.42);
    opacity: 1;
}

.rx-repeat-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.rx-repeat-sheet {
    position: relative;
    z-index: 1;
    width: min(500px, 100%);
    min-height: 100vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    background: #fff;
    box-shadow: -18px 0 46px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rx-repeat-panel.is-open .rx-repeat-sheet {
    transform: translateX(0);
}

.rx-repeat-search {
    width: 100%;
    height: 46px;
}

.rx-repeat-sheet h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

.rx-repeat-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    display: grid;
    gap: 16px;
}

.rx-repeat-send {
    width: 100%;
    margin-top: 24px;
}

/* Schedule page */
.schedule-page {
    max-width: 1122px;
    margin: 0 auto;
}

.schedule-card {
    min-height: 828px;
    padding: 23px 24px 16px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
}

.schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.schedule-title-row {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}

.schedule-title-row h2 {
    margin: 0;
    color: #151922;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.schedule-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.schedule-nav a {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 174, 239, 0.08);
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: rgba(0, 174, 239, 0.08);
}

.schedule-nav img {
    width: 15px;
    height: 15px;
}

.schedule-actions {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.schedule-actions .pt-btn {
    height: 47px;
    border-radius: 9px;
    padding: 0 19px;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.schedule-new-btn {
    min-width: 222px;
}

.schedule-filter-btn {
    min-width: 126px;
    justify-content: center;
}

.schedule-click-hint {
    margin: 20px 0 15px;
    color: #0b0b0b;
    font-size: 15px;
    font-weight: 400;
}

/* Doctor legend chips below the schedule header */
.schedule-doctor-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 14px 0 18px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 16px;
}

.schedule-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: #151922;
    white-space: nowrap;
}

/* Blocked doctor chips group — pushed to the far right of the legend row */
.schedule-legend-blocked-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-left: auto;
}

/* Blocked doctor chip: same style, just strikethrough on the name */
.schedule-legend-chip--blocked {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.4);
    color: #888;
}

.schedule-legend-chip--blocked .schedule-legend-dot {
    opacity: 0.55;
}

/* Thin vertical rule separating active doctors from blocked ones */
.schedule-legend-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #d1d9e0;
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
}

.schedule-legend-dot {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Legend dot colours match appointment badge palette */
.schedule-legend-dot.schedule-appt--yellow {
    background: #f6ffd9;
    border: 1.5px solid #d8e898;
}
.schedule-legend-dot.schedule-appt--green {
    background: #dffbe8;
    border: 1.5px solid #a2debb;
}
.schedule-legend-dot.schedule-appt--pink {
    background: #ffe8e8;
    border: 1.5px solid #edb0b0;
}
.schedule-legend-dot.schedule-appt--rose {
    background: #ffe9ec;
    border: 1.5px solid #edaab6;
}
.schedule-legend-dot.schedule-appt--lavender {
    background: #f1e7ff;
    border: 1.5px solid #c3a2e8;
}
.schedule-legend-dot.schedule-appt--blue {
    background: #e2f2ff;
    border: 1.5px solid #9ecff0;
}
.schedule-legend-dot.schedule-appt--mint {
    background: #ddfbf8;
    border: 1.5px solid #96e4de;
}

/* Two-column layout: calendar on the left, blocked panel on the right */
.schedule-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.schedule-layout > .schedule-card {
    flex: 1 1 0;
    min-width: 0;
}

/* ===== Blocked doctors sidebar ===== */
.schedule-blocked-panel {
    flex: 0 0 220px;
    width: 220px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.schedule-blocked-doctor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-blocked-doctor__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-blocked-doctor__name {
    font-size: 14px;
    font-weight: 600;
    color: #151922;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.35);
}

.schedule-blocked-slots {
    list-style: none;
    margin: 0;
    padding: 0 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.schedule-blocked-slots li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.schedule-blocked-date {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.schedule-blocked-time {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.schedule-calendar-wrap {
    overflow: hidden;
    border: 1px solid #dee4eb;
}

.schedule-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schedule-calendar th {
    height: 40px;
    padding: 0 12px;
    border-right: 1px solid #dee4eb;
    border-bottom: 1px solid #dee4eb;
    background: #f7f9fc;
    color: #64748b;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
}

.schedule-calendar th:last-child,
.schedule-calendar td:last-child {
    border-right: 0;
}

.schedule-calendar td {
    position: relative;
    height: 130px;
    padding: 14px 10px 10px 12px;
    border-right: 1px solid #dee4eb;
    border-bottom: 1px solid #dee4eb;
    vertical-align: top;
    background: #ffffff;
    cursor: pointer;
}

.schedule-calendar tr:last-child td {
    border-bottom: 0;
}

.schedule-day-number {
    color: #151922;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.schedule-day.is-muted .schedule-day-number {
    color: rgba(0, 0, 0, 0.23);
}

.schedule-day.is-selected {
    background: #eef6ff;
    outline: 2px solid #00aeef;
    outline-offset: -2px;
}

.schedule-appts {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 36px;
    display: grid;
    gap: 5px;
}

.schedule-appt {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 7px;
    display: block;
    overflow: hidden;
    color: var(--schedule-color, #000000);
    background: var(--schedule-bg, #f6ffd9);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.schedule-appt--yellow {
    --schedule-color: #7c8d09;
    --schedule-bg: #f6ffd9;
}

.schedule-appt--green {
    --schedule-color: #168a45;
    --schedule-bg: #dffbe8;
}

.schedule-appt--pink {
    --schedule-color: #a94b4b;
    --schedule-bg: #ffe8e8;
}

.schedule-appt--rose {
    --schedule-color: #b35262;
    --schedule-bg: #ffe9ec;
}

.schedule-appt--lavender {
    --schedule-color: #6a4da0;
    --schedule-bg: #f1e7ff;
}

.schedule-appt--blue {
    --schedule-color: #397ca9;
    --schedule-bg: #e2f2ff;
}

.schedule-appt--mint {
    --schedule-color: #168a83;
    --schedule-bg: #ddfbf8;
}

.schedule-overview-modal .ap-modal__panel {
    width: min(700px, calc(100vw - 40px));
}

.schedule-click-menu {
    position: fixed;
    z-index: 1400;
    width: 244px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    padding: 12px 14px;
}

.schedule-click-menu::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 34px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #ffffff;
    filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04));
}

.schedule-click-menu[hidden] {
    display: none;
}

.schedule-click-menu button {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    color: #111111;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.18s ease;
}

.schedule-click-menu button:hover,
.schedule-click-menu button:focus {
    background: #f4fbff;
}

.schedule-click-menu button + button {
    margin-top: 2px;
}

.schedule-click-menu img {
    width: 17px;
    height: 17px;
    display: block;
}

.schedule-block-modal .ap-modal__backdrop {
    background: rgba(0, 0, 0, 0.42);
}

.schedule-block-modal .schedule-block-panel {
    width: min(540px, calc(100vw - 40px));
    margin: max(28px, calc((100vh - 380px) / 2)) auto 24px;
    padding: 28px 24px 24px;
    border-radius: 20px;
}

.schedule-block-head {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.schedule-block-title {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.schedule-block-title h2 {
    margin: 0;
    color: #151922;
    font-size: 22px;
    font-weight: 800;
}

.schedule-block-title span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
}

.schedule-block-title span img {
    width: 16px;
    height: 16px;
}

.schedule-block-title em {
    font-style: normal;
}

.schedule-block-form {
    display: grid;
    gap: 16px;
}

.schedule-block-field {
    display: grid;
    gap: 8px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-weight: 500;
}

.schedule-block-field .setup-control {
    height: 46px;
    border-color: rgba(0, 0, 0, 0.38);
    border-radius: 7px;
    color: rgba(0, 0, 0, 0.72);
    font-size: 14px;
}

.schedule-block-time-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

.schedule-block-to {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 16px;
}

.schedule-block-check {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #0b0b0b;
    font-size: 14px;
    cursor: pointer;
}

.schedule-block-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #c9c9c9;
    border-radius: 2px;
    background: #ffffff;
    margin: 0;
}

.schedule-block-check input:checked {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 3px #ffffff;
}

.schedule-block-submit {
    margin-top: 18px;
}

@media (max-width: 900px) {
    .schedule-card {
        min-height: auto;
        padding: 20px 18px 16px;
    }

    .schedule-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }

    .schedule-actions .pt-btn {
        height: 44px;
        font-size: 16px;
    }

    .schedule-calendar-wrap {
        overflow-x: auto;
    }

    .schedule-calendar {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .schedule-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .schedule-new-btn,
    .schedule-filter-btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    .schedule-click-menu {
        width: min(244px, calc(100vw - 36px));
    }

    .schedule-block-modal .schedule-block-panel {
        width: calc(100vw - 28px);
        margin: 24px auto;
        padding: 24px 18px 20px;
    }

    .schedule-block-head,
    .schedule-block-title {
        align-items: flex-start;
    }

    .schedule-block-title {
        flex-direction: column;
        gap: 8px;
    }

    .schedule-block-time-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .schedule-block-to {
        height: auto;
        padding: 0;
    }
}

@media (max-width: 1199px) {
    .rx-create-layout,
    .rx-view-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .rx-create-med-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .rx-prescription-grid,
    .rx-detail-grid,
    .rx-create-layout,
    .rx-view-layout,
    .rx-view-summary {
        grid-template-columns: 1fr;
    }

    .rx-create-panel {
        min-height: 0;
    }

    .rx-create-chip-line {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .rx-med-grid--top,
    .rx-create-med-grid,
    .rx-create-top {
        grid-template-columns: 1fr;
    }

    .rx-prescription-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .rx-prescription-card .bill-soft-btn {
        grid-column: 2;
        width: fit-content;
    }

    .rx-print-card {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Keep admin styling isolated from public site */
html,
body {
    height: 100%;
    overflow: hidden;
}

.admin-shell {
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        "Noto Sans",
        "Apple Color Emoji",
        "Segoe UI Emoji";
    color: var(--text);
    background: var(--secondary);
    overflow: hidden;
}

.admin-shell * {
    box-sizing: border-box;
}

/* ====== Fixed layout structure (sidebar + navbar) ====== */
.app-layout {
    height: 100vh;
    width: 100%;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: #f7f8fa;
    border-right: 1px solid var(--stroke);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Remove any accidental AdminLTE/sidebar legacy styling hooks */
.sidebar-nav,
.sidebar-link,
.sidebar-icon,
.sidebar-logo,
.sidebar-logo-img,
.sidebar-spacer {
    all: unset;
}

.main-wrapper {
    margin-left: 240px;
    height: 100vh;
}

.navbar {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 70px;
    background: var(--white);
    z-index: 1000;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--stroke);
}

.content {
    margin-top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 24px;
}

/* ====== Sidebar UI (pixel rules from design) ====== */
.logo {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 24px;
}

.logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    background: transparent;
    color: #8a8a8a;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
    font-weight: 500;
    font-size: 14px;
}

.menu-item:hover {
    background: #eef7ff;
}

.menu-item.active {
    background: #d1f3ff;
    color: #00aeef;
}

.menu-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
}

.menu-icon svg,
.menu-icon img,
.menu-icon i {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.menu-item.active .menu-icon {
    color: #00aeef;
}

.navbar-search svg,
.navbar-icon-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.navbar-search svg {
    color: var(--placeholder);
}

.navbar-icon-btn svg {
    color: rgba(0, 174, 239, 0.85);
}

.settings-item {
    margin-top: auto;
    margin-bottom: 0;
}

/* ====== Navbar UI ====== */
.navbar-title {
    color: var(--black);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.navbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--secondary);
    border-radius: 999px;
    padding: 9px 14px;
    min-width: 300px;
    border: none;
    height: 40px;
    position: relative;
}

.navsr-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 420px;
    max-width: calc(100vw - 40px);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    padding: 10px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity 160ms ease,
        transform 160ms ease;
    z-index: 1200;
}

[data-nav-search].is-open .navsr-pop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.navsr-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
}

.navsr-group__h {
    font-size: 11px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.45);
    padding: 6px 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.navsr-group__b {
    display: grid;
    gap: 6px;
}

.navsr-item {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}

.navsr-item:hover {
    background: rgba(0, 174, 239, 0.08);
    border-color: rgba(0, 174, 239, 0.14);
}

.navsr-item__t {
    font-weight: 900;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.78);
}

.navsr-item__s {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
}

.navsr-empty {
    padding: 14px 10px;
    color: rgba(0, 0, 0, 0.55);
    font-weight: 800;
    font-size: 12px;
}

[data-nav-search].is-loading {
    opacity: 0.85;
}

.navbar-search i {
    color: var(--placeholder);
}

.navbar-search input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--text);
    font-size: 14px;
}

.navbar-search input::placeholder {
    color: var(--placeholder);
}

.navbar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 174, 239, 0.1);
    color: rgba(0, 174, 239, 0.85);
    border: 1px solid rgba(0, 174, 239, 0.14);
}

.navbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    overflow: hidden;
    background: var(--button);
}

.navbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====== Appointments page ====== */
.ap-page {
    max-width: 100%;
}

.ap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .ap-head {
        gap: 13px;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .ap-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

.ap-head-month {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ap-head-month {
        gap: 4px;
    }
}

.ap-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ap-actions {
        gap:6px;
    }
}

.ap-btn {
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    min-width: 115px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ap-btn {
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        min-width: auto;
        gap: 5px;
    }
}

@media (max-width: 640px) {
    .ap-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        min-width: auto;
    }
}

.toggle-btn {
    height: 46px;
    min-width: 72px;
    border-radius: 7px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    padding: 0 12px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .toggle-btn {
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        min-width: auto;
    }
}

@media (max-width: 640px) {
    .toggle-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        min-width: auto;
    }
}

.ap-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

.ap-subtitle {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

.ap-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text);
}



.ap-btn:focus,
.ap-btn:focus-visible {
    outline: none;
}

.ap-btn--primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.18);
}

.ap-btn:disabled {
    background: var(--disabled);
    color: var(--white);
    box-shadow: none;
    cursor: not-allowed;
}

.ap-btn-ico svg {
    width: 16px;
    height: 16px;
}

.ap-btn-ico img,
.ap-btn-ico svg,
.ap-modal__close img,
.ap-modal__close svg,
.ap-modal__date img,
.ap-modal__date svg,
.ap-datepick__nav img,
.ap-datepick__nav svg,
.ap-dd__btn img,
.ap-dd__btn svg {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.ap-calendar-card {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 14px;
}

.ap-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ap-calendar th {
    text-align: left;
    font-size: 12px;
    color: #8a8a8a;
    font-weight: 600;
    padding: 10px 8px;
    border-bottom: 1px solid var(--stroke);
}

.ap-calendar td {
    border: 1px solid var(--stroke);
    vertical-align: center;
    padding: 8px;
    height: 40px;
    background: var(--white);
    text-align: center;
}

.ap-cell {
    position: relative;
}

.ap-cell.is-muted {
    opacity: 0.35;
}

.ap-cell.is-selected {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: rgba(0, 174, 239, 0.04);
}

.ap-cell.is-today {
    outline: 2px solid rgba(0, 174, 239, 0.55);
    outline-offset: -2px;
    background: rgba(0, 174, 239, 0.04);
}

.ap-cell.is-disabled {
    cursor: not-allowed;
}

.ap-cell.is-disabled > .ap-date {
    color: #afafaf;
}

.ap-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 6px;
}

.ap-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

/* Month view: keep vertical layout */
[data-ap-calendar="month"] .ap-badges {
    flex-direction: column;
    gap: 8px;
}

[data-ap-calendar="month"] .ap-badge {
    flex: none;
    min-width: auto;
    max-width: none;
    width: 100%;
}

.ap-badge {
    border: none;
    display: inline-block;
    text-align: left;
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    color: var(--black);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 200px;
}

/* Responsive adjustments for week/day views */
@media (max-width: 1200px) {
    .ap-badge {
        min-width: 100px;
        max-width: 160px;
        font-size: 12px;
        padding: 8px 10px;
    }
}

@media (max-width: 992px) {
    .ap-badge {
        min-width: 90px;
        max-width: 140px;
        font-size: 11px;
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    .ap-badge {
        min-width: 70px;
        max-width: 120px;
        font-size: 10px;
        padding: 5px 7px;
    }
}

.ap-badge--yellow {
    background: rgba(255, 237, 180, 0.55);
}
.ap-badge--green {
    background: rgba(200, 230, 200, 0.6);
}
.ap-badge--teal {
    background: rgba(180, 220, 210, 0.6);
}
.ap-badge--red {
    background: rgba(240, 200, 200, 0.6);
}
.ap-badge--blue {
    background: rgba(200, 220, 240, 0.6);
}
.ap-badge--purple {
    background: rgba(220, 210, 235, 0.6);
}
.ap-badge--cyan {
    background: rgba(200, 240, 240, 0.6);
}

/* Block-out badge — shown in month/week/day calendar views */
.ap-badge--blockout {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border: 1px dashed rgba(220, 38, 38, 0.45);
    font-size: 11px;
    font-weight: 600;
    cursor: default;
    pointer-events: auto;
}
.ap-badge--blockout:hover {
    opacity: 0.85;
}

/* Block-out cell chip used in week/day time-grid views */
.appt--blockout {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #b91c1c !important;
    border: 1px dashed rgba(220, 38, 38, 0.45) !important;
    cursor: default !important;
    font-weight: 600;
}

/* ====== Modals ====== */
.ap-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.ap-modal.is-open {
    display: block;
    overflow: hidden;
}

.ap-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.ap-modal__panel {
    position: relative;
    width: min(760px, calc(100vw - 48px));
    margin: 90px auto 24px auto;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--stroke);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
    padding: 18px;
    max-height: calc(100vh - 120px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.pt-form-panel {
    width: min(480px, calc(100vw - 40px));
    margin: 28px auto 20px auto;
}

.pt-form {
    gap: 12px;
}

/* ---- Patient form: required star ---- */
.pt-required-star {
    color: #d73f3f;
    font-weight: 700;
    margin-left: 2px;
}

/* ---- Patient form: inline field errors ---- */
.pt-form .field-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #d73f3f;
    font-weight: 500;
}

.pt-mobile-matches {
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid #d9e2ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(32, 55, 76, 0.1);
}

.pt-mobile-matches > strong {
    display: block;
    padding: 8px 10px;
    color: #8a5700;
    background: #fff8e6;
    font-size: 12px;
}

.pt-mobile-matches > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    color: #263746;
    border-top: 1px solid #edf1f4;
}

.pt-mobile-matches > div span {
    font-weight: 600;
}

.pt-mobile-matches > div small {
    color: #667785;
    white-space: nowrap;
}

/* ---- Invalid control highlight ---- */
.pt-form .ap-control.is-invalid,
.pt-form .ap-dd__btn.is-invalid {
    border-color: #d73f3f;
    box-shadow: 0 0 0 3px rgba(215, 63, 63, 0.1);
}

/* ---- Disabled Add button ---- */
.pt-form [data-pt-submit]:disabled,
.pt-form [data-pt-submit].is-disabled {
    background: var(--disabled);
    box-shadow: none;
    cursor: not-allowed;
}

.ap-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ap-modal__head-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ap-modal__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 174, 239, 0.95);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.ap-modal__date svg,
.ap-modal__date img {
    width: 24px;
    height: 24px;
}

.ap-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
}

.ap-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ap-modal__close svg,
.ap-modal__close img {
    width: 24px;
    height: 24px;
}

.ap-form {
    display: grid;
    gap: 12px;
}

.ap-modal__panel .ap-form {
    gap: 16px;
}

.ap-modal__panel .ap-grid {
    gap: 16px;
}

.ap-modal__panel .ap-label {
    margin-bottom: 6px;
}

.ap-modal__panel .ap-control {
    height: 44px;
    border-radius: 12px;
}

.ap-modal__panel select.ap-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("/assets/img/navigation_grey_icon/Chevron down.svg");
    background-position: right 16px center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.ap-modal__panel .ap-btn--ghost {
    height: 46px;
    border-radius: 12px;
    padding: 0 16px;
    font-weight: 700;
    background: var(--primary);
    border: 0;
    color: var(--white);
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.18);
    text-decoration: none;
    min-width: 115px;
    justify-content: center;
}

.ap-modal__panel .ap-btn--ghost:hover {
    background: #0096d4;
    text-decoration: none;
}

.ap-modal__panel .ap-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
}

.ap-modal__panel .ap-chip {
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.ap-modal__panel .ap-chip {
    background: var(--button);
}

/* ====== Create modal: custom date + time row ====== */
.ap-grid--dt {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.ap-datepick {
    position: relative;
}

.ap-datepick__btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.ap-datepick__btn::after {
    display: none;
}

.ap-datepick__btn img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

.ap-datepick__pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 376px;
    max-width: min(376px, calc(100vw - 40px));
    background: var(--white);
    border: 1px solid #bac6cf;
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
    padding: 18px;
    z-index: 2600;
    display: none;
}

.ap-datepick.is-open .ap-datepick__pop {
    display: block;
}

.ap-datepick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.ap-datepick__head--selects {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.ap-datepick__head--future {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 92px 34px;
}

.ap-datepick__select {
    min-width: 100px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--stroke);
    background: var(--white);
    color: rgba(0, 0, 0, 0.78);
    font-size: 13px;
    font-weight: 600;
    padding: 0 26px 0 8px;
    outline: none;
}

.ap-datepick__select--year {
    min-width: 0;
    width: 100%;
}

.ap-datepick__select:focus {
    border-color: rgba(0, 174, 239, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}

.ap-datepick__month {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
}

.ap-datepick__nav {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--stroke);
    background: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.82);
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.ap-datepick__nav svg,
.ap-datepick__nav img {
    width: 24px;
    height: 24px;
}

.ap-datepick__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    color: #6e7b8f;
    font-size: 16px;
    font-weight: 500;
    padding: 0 2px 12px 2px;
    text-align: center;
}

.ap-datepick__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.ap-datepick__day {
    height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--white);
    color: var(--black);
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
}

.ap-datepick__day.is-muted {
    opacity: 0.35;
}

.ap-datepick__day.is-disabled,
.ap-datepick__day:disabled {
    color: #b8b8b8;
    background: #f4f6f8;
    cursor: not-allowed;
    opacity: 0.72;
}

.ap-datepick__day.is-selected {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.22);
}

.ap-datepick__day:focus {
    outline: 2px solid rgba(0, 174, 239, 0.35);
    outline-offset: 2px;
}

.ap-datepick--dob .ap-datepick__pop {
    width: 268px;
    max-width: min(268px, calc(100vw - 72px));
    border-radius: 12px;
    padding: 12px;
    top: calc(100% + 8px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.ap-datepick--dob .ap-datepick__dow {
    gap: 4px;
    font-size: 14px;
    padding: 2px 0 8px;
}

.ap-datepick--dob .ap-datepick__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.ap-datepick--dob .ap-datepick__day {
    width: 100%;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
}

.ap-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-time__seg {
    width: 64px;
    text-align: center;
    padding: 0;
}

.ap-time__sep {
    color: #9aa0a6;
    font-weight: 700;
    margin-top: 2px;
}

.ap-time__ampm {
    width: 84px;
    text-align: center;
    padding-left: 12px;
    padding-right: 34px;
}

.modern-time {
    position: relative;
    width: 100%;
}

.modern-time__segments {
    min-height: 47px;
    display: grid;
    grid-template-columns: minmax(56px, 72px) minmax(56px, 72px) minmax(
            64px,
            82px
        );
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
}

.modern-time__segment {
    position: relative;
    min-width: 0;
}

.modern-time__button {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #646464;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.modern-time__button:focus-visible {
    outline: none;
}

.modern-time:focus-within .modern-time__segments,
.modern-time.is-open .modern-time__segments {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.modern-time__arrows {
    position: relative;
    width: 10px;
    height: 16px;
    flex: 0 0 auto;
}

.modern-time__arrows::before,
.modern-time__arrows::after {
    content: "";
    position: absolute;
    left: 2px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #646464;
    border-bottom: 1.5px solid #646464;
}

.modern-time__arrows::before {
    top: 1px;
    transform: rotate(225deg);
}

.modern-time__arrows::after {
    bottom: 1px;
    transform: rotate(45deg);
}

.modern-time__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    display: none;
    width: 54px;
    max-height: 188px;
    overflow-y: auto;
    border: 1px solid #d7e1ea;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(31, 35, 41, 0.16);
    padding: 6px 0;
}

.modern-time__segment.is-open .modern-time__menu {
    display: grid;
}

.modern-time__menu--period {
    width: 64px;
}

.modern-time__option {
    min-height: 30px;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #646464;
    font: inherit;
    font-size: 14px;
    padding: 0 16px;
    text-align: left;
    cursor: pointer;
}

.modern-time__option:hover,
.modern-time__option:focus-visible {
    background: #f0f6ff;
    color: #1f2329;
    outline: none;
}

.modern-time__option.is-selected {
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 620px) {
    .ap-grid--dt {
        grid-template-columns: 1fr;
    }
    .ap-datepick__pop {
        width: min(360px, calc(100vw - 72px));
        padding: 16px;
    }
    .ap-datepick__day {
        height: 34px;
        font-size: 15px;
    }
    .ap-datepick__dow {
        font-size: 14px;
    }
    .ap-datepick__month {
        font-size: 16px;
    }
}

.ap-modal__panel .ap-chip--primary {
    background: rgba(0, 174, 239, 0.1);
    border-color: rgba(0, 174, 239, 0.22);
    color: var(--primary);
}

.ap-modal__panel .ap-chip--primary span {
    color: var(--primary);
}

.ap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ap-grid--patient {
    grid-template-columns: 1fr auto;
    align-items: end;
}

.ap-field--full {
    grid-column: 1 / -1;
}

.ap-label {
    display: block;
    font-size: 11px;
    color: var(--text);
    margin-bottom: 6px;
}

.ap-control {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: var(--white);
    padding: 0 12px;
    color: var(--black);
    outline: none;
}

.ap-control--textarea {
    height: 112px;
    min-height: 112px;
    padding-top: 12px;
    resize: vertical;
    line-height: 1.4;
    font: inherit;
}

.ap-modal__panel .ap-control--textarea {
    height: 112px;
}

.ap-control:focus {
    border-color: rgba(0, 174, 239, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}

.adm-native-select,
.adm-native-date {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.adm-select {
    position: relative;
    width: 100%;
}

.adm-select--time {
    width: 84px;
    flex: 0 0 84px;
}

.adm-select__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.adm-select__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.78);
}

.adm-select.is-placeholder .adm-select__label {
    color: #b8b8b8;
}

.adm-select__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid #9aa0a6;
    border-bottom: 2px solid #9aa0a6;
    transform: rotate(45deg);
    transition:
        transform 160ms ease,
        margin 160ms ease;
    flex: 0 0 auto;
}

.adm-select.is-open .adm-select__chev {
    margin-top: 6px;
    transform: rotate(225deg);
}

.adm-select.is-open .adm-select__btn {
    border-color: rgba(0, 174, 239, 0.78);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.adm-select__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 2600;
    max-height: 260px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #bac6cf;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 8px 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.adm-select__menu--searchable {
    padding: 8px;
}

.adm-select__search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 6px;
    background: #ffffff;
}

.adm-select__search {
    width: 100%;
    height: 38px;
    border: 1px solid rgba(0, 174, 239, 0.35);
    border-radius: 8px;
    background: rgba(0, 174, 239, 0.05);
    color: var(--black);
    font: inherit;
    padding: 0 12px;
    outline: none;
}

.adm-select__search:focus {
    border-color: rgba(0, 174, 239, 0.85);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.adm-select__options {
    display: grid;
}

.adm-select__empty {
    padding: 12px 10px;
    color: #7a8798;
    font-size: 14px;
}

.adm-select.is-open .adm-select__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.adm-select__option {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: rgba(0, 0, 0, 0.72);
    text-align: left;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.adm-select__option:last-child {
    border-bottom: 0;
}

.adm-select__option:hover,
.adm-select__option[aria-selected="true"] {
    color: var(--primary);
}

.adm-select__option.is-disabled {
    color: #afafaf;
    cursor: default;
}

.adm-select__option.is-disabled[aria-selected="true"] {
    color: #afafaf;
}

.adm-select__option.is-disabled:hover {
    color: #afafaf;
}

.adm-select__menu,
.pp-dd__pop {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 239, 0.7) rgba(0, 174, 239, 0.08);
}

.adm-select__menu::-webkit-scrollbar,
.pp-dd__pop::-webkit-scrollbar {
    width: 6px;
}

.adm-select__menu::-webkit-scrollbar-track,
.pp-dd__pop::-webkit-scrollbar-track {
    background: rgba(0, 174, 239, 0.08);
    border-radius: 999px;
}

.adm-select__menu::-webkit-scrollbar-thumb,
.pp-dd__pop::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 239, 0.7);
    border-radius: 999px;
}

.ap-btn--ghost {
    background: var(--primary);
    color: var(--white);
    height: 40px;
    border-radius: 10px;
    padding: 0 14px;
}

.ap-chips {
    display: flex;
    gap: 10px;
}

.ap-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--stroke);
    background: var(--white);
    border-radius: 999px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--black);
    cursor: pointer;
}

.ap-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ap-chip--primary {
    background: rgba(0, 174, 239, 0.1);
    border-color: rgba(0, 174, 239, 0.22);
    color: var(--primary);
}

.ap-audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
    margin-top: 2px;
    padding-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.ap-audit-grid[hidden] {
    display: none;
}

.ap-audit-grid p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ap-audit-grid strong {
    color: var(--black);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-form__footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
}

.ap-btn--save {
    height: 46px;
    border-radius: 12px;
    padding: 0 18px;
    min-width: 115px;
    justify-content: center;
}

.admin-content {
    margin-top: 24px;
}

.dash-section {
    margin-top: 8px;
}

@media (max-width: 560px) {
    .ap-audit-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 82px;
}

.stat-label {
    color: var(--text);
    font-weight: 500;
    font-size: 12px;
    margin: 6px 0 0 0;
}

.stat-value {
    color: var(--primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    margin: 0;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: transparent;
    border: none;
    display: grid;
    place-items: center;
    color: rgba(0, 174, 239, 0.78);
    font-size: 20px;
    position: relative;
}

.stat-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}

.calendar-wrap {
    margin-top: 18px;
}

.calendar-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--stroke);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 16px;
}

.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.calendar-title {
    color: var(--black);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.toggle-group {
    display: flex;
    gap: 0;
    background: var(--button);
    border-radius: 999px;
    padding: 2px;
}

.toggle-btn {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.toggle-btn.is-active {
    background: var(--primary);
    color: var(--white);
}

.calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 2px 14px 2px;
    color: var(--text);
    font-size: 11px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.legend-filter-chip {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    padding: 6px 10px;
    text-decoration: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.legend-filter-chip:hover,
.legend-filter-chip:focus {
    border-color: rgba(0, 174, 239, 0.28);
    background: rgba(0, 174, 239, 0.07);
    color: var(--primary);
    text-decoration: none;
}

.legend-filter-chip.is-active {
    border-color: rgba(0, 174, 239, 0.5);
    background: rgba(0, 174, 239, 0.12);
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 174, 239, 0.12);
}

/* Blocked-out doctor entry in the legend */
.legend-item--blocked {
    opacity: 0.75;
}

.legend-blocked-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.3);
    line-height: 1.6;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    background: rgba(180, 220, 210, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.legend-dot--teal {
    background: rgba(180, 220, 210, 0.6);
}
.legend-dot--green {
    background: rgba(200, 230, 200, 0.6);
}
.legend-dot--red {
    background: rgba(240, 200, 200, 0.6);
}

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    overflow: hidden;
}

.calendar-grid th,
.calendar-grid td {
    border: 1px solid var(--stroke);
    padding: 8px 10px;
}

.calendar-grid thead th {
    background: var(--white);
    color: var(--black);
    font-weight: 500;
    font-size: 12px;
    text-align: left;
}

.calendar-grid--week tbody td {
    height: 54px;
    padding: 8px;
    vertical-align: middle;
    text-align: center;
}

.calendar-grid--week tbody td:not(.calendar-time) {
    position: relative;
    overflow: hidden;
    vertical-align: top;
}

.calendar-grid--week tbody td:not(.calendar-time) > .ap-badges {
    position: absolute;
    inset: 4px 5px;
    z-index: 4;
    flex-wrap: wrap;
    align-items: flex-start;
    pointer-events: none;
}

.calendar-grid--week tbody td.is-tooltip-active {
    z-index: auto;
}

.calendar-grid--week tbody td.is-tooltip-active > .ap-badges {
    z-index: 4;
}

.calendar-grid--week .appt-wrap--duration {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: none !important;
    min-height: 0 !important;
    height: var(--ap-duration-height, 46px);
    pointer-events: auto;
}

.calendar-grid--week .appt-wrap {
    pointer-events: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.calendar-grid--week .appt-wrap--duration .appt {
    min-height: 100%;
    height: 100% !important;
    overflow: hidden;
    line-height: 1.25;
}

.calendar-grid--week .appt {
    width: 100% !important;
    max-width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.calendar-grid--month thead th {
    text-align: center;
}

.calendar-dayhead {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}

.calendar-grid--month tbody td {
    height: 86px;
    padding: 10px;
    vertical-align: top;
}

.calm-cell {
    background: var(--white);
}

.calm-cell.is-muted {
    background: rgba(239, 239, 239, 0.35);
    color: rgba(0, 0, 0, 0.45);
}

.calm-cell.is-today {
    outline: 2px solid rgba(0, 174, 239, 0.28);
    outline-offset: -2px;
}

.calm-date {
    font-weight: 700;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}

.calm-badge {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.1);
    color: rgba(0, 174, 239, 1);
    font-weight: 800;
    font-size: 11px;
}

.calendar-tz {
    width: 72px;
    text-align: center;
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
    background: rgba(239, 239, 239, 0.55);
    white-space: nowrap;
}

.calendar-time {
    width: 72px;
    color: var(--text);
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    background: rgba(239, 239, 239, 0.55);
    text-align: center;
    vertical-align: middle;
}

.calendar-day .cal-date {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.1;
}

.calendar-day .cal-dow {
    font-size: 11px;
    font-weight: 500;
    color: var(--black);
    opacity: 0.85;
    margin-top: 2px;
}

.appt {
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--black);
    height: 100%;
    display: flex;
    align-items: flex-start;
}

.appt:last-child {
    margin-bottom: 0;
}

.appt--green {
    background: rgba(200, 230, 200, 0.6);
}
.appt--teal {
    background: rgba(180, 220, 210, 0.6);
}
.appt--red {
    background: rgba(240, 200, 200, 0.6);
}
.appt--blue {
    background: rgba(200, 220, 240, 0.6);
}
.appt--purple {
    background: rgba(220, 210, 235, 0.6);
}
.appt--cyan {
    background: rgba(200, 240, 240, 0.6);
}

.appt--yellow {
    background: rgba(255, 237, 180, 0.55);
}

@media (max-width: 1200px) {
    .navbar-search {
        min-width: 260px;
    }

    .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .sidebar {
        position: fixed;
        width: 240px;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }
}

/* ====== Chat module ====== */
.chat-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    height: calc(100vh - 70px - 48px); /* navbar + content padding */
}

.chat-list,
.chat-main {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.chat-list {
    display: flex;
    flex-direction: column;
}

.chat-list__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 14px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--white);
}

.chat-list__search svg {
    width: 16px;
    height: 16px;
    color: var(--placeholder);
}

.chat-list__search img,
.chat-room__back img,
.chat-room__send img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
}

.chat-list__search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 12px;
    color: var(--text);
    background: transparent;
}

.chat-users {
    overflow: auto;
    padding: 6px 10px 14px 10px;
}

.chat-search-empty {
    padding: 24px 12px;
    color: rgba(100, 100, 100, 0.8);
    font-size: 13px;
    text-align: center;
}

.chat-user {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
}

.chat-user:hover {
    background: rgba(0, 174, 239, 0.06);
}

.chat-user.is-active {
    background: #d1f3ff;
}

.chat-user.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.chat-user__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: var(--button);
    display: grid;
    place-items: center;
}

.chat-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-user__initials {
    font-weight: 800;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
}

.chat-user__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.chat-user__name {
    font-weight: 700;
    font-size: 13px;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-user__sub {
    font-size: 11px;
    color: rgba(100, 100, 100, 0.8);
}

.chat-user__time {
    font-size: 11px;
    color: rgba(100, 100, 100, 0.75);
    white-space: nowrap;
}

.chat-user__side {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.chat-user__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.chat-main {
    position: relative;
}

.chat-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.chat-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-empty__img {
    width: min(260px, 40vw);
    height: auto;
    display: block;
    object-fit: contain;
}

.chat-empty__title {
    margin-top: 14px;
    font-size: 24px;
    font-weight: 800;
    color: var(--black);
}

.chat-empty__sub {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(100, 100, 100, 0.8);
}

.chat-room {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.chat-room__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--stroke);
    background: var(--white);
}

.chat-room__back {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--black);
}

.chat-room__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: var(--button);
    display: grid;
    place-items: center;
}

.chat-room__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-room__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--black);
}

.chat-room__body {
    padding: 18px 18px 14px 18px;
    overflow: auto;
    background: var(--white);
}

.chat-msg {
    margin-bottom: 12px;
    max-width: 70%;
}

.chat-msg.is-me {
    margin-left: auto;
}

.chat-msg__row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-msg.is-me .chat-msg__row {
    justify-content: flex-end;
}

.chat-msg__bubble {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--black);
    background: rgba(0, 174, 239, 0.12);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg.is-them .chat-msg__bubble {
    background: rgba(239, 239, 239, 0.85);
}

.chat-msg__time {
    font-size: 10px;
    color: rgba(100, 100, 100, 0.75);
    margin-top: 4px;
}

.chat-msg__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-msg.is-me .chat-msg__stack {
    align-items: flex-end;
}

.chat-msg__avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: var(--button);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.chat-msg__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-msg__initials {
    font-weight: 800;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.55);
}

.chat-date {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 14px 0 14px 0;
}

.chat-date::before {
    content: attr(data-label);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(239, 239, 239, 0.9);
    color: rgba(100, 100, 100, 0.9);
    font-size: 12px;
    font-weight: 600;
}

.chat-room__composer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--stroke);
    background: var(--white);
}

.chat-room__input {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    padding: 0 16px;
    font-size: 13px;
    outline: none;
    background: var(--white);
}

.chat-room__send {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: var(--primary);
    color: var(--white);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 174, 239, 0.22);
    cursor: pointer;
    position: relative;
}

.chat-room__send svg {
    width: 18px;
    height: 18px;
}

.chat-room__send[data-admin-tooltip]::before {
    top: auto;
    bottom: calc(100% + 4px);
    border-bottom-color: transparent;
    border-top-color: #111827;
    transform: translateX(-50%) translateY(4px);
}

.chat-room__send[data-admin-tooltip]::after {
    top: auto;
    bottom: calc(100% + 15px);
    transform: translateX(-50%) translateY(4px);
}

.chat-room__send[data-admin-tooltip]:hover::before,
.chat-room__send[data-admin-tooltip]:focus-visible::before,
.chat-room__send[data-admin-tooltip]:hover::after,
.chat-room__send[data-admin-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 1100px) {
    .chat-shell {
        grid-template-columns: 320px 1fr;
    }
}

/* ====== Patients module ====== */
.pt-page {
    max-width: 100%;
    min-height: calc(100vh - 70px - 48px);
    display: flex;
    flex-direction: column;
}

.pt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pt-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    max-width: 520px;
}

.pt-search svg,
.pt-search img {
    width: 18px;
    height: 18px;
    color: var(--placeholder);
    display: block;
    object-fit: contain;
}

.pt-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 12px;
    color: var(--text);
    background: transparent;
}

.pt-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-btn {
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    min-width: 115px;
}

.pt-btn:hover,
.pt-btn:focus {
    text-decoration: none;
}

.pt-btn--primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.18);
}

.pt-btn--ghost {
    background: var(--button);
    color: var(--black);
    border-color: rgba(0, 0, 0, 0.04);
}

.pt-btn-ico svg,
.pt-btn-ico img {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
    display: block;
    object-fit: contain;
}

.pt-sort {
    position: relative;
}

.pt-sort__btn {
    min-width: 115px;
    justify-content: center;
    height: 46px;
    font-size: 16px;
}

.pt-sort__menu {
    position: absolute;
    top: calc(100% + 24px);
    right: 0;
    width: 214px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 16px;
    z-index: 60;
    display: none;
}

.pt-sort.is-open .pt-sort__menu {
    display: block;
}

.pt-sort__menu button,
.pt-sort__menu a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 47px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: #000000;
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
}

.pt-sort__menu button:last-child,
.pt-sort__menu a:last-child {
    border-bottom: 0;
}

.pt-sort__menu button:hover,
.pt-sort__menu button.is-active,
.pt-sort__menu a:hover,
.pt-sort__menu a.is-active {
    color: var(--primary);
}

.pt-card {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.pt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    flex: 1 1 auto;
    align-content: start;
}

.pt-item {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    background: var(--white);
}

.pt-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pt-left--link {
    color: inherit;
    text-decoration: none;
    flex: 1 1 auto;
}

.pt-left--link:hover .pt-name {
    text-decoration: none;
}

.pt-item:hover {
    background: rgba(0, 174, 239, 0.03);
    border-color: rgba(0, 174, 239, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.pt-avatar {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: var(--button);
    flex: 0 0 auto;
}

.pt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pt-meta {
    min-width: 0;
}

.pt-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--black);
    line-height: 1.2;
}

.pt-record-id {
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.48);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.pt-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: rgba(100, 100, 100, 0.85);
    font-size: 15px;
    white-space: nowrap;
}

.pt-subline + .pt-subline::before {
    content: "";
    width: 1px;
    height: 24px;
    margin-right: 2px;
    background: rgba(0, 0, 0, 0.18);
}

.pt-subline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pt-subline svg,
.pt-subline img {
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.45);
    display: block;
    object-fit: contain;
}

.pt-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.pt-ico {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    place-items: center;
    background: var(--white);
    cursor: pointer;
}

.pt-ico svg,
.pt-ico img {
    width: 22px;
    height: 23px;
    display: block;
    object-fit: contain;
}

.pt-ico--wa {
    background: rgba(37, 211, 102, 0.14);
    border-color: rgba(37, 211, 102, 0.18);
    color: #25d366;
}

.pt-ico--chat {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.45);
}

.pt-ico--edit {
    background: rgba(0, 174, 239, 0.1);
    border-color: rgba(0, 174, 239, 0.16);
}

.pt-ico--delete {
    background: rgba(215, 63, 63, 0.1);
    border-color: rgba(215, 63, 63, 0.18);
    color: var(--red);
}

.pt-ico--add {
    background: var(--primary);
    border-color: rgba(0, 174, 239, 0.22);
    color: var(--white);
}

.pt-ico--add svg,
.pt-ico--add img,
.pt-ico--add i {
    width: 24px;
    height: 24px;
}

.pt-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-top: auto;
    padding: 18px 0 14px;
    width: 100%;
    align-self: flex-start;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--white);
}

.pt-pager-per-page {
    display: flex;
    align-items: center;
    margin-left: auto;
}

[data-pt-results] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pt-grid {
    flex: 1 1 auto;
}

.pt-card {
    overflow: auto;
}

[data-pt-results] .pt-grid {
    padding-bottom: 8px;
}

.adm-toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.adm-toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 360px;
    display: grid;
    grid-template-columns: 10px 1fr 24px;
    gap: 10px;
    align-items: center;
    padding: 12px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.adm-toast.is-in {
    opacity: 1;
    transform: translateY(0);
}

.adm-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.adm-toast__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
}

.adm-toast--error .adm-toast__dot {
    background: #ef4444;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.14);
}

.adm-toast__msg {
    font-size: 13px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.3;
}

.adm-toast__close {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
}

.ap-dd {
    position: relative;
}

.ap-dd__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.ap-dd__btn svg,
.ap-dd__btn img {
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.45);
}

.ap-dd__label {
    color: rgba(0, 0, 0, 0.7);
}

.ap-dd.is-open .ap-dd__label {
    color: rgba(0, 0, 0, 0.78);
}

.ap-dd__pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 14px);
    background: var(--white);
    border: 1px solid #bac6cf;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 12px 22px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 160ms ease,
        transform 160ms ease;
    z-index: 2600;
}

.ap-dd.is-open .ap-dd__pop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ap-dd__opt {
    width: 100%;
    min-height: 42px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    padding: 10px 0;
    border-radius: 0;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.62);
    cursor: pointer;
}

.ap-dd__opt:last-child {
    border-bottom: 0;
}

.ap-dd__opt:hover {
    background: transparent;
    color: rgba(0, 174, 239, 1);
}

.ap-dd__opt[aria-selected="true"] {
    color: var(--primary);
    background: transparent;
}

[data-pt-results].is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.pt-pagebtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.55);
    text-decoration: none;
}

.pt-pagebtn svg {
    width: 16px;
    height: 16px;
}

.pt-pagebtn img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
}

.pt-pagebtn.is-disabled,
.pt-ico.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pt-pageno {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: grid;
    place-items: center;
    text-decoration: none;
}

.pt-pageno.is-active {
    background: rgba(0, 174, 239, 0.08);
    border-color: rgba(0, 174, 239, 0.35);
    color: rgba(0, 174, 239, 1);
}

.pt-ellipsis {
    color: rgba(0, 0, 0, 0.45);
    font-weight: 700;
    font-size: 12px;
}

.pt-empty {
    height: 220px;
    display: grid;
    place-items: center;
    color: rgba(100, 100, 100, 0.8);
    font-weight: 600;
    font-size: 13px;
}

/* ====== Patient profile ====== */
.pp-page {
    max-width: 100%;
}

.pp-bc {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.pp-bc a {
    color: rgba(0, 174, 239, 1);
    text-decoration: none;
    font-weight: 700;
}

.pp-top {
    margin-bottom: 18px;
}

.pp-card {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 18px;
    position: relative;
}

.pp-hero {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-ava {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--button);
    flex: 0 0 auto;
}

.pp-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--black);
}

.pp-sub {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    color: rgba(100, 100, 100, 0.85);
    font-size: 11px;
    align-items: center;
    flex-wrap: wrap;
}

.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-pill svg {
    width: 14px;
    height: 14px;
    color: rgba(0, 0, 0, 0.45);
}

.pp-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 10px;
}

.pp-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    text-decoration: none;
}

.pp-ico--primary {
    background: var(--primary);
    color: var(--white);
    border-color: rgba(0, 174, 239, 0.22);
}

.pp-panels {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-panel {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
}

.pp-panel__title {
    font-size: 12px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
}

.pp-kv .pp-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 12px;
}

.pp-kv .pp-row:first-child {
    border-top: 0;
}

.pp-k {
    color: rgba(0, 0, 0, 0.55);
    font-weight: 700;
}

.pp-v {
    color: rgba(0, 0, 0, 0.72);
    font-weight: 700;
}

.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-box {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 16px;
    min-height: 210px;
}

.pp-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pp-box__title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.78);
}

.pp-link {
    border: 0;
    background: transparent;
    color: rgba(0, 174, 239, 1);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.pp-list {
    display: grid;
    gap: 12px;
}

.pp-item {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
    position: relative;
}

.pp-item__top {
    font-weight: 800;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.78);
}

.pp-item__sub {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    flex-wrap: wrap;
}

.pp-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-mini svg {
    width: 14px;
    height: 14px;
    color: rgba(0, 0, 0, 0.42);
}

.pp-chip {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.1);
    color: rgba(0, 174, 239, 1);
}

.pp-rowcard,
.pp-bill {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-rowcard__ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 174, 239, 0.1);
    color: rgba(0, 174, 239, 1);
    flex: 0 0 auto;
}

.pp-rowcard__ico svg {
    width: 18px;
    height: 18px;
}

.pp-rowcard__meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-rowcard__t {
    font-weight: 800;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.78);
}

.pp-rowcard__s {
    margin-top: 6px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
}

.pp-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.pp-btn--soft {
    background: rgba(0, 174, 239, 0.08);
    border-color: rgba(0, 174, 239, 0.12);
    color: rgba(0, 174, 239, 1);
}

.pp-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.55);
    margin-left: auto;
}

.pp-bill {
    position: relative;
    flex-wrap: wrap;
}

.pp-bill__amt {
    font-weight: 900;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.85);
    width: 100%;
}

.pp-bill__sub {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
}

.pp-tag {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
}

.pp-tag.is-paid {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
}

.pp-tag.is-pending {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

/* Patient profile modern redesign */
.pp-modern {
    max-width: 100%;
}

.pp-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.pp-modern-left,
.pp-modern-right {
    min-width: 0;
    display: grid;
    gap: 24px;
}

.pp-modern-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(31, 35, 41, 0.06);
}

.pp-modern-profile {
    padding: 28px;
}

.pp-modern-profile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.pp-modern-patient {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp-modern-patient > img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 13px;
    object-fit: cover;
    background: #eff6fb;
}

.pp-modern-patient h2 {
    margin: 0 0 8px;
    color: #111;
    font-size: 18px;
    font-weight: 700;
}

.pp-modern-meta,
.pp-modern-activity-card div,
.pp-modern-bill-card div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: #646464;
    font-size: 12px;
    line-height: 1.3;
}

.pp-modern-meta span,
.pp-modern-activity-card em,
.pp-modern-bill-card em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
}

.pp-modern-meta img,
.pp-modern-activity-card img,
.pp-modern-bill-card img,
.pp-modern-remark-card img,
.pp-modern-remark-history img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.pp-modern-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp-modern-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
}

.pp-modern-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.pp-modern-icon--soft {
    background: #f0f6ff;
}

.pp-modern-icon--primary {
    border-color: var(--primary);
    background: var(--primary);
}

.pp-modern-section {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.pp-modern-section h3,
.pp-modern-card h3 {
    margin: 0;
    color: #111;
    font-size: 15px;
    font-weight: 650;
}

.pp-modern-section__head,
.pp-modern-activity__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pp-modern-section__head button,
.pp-modern-activity__head a,
.pp-modern-activity__head button {
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.pp-modern-kv {
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    padding: 12px 16px;
}

.pp-modern-kv div {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr);
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid #e7e7e7;
    color: #111;
    font-size: 13px;
}

.pp-modern-kv div:first-child {
    border-top: 0;
}

.pp-modern-kv strong {
    color: #646464;
    font-weight: 500;
    text-align: right;
}

.pp-modern-note {
    display: grid;
    gap: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    padding: 14px;
}

.pp-modern-note span {
    color: #8b8b8b;
    font-size: 12px;
}

.pp-modern-note textarea,
.pp-remark-form .ap-control,
.pp-remark-form .pp-modal-textarea {
    width: 100%;
    border: 1px solid #acacac;
    border-radius: 8px;
    background: #fff;
    color: #646464;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.pp-modern-note textarea {
    min-height: 80px;
    padding: 13px 16px;
    resize: vertical;
}

.pp-modern-note button,
.pp-modern-empty-remark button,
.pp-save {
    width: max-content;
    min-width: 72px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 0 18px;
    cursor: pointer;
}

.pp-modern-note button {
    background: #efefef;
    color: #111;
}

.pp-modern-empty-remark {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    color: #acacac;
    text-align: center;
}

.pp-modern-empty-remark div {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f8ff;
}

.pp-modern-empty-remark img {
    width: 24px;
    height: 24px;
}

.pp-modern-empty-remark strong {
    color: #111;
    font-size: 14px;
}

.pp-modern-empty-remark span {
    font-size: 13px;
}

.pp-modern-empty-remark button {
    height: 34px;
    margin-top: 12px;
    font-size: 12px;
}

.pp-modern-remark-card {
    display: grid;
    gap: 10px;
    width: 100%;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 16px;
}

.pp-modern-remark-card strong {
    color: #111;
    font-size: 15px;
}

.pp-modern-remark-card span,
.pp-modern-remark-card em {
    color: #646464;
    font-size: 13px;
    font-style: normal;
}

.pp-modern-remark-card em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-modern-remark-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.pp-modern-treatment-summary,
.pp-modern-activity {
    padding: 28px;
}

.pp-modern-table {
    display: grid;
    margin-top: 22px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    padding: 16px;
}

.pp-modern-table > div:not(.pp-modern-total) {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.45fr 0.8fr;
    gap: 14px;
    padding: 10px 0;
    color: #646464;
    font-size: 13px;
}

.pp-modern-table__head {
    color: #111 !important;
    font-size: 12px !important;
}

.pp-modern-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e7e7e7;
    padding-top: 13px;
    margin-top: 5px;
    color: #646464;
    font-size: 13px;
}

.pp-modern-total + .pp-modern-total {
    border-top: 0;
    margin-top: 0;
}

.pp-modern-total strong {
    color: #111;
    font-weight: 500;
}

.pp-modern-total .is-green {
    color: #00a651;
}

.pp-modern-total .is-red {
    color: #ef2626;
}

.pp-modern-payments {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    padding: 14px;
    color: #737373;
    font-size: 13px;
}

.pp-modern-payments span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-modern-payments i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0ac236;
    box-shadow: 0 0 0 3px rgba(10, 194, 54, 0.12);
}

.pp-modern-payments strong {
    color: #111;
    font-weight: 600;
}

.pp-modern-activity {
    display: grid;
    gap: 16px;
}

.pp-modern-activity__head {
    margin-top: 8px;
}

.pp-modern-activity__head span {
    color: #111;
    font-size: 15px;
    font-weight: 600;
}

.pp-modern-activity-card,
.pp-modern-row-card,
.pp-modern-bill-card {
    position: relative;
    display: grid;
    gap: 12px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
}

.pp-modern-activity-card strong,
.pp-modern-bill-card strong {
    color: #111;
    font-size: 16px;
}

.pp-modern-activity-card > button,
.pp-modern-bill-card > button,
.pp-modern-row-card > button,
.pp-modern-bill-card > a,
.pp-modern-row-card > a {
    width: max-content;
    height: 36px;
    border: 1px solid #d9e8ff;
    border-radius: 8px;
    background: #f4f9ff;
    color: #007fbd;
    font: inherit;
    font-size: 14px;
    padding: 0 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pp-modern-status {
    position: absolute;
    top: 18px;
    right: 18px;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.2;
}

.pp-modern-status--done {
    border: 1px solid #9df3aa;
    background: #eaffed;
    color: #19a02e;
}

.pp-modern-status--warn {
    border: 1px solid #ffd899;
    background: #fff7e8;
    color: #f59e0b;
}

.pp-modern-status--pending {
    border: 1px solid #ffc2c2;
    background: #fff0f0;
    color: #d73f3f;
}

.pp-modern-row-card {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
}

.pp-modern-row-card > div {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef8ff;
}

.pp-modern-row-card img {
    width: 26px;
    height: 26px;
}

.pp-modern-row-card span {
    display: grid;
    gap: 6px;
}

.pp-modern-row-card strong {
    color: #111;
    font-size: 15px;
}

.pp-modern-row-card em {
    color: #646464;
    font-size: 12px;
    font-style: normal;
}

.pp-treatment-detail {
    display: grid;
    gap: 18px;
}

.pp-treatment-detail__head {
    position: relative;
    min-height: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 112px;
}

.pp-treatment-detail__head strong {
    color: #111;
    font-size: 18px;
    font-weight: 800;
}

.pp-treatment-detail dl {
    margin: 0;
    display: grid;
    gap: 10px;
}

.pp-treatment-detail dl div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

.pp-treatment-detail dl div:last-child {
    border-bottom: 0;
}

.pp-treatment-detail dt {
    color: #64707d;
    font-size: 13px;
    font-weight: 700;
}

.pp-treatment-detail dd {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pp-modern-empty-line {
    color: #9b9b9b;
    font-size: 13px;
}

.pp-lang-row {
    display: flex;
    align-items: center;
    gap: 34px;
}

.pp-lang-row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #646464;
    font-size: 14px;
    font-weight: 600;
}

.pp-lang-row input {
    width: 17px;
    height: 17px;
    display: grid;
    place-content: center;
    appearance: none;
    border: 1.5px solid #c9ced4;
    border-radius: 50%;
    background: #fff;
    margin: 0;
}

.pp-lang-row input::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
}

.pp-lang-row input:checked {
    border-color: var(--primary);
}

.pp-lang-row input:checked::before {
    transform: scale(1);
}

.pp-remark-language-note {
    margin: 8px 0 2px;
    color: #858585;
    font-size: 12px;
}

.pp-modern-notes-history,
.pp-modern-remark-history {
    display: grid;
    gap: 16px;
    max-height: 460px;
    overflow: auto;
}

.pp-modern-notes-history article {
    display: grid;
    gap: 10px;
}

.pp-modern-notes-history p {
    margin: 0;
    border: 1px solid #acacac;
    border-radius: 7px;
    color: #646464;
    padding: 12px 14px;
    font-size: 14px;
}

.pp-modern-notes-history div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #646464;
    font-size: 13px;
}

/* Note header with timestamp in top-right corner */
.pp-modern-note-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pp-modern-note-timestamp {
    display: inline-block;
    color: #999999;
    font-size: 11px;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.pp-modern-remark-history article {
    position: relative;
    display: grid;
    gap: 14px;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    padding: 22px 44px 22px 22px;
}

.pp-modern-remark-history strong {
    color: #111;
    font-size: 16px;
}

.pp-modern-remark-history p {
    margin: 0;
    color: #646464;
    font-size: 13px;
    line-height: 1.45;
}

.pp-modern-remark-history span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #646464;
    font-size: 13px;
}

.pp-modern-remark-history .pp-remark-detail-card {
    padding: 22px;
}

.pp-remark-detail-card > strong {
    padding-right: 92px;
}

.pp-remark-detail-actions {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-remark-detail-actions form {
    margin: 0;
}

.pp-remark-action {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 10px;
    background: rgba(0, 174, 239, 0.09);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pp-remark-action:hover {
    border-color: rgba(0, 174, 239, 0.38);
    background: rgba(0, 174, 239, 0.16);
}

.pp-remark-action img {
    width: 19px;
    height: 19px;
}

.pp-remark-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pp-modern-delete {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: invert(22%) sepia(80%) saturate(2770%) hue-rotate(341deg)
        brightness(101%) contrast(94%);
}

.pp-remark-form-modal .ap-modal__head {
    margin-bottom: 26px;
}

.pp-remark-form .ap-field {
    margin-bottom: 18px;
}

.pp-remark-form .ap-control {
    height: 46px;
    padding: 0 14px;
}

.pp-remark-form .pp-modal-textarea {
    min-height: 126px;
    padding: 14px;
    resize: vertical;
}

.pt-form-panel {
    border-radius: 20px;
}

.pt-form .ap-control,
.pt-form .ap-dd__btn {
    border-color: #acacac;
    border-radius: 8px;
}

.pt-form .ap-form__footer {
    justify-content: flex-start;
}

.pt-form-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #646464;
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0 10px;
}

.pt-form-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

@media (max-width: 1180px) {
    .pp-modern-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .pp-modern-profile,
    .pp-modern-treatment-summary,
    .pp-modern-activity {
        padding: 18px;
    }

    .pp-modern-profile__head,
    .pp-modern-patient,
    .pp-modern-actions,
    .pp-modern-row-card {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .pp-modern-actions {
        flex-direction: row;
    }

    .pp-modern-kv div,
    .pp-modern-table > div:not(.pp-modern-total) {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pp-modern-kv strong {
        text-align: left;
    }

    .pp-modern-status {
        position: static;
        width: max-content;
    }
}

.pp-empty {
    color: rgba(100, 100, 100, 0.75);
    font-weight: 700;
    font-size: 12px;
    padding: 12px 2px;
}

@media (max-width: 1100px) {
    .pp-panels,
    .pp-grid {
        grid-template-columns: 1fr;
    }
    .pp-actions {
        position: static;
        margin-top: 12px;
    }
    .pp-card {
        display: grid;
        gap: 12px;
    }
}

@media (max-width: 1100px) {
    .pt-grid {
        grid-template-columns: 1fr;
    }
    .pt-search {
        max-width: none;
    }
}

/* ====== Patient detail refresh ====== */
.pp-page {
    display: grid;
    gap: 18px;
    max-width: 100%;
}

.pp-card--profile {
    border-radius: 22px;
    padding: 22px;
}

.pp-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pp-card--profile .pp-hero {
    gap: 16px;
}

.pp-card--profile .pp-ava {
    width: 74px;
    height: 74px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.pp-card--profile .pp-name {
    font-size: 22px;
    line-height: 1.2;
}

.pp-card--profile .pp-sub {
    font-size: 13px;
    gap: 18px;
}

.pp-card--profile .pp-sub span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-card--profile .pp-sub img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.pp-card--profile .pp-actions {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pp-action {
    height: 40px;
    border-radius: 12px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.pp-action svg {
    width: 24px;
    height: 24px;
}

.pp-action img,
.pp-dd__btn img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.pp-action--ghost {
    color: rgba(0, 0, 0, 0.66);
    background: #f8fafc;
}

.pp-action--primary {
    color: var(--white);
    background: var(--primary);
    border-color: rgba(0, 174, 239, 0.35);
    box-shadow: 0 10px 24px rgba(0, 174, 239, 0.2);
}

.pp-info-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pp-info-grid .pp-panel {
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.pp-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pp-panel__head .pp-panel__title {
    margin-bottom: 0;
}

.pp-info-grid .pp-panel__title,
.pp-box__title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.8);
}

.pp-info-grid .pp-row {
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

.pp-info-grid .pp-row span,
.pp-info-grid .pp-row strong {
    font-size: 12px;
}

.pp-info-grid .pp-row strong {
    text-align: right;
}

.pp-row--stack {
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
}

.pp-row--stack strong {
    max-width: 68%;
    text-align: right;
    line-height: 1.35;
    white-space: normal;
}

.pp-textarea,
.pp-modal-textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 12px;
    resize: vertical;
    outline: none;
    color: var(--black);
    font: inherit;
    font-size: 13px;
}

.pp-modal-textarea {
    height: auto;
    padding-top: 10px;
}

.pp-textarea:focus,
.pp-modal-textarea:focus {
    border-color: rgba(0, 174, 239, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}

.pp-save {
    height: 46px;
    min-width: 115px;
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    background: #00AEEF;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 174, 239, 0.2);
}

.pp-save:disabled {
    background: #A5E6FF;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
}

.pp-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.pp-column {
    display: grid;
    gap: 18px;
}

.pp-content-grid .pp-box {
    border-radius: 20px;
    padding: 18px;
}

.pp-card-title {
    font-size: 13px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.82);
}

.pp-card-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: rgba(0, 0, 0, 0.52);
    font-size: 11px;
    font-weight: 700;
}

.pp-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-card-meta svg {
    width: 14px;
    height: 14px;
    color: rgba(0, 0, 0, 0.4);
}

.pp-card-meta img {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}

.pp-rowcard__ico img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
}

.pp-appt-card,
.pp-treatment-card,
.pp-pres-card,
.pp-content-grid .pp-bill {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.pp-appt-card {
    justify-content: space-between;
}

.pp-treatment-card .pp-rowcard__meta,
.pp-pres-card .pp-rowcard__meta,
.pp-bill__main {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.pp-status--info {
    color: var(--primary);
    background: rgba(0, 174, 239, 0.1);
}

.pp-status--warn {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.pp-status--done {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.14);
}

.pp-status--pending {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.pp-content-grid .pp-rowcard__ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.pp-content-grid .pp-bill {
    position: static;
    flex-wrap: nowrap;
}

.pp-content-grid .pp-bill__amt {
    width: auto;
    font-size: 15px;
}

.pp-modal__panel {
    border-radius: 22px;
    padding: 22px;
    max-width: 100%;
}

.pp-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
}

.pp-modal .ap-modal__panel {
    margin: 0;
}

.pp-modal__panel--sm {
    width: min(430px, calc(100vw - 40px));
}

.pp-modal__panel--md {
    width: min(620px, calc(100vw - 40px));
}

.pp-modal__panel--lg {
    width: min(1100px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 80px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.pp-notes-history {
    display: grid;
    gap: 12px;
    max-height: 430px;
    overflow: auto;
    padding-right: 4px;
}

.pp-note-item {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 14px;
    background: #ffffff;
}

.pp-note-item p {
    margin: 0;
    color: rgba(0, 0, 0, 0.72);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.pp-note-item div {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    font-weight: 800;
}

.pp-treatment-top,
.pp-notes-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.pp-treatment-form .ap-label {
    color: rgba(0, 0, 0, 0.56);
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
}

.pp-treatment-form .ap-control {
    height: 56px;
    border-radius: 16px;
    font-size: 16px;
    padding: 0 16px;
    min-width: 0;
}

.pp-notes-row {
    grid-template-columns: 1fr;
}

.pp-dd {
    position: relative;
}

.pp-dd__btn {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: #ffffff;
    color: rgba(0, 0, 0, 0.86);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.pp-dd__btn svg {
    width: 18px;
    height: 18px;
    color: #9aa0a6;
    flex: 0 0 auto;
}

.pp-dd.is-open .pp-dd__btn {
    border-color: rgba(0, 174, 239, 0.78);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.pp-dd__pop {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 2600;
    background: #ffffff;
    border: 1px solid #bac6cf;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 12px 22px;
    max-height: 240px;
    max-width: 100%;
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
    box-sizing: border-box;
}

.pp-dd.is-open .pp-dd__pop {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pp-dd__option {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: rgba(0, 0, 0, 0.62);
    text-align: left;
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.25;
    cursor: pointer;
}

.pp-dd__option:last-child {
    border-bottom: 0;
}

.pp-dd__option:hover,
.pp-dd__option[aria-selected="true"] {
    background: #ffffff;
    color: var(--primary);
}

.pp-dd__option.is-placeholder {
    color: #afafaf;
}

.pp-dd__pop--notes {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    border: 1px solid #bac6cf;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15);
    padding: 16px 16px 10px;
    max-height: 240px;
    overflow-y: auto;
}

.pp-dd__pop--notes .pp-dd__option {
    min-height: 42px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
}

.pp-dd__pop--notes .pp-dd__option:last-child {
    border-bottom: 0;
}

/* Treatment form Notes dropdown */
.pp-dd--treatment-notes {
    position: relative;
}

.pp-dd__pop--treatment-notes {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 2600;
    background: #ffffff;
    border: 1px solid #bac6cf;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.pp-dd--treatment-notes.is-open .pp-dd__pop--treatment-notes {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pp-dd__notes-head {
    padding: 14px 16px 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pp-dd__notes-loading {
    padding: 14px 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
}

.pp-dd__pop--treatment-notes .pp-dd__option {
    width: 100%;
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.75);
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

.pp-dd__pop--treatment-notes .pp-dd__option:last-child {
    border-bottom: 0;
}

.pp-dd__pop--treatment-notes .pp-dd__option:hover {
    color: var(--primary);
    background: rgba(0, 174, 239, 0.04);
}

.pp-dd__field {
    margin-bottom: 18px;
}

.pp-dd__field span,
.pp-dd__caption {
    display: block;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.78);
    font-size: 12px;
    font-weight: 700;
}

.pp-dd__field input {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    padding: 0 14px;
    outline: none;
    color: rgba(0, 0, 0, 0.78);
    font-size: 14px;
}

.pp-dd__field input::placeholder {
    color: #b8b8b8;
}

.pp-teeth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 24px;
    align-items: center;
    min-width: 0;
}

.pp-teeth-left {
    display: grid;
    gap: 16px;
    min-width: 0;
    overflow-x: auto;
}

.pp-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: rgba(0, 0, 0, 0.72);
    font-size: 13px;
    font-weight: 900;
}

.pp-teeth-title {
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.62);
    font-size: 12px;
    font-weight: 900;
}

.pp-teeth-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.pp-teeth-grid--child {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
}

.pp-tooth {
    position: relative;
    cursor: pointer;
    min-width: 0;
}

.pp-tooth input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.pp-tooth span {
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: rgba(0, 0, 0, 0.62);
    font-size: 12px;
    font-weight: 900;
    min-width: 0;
}

.pp-tooth input:checked + span {
    color: var(--white);
    border-color: rgba(0, 174, 239, 0.45);
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.16);
}

/* Adult dentition selector shared by treatments and laboratory orders. */
.adult-teeth-chart {
    --tooth-selected: #e32636;
    position: relative;
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(2, 88px);
    gap: 8px 2px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 0 24px;
}
.adult-teeth-chart::before,.adult-teeth-chart::after { content: ""; position: absolute; z-index: 0; background: rgba(227,38,54,.68); pointer-events: none; }
.adult-teeth-chart::before { left: 24px; right: 24px; top: 50%; height: 1px; }
.adult-teeth-chart::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.adult-teeth-chart__side { position: absolute; top: 50%; z-index: 2; color: var(--tooth-selected); font-size: 15px; font-weight: 900; line-height: 1; transform: translateY(-50%); }
.adult-teeth-chart__side--right { left: 4px; }
.adult-teeth-chart__side--left { right: 4px; }
.adult-tooth { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; color: #fff; cursor: pointer; }
.adult-tooth input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.adult-tooth__shape { position: relative; display: block; width: 100%; height: 84px; color: #fff; transition: color .16s ease,transform .16s ease; }
.adult-tooth__shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
.adult-tooth__shape path { fill: currentColor; stroke: #3f4650; stroke-width: 2; vector-effect: non-scaling-stroke; }
.adult-tooth__shape .adult-tooth__detail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.adult-tooth--kind-1 .adult-tooth__shape,.adult-tooth--kind-2 .adult-tooth__shape { transform: scaleX(.86); }
.adult-tooth--kind-6 .adult-tooth__shape,.adult-tooth--kind-7 .adult-tooth__shape,.adult-tooth--kind-8 .adult-tooth__shape { transform: scaleX(1.08); }
.adult-tooth__shape b { position: absolute; left: 50%; top: 67%; color: #3f4650; font-size: 11px; line-height: 1; transform: translate(-50%,-50%); pointer-events: none; }
.adult-tooth--lower .adult-tooth__shape b { top: 33%; }
.adult-tooth:hover .adult-tooth__shape { color: #fff3f4; }
.adult-tooth:hover.adult-tooth--kind-1 .adult-tooth__shape,.adult-tooth:hover.adult-tooth--kind-2 .adult-tooth__shape { transform: scaleX(.86) translateY(-2px); }
.adult-tooth:hover.adult-tooth--kind-3 .adult-tooth__shape,.adult-tooth:hover.adult-tooth--kind-4 .adult-tooth__shape,.adult-tooth:hover.adult-tooth--kind-5 .adult-tooth__shape { transform: translateY(-2px); }
.adult-tooth:hover.adult-tooth--kind-6 .adult-tooth__shape,.adult-tooth:hover.adult-tooth--kind-7 .adult-tooth__shape,.adult-tooth:hover.adult-tooth--kind-8 .adult-tooth__shape { transform: scaleX(1.08) translateY(-2px); }
.adult-tooth input:checked + .adult-tooth__shape { color: var(--tooth-selected); }
.adult-tooth input:checked + .adult-tooth__shape path { stroke: #b51222; }
.adult-tooth input:checked + .adult-tooth__shape b { color: #fff; }
.adult-tooth input:focus-visible + .adult-tooth__shape { outline: 3px solid rgba(0,174,239,.35); outline-offset: 2px; border-radius: 8px; }
.lab-form .adult-teeth-chart { max-width: 100%; }

.pp-teeth-art {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.pp-teeth-art img {
    width: min(360px, 100%);
    height: auto;
    display: block;
    max-width: 100%;
}

@media (max-width: 1180px) {
    .pp-profile-head,
    .pp-content-grid,
    .pp-info-grid,
    .pp-teeth-layout,
    .pp-treatment-top,
    .pp-notes-row {
        grid-template-columns: 1fr;
    }

    .pp-profile-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-card--profile .pp-actions {
        justify-content: flex-start;
    }

    .pp-teeth-art {
        justify-content: center;
    }

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

    .pp-teeth-grid--child {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .content {
        padding: 16px;
    }

    .pp-card--profile,
    .pp-content-grid .pp-box,
    .pp-modal__panel {
        border-radius: 16px;
        padding: 14px;
    }

    .pp-card--profile .pp-ava {
        width: 58px;
        height: 58px;
    }

    .pp-card--profile .pp-name {
        font-size: 18px;
    }

    .pp-card--profile .pp-actions,
    .pp-action,
    .pp-appt-card,
    .pp-treatment-card,
    .pp-pres-card,
    .pp-content-grid .pp-bill {
        width: 100%;
    }

    .pp-action {
        justify-content: center;
    }

    .pp-row--stack {
        flex-direction: column;
        gap: 5px;
    }

    .pp-row--stack strong {
        max-width: none;
        text-align: left;
    }

    .pp-appt-card,
    .pp-treatment-card,
    .pp-pres-card,
    .pp-content-grid .pp-bill {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-teeth-grid,
    .pp-teeth-grid--child {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ====== Updated global admin layout + dashboard ====== */
.admin-shell,
.main-wrapper {
    background: #ffffff;
}

.sidebar {
    width: 270px;
    background: #ffffff;
    padding: 20px 14px;
}

.main-wrapper {
    margin-left: 270px;
}

.navbar {
    left: 270px;
    height: 100px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 0;
}

.content {
    margin-top: 100px;
    height: calc(100vh - 100px);
    background: #ffffff;
    padding: 20px 24px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.logo {
    height: 82px;
    padding: 0 8px;
    margin-bottom: 20px;
}

.logo-img {
    height: 58px;
}

.menu-item {
    height: 52px;
    border-radius: 8px;
    margin-bottom: 4px;
    padding: 0 14px;
    gap: 16px;
    color: #8b8b8b;
    font-size: 15px;
    font-weight: 700;
}

.menu-item:hover {
    background: #f3f8ff;
}

.menu-item.active {
    background: #eef5ff;
    color: var(--primary);
}

.menu-icon,
.menu-icon svg {
    width: 24px;
    height: 24px;
}

.menu-icon img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.settings-item {
    margin-bottom: 4px;
}

.navbar-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.admin-top-actions {
    gap: 16px;
}

.top-action {
    position: relative;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.top-action svg,
.top-action img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.top-action--primary {
    color: var(--primary);
    background: rgba(0, 174, 239, 0.06);
    border-color: rgba(0, 174, 239, 0.14);
}

.top-action--urgent {
    color: #e53935;
    background: rgba(229, 57, 53, 0.08);
    border-color: rgba(229, 57, 53, 0.2);
}

.top-action__count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: #e53935;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.top-action--ghost {
    color: rgba(0, 0, 0, 0.64);
    background: #ffffff;
}

.top-action__dot {
    display: none;
}

[data-dash-page] {
    max-width: 1122px;
    margin: 0 auto;
}

.dash-section {
    position: relative;
    margin-top: 0;
}

.stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.stat-card {
    min-height: 122px;
    border-radius: 22px;
    padding: 24px;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.stat-value {
    font-size: 30px;
    color: var(--primary);
}

.stat-label {
    margin-top: 12px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.62);
}

.stat-icon {
    color: rgba(0, 174, 239, 0.38);
}

.stat-icon svg,
.stat-icon img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    stroke-width: 2.4;
}

.dash-request-card {
    position: absolute;
    right: 20px;
    top: -20px;
    width: 390px;
    border-radius: 10px;
    background: var(--primary);
    color: #ffffff;
    padding: 18px 22px;
    box-shadow: 0 14px 28px rgba(0, 174, 239, 0.2);
    z-index: 20;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.dash-request-card.is-closing {
    opacity: 0;
    transform: translateY(-8px);
}

.dash-request-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
}

.dash-request-card__icon,
.dash-request-card__icon svg,
.dash-request-card__icon img {
    width: 18px;
    height: 18px;
    display: block;
}

.dash-request-card__head button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
}

.dash-request-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.dash-request-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dash-request-card__meta svg,
.dash-request-card__meta img {
    width: 14px;
    height: 14px;
    display: block;
}

.dash-blocks {
    margin-top: 32px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
    padding: 24px;
}

.dash-blocks__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dash-blocks__head h2 {
    margin: 0;
    color: #151922;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.dash-blocks__head p {
    margin: 6px 0 0;
    color: rgba(0, 0, 0, 0.55);
    font-size: 13px;
}

.dash-blocks__action {
    height: 38px;
    border-radius: 8px;
    background: rgba(0, 174, 239, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.dash-blocks__list {
    display: grid;
    gap: 12px;
}

.dash-block-item {
    min-height: 72px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    background: #fafcff;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.dash-block-item__icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: #eef5ff;
    display: grid;
    place-items: center;
}

.dash-block-item__icon img {
    width: 23px;
    height: 23px;
    display: block;
}

.dash-block-item__main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dash-block-item__main strong {
    color: #101828;
    font-size: 15px;
    font-weight: 700;
}

.dash-block-item__main span,
.dash-block-item__main em {
    color: rgba(0, 0, 0, 0.58);
    font-size: 13px;
    font-style: normal;
}

.dash-block-item__time {
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.dash-block-item__side {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.dash-block-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.dash-block-item__actions form {
    margin: 0;
}

.dash-block-item__actions a,
.dash-block-item__actions button {
    min-height: 30px;
    border: 1px solid rgba(0, 174, 239, 0.2);
    border-radius: 7px;
    background: #ffffff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.dash-block-item__actions button {
    border-color: rgba(225, 29, 72, 0.2);
    color: #e11d48;
}

.dash-block-item__actions a:hover,
.dash-block-item__actions a:focus-visible {
    background: rgba(0, 174, 239, 0.08);
}

.dash-block-item__actions button:hover,
.dash-block-item__actions button:focus-visible {
    background: rgba(225, 29, 72, 0.07);
}

.dash-blocks__empty {
    border: 1px dashed rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.52);
    padding: 18px;
    text-align: center;
}

.calendar-wrap {
    margin-top: 32px;
}

.calendar-card {
    position: relative;
    border-radius: 18px;
    padding: 24px;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
    overflow: visible;
    background: #ffffff;
}

.calendar-head {
    margin-bottom: 24px;
}

.calendar-title-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.calendar-title {
    font-size: 22px;
    font-weight: 800;
}

.calendar-nav {
    display: inline-flex;
    gap: 10px;
}

.calendar-nav button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--stroke);
    background: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.calendar-nav svg,
.calendar-nav img {
    width: 16px;
    height: 16px;
    display: block;
}

.toggle-group {
    border-radius: 7px;
    padding: 0;
    background: #efefef;
}

.toggle-btn {
    height: 46px;
    min-width: 72px;
    border-radius: 7px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    min-width: 115px;
}

.toggle-btn.is-active {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.62);
    border: 1px solid #aebecd;
}

.calendar-legend {
    gap: 24px;
    padding: 0 0 16px;
    font-size: 12px;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.calendar-grid {
    border-radius: 10px;
    border-color: #d7dfe7;
    overflow: visible;
}

.calendar-grid th,
.calendar-grid td {
    border-color: #d7dfe7;
}

.calendar-grid--week tbody td {
    height: 40px;
    position: relative;
}

.calendar-grid thead th {
    height: 72px;
    padding: 12px 10px;
    background: #ffffff;
}

.calendar-grid thead th.time-col {
    text-align: center;
    vertical-align: middle;
    width: 80px;
}

.calendar-tz,
.calendar-time {
    width: 80px;
    background: #fafbfd;
    color: rgba(0, 0, 0, 0.6);
    text-align: right;
    padding-right: 10px;
}

.calendar-day .cal-date {
    font-size: 26px;
    font-weight: 500;
}

.calendar-day .cal-dow {
    margin-top: 4px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.72);
}

.appt {
    min-height: 100%;
    height: 50%;
    border-radius: 8px;
    padding: 9px 6px;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    box-shadow: none;
    cursor: default;
    width: fit-content;
}

.appt--yellow {
    background: #f8ffd8;
}
.appt--red {
    background: #fdebeb;
}
.appt--green {
    background: #e3fae8;
}
.appt--blue {
    background: #e6f3ff;
}
.appt--purple {
    background: #f0e5fa;
}
.appt--cyan {
    background: #e1fbf8;
}

/* Doctor name label inside appointment box */
.appt__doctor {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.65;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appt-wrap {
    position: absolute;
    inset: 0;
    min-height: 100%;
}

.dash-appt-pop {
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    width: min(312px, calc(100vw - 24px));
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
    padding: 18px;
    z-index: 30;
    opacity: 0;
    text-align: left;
    pointer-events: none;
    transform: translate(0, -50%) scale(0.98);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.calendar-grid td:nth-last-child(-n + 2) .dash-appt-pop {
    left: auto;
    right: calc(100% + 10px);
}

.appt-wrap:hover .dash-appt-pop,
.appt-wrap:focus-within .dash-appt-pop {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

.dash-appt-pop__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    font-size: 13px;
}

.dash-appt-pop__head strong {
    font-size: 16px;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.dash-appt-pop__head span,
.dash-appt-pop p {
    color: rgba(0, 0, 0, 0.55);
    font-size: 11px;
}

.dash-appt-pop__head span {
    flex-shrink: 0;
    padding-top: 2px;
    text-align: right;
    white-space: nowrap;
}

.dash-appt-pop__label {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
}

.dash-appt-pop__meta {
    margin-top: 10px;
    font-size: 16px;
}

.dash-appt-pop__meta:nth-of-type(2) {
    margin-top: 10px;
}

.dash-appt-pop p {
    margin: 12px 0 0;
    color: rgba(0, 0, 0, 0.55);
    font-size: 11px;
    margin-top: 0px;
    margin-bottom: 15px;
}

/* Month view tooltip — wraps badge in appt-wrap for tooltip positioning */
.ap-cell .appt-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.ap-cell .dash-appt-pop {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-50%) scale(0.98);
    width: 244px;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

/* For second-to-last column (Friday) in month view, show tooltip at bottom */
.ap-calendar tbody tr td:nth-last-child(2) .dash-appt-pop {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.98);
}

/* For last column (Saturday) in month view, flip tooltip to left */
.ap-calendar tbody tr td:last-child .dash-appt-pop {
    left: auto;
    right: calc(100% + 8px);
}

/* For last row in month view, show tooltip above the element */
.ap-calendar tbody tr:last-child .dash-appt-pop {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) scale(0.98);
}

/* Update transform for last row on hover */
.ap-calendar tbody tr:last-child .appt-wrap:hover .dash-appt-pop,
.ap-calendar tbody tr:last-child .appt-wrap:focus-within .dash-appt-pop {
    transform: translateX(-50%) scale(1);
}

.ap-cell .appt-wrap:hover .dash-appt-pop,
.ap-cell .appt-wrap:focus-within .dash-appt-pop {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Update transform for second-to-last column on hover */
.ap-calendar tbody tr td:nth-last-child(2) .appt-wrap:hover .dash-appt-pop,
.ap-calendar tbody tr td:nth-last-child(2) .appt-wrap:focus-within .dash-appt-pop {
    transform: translateX(-50%) scale(1);
}

@media (max-width: 1180px) {
    .sidebar {
        width: 240px;
    }
    .main-wrapper {
        margin-left: 240px;
    }
    .navbar {
        left: 240px;
    }
    .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-request-card,
    .dash-appt-pop {
        display: none;
    }
    .dash-block-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .dash-block-item__side {
        grid-column: 2;
        justify-items: start;
    }
}

/* ====== Global admin screen cleanup ====== */
.admin-shell,
.app-layout,
.main-wrapper,
.navbar,
.content {
    background: #ffffff;
}

.admin-shell,
.content,
.pt-card,
[data-pt-results],
.chat-users,
.chat-room__body,
.navsr-list,
.pp-notes-history,
.pp-modal__panel--lg,
.ap-datepick__pop,
.ap-modal__panel,
.calendar-card {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-shell::-webkit-scrollbar,
.content::-webkit-scrollbar,
.pt-card::-webkit-scrollbar,
[data-pt-results]::-webkit-scrollbar,
.chat-users::-webkit-scrollbar,
.chat-room__body::-webkit-scrollbar,
.navsr-list::-webkit-scrollbar,
.pp-notes-history::-webkit-scrollbar,
.pp-modal__panel--lg::-webkit-scrollbar,
.ap-datepick__pop::-webkit-scrollbar,
.calendar-card::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ====== Responsive admin shell ====== */
.navbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sidebar-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.sidebar-toggle img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.sidebar {
    overflow: hidden;
}

.sidebar-menu {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    padding-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 239, 0.3) transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 239, 0.3);
    border-radius: 999px;
}

.calendar-card,
.ap-calendar-card {
    overflow: hidden;
}

.calendar-grid,
.ap-calendar {
    min-width: 920px;
}

@media (min-width: 1441px) {
    [data-dash-page],
    .pt-page,
    .ap-page,
    .chat-page,
    .pp-page {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1280px) {
    .sidebar {
        width: 240px;
    }

    .main-wrapper {
        margin-left: 240px;
    }

    .navbar {
        left: 240px;
    }

    .stats-row {
        gap: 18px;
    }

    .stat-card {
        padding: 20px;
    }

    .pt-page,
    [data-dash-page] {
        max-width: 100%;
    }
}

@media (max-width: 1180px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 220ms ease;
        z-index: 1200;
        width: 270px;
        box-shadow: 18px 0 50px rgba(15, 23, 42, 0.12);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .navbar {
        left: 0;
    }

    .sidebar-toggle {
        display: grid;
    }

    .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pt-grid,
    .pp-content-grid,
    .pp-info-grid {
        grid-template-columns: 1fr;
    }

    .chat-shell {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .dash-request-card {
        display: block;
        position: static;
        width: 100%;
        margin-top: 18px;
    }

    .dash-appt-pop {
        display: block;
    }
}

@media (max-width: 767px) {
    .navbar {
        height: auto;
        min-height: 86px;
        padding: 16px;
        align-items: flex-start;
        gap: 14px;
        flex-wrap: wrap;
    }

    .content {
        margin-top: 116px;
        height: calc(100vh - 116px);
        padding: 16px;
    }

    .navbar-title {
        font-size: 26px;
    }

    .admin-top-actions,
    .pt-header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .top-action {
        height: 38px;
        font-size: 14px;
        padding: 0 12px;
    }

    .pt-head,
    .ap-head,
    .calendar-head,
    .pp-profile-head {
        flex-direction: column;
        align-items: stretch;
    }

    .pt-search {
        max-width: none;
        width: 100%;
    }

    .pt-actions,
    .ap-actions,
    .pp-card--profile .pp-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .pt-card,
    .calendar-card,
    .ap-calendar-card,
    .pp-card--profile,
    .pp-content-grid .pp-box,
    .chat-list,
    .chat-main {
        border-radius: 14px;
    }

    .chat-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 148px);
    }

    .chat-list,
    .chat-main {
        min-height: 420px;
    }

    .pp-treatment-top,
    .pp-teeth-layout,
    .pp-notes-row {
        grid-template-columns: 1fr;
    }

    .pp-teeth-art {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .navbar {
        min-height: 78px;
        padding: 12px;
    }

    .content {
        margin-top: 132px;
        height: calc(100vh - 132px);
        padding: 12px;
    }

    .navbar-left {
        width: 100%;
    }

    .navbar-title {
        font-size: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar {
        width: min(286px, 86vw);
    }

    .logo {
        height: 68px;
        margin-bottom: 10px;
    }

    .logo-img {
        height: 46px;
    }

    .menu-item {
        height: 46px;
        font-size: 14px;
    }

    .top-action span,
    .pt-btn span:first-child {
        display: inline;
    }

    .top-action {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 132px;
    }

    .stats-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .stat-card {
        min-height: 104px;
        border-radius: 16px;
    }

    .stat-value {
        font-size: 26px;
    }

    .stat-label {
        font-size: 14px;
    }

    .pt-card,
    .calendar-card {
        padding: 14px;
    }

    .pt-item,
    .pp-appt-card,
    .pp-treatment-card,
    .pp-pres-card,
    .pp-content-grid .pp-bill {
        align-items: flex-start;
        flex-direction: column;
    }

    .pt-left,
    .pt-right,
    .pt-actions,
    .pt-btn,
    .pt-sort,
    .pt-sort__btn {
        width: 100%;
    }

    .pt-btn,
    .pt-sort__btn {
        justify-content: center;
    }

    .pt-sort__menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    .pt-sub,
    .pp-card-meta,
    .pp-sub {
        white-space: normal;
    }

    .calendar-title-wrap {
        justify-content: space-between;
    }

    .toggle-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .toggle-btn {
        min-width: 0;
    }

    .pp-modal.is-open {
        padding: 12px;
    }

    .dash-appt-pop {
        display: none;
    }

    .pp-modal__panel--lg,
    .pp-modal__panel--md,
    .pp-modal__panel--sm {
        width: 100%;
        max-height: calc(100vh - 24px);
    }

    .pp-teeth-grid,
    .pp-teeth-grid--child {
        grid-template-columns: repeat(4, max-content);
        gap: 12px 18px;
    }
}

@media (max-width: 420px) {
    .top-action {
        min-width: 0;
        font-size: 13px;
    }

    .top-action img {
        width: 24px;
        height: 24px;
    }

    .pt-avatar {
        width: 46px;
        height: 46px;
    }

    .pt-name {
        font-size: 14px;
    }

    .pt-sub {
        font-size: 11px;
    }

    .pp-teeth-grid,
    .pp-teeth-grid--child {
        grid-template-columns: repeat(3, max-content);
    }
}

/* ====== Bills module ====== */
.bill-page {
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

.bill-card,
.bill-patient-panel,
.bill-create-panel,
.bill-detail-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06);
}

.bill-page--list .bill-card {
    min-height: calc(100vh - 124px);
    padding: 28px 30px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bill-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.bill-search {
    width: min(400px, 100%);
    height: 46px;
    max-width: none;
}

.bill-actions .pt-btn {
    height: 46px;
    min-width: 115px;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
}

.bill-actions .pt-sort__btn {
    min-width: 110px;
}

.bill-results {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bill-results::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.bill-filter-summary {
    flex: 0 0 auto;
    margin-bottom: 22px;
    padding: 16px 18px 18px;
    border: 1px solid rgba(0, 174, 239, 0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.055), rgba(255, 255, 255, 0.96));
}

.bill-page--list [data-bill-summary] {
    flex: 0 0 auto;
}

.bill-filter-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.bill-filter-summary__head strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.bill-filter-summary__head span {
    color: rgba(15, 23, 42, 0.55);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.bill-filter-summary__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.bill-filter-summary__item {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    display: grid;
    gap: 4px;
}

.bill-filter-summary__item span {
    overflow: hidden;
    color: rgba(15, 23, 42, 0.58);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bill-filter-summary__item strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bill-filter-summary__item.is-paid strong {
    color: #15803d;
}

.bill-filter-summary__item.is-refund strong {
    color: #b45309;
}

.bill-filter-summary__item.is-remaining strong {
    color: #dc2626;
}

.bill-filter-summary__item.is-difference strong {
    color: #7c3aed;
}

.bill-list {
    display: grid;
    gap: 28px;
}

.bill-group {
    display: grid;
    gap: 16px;
}

.bill-group__title {
    margin: 0;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
}

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

.bill-item {
    min-height: 136px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #ffffff;
    padding: 18px 20px;
    display: grid;
    align-content: start;
    gap: 10px;
}

.bill-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bill-item__top strong {
    color: #000000;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.bill-item__amount {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.bill-item__amount span {
    color: #000000;
    font-size: 16px;
    font-weight: 800;
}

.bill-status {
    min-height: 20px;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
}

.bill-status--paid {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.bill-status--partial {
    color: #d97706;
    background: rgba(245, 158, 11, 0.13);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.bill-status--unpaid {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.bill-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
    font-weight: 500;
}

.bill-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bill-meta img {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}

.bill-soft-btn {
    width: fit-content;
    min-width: 91px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0, 174, 239, 0.25);
    background: rgba(0, 116, 255, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.bill-whatsapp-btn {
    width: 35px;
    height: 35px;
    margin-left: auto;
    border: 1px solid rgba(37, 211, 102, 0.18);
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.bill-whatsapp-btn svg {
    width: 22px;
    height: 23px;
    display: block;
}

.bill-whatsapp-btn:hover {
    background: rgba(37, 211, 102, 0.2);
    color: #22c55e;
}

.bill-whatsapp-btn.is-disabled {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.45;
}

.bill-pager {
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.bill-pager-per-page {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.staff-pager {
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.staff-pager-per-page {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.staff-results {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.staff-results::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.bill-empty-list {
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
    font-weight: 500;
}

.bill-crumb {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(0, 0, 0, 0.46);
    font-size: 16px;
}

.bill-crumb a {
    color: var(--primary);
    text-decoration: none;
}

.bill-create-layout {
    display: grid;
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    height: clamp(560px, calc(100vh - 190px), 780px);
}

.bill-patient-panel {
    min-height: 0;
    height: 100%;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
}

.bill-patient-search {
    width: 100%;
    height: 46px;
    flex: 0 0 auto;
    border-color: rgba(0, 0, 0, 0.34);
    border-radius: 8px;
}

.bill-patient-list {
    display: grid;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 239, 0.28) transparent;
}

.bill-patient-list::-webkit-scrollbar {
    width: 5px;
}

.bill-patient-list::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 239, 0.28);
    border-radius: 999px;
}

.bill-patient {
    min-height: 61px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}

.bill-patient.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(0, 174, 239, 0.15);
}

.bill-patient__avatar {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--button);
}

.bill-patient__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bill-patient__body {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.bill-patient__body strong {
    color: #000000;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.bill-patient__body em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

.bill-patient__body img {
    width: 13px;
    height: 13px;
}

.bill-create-panel {
    min-height: 0;
    height: 100%;
    padding: 24px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bill-create-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.bill-generate-empty {
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.bill-generate-empty__icon {
    width: 118px;
    height: 118px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: linear-gradient(
        145deg,
        rgba(0, 174, 239, 0.15),
        rgba(0, 116, 255, 0.08)
    );
    box-shadow: inset 0 -12px 30px rgba(0, 174, 239, 0.18);
    transform: rotate(-10deg);
    margin-bottom: 22px;
}

.bill-generate-empty__icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.bill-generate-empty h2 {
    margin: 0;
    color: #000000;
    font-size: 30px;
    font-weight: 800;
}

.bill-generate-empty p {
    margin: 14px 0 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 13px;
}

.bill-form {
    display: grid;
    gap: 26px;
}

.bill-form-section {
    display: grid;
    gap: 14px;
}

.bill-form-section h2,
.bill-detail-head h2,
.bill-modal__head h2 {
    margin: 0;
    color: #000000;
    font-size: 15px;
    font-weight: 500;
}

.bill-form-grid {
    display: grid;
    gap: 14px;
}

.bill-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bill-form-grid--discount {
    grid-template-columns: minmax(0, 1fr) 100px;
}

.bill-procedure-row {
    grid-template-columns: minmax(0, 1fr) 125px 104px;
}

.bill-field {
    display: grid;
    gap: 8px;
}

.bill-field span,
.bill-field .ap-label {
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-weight: 500;
}

.bill-field .ap-field {
    display: grid;
    gap: 8px;
}

.bill-field .ap-label {
    margin: 0;
}

.bill-control,
.bill-field .ap-control {
    height: 46px;
    border-radius: 7px;
    border-color: rgba(0, 0, 0, 0.38);
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    padding: 0 14px;
    text-align: left;
}

select.bill-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("/assets/img/navigation_grey_icon/Chevron down.svg");
    background-position: right 16px center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.bill-procedures {
    display: grid;
    gap: 12px;
}

.bill-procedure-row {
    display: grid;
    gap: 14px;
    align-items: end;
}

.bill-link-btn,
.bill-detail-link {
    width: fit-content;
    border: 0;
    background: transparent;
    color: var(--primary);
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 450;
    text-decoration: none;
}

.bill-choice-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 26px;
}

.bill-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bill-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.bill-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.bill-chip span {
    position: relative;
    z-index: 1;
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: rgba(0, 0, 0, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px;
    font-size: 12px;
    line-height: 1;
}

.bill-chip.is-active span {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.bill-chip-row--automatic .bill-chip {
    cursor: default;
}

.bill-totals {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 13px;
    padding: 14px 14px;
    display: grid;
    gap: 13px;
}

.bill-totals div,
.bill-payment-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.bill-totals span,
.bill-payment-summary span {
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
    font-weight: 500;
}

.bill-totals strong,
.bill-payment-summary strong {
    color: #000000;
    font-size: 12px;
    font-weight: 500;
}

.bill-payment-summary__notes {
    align-items: flex-start !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 14px;
}

.bill-payment-summary__notes strong {
    max-width: 70%;
    text-align: right;
    white-space: pre-line;
    word-break: break-word;
}

.bill-totals div:last-child strong,
.bill-payment-summary div:nth-last-child(-n + 2) span,
.bill-payment-summary div:nth-last-child(-n + 2) strong {
    font-weight: 700;
}

.is-green {
    color: #00a82d !important;
}

.is-red {
    color: #ef4444 !important;
}

.bill-generate-btn {
    width: fit-content;
    min-width: 116px;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}

.bill-generate-btn:disabled {
    background: var(--disabled);
    cursor: not-allowed;
}

.bill-generate-btn:disabled:hover {
    background: var(--disabled);
}

/* Prescription form validation */
.rx-create-form .field-error {
    color: #d73f3f;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.rx-create-form .field-error:empty,
.rx-create-form .field-error[hidden] {
    display: none;
}

.rx-create-form .field-error:not(:empty):not([hidden]) {
    display: block;
}

.rx-create-form select:invalid:not([value=""]),
.rx-create-form input:invalid:not(:placeholder-shown) {
    border-color: #d73f3f;
}

.rx-create-form select:focus:invalid:not([value=""]),
.rx-create-form input:focus:invalid:not(:placeholder-shown) {
    outline: none;
    box-shadow: 0 0 0 2px rgba(215, 63, 63, 0.15);
}

.bill-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.bill-detail-card {
    padding: 28px 30px;
}

.bill-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.bill-detail-link {
    font-size: 14px;
    font-weight: 700;
}

.bill-payment-box,
.bill-log-box {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 16px;
}

.bill-payment-table {
    display: grid;
    gap: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bill-payment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.45fr) 100px 72px 100px;
    gap: 14px;
    min-height: 34px;
    align-items: center;
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
}

.bill-payment-row--head {
    color: #000000;
    font-weight: 500;
}

.bill-payment-summary {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.bill-log-box {
    min-height: 130px;
    display: grid;
    gap: 18px;
}

.bill-log-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    position: relative;
}

.bill-log-item + .bill-log-item::before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: calc(100% + 2px);
    height: 32px;
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
}

.bill-log-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #04b930;
    box-shadow: 0 0 0 3px rgba(4, 185, 48, 0.14);
    margin-top: 4px;
}

.bill-log-item.is-refund .bill-log-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.bill-log-item strong {
    color: #000000;
    font-size: 13px;
    font-weight: 500;
}

.bill-log-amounts {
    display: grid;
    gap: 6px;
    margin: 9px 0 0;
}

.bill-log-amounts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.bill-log-amounts dt,
.bill-log-amounts dd {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.bill-log-amounts dt {
    color: rgba(0, 0, 0, 0.55);
}

.bill-log-refund-form {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

.bill-log-refund-form span {
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
}

.bill-log-refund-form input {
    width: 92px;
    height: 30px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 7px;
    color: #ef4444;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    padding: 0 8px;
}

.bill-log-refund-form button {
    height: 30px;
    border: 1px solid rgba(0, 174, 239, 0.25);
    border-radius: 7px;
    background: rgba(0, 116, 255, 0.08);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0 10px;
    cursor: pointer;
}

.bill-log-item p {
    margin: 8px 0 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
}

.bill-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bill-modal.is-open {
    display: flex;
}

.bill-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
}

.bill-modal__panel {
    position: relative;
    width: min(540px, calc(100vw - 40px));
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    padding: 24px;
}

.bill-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.bill-modal__head h2 {
    font-size: 22px;
    font-weight: 800;
}

.bill-log-form {
    display: grid;
    gap: 18px;
}

.bill-field--full {
    grid-column: 1 / -1;
}

.bill-log-submit {
    margin-top: 12px;
    min-width: 75px;
}

/* ---- Bill log form validation ---- */
.bill-log-form .field-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #d73f3f;
    font-weight: 500;
}

.bill-log-form .ap-control.is-invalid {
    border-color: #d73f3f;
    box-shadow: 0 0 0 3px rgba(215, 63, 63, 0.1);
}

.bill-log-form [data-bill-log-submit]:disabled {
    background: var(--disabled);
    box-shadow: none;
    cursor: not-allowed;
}

/* Payment mode pill chips */
.bill-pay-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.bill-pay-mode-chip {
    display: inline-flex;
    cursor: pointer;
}

.bill-pay-mode-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bill-pay-mode-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: #fff;
    color: rgba(0, 0, 0, 0.72);
    font-size: 14px;
    font-weight: 500;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
    cursor: pointer;
    user-select: none;
}

.bill-pay-mode-chip input[type="radio"]:checked + span {
    background: var(--primary, #00aeef);
    border-color: var(--primary, #00aeef);
    color: #fff;
}

/* ---- Required field star (Bill module) ---- */
.bl-required-star {
    color: red !important;
}

.bill-pay-mode-chip:hover span {
    border-color: var(--primary, #00aeef);
}

@media (max-width: 1180px) {
    .bill-page {
        max-width: 100%;
    }

    .bill-create-layout,
    .bill-detail-layout {
        grid-template-columns: 1fr;
    }

    .bill-create-layout {
        height: auto;
    }

    .bill-patient-panel,
    .bill-create-panel {
        height: auto;
        min-height: auto;
    }

    .bill-patient-list {
        max-height: 360px;
    }
}

@media (max-width: 900px) {
    .bill-page--list .bill-card {
        min-height: calc(100vh - 152px);
        padding: 18px 18px 0;
    }

    .bill-toolbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .bill-search {
        flex: 1 1 0;
        width: auto;
        min-width: 220px;
    }

    .bill-actions {
        flex: 0 0 auto;
        width: auto;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .bill-actions .pt-btn {
        width: auto;
        min-width: 150px;
        padding-inline: 16px;
    }

    .bill-actions .pt-sort {
        flex: 0 0 auto;
        width: auto;
    }

    .bill-actions .pt-sort__btn {
        width: auto;
        min-width: 120px;
    }

    .bill-filter-summary__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bill-grid,
    .bill-form-grid--two,
    .bill-form-grid--discount,
    .bill-choice-row {
        grid-template-columns: 1fr;
    }

    .bill-detail-card,
    .bill-create-panel,
    .bill-patient-panel {
        padding: 18px;
    }

    .bill-payment-row {
        grid-template-columns: minmax(0, 1.2fr) minmax(72px, 0.6fr) 84px 48px 84px;
    }
}

@media (max-width: 640px) {
    .bill-page {
        gap: 18px;
    }

    .bill-card,
    .bill-patient-panel,
    .bill-create-panel,
    .bill-detail-card {
        border-radius: 14px;
    }

    .bill-page--list .bill-card {
        min-height: calc(100vh - 160px);
        padding: 14px 14px 0;
    }

    .bill-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bill-search,
    .bill-actions,
    .bill-actions .pt-btn,
    .bill-actions .pt-sort,
    .bill-actions .pt-sort__btn {
        width: 100%;
    }

    .bill-actions {
        flex-direction: column;
    }

    .bill-filter-summary {
        margin-bottom: 16px;
        padding: 14px;
    }

    .bill-filter-summary__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .bill-filter-summary__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bill-item {
        padding: 15px;
    }

    .bill-item__top,
    .bill-item__amount,
    .bill-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bill-soft-btn,
    .bill-generate-btn {
        width: 100%;
    }

    .bill-patient-panel {
        gap: 18px;
    }

    .bill-generate-empty {
        min-height: 420px;
    }

    .bill-generate-empty h2 {
        font-size: 24px;
    }

    .bill-payment-box,
    .bill-log-box {
        overflow-x: auto;
    }

    .bill-payment-table,
    .bill-payment-summary {
        min-width: 430px;
    }

    .bill-modal {
        padding: 12px;
    }

    .bill-modal__panel {
        width: 100%;
        padding: 20px;
        border-radius: 18px;
    }
}

/* ====== Settings module ====== */
.settings-page {
    max-width: 1122px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 20px;
    align-content: start;
}

.settings-card {
    min-height: 70px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

button.settings-card {
    font: inherit;
}

.settings-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #eef5ff;
    display: grid;
    place-items: center;
}

.settings-card__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.settings-card__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.settings-card__body strong {
    color: #000000;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

.settings-card__body em {
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
}

.settings-card__chev {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}

.settings-card__chev img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.settings-card:hover {
    border-color: rgba(0, 174, 239, 0.16);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* Booking toggle card — no chevron, wider body */
.settings-card--toggle {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    cursor: default;
}

/* iOS-style toggle switch */
.booking-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 200ms ease;
    padding: 0;
}

.booking-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform 200ms ease;
}

.booking-toggle.is-on {
    background: #00aeef;
}

.booking-toggle.is-on::after {
    transform: translateX(20px);
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.settings-modal.is-open {
    display: flex;
}

.settings-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
}

.settings-modal__panel {
    position: relative;
    width: min(540px, calc(100vw - 40px));
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    padding: 24px;
}

.settings-modal__panel--wide {
    width: min(680px, calc(100vw - 40px));
}

.settings-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.settings-modal__head h2 {
    margin: 0;
    color: #151922;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.settings-modal__copy {
    margin: 0 0 24px;
    max-width: 500px;
    color: rgba(0, 0, 0, 0.58);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.settings-slot-form {
    display: grid;
    gap: 28px;
}

.settings-block-form {
    display: grid;
    gap: 20px;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-field {
    display: grid;
    gap: 9px;
}

.settings-field span {
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-weight: 500;
}

.settings-control {
    height: 46px;
    border-radius: 7px;
    border-color: rgba(0, 0, 0, 0.38);
    padding: 0 15px;
    color: rgba(0, 0, 0, 0.78);
    font-size: 14px;
}

.settings-textarea {
    min-height: 104px;
    height: auto;
    padding-top: 12px;
    resize: vertical;
}

.settings-save-btn {
    width: fit-content;
    min-width: 80px;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}

.settings-save-btn:disabled,
.settings-save-btn.is-disabled,
.setup-save-btn:disabled,
.setup-save-btn.is-disabled {
    color: rgba(255, 255, 255, 0.92);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    pointer-events: auto;
    background: var(--disabled);
}

.setup-save-btn:disabled:hover,
.setup-save-btn.is-disabled:hover {
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    .settings-page {
        max-width: 100%;
    }

    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .settings-card {
        min-height: 68px;
    }

    .settings-modal {
        padding: 12px;
    }

    .settings-modal__panel {
        width: 100%;
        padding: 20px;
        border-radius: 16px;
    }

    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-save-btn {
        width: 100%;
    }
}

/* ====== Setup module ====== */
.setup-page {
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.setup-crumb {
    margin-top: 4px;
}

.setup-tabs {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 8px;
    background: #f0f0f0;
    padding: 1px;
}

.setup-tab {
    min-width: 78px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #3e4a5c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.setup-tab.is-active {
    border-color: #9faebd;
    background: #ffffff;
    color: #151922;
}

.setup-shell-card {
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.06);
    padding: 28px 28px 30px;
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: 22px;
}

.setup-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
}

.setup-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

[data-setup-results] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.treatment-results {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.medicine-results {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.setup-search {
    width: min(400px, 100%);
    height: 46px;
}

.setup-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.setup-add-btn {
    height: 46px;
}

.setup-sort .pt-sort__menu {
    min-width: 182px;
}

.setup-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    align-content: start;
    gap: 22px 20px;
    padding-bottom: 40px;
    padding-right: 8px;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.treatment-list-grid {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.medicine-grid {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.setup-list-item {
    min-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.setup-list-item--with-action {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 0;
    padding: 0;
    overflow: visible;
    align-self: start;
}

.setup-list-item--with-action:hover,
.setup-list-item--with-action:focus-within {
    z-index: 20;
}

.setup-list-item__main {
    min-width: 0;
    min-height: 80px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 14px;
    text-decoration: none;
}

.setup-list-item:hover {
    border-color: rgba(0, 174, 239, 0.34);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.setup-list-item__icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #ecf2fc;
    display: grid;
    place-items: center;
}

.setup-list-item__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.setup-list-item__avatar {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    background: #edf1f5;
    display: block;
}

.setup-list-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.setup-list-item__body {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.setup-list-item__body strong {
    color: #070707;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin-right: 6px;
    vertical-align: 1px;
}

.setup-list-item__body em {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.setup-list-item__body em img {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.setup-list-item__body em span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-list-item__chev,
.setup-list-item__chev img {
    width: 16px;
    height: 16px;
}

.setup-card-actions {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-right: 12px;
}

.setup-card-actions--compact {
    gap: 6px;
    padding-right: 8px;
}

.setup-delete-form {
    display: contents;
}

.setup-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.setup-icon-btn--edit {
    background: rgba(0, 174, 239, 0.1);
    border: 1px solid rgba(0, 174, 239, 0.16);
}

.setup-icon-btn--edit img {
    filter: none;
}

.setup-icon-btn--delete {
    background: rgba(215, 63, 63, 0.1);
    border: 1px solid rgba(215, 63, 63, 0.18);
}

.setup-icon-btn--delete img {
    filter: none;
}

.setup-icon-btn:hover,
.setup-icon-btn:focus {
    outline: none;
}

.setup-icon-btn--edit:hover,
.setup-icon-btn--edit:focus {
    background: rgba(0, 174, 239, 0.2);
    border-color: rgba(0, 174, 239, 0.28);
}

.setup-icon-btn--delete:hover,
.setup-icon-btn--delete:focus {
    background: rgba(215, 63, 63, 0.2);
    border-color: rgba(215, 63, 63, 0.28);
}

.setup-icon-btn img {
    width: 20px;
    height: 20px;
}

.setup-empty {
    grid-column: 1 / -1;
    min-height: 130px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.setup-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.setup-modal.is-open {
    display: flex;
}

.setup-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
}

.setup-modal__panel {
    position: relative;
    width: min(540px, calc(100vw - 40px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    padding: 24px;
}

.setup-modal__panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.setup-modal__panel--clinic {
    width: min(540px, calc(100vw - 40px));
}

.setup-modal__panel--doctor {
    width: min(540px, calc(100vw - 40px));
}

.setup-modal__panel--treatment {
    width: min(980px, calc(100vw - 32px));
    padding: 28px;
}

.setup-modal__panel--medicine {
    width: min(540px, calc(100vw - 40px));
}

.setup-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.setup-modal__head h2 {
    margin: 0;
    color: #151922;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.setup-form {
    display: grid;
    gap: 16px;
}

.setup-form-grid {
    display: grid;
    gap: 16px;
}

.setup-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-field {
    display: grid;
    gap: 8px;
}

.setup-field > span,
.setup-color-block > span {
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-weight: 500;
    padding-top: 10px;
}

/* Notes field: select + "Add new" button side by side */
.setup-field__inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-field__inline .ap-control {
    flex: 1;
    min-width: 0;
}

.setup-field__inline-btn {
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    font-size: 15px;
    box-shadow: none;
    outline: none;
}

.setup-field__inline-btn:focus-visible {
    outline: none;
}

.setup-control {
    width: 100%;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 7px;
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.78);
    font-size: 14px;
    padding: 0 15px;
}

select.setup-control {
    appearance: none;
    background-image: url("../img/navigation_grey_icon/Chevron down.svg");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    padding-right: 42px;
}

.setup-control::placeholder {
    color: rgba(0, 0, 0, 0.26);
}

.setup-control--textarea {
    height: 80px;
    padding-top: 17px;
    resize: vertical;
}

.setup-control--small {
    height: 96px;
}

.setup-color-block {
    display: grid;
    gap: 9px;
}

.setup-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.setup-color-row::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.setup-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.setup-swatch.is-active {
    border-color: #7d9185;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 3px rgba(0, 0, 0, 0.18);
}

.setup-upload {
    min-height: 140px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 18px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.52);
    cursor: pointer;
    text-align: center;
}

.setup-upload input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.setup-upload__icon img {
    width: 22px;
    height: 22px;
}

.setup-upload strong {
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    font-weight: 500;
}

.setup-upload em,
.setup-upload__name {
    color: rgba(0, 0, 0, 0.26);
    font-size: 12px;
    font-style: normal;
}

.setup-save-btn {
    width: fit-content;
    min-width: 76px;
    height: 46px;
    margin-top: 14px;
    border: 0;
    border-radius: 8px;
    background: #00AEEF;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}

.setup-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.setup-doctor-left {
    display: grid;
    gap: 24px;
}

.setup-detail-card {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.06);
    padding: 30px;
    overflow-y: auto;
    scrollbar-width: none;
}

.setup-detail-card h2 {
    margin: 0;
    color: #070707;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.setup-detail-card > p,
.setup-appointments-address {
    margin: 16px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.setup-detail-card h3 {
    margin: 28px 0 16px;
    color: #111111;
    font-size: 16px;
    font-weight: 500;
}

.setup-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.setup-link-btn {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.setup-map {
    position: relative;
    height: 252px;
    min-height: 252px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.78) 0 2px,
                transparent 2px 100%
            )
            0 0 / 72px 72px,
        linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.78) 0 2px,
                transparent 2px 100%
            )
            0 0 / 72px 72px,
        linear-gradient(
                135deg,
                transparent 47%,
                rgba(255, 255, 255, 0.78) 48% 51%,
                transparent 52%
            )
            0 0 / 140px 90px,
        #eff1f4;
}

.setup-doctor-profile .setup-map {
    height: auto !important;
    min-height: auto !important;
}

.setup-map::after {
    content: "";
    position: absolute;
    left: 43%;
    top: 39%;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    background: #e1483e;
    transform: rotate(-45deg);
    box-shadow: 0 6px 14px rgba(225, 72, 62, 0.28);
}

.setup-map::before {
    content: "";
    position: absolute;
    left: calc(43% + 6px);
    top: calc(39% + 6px);
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
}

.setup-map iframe {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    filter: none;
}

.setup-map__fallback {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: end center;
    padding-bottom: 18px;
}

.setup-map__fallback img {
    display: none;
}

.setup-map__fallback a {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.setup-doctor-list {
    display: grid;
    gap: 16px;
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    overflow: auto;
    padding-right: 8px;
    padding-bottom: 40px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.setup-detail-head {
    flex: 0 0 auto;
}

.setup-doctor-item {
    min-height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    text-decoration: none;
}

.setup-doctor-item--with-action {
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 0;
    padding: 0;
}

.setup-doctor-item__main {
    min-height: 60px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 10px;
    text-decoration: none;
    min-width: 0;
}

.setup-icon-btn--compact {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.setup-icon-btn--compact img {
    width: 15px;
    height: 15px;
}

.setup-doctor-item__avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf1f5;
}

.setup-doctor-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.setup-doctor-item__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.setup-doctor-item__body strong {
    color: #070707;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.setup-doctor-item__body em {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(0, 0, 0, 0.52);
    font-size: 11px;
    font-style: normal;
}

.setup-doctor-item__body em img {
    width: 12px;
    height: 12px;
}

.setup-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.setup-profile__avatar {
    width: 72px;
    height: 72px;
    border-radius: 13px;
    overflow: hidden;
    background: #edf1f5;
    flex: 0 0 auto;
}

.setup-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.setup-profile h2 {
    font-size: 26px;
}

.setup-profile p {
    margin: 8px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font-size: 14px;
}

.setup-profile p span {
    margin: 0 9px;
    color: rgba(0, 0, 0, 0.24);
}

.setup-profile__bio {
    max-width: 100%;
}

.setup-appointments-card {
    max-height: 780px;
    overflow: hidden;
}

.setup-appointments-list {
    margin-top: 24px;
    max-height: 624px;
    overflow-y: auto;
    padding-right: 2px;
    display: grid;
    gap: 24px;
}

.setup-appointments-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.setup-appt-item {
    min-height: 140px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 20px;
    display: grid;
    align-content: start;
    gap: 14px;
}

.setup-appt-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.setup-appt-item__head strong {
    color: #000000;
    font-size: 16px;
    font-weight: 800;
}

.setup-appt-badge {
    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 4px;
    background: #eef7ff;
    color: var(--primary);
    font-size: 12px;
    padding: 2px 9px;
}

.setup-appt-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.setup-appt-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
}

.setup-appt-item__meta img {
    width: 13px;
    height: 13px;
}

.setup-appt-btn {
    width: fit-content;
    min-width: 112px;
    height: 34px;
    border-radius: 7px;
    background: #f0f0f0;
    color: #000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.treatment-shell-card {
    min-height: 0;
}

.treatment-toolbar {
    flex: 0 0 auto;
}

.treatment-actions {
    padding-right: 10px;
}

.treatment-add-btn {
    min-width: 150px;
}

button.treatment-list-item {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.treatment-list-item .setup-list-item__body em {
    display: block;
}

.treatment-list-item .setup-list-item__body em span {
    display: block;
}

.treatment-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.treatment-list-item:hover {
    border-color: rgba(0, 174, 239, 0.82);
    box-shadow: none;
}

.setup-list-item__actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.setup-list-item__actions form {
    margin: 0;
}

.treatment-modal__head {
    margin-bottom: 28px;
}

.treatment-form {
    gap: 18px;
}

.treatment-form .cke_chrome {
    max-width: 100%;
    border-color: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    overflow: hidden;
}

.treatment-form .cke_top,
.treatment-form .cke_bottom {
    background: #f8fafc;
}

.treatment-lang-tabs {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin: -4px 0 2px;
}

.treatment-lang-tabs button {
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.26);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
}

.treatment-lang-tabs button.is-active {
    color: var(--primary);
}

.treatment-lang-tabs span {
    color: rgba(0, 0, 0, 0.18);
    font-size: 14px;
}

.treatment-pane {
    display: grid;
    gap: 16px;
}

.treatment-pane[hidden] {
    display: none;
}

.treatment-form-grid--price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 16px;
}

.treatment-control--large {
    height: 126px;
}

.treatment-next-btn {
    margin-top: 12px;
}

.treatment-next-btn:hover:not(:disabled) {
    background-color: #00aeef;
}

.treatment-next-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Remove browser autofill styling from treatment form inputs */
.treatment-form input:-webkit-autofill,
.treatment-form input:-webkit-autofill:hover,
.treatment-form input:-webkit-autofill:focus,
.treatment-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #111 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.treatment-form input {
    background-color: #fff !important;
}

.medicine-shell-card {
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.06);
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: 30px;
}

.medicine-toolbar {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(260px, 400px) auto;
    align-items: center;
    gap: 20px;
}

.medicine-count {
    margin: 0;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
    font-weight: 400;
}

.medicine-search {
    width: 100%;
    max-width: none;
    height: 46px;
    justify-self: end;
}

.medicine-actions {
    gap: 20px;
    justify-content: flex-end;
}

.medicine-add-btn {
    min-width: 115px;
    height: 46px;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
}

.medicine-sort .pt-sort__btn {
    min-width: 110px;
    height: 46px;
    font-size: 18px;
    font-weight: 500;
}

.medicine-results {
    display: grid;
    gap: 20px;
}

.medicine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.medicine-item {
    min-height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 11px 0 16px;
    background: #ffffff;
}

.medicine-item__name {
    min-width: 0;
    overflow: hidden;
    color: #252a34;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.medicine-item__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.medicine-delete-form {
    display: contents;
}

.medicine-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    border: 1px solid transparent;
    border-radius: 6px;
    place-items: center;
    cursor: pointer;
    transition: transform 160ms ease;
}

.medicine-icon-btn:hover,
.medicine-icon-btn:focus {
    outline: none;
    transform: translateY(0);
}

.medicine-icon-btn:active {
    transform: translateY(1px);
}

.medicine-icon-btn img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.medicine-icon-btn--edit {
    background: rgba(0, 174, 239, 0.1);
    border-color: rgba(0, 174, 239, 0.16);
}

.medicine-icon-btn--edit:hover,
.medicine-icon-btn--edit:focus {
    background: rgba(0, 174, 239, 0.2);
    border-color: rgba(0, 174, 239, 0.28);
}

.medicine-icon-btn--delete {
    background: rgba(215, 63, 63, 0.1);
    border-color: rgba(215, 63, 63, 0.18);
}

.medicine-icon-btn--delete:hover,
.medicine-icon-btn--delete:focus {
    background: rgba(215, 63, 63, 0.2);
    border-color: rgba(215, 63, 63, 0.28);
}

.medicine-empty {
    min-height: 180px;
}

.medicine-pager {
    position: static;
    padding: 10px 0 0;
}

.medicine-modal__head {
    margin-bottom: 30px;
}

.medicine-form {
    gap: 16px;
}

.medicine-form__section {
    margin: 0 0 2px;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
}

.medicine-form-grid {
    display: grid;
    gap: 16px;
}

.medicine-form-grid--pair {
    grid-template-columns: minmax(0, 1fr) 100px;
}

.medicine-chip-block {
    display: grid;
    gap: 12px;
}

.medicine-chip-block > span {
    color: #111111;
    font-size: 14px;
    font-weight: 600;
}

.medicine-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.medicine-chip {
    min-width: 52px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 400;
}

.medicine-chip.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.medicine-submit {
    margin-top: 14px;
    opacity: 0.72;
    cursor: not-allowed;
}

.medicine-submit.is-active {
    background: var(--primary);
    opacity: 1;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .setup-page {
        max-width: 100%;
    }

    .setup-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .setup-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .setup-search,
    .setup-actions,
    .setup-actions .pt-btn,
    .setup-actions .pt-sort,
    .setup-actions .pt-sort__btn {
        width: 100%;
    }

    .setup-list-grid {
        grid-template-columns: 1fr;
    }

    .medicine-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .medicine-actions,
    .medicine-actions .pt-btn,
    .medicine-actions .pt-sort,
    .medicine-actions .pt-sort__btn {
        width: 100%;
    }

    .medicine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .setup-shell-card,
    .setup-detail-card {
        border-radius: 16px;
        padding: 18px;
    }

    .setup-form-grid--two {
        grid-template-columns: 1fr;
    }

    .treatment-form-grid--price {
        grid-template-columns: 1fr;
    }

    .medicine-shell-card {
        border-radius: 16px;
        padding: 18px;
    }

    .medicine-grid,
    .medicine-form-grid--pair {
        grid-template-columns: 1fr;
    }

    .setup-modal {
        padding: 12px;
    }

    .setup-modal__panel {
        width: 100%;
        padding: 20px;
        border-radius: 18px;
    }

    .setup-save-btn {
        width: 100%;
    }

    .setup-profile {
        align-items: flex-start;
    }

    .setup-map {
        height: 220px;
    }
}

/* Laboratory static design */
.lab-page {
    --lab-blue: #00aeef;
    --lab-line: #e5e5e5;
    --lab-soft: #eff6ff;
    padding-bottom: 40px;
}

.lab-tabs {
    margin-bottom: 28px;
}

.lab-tabs button {
    border: 0;
    background: transparent;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 16px;
    color: #4d5968;
}

.lab-tabs button.is-active {
    background: #fff;
    color: #111827;
    border: 1px solid #aebdcb;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}

.lab-shell-card {
    min-height: auto;
}

.lab-toolbar {
    align-items: center;
    margin-bottom: 30px;
}

.lab-search {
    max-width: 430px;
}

.lab-actions {
    margin-left: auto;
    display: flex;
    gap: 20px;
}

.lab-sort-btn {
    min-width: 118px;
}

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

.lab-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--lab-line);
    border-radius: 14px;
    background: #fff;
}

.lab-card__icon,
.lab-report-item__icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
}

.lab-card__icon img,
.lab-report-item__icon img {
    width: 24px;
    height: 24px;
}

.lab-card__body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.lab-card__body strong {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.lab-card__body em,
.lab-report-item em,
.lab-contact-preview em,
.lab-contact-detail em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-size: 13px;
    color: #666;
}

.lab-card__body em img {
    width: 14px;
    height: 14px;
}

.lab-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lab-chip-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #cfe6ff;
    border-radius: 8px;
    background: #f1f7ff;
    color: var(--lab-blue);
    font-size: 14px;
    font-weight: 600;
}

.lab-icon-btn {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lab-icon-btn img {
    width: 18px;
    height: 18px;
}

.lab-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    gap: 24px;
    margin-top: 24px;
}

.lab-info-card {
    background: #fff;
    border: 1px solid var(--lab-line);
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
}

.lab-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.lab-card-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.lab-card-head button {
    border: 0;
    background: transparent;
    color: var(--lab-blue);
    font-size: 15px;
    font-weight: 700;
}

.lab-report-list {
    display: grid;
    gap: 16px;
}

.lab-report-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--lab-line);
    border-radius: 12px;
}

.lab-report-item strong,
.lab-contact-preview strong,
.lab-contact-detail strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}

.lab-status {
    height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 12px;
}

.lab-status.is-done {
    color: #0a8f30;
    background: #e7ffe9;
    border: 1px solid #98efaa;
}

.lab-status.is-pending {
    color: #ff3b3b;
    background: #fff0f0;
    border: 1px solid #ffc8c8;
}

.lab-contact-preview {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lab-avatar {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #edf5ff;
    color: var(--lab-blue);
    font-size: 18px;
    font-weight: 800;
}

.lab-avatar--large {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    font-size: 24px;
}

.lab-modal__panel {
    width: min(540px, calc(100vw - 32px));
    border-radius: 22px;
    padding: 28px;
}

.lab-modal__panel--small {
    width: min(460px, calc(100vw - 32px));
}

.lab-form {
    display: grid;
    gap: 18px;
}

.lab-contact-detail {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding-top: 4px;
}

.lab-contact-detail a {
    color: var(--lab-blue);
    font-weight: 700;
}

.lab-contact-detail .setup-save-btn {
    margin-top: 18px;
}

.lab-detail-card {
    display: grid;
    gap: 18px;
}

.lab-detail-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    color: #5f6673;
}

.lab-detail-card__row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
}

.lab-detail-card__row img {
    width: 16px;
    height: 16px;
}

.lab-detail-card p {
    margin: 0;
    color: #5f6673;
}

.lab-teeth-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.lab-tooth-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.lab-upload-box {
    min-height: 164px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed #cfd7df;
    border-radius: 14px;
    background: #fbfdff;
    color: #8b96a4;
}

.lab-upload-box img {
    width: 42px;
    height: 42px;
}

.lab-upload-box strong {
    color: #111827;
    font-size: 18px;
}

.lab-upload-box em {
    font-style: normal;
}

@media (max-width: 1180px) {
    .lab-grid,
    .lab-lower-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .lab-toolbar,
    .lab-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lab-search,
    .lab-actions,
    .lab-actions .pt-btn {
        width: 100%;
        max-width: none;
    }

    .lab-card,
    .lab-report-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .lab-card__actions,
    .lab-status {
        grid-column: 2;
        justify-self: start;
    }

    .lab-info-card,
    .lab-shell-card {
        padding: 18px;
        border-radius: 16px;
    }
}

/* Laboratory figma tabs */
.lab-page--figma {
    --lab-blue: #00aeef;
    --lab-border: #e5e5e5;
    --lab-muted: #666;
    height: var(--admin-card-height);
    max-height: var(--admin-card-height);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
}

.lab-top-tabs {
    flex: 0 0 auto;
    width: fit-content;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 0 28px;
    padding: 0;
    border-radius: 8px;
    background: #efefef;
}

.lab-top-tabs a {
    height: 40px;
    min-width: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 8px;
    color: #475569;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.lab-top-tabs a.is-active {
    color: #111827;
    background: #fff;
    border: 1px solid #aebdcb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.lab-main-card {
    min-height: 0;
    padding: 30px;
    border: 1px solid var(--lab-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.lab-page--figma .lab-main-card {
    height: auto;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-lab-results] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.lab-main-card--orders {
    min-height: 0;
}

.lab-main-card--inventory {
    min-height: 0;
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
}

.lab-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
    flex: 0 0 auto;
}

.lab-list-toolbar--inventory {
    gap: 18px;
}

.lab-list-search {
    width: 100%;
    max-width: 402px;
    height: 46px;
}

.lab-list-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.lab-add-btn {
    min-width: 115px;
    height: 46px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: none;
    justify-content: center;
}

.lab-sort {
    position: relative;
}

.lab-sort-btn {
    min-width: 110px;
    height: 46px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
}

.lab-sort-menu {
    top: calc(100% + 10px);
    right: 0;
    width: 180px;
    border-radius: 16px;
    padding: 8px 14px;
}

.lab-sort-menu button,
.lab-sort-menu a {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
}

.lab-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.lab-list-grid--orders {
    gap: 22px 20px;
}

.lab-list-grid--inventory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 24px 20px;
}

.lab-list-card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--lab-border);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-align: left;
}

.lab-list-card--lab {
    width: min(100%, 695px);
    min-height: 100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 16px;
    padding: 18px 16px 18px 22px;
}

.lab-list-card[role="button"],
button.lab-list-card {
    cursor: pointer;
}

.lab-card-open {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.lab-order-card > :not(.lab-card-open) {
    position: relative;
    z-index: 1;
}

.lab-list-card h2,
.lab-order-head h2 {
    margin: 0;
    color: #111;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.lab-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--lab-muted);
    font-size: 13px;
    line-height: 1.2;
}

.lab-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.lab-meta-row img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.lab-meta-row i {
    width: 1px;
    height: 14px;
    background: #d9d9d9;
}

.lab-order-card {
    min-height: 128px;
    padding: 16px 18px;
}

.lab-order-head {
    min-height: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.lab-dispatch-badge {
    height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #98efaa;
    border-radius: 5px;
    background: #e7ffe9;
    color: #15b832;
    font-size: 12px;
}

.lab-dispatch-badge--accepted {
    border-color: #cce8ff;
    background: #eaf6ff;
    color: #009cf7;
}

.lab-dispatch-badge--dispatched {
    border-color: #98efaa;
    background: #e7ffe9;
    color: #15b832;
}

.lab-meta-row--order {
    gap: 8px 10px;
}

.lab-order-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 19px;
}

.lab-order-actions form {
    display: contents;
}

.lab-cancel-btn,
.lab-contact-btn {
    height: 34px;
    min-width: 82px;
    border-radius: 7px;
    padding: 0 16px;
    font-size: 15px;
}

.lab-cancel-btn {
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #555;
}

.lab-contact-btn {
    border: 0;
    background: #ededed;
    color: #111;
}

.lab-dispatch-time {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15b832;
    font-size: 13px;
}

.lab-dispatch-time img {
    width: 15px;
    height: 15px;
}

.lab-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.lab-list-toolbar--inventory .lab-filter-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.lab-list-toolbar--inventory .lab-list-search {
    flex: 1 1 260px;
    min-width: 210px;
    max-width: none;
}

.lab-list-toolbar--inventory .lab-list-actions {
    flex: 0 0 auto;
    margin-left: 0;
}

.lab-filter-row button,
.lab-filter-row a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
}

.lab-filter-row button.is-active,
.lab-filter-row a.is-active {
    border-color: var(--lab-blue);
    background: var(--lab-blue);
    color: #fff;
}

.lab-main-card--inventory .lab-list-toolbar {
    margin-bottom: 30px;
}

.lab-main-card--inventory .lab-list-actions {
    align-self: center;
}

.lab-main-card--inventory .lab-add-btn {
    margin-top: 0;
}

.lab-inventory-card {
    min-height: 100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 16px;
    padding: 18px 16px 18px 22px;
}

.lab-card-text {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.lab-delete-form {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.lab-delete-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #ffd0d0;
    border-radius: 9px;
    background: #fff4f4;
    cursor: pointer;
}

.lab-delete-btn svg {
    width: 18px;
    height: 18px;
    fill: #ef2626;
}

.lab-delete-btn img {
    width: 14px;
    height: 14px;
    filter: invert(28%) sepia(94%) saturate(3078%) hue-rotate(344deg)
        brightness(103%) contrast(93%);
}

.lab-inventory-card p {
    margin: 0;
    color: var(--lab-muted);
    font-size: 15px;
}

.lab-pagination {
    position: static;
    flex: 0 0 auto;
    margin-top: 24px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
}

.lab-pagination-row {
    flex: 0 0 auto;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lab-pagination-row .lab-pagination {
    margin-top: 0;
}

.lab-pagination a,
.lab-pagination button,
.lab-pagination span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
    text-decoration: none;
}

.lab-pagination a:first-child,
.lab-pagination span.is-disabled,
.lab-pagination a:last-child,
.lab-pagination button:first-child,
.lab-pagination button:last-child {
    border: 1px solid #d9dfe6;
    background: #fff;
}

.lab-pagination a.is-active,
.lab-pagination button.is-active {
    border: 1px solid var(--lab-blue);
    color: #111827;
}

.lab-pagination a.is-disabled,
.lab-pagination button.is-disabled {
    opacity: 0.4;
}

.lab-pagination img {
    width: 16px;
    height: 16px;
}

.lab-modal .setup-modal__backdrop {
    background: rgba(0, 0, 0, 0.42);
}

.lab-modal__panel {
    width: min(540px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.lab-modal__panel--laboratory {
    width: min(540px, calc(100vw - 32px));
}

.lab-modal__panel--order {
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100vh - 34px);
    overflow: auto;
}

.lab-modal__panel--inventory,
.lab-modal__panel--contact {
    width: min(540px, calc(100vw - 32px));
}

.lab-modal__panel .setup-modal__head {
    margin-bottom: 26px;
}

.lab-modal__panel .setup-modal__head h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.lab-form {
    display: grid;
    gap: 16px;
}

.lab-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.lab-form-grid > .setup-field,
.lab-form .adm-select,
.lab-form .adm-select__btn,
.lab-form .adm-select__label,
.lab-form select.setup-control {
    min-width: 0;
}

.lab-form .setup-field {
    gap: 8px;
}

.lab-form .setup-field > span {
    color: #666;
    font-size: 13px;
}

.setup-field-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* ---- Password Toggle Styling ---- */
.setup-field-input-wrapper .ap-control[data-toggle-password] {
    padding-right: 45px;
}

.setup-password-toggle {
    position: absolute;
    right: 10px;
    background: 0;
    border: 0;
    cursor: pointer;
    padding: 5px;
    z-index: 999;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-password-toggle:hover {
    opacity: 0.7;
}

.setup-password-toggle:focus-visible {
    outline: 2px solid #00AEEF;
    outline-offset: 2px;
    border-radius: 2px;
}

.setup-password-eye-open,
.setup-password-eye-closed {
    width: 20px;
    height: 20px;
}

.setup-password-eye-open {
    display: block;
}

.setup-password-eye-closed {
    display: none;
}

.lab-form .setup-control {
    height: 47px;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    font-size: 15px;
    text-align: left;
    padding-left: 16px;
}

.lab-form input[type="password"].setup-control {
    padding-right: 50px;
    padding-left: 16px;
}

.setup-field-input-wrapper .password-eye-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    min-width: 32px;
    min-height: 32px;
}

.lab-form select.setup-control {
    appearance: none;
    padding-right: 42px;
    background-image: url("/assets/img/navigation_grey_icon/Chevron down.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px 24px;
}

.lab-time-control {
    height: 47px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    color: #666;
    font-size: 15px;
}

.lab-time-control span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lab-submit-btn {
    width: 76px;
    height: 48px;
    margin-top: 14px;
    border-radius: 10px;
    background: #00aeef;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        cursor 0.2s ease;
    border: none;
}

.lab-submit-btn:hover:not(:disabled) {
    background: #0096d6;
}

.lab-submit-btn:disabled,
.lab-submit-btn.is-disabled {
    background: #a5e6ff;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    pointer-events: auto;
    position: relative;
}

.lab-submit-btn:disabled:hover,
.lab-submit-btn.is-disabled:hover {
    background: #a5e6ff;
    cursor: not-allowed;
}

.lab-modal-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}

.lab-modal-actions .lab-submit-btn {
    margin-top: 0;
}

.lab-modal__panel--order .lab-modal-actions {
    position: sticky;
    bottom: -24px;
    z-index: 2;
    margin: 4px -24px -24px;
    padding: 16px 24px 24px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0),
        #ffffff 22%,
        #ffffff 100%
    );
}

.lab-contact-popup {
    display: grid;
    gap: 16px;
}

.lab-contact-popup h3 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.lab-contact-popup p {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.45;
}

.lab-contact-popup span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
}

.lab-contact-popup img {
    width: 15px;
    height: 15px;
}

@media (max-width: 1180px) {
    .lab-list-grid {
        grid-template-columns: 1fr;
    }

    .lab-list-grid--inventory {
        grid-template-columns: 1fr;
    }

    .lab-main-card {
        min-height: auto;
    }

    .lab-main-card--inventory {
        min-height: auto;
    }

    .lab-pagination {
        position: static;
        margin-top: 28px;
    }
}

@media (max-width: 900px) {
    .lab-page--figma .lab-main-card--inventory {
        height: auto;
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .lab-main-card--inventory [data-lab-results] {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 14px;
        overflow: hidden;
        overflow-x: hidden;
        padding-right: 8px;
        scrollbar-width: thin !important;
        scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
    }

    .lab-main-card--inventory .lab-list-grid {
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0;
    }

    .lab-main-card--inventory .lab-pagination {
        position: relative;
        z-index: 2;
        margin-top: 0;
        padding-bottom: 2px;
    }
}

@media (max-width: 760px) {
    .lab-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .lab-list-search,
    .lab-list-actions,
    .lab-list-actions .pt-btn,
    .lab-sort,
    .lab-sort-btn {
        width: 100%;
        max-width: none;
    }

    .lab-list-actions {
        flex-direction: column;
        gap: 12px;
    }

    .lab-sort-menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    .lab-main-card {
        padding: 18px;
        border-radius: 16px;
    }

    .lab-meta-row i {
        display: none;
    }

    .lab-dispatch-time {
        margin-left: 0;
    }

    .lab-top-tabs {
        width: 100%;
    }

    .lab-top-tabs a {
        flex: 1;
    }

    .lab-form-grid {
        grid-template-columns: 1fr;
    }

    .lab-submit-btn {
        width: 100%;
    }
}

/* ====== Staff module ====== */
.staff-page {
    min-height: calc(100vh - 96px);
}

.staff-list-shell {
    display: flex;
    flex-direction: column;
    padding: 30px;
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.05);
}

.staff-scroll {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track);
}

.staff-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
}

.staff-scroll::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.staff-scroll::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb);
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.staff-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.staff-search {
    max-width: 400px;
    height: 47px;
    border-color: rgba(0, 0, 0, 0.34);
}

.staff-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.staff-add-btn {
    min-width: 115px;
    height: 46px;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
}

.staff-sort-btn {
    min-width: 110px;
    height: 47px;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 500;
}

.staff-sort-menu {
    top: calc(100% + 10px);
}

/* Staff list page layout - similar to prescription page */
.staff-page--list {
    max-width: 100%;
    min-height: calc(100vh - 70px - 48px);
    display: flex;
    flex-direction: column;
}

.staff-page--list .staff-list-card {
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.staff-page--list .staff-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.staff-page--list [data-staff-results] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.staff-page--list .staff-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
    padding-bottom: 8px;
}

.staff-page--list .staff-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-top: auto;
    padding: 18px 0 14px;
    width: 100%;
    align-self: flex-start;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--white);
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-content: start;
    padding-bottom: 40px;
}

.staff-card {
    position: relative;
    min-height: 79px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px 13px 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

button.staff-card {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.staff-card__content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.staff-card__content:visited,
.staff-card__content:hover,
.staff-card__content:focus,
.staff-card:hover,
.staff-card:focus-within {
    color: inherit;
    text-decoration: none;
}

.staff-card:hover,
.staff-card:focus-within,
.staff-card.is-selected {
    border-color: #00aeef;
}

.staff-card__button {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.staff-avatar,
.staff-card__body,
.staff-card__chevron {
    position: relative;
    z-index: 1;
}

.staff-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 9px;
    background: #eef6fb;
}

.staff-card--compact .staff-avatar {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.staff-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.staff-avatar--1 {
    background: #f9d8c2;
}
.staff-avatar--2 {
    background: #c9f2ef;
}
.staff-avatar--3 {
    background: #e8e0c8;
}
.staff-avatar--4 {
    background: #d8e7f2;
}
.staff-avatar--5 {
    background: #d9eef0;
}
.staff-avatar--6 {
    background: #ffe0d2;
}

.staff-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 7px;
}

.staff-card__body strong {
    color: #070707;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
}

.staff-card__body > span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #666;
    font-size: 13px;
}

.staff-card__body em,
.staff-section em,
.staff-record-card em,
.staff-bill-card em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-style: normal;
    white-space: nowrap;
}

.staff-card__body img,
.staff-section em img,
.staff-record-card em img,
.staff-bill-card em img {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}

.staff-card__body i,
.staff-record-card i,
.staff-bill-card i {
    width: 1px;
    height: 15px;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.14);
}

.staff-card__chevron {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

.staff-card__chevron img {
    width: 18px;
    height: 18px;
}

.staff-card__actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.staff-card__actions form {
    margin: 0;
}

.staff-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9px;
    background: var(--white);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.staff-icon-btn:hover,
.staff-icon-btn:focus {
    outline: none;
    transform: translateY(0);
}

.staff-icon-btn:active {
    transform: translateY(1px);
}

.staff-icon-btn img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.staff-icon-btn--edit {
    background: rgba(0, 174, 239, 0.1);
    border-color: rgba(0, 174, 239, 0.16);
}

.staff-icon-btn--edit:hover,
.staff-icon-btn--edit:focus {
    background: rgba(0, 174, 239, 0.2);
    border-color: rgba(0, 174, 239, 0.28);
}

.staff-icon-btn--delete {
    background: rgba(215, 63, 63, 0.1);
    border-color: rgba(215, 63, 63, 0.18);
}

.staff-icon-btn--delete:hover,
.staff-icon-btn--delete:focus {
    background: rgba(215, 63, 63, 0.2);
    border-color: rgba(215, 63, 63, 0.28);
}

.staff-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 10px;
}

.staff-pagination button,
.staff-pagination span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #3e4a5c;
    font-size: 14px;
}

.staff-pagination button:first-child,
.staff-pagination button:last-child {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    background: #fff;
}

.staff-pagination button.is-active {
    border: 1px solid #00aeef;
    border-radius: 7px;
    color: #111827;
}

.staff-pagination .is-disabled {
    opacity: 0.42;
}

.staff-pagination img {
    width: 16px;
    height: 16px;
}

.staff-modal .setup-modal__backdrop {
    background: rgba(0, 0, 0, 0.42);
}

.staff-modal__panel {
    width: min(540px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.staff-modal__panel--appointment {
    width: min(700px, calc(100vw - 32px));
}

.staff-modal__panel .setup-modal__head {
    margin-bottom: 26px;
}

.staff-modal__panel .setup-modal__head h2 {
    color: #111827;
    font-size: 22px;
    font-weight: 800;
}

.staff-form {
    display: grid;
    gap: 16px;
}

.staff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.staff-form .setup-field > span,
.staff-access-block > span {
    color: #666;
    font-size: 13px;
}

.staff-form .setup-control {
    height: 47px;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    font-size: 15px;
}

.staff-form select.setup-control {
    appearance: none;
    padding-right: 42px;
    background-image: url("/assets/img/navigation_grey_icon/Chevron down.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px 24px;
}

.staff-time-control {
    height: 47px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    color: #666;
    font-size: 15px;
}

.staff-time-control span {
    display: inline-flex;
    justify-content: center;
}

.staff-access-block {
    display: grid;
    gap: 8px;
}

.staff-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.staff-chip {
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 13px;
    cursor: pointer;
}

.staff-chip.is-active {
    border-color: #00aeef;
    background: #00aeef;
    color: #fff;
}

.staff-inactive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: #555;
    font-size: 14px;
    cursor: pointer;
}

.staff-edit-only[hidden] {
    display: none !important;
}

.staff-inactive-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.staff-toggle-ui {
    width: 42px;
    height: 24px;
    padding: 3px;
    border-radius: 999px;
    background: #e8e8e8;
    transition: background 160ms ease;
}

.staff-toggle-ui::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    transition: transform 160ms ease;
}

.staff-inactive-toggle input:checked + .staff-toggle-ui {
    background: #00aeef;
}

.staff-inactive-toggle input:checked + .staff-toggle-ui::before {
    transform: translateX(18px);
}

.staff-submit-btn {
    width: 76px;
    height: 48px;
    margin-top: 14px;
    border-radius: 10px;
    background: #00aeef;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        cursor 0.2s ease;
    border: none;
}

.staff-submit-btn:hover:not(:disabled) {
    background: #0096d6;
}

.staff-submit-btn:disabled,
.staff-submit-btn.is-disabled {
    background: #a5e6ff;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    pointer-events: auto;
    position: relative;
}

.staff-submit-btn:disabled:hover,
.staff-submit-btn.is-disabled:hover {
    background: #a5e6ff;
    cursor: not-allowed;
}

.staff-modal-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}

.staff-modal-actions .staff-submit-btn {
    margin-top: 0;
}

/* ---- Staff form validation (matching patient form) ---- */
.staff-form .field-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #d73f3f;
    font-weight: 500;
}

.staff-form .setup-control.is-invalid,
.staff-form .ap-control.is-invalid {
    border-color: #d73f3f;
    box-shadow: 0 0 0 3px rgba(215, 63, 63, 0.1);
}

.staff-crumb {
    margin-bottom: 0;
}

.staff-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.staff-detail-edit-btn {
    min-width: 78px;
    height: 46px;
    justify-content: center;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 500;
}

.staff-detail-layout {
    display: grid;
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 24px;
}

.staff-detail-left,
.staff-detail-main {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.05);
}

.staff-detail-left {
    min-height: 780px;
    padding: 24px;
}

.staff-detail-search {
    max-width: none;
    height: 47px;
    border-color: rgba(0, 0, 0, 0.34);
    margin-bottom: 30px;
}

.staff-detail-list {
    display: grid;
    gap: 16px;
}

.staff-card--compact {
    min-height: 59px;
    padding: 8px 10px;
}

.staff-card--compact .staff-card__body strong {
    font-size: 15px;
}

.staff-card--compact .staff-card__body > span {
    gap: 10px;
    font-size: 11px;
}

.staff-detail-main {
    max-height: 780px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track);
}

.staff-detail-main::-webkit-scrollbar {
    width: 10px;
}

.staff-detail-main::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.staff-detail-main::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb);
    border-radius: 999px;
}

.staff-section {
    display: grid;
    gap: 16px;
}

.staff-section + .staff-section {
    margin-top: 24px;
}

.staff-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.staff-section-head h2 {
    margin: 0;
    color: #151922;
    font-size: 18px;
    font-weight: 800;
}

.staff-section-head a {
    color: #00aeef;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.staff-appointment-card,
.staff-record-card,
.staff-bill-card {
    position: relative;
    min-height: 86px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #fff;
    text-align: left;
}

.staff-appointment-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px 18px;
    padding: 22px 20px;
    cursor: pointer;
}

.staff-appointment-card strong {
    grid-column: 1 / -1;
    color: #070707;
    font-size: 17px;
    font-weight: 800;
}

.staff-appointment-card > span {
    position: absolute;
    top: 19px;
    right: 20px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 174, 239, 0.18);
    border-radius: 4px;
    background: rgba(0, 174, 239, 0.08);
    color: #00aeef;
    font-size: 12px;
}

.staff-record-card,
.staff-bill-card {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 7px 14px;
    padding: 14px 14px;
}

.staff-record-icon {
    grid-row: span 2;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef6ff;
}

.staff-record-icon img {
    width: 26px;
    height: 26px;
}

.staff-record-card strong,
.staff-bill-card strong {
    color: #070707;
    font-size: 17px;
    font-weight: 800;
}

.staff-record-card div,
.staff-bill-card div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 13px;
}

.staff-record-card a,
.staff-bill-card a {
    grid-row: span 2;
    min-width: 65px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 8px;
    background: rgba(0, 174, 239, 0.08);
    color: #00aeef;
    text-decoration: none;
    font-size: 16px;
}

.staff-bill-card {
    grid-template-columns: 1fr auto;
    padding: 20px;
}

.staff-bill-card div {
    grid-column: 1 / -1;
}

.staff-bill-card a {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
}

.staff-status {
    justify-self: end;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.staff-status--paid {
    border: 1px solid rgba(24, 190, 48, 0.25);
    background: rgba(24, 190, 48, 0.1);
    color: #159724;
}

.staff-status--pending {
    border: 1px solid rgba(255, 76, 76, 0.25);
    background: rgba(255, 76, 76, 0.1);
    color: #d73f3f;
}

.staff-audit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 80px;
    margin-top: 12px;
    color: #666;
    font-size: 13px;
}

.staff-audit-grid strong {
    font-weight: 500;
}

@media (max-width: 1180px) {
    .staff-grid,
    .staff-detail-layout {
        grid-template-columns: 1fr;
    }

    .staff-detail-left,
    .staff-detail-main {
        min-height: auto;
        max-height: none;
    }
}

@media (max-width: 760px) {
    .staff-list-shell,
    .staff-detail-left,
    .staff-detail-main {
        padding: 18px;
        border-radius: 16px;
    }

    .staff-toolbar,
    .staff-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-search,
    .staff-actions,
    .staff-actions .pt-btn,
    .staff-sort,
    .staff-sort-btn {
        width: 100%;
        max-width: none;
    }

    .staff-card__body > span,
    .staff-record-card div,
    .staff-bill-card div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .staff-card__body i,
    .staff-record-card i,
    .staff-bill-card i {
        display: none;
    }

    .staff-form-grid,
    .staff-audit-grid {
        grid-template-columns: 1fr;
    }

    .staff-record-card,
    .staff-bill-card {
        grid-template-columns: 42px 1fr;
    }

    .staff-record-card a,
    .staff-bill-card a {
        grid-row: auto;
        grid-column: 1 / -1;
        justify-self: start;
    }

    .staff-bill-card {
        grid-template-columns: 1fr auto;
    }

    .staff-submit-btn {
        width: 100%;
    }
}

/* ====== Prescription detail final Figma alignment ====== */
.rx-view-page {
    width: min(1122px, 100%);
    max-width: 1122px;
    margin: 0 auto;
    gap: 28px;
}

.rx-view-page .bill-crumb {
    margin: 0;
}

.rx-view-page .rx-view-layout {
    display: grid;
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.rx-view-page .rx-view-left,
.rx-view-page .rx-view-summary,
.rx-view-page .rx-view-prescription-card,
.rx-view-page .rx-print-card {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.06);
}

.rx-view-page .rx-view-left {
    width: 374px;
    height: 780px;
    min-height: 780px;
    max-height: 780px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 26px;
    padding: 28px 24px 16px;
    overflow: hidden;
}

.rx-view-page .rx-patient-head {
    grid-template-columns: 64px minmax(0, 1fr) 36px;
    gap: 16px;
}

.rx-view-page .rx-patient-head strong {
    font-size: 17px;
    font-weight: 800;
}

.rx-view-page .rx-view-left h2 {
    margin: 0;
    color: #1b1f28;
    font-size: 18px;
    font-weight: 500;
}

.rx-view-page .rx-appointment-list {
    min-height: 0;
    max-height: none;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rx-view-page .rx-appointment-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.rx-view-page .rx-appointment-card {
    min-height: 88px;
    display: grid;
    align-content: center;
    padding: 18px 20px;
    border-radius: 16px;
    cursor: pointer;
}

.rx-view-page .rx-appointment-card strong {
    color: #090909;
    font-size: 17px;
    font-weight: 800;
}

.rx-view-page .rx-appointment-card p {
    margin-top: 16px;
    gap: 16px;
    overflow: hidden;
}

.rx-view-page .rx-appointment-card p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-view-page .rx-appointment-card:hover,
.rx-view-page .rx-appointment-card:focus {
    border-color: rgba(0, 174, 239, 0.45);
    outline: none;
}

.rx-view-page .rx-appointment-card.is-active {
    border-color: #00aeef;
    background: #ffffff;
}

.rx-view-page .rx-view-right {
    min-width: 0;
    height: 780px;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.rx-view-page .rx-view-summary {
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
}

.rx-view-page .rx-view-summary strong {
    margin: 0 0 12px;
    color: #3f4650;
    font-size: 14px;
    font-weight: 800;
}

.rx-view-page .rx-summary-radio-row,
.rx-view-page .rx-view-summary p {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0;
}

.rx-view-page .rx-view-summary p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-view-page .rx-view-summary p em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
}

.rx-view-page .rx-view-prescription-card {
    min-height: 360px;
    padding: 28px 24px 24px;
}

.rx-view-page .rx-detail-head {
    align-items: center;
}

.rx-view-page .rx-detail-head h2 {
    font-size: 18px;
    font-weight: 500;
}

.rx-view-page .rx-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.rx-view-page .rx-view-actions .bill-soft-btn {
    min-width: 86px;
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    white-space: nowrap;
}

.rx-view-page .rx-repeat-btn {
    min-width: 100px;
}

.rx-view-page .rx-view-medicine-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
}

.rx-view-page .rx-view-medicine-list .rx-med-detail {
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 14px;
}

.rx-view-page .rx-med-detail__main,
.rx-view-page .rx-med-detail__title,
.rx-view-page .rx-med-detail__meta {
    min-width: 0;
}

.rx-view-page .rx-med-detail__title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-view-page .rx-med-detail__title b {
    font: inherit;
}

.rx-view-page .rx-med-detail__meta {
    flex-wrap: nowrap;
    gap: 18px;
    overflow: hidden;
}

.rx-view-page .rx-med-detail__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-view-page .rx-view-medicine-list input[type="checkbox"] {
    justify-self: end;
    align-self: start;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    accent-color: #00aeef;
}

.rx-view-page .rx-print-card {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: auto;
    padding: 18px 24px;
    overflow: visible;
    position: relative;
    z-index: 5;
}

.rx-view-page .rx-print-card strong {
    color: #3f4650;
    font-size: 14px;
    font-weight: 800;
}

.rx-view-page .rx-print-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 14px;
    flex-wrap: nowrap;
}

.rx-view-page .rx-print-actions .bill-soft-btn {
    min-width: 122px;
    height: 34px;
    white-space: nowrap;
}

.rx-view-page .rx-print-menu {
    position: relative;
}

.rx-view-page .rx-print-menu summary {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    list-style: none;
}

.rx-view-page .rx-print-menu summary::-webkit-details-marker {
    display: none;
}

.rx-view-page .rx-print-menu__list {
    background: #fff;
    border: 1px solid #c8eaff;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    display: grid;
    min-width: 218px;
    padding: 6px;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 60;
}

.rx-view-page .rx-print-menu__list a {
    border-radius: 6px;
    color: #243447;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 10px;
    text-decoration: none;
}

.rx-view-page .rx-print-menu__list a:hover {
    background: #eef9ff;
    color: #009ee7;
}

.rx-view-page .rx-print-card:has(.rx-print-menu[open]) {
    overflow: visible;
    z-index: 80;
}

@media (max-width: 1180px) {
    .rx-view-page {
        width: 100%;
    }

    .rx-view-page .rx-view-layout {
        grid-template-columns: 1fr;
    }

    .rx-view-page .rx-view-left,
    .rx-view-page .rx-view-right {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .rx-view-page .rx-appointment-list {
        max-height: 430px;
    }
}

@media (max-width: 760px) {
    .rx-view-page .rx-view-summary {
        grid-template-columns: 1fr;
    }

    .rx-view-page .rx-summary-radio-row,
    .rx-view-page .rx-view-summary p,
    .rx-view-page .rx-med-detail__meta,
    .rx-view-page .rx-print-card,
    .rx-view-page .rx-print-actions {
        flex-wrap: wrap;
    }

    .rx-view-page .rx-print-actions {
        width: 100%;
        margin-left: 0;
    }

    .rx-view-page .rx-print-actions .bill-soft-btn {
        flex: 1 1 160px;
    }
}

/* ====== Case paper ====== */
.cp-page {
    width: min(100%, 1122px);
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.cp-bottom-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    flex-shrink: 0;
}

.cp-panel {
    background: #fff;
    border: 1px solid rgba(22, 32, 44, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(20, 28, 39, 0.08);
}

.cp-panel h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
}

.cp-create-panel {
    min-height: 340px;
    padding: 26px 24px 24px;
}

.cp-create-form {
    margin-top: 32px;
}

.cp-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #eef9ff;
    color: #087aa4;
    font-size: 14px;
    font-weight: 700;
}

.cp-edit-banner[hidden] {
    display: none !important;
}

.cp-edit-banner button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.cp-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 16px;
}

.cp-field {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 8px;
    color: #676b72;
    font-size: 12px;
    font-weight: 500;
}

.cp-control,
.cp-price-wrap .cp-control {
    width: 100%;
    height: 46px;
    border: 1px solid #8f969e;
    border-radius: 8px;
    background: #fff;
    color: #555a61;
    font-size: 15px;
    padding: 0 14px;
    outline: none;
}

.cp-control:focus {
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.13);
}

.cp-price-wrap {
    position: relative;
    display: block;
}

.cp-price-wrap .cp-control {
    padding-right: 52px;
}

.cp-price-add {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #00aeef;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.cp-price-menu {
    display: none;
    min-height: 60px;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid #afc1d3;
    border-radius: 8px;
    background: #fff;
}

.cp-price-menu.is-open {
    display: flex;
}

.cp-price-menu button {
    height: 28px;
    padding: 0 13px;
    border: 1px solid #e0e4e8;
    border-radius: 999px;
    background: #fff;
    color: #30343a;
    font-size: 13px;
    cursor: pointer;
}

.cp-primary-btn {
    min-width: 75px;
    height: 46px;
    margin-top: 30px;
    border: 0;
    border-radius: 9px;
    background: #00aeef;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    box-shadow: 0 16px 28px rgba(0, 174, 239, 0.16);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cp-primary-btn:disabled {
    background: #A5E6FF;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* Tooltip for disabled Add button */
.cp-primary-btn:disabled[data-admin-tooltip] {
    position: relative;
}

.cp-primary-btn:disabled[data-admin-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(0% - 16px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #000000;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.cp-primary-btn:disabled[data-admin-tooltip]::after {
    content: attr(data-admin-tooltip);
    position: absolute;
    left: 50%;
    top: calc(0% - 32px);
    transform: translateX(-50%);
    background: #000000 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
    line-height: 1.2 !important;
    text-align: center !important;
    min-width: max-content !important;
}

.cp-primary-btn:disabled:hover::before,
.cp-primary-btn:disabled:focus-visible::before {
    opacity: 1;
}

.cp-primary-btn:disabled:hover::after,
.cp-primary-btn:disabled:focus-visible::after {
    opacity: 1;
}

.cp-alert {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff2f2;
    color: #d33;
    font-size: 14px;
}

.cp-recent-panel,
.cp-staff-panel {
    padding: 30px;
}

.cp-recent-panel {
    min-height: 468px;
}

.cp-staff-panel {
    min-height: 830px;
    display: flex;
    flex-direction: column;
}

.cp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 145px;
    margin-top: 30px;
}

.cp-filter-form {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cp-staff-panel .cp-toolbar {
    margin-top: 0;
}

.cp-staff-panel .cp-filter-form {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-staff-panel .cp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cp-staff-panel .cp-sort {
    flex: 0 0 110px;
    min-width: 110px;
    max-width: 110px;
}

.cp-search {
    width: min(100%, 400px);
    margin: 0;
    flex: 1 1 280px;
}

.cp-date-filter {
    height: 46px;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    color: #5f6670;
    font-size: 12px;
    font-weight: 600;
}

.cp-date-filter input {
    min-width: 0;
    width: 112px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 13px;
}

.cp-filter-btn,
.cp-clear-filter {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cp-filter-btn {
    border: 0;
    background: #00aeef;
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
}

.cp-clear-filter {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #64707d;
    padding: 0 14px;
}

.cp-sort {
    flex: 0 0 auto;
}

.cp-recent-grid,
.cp-staff-grid {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.cp-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cp-staff-grid-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cp-staff-grid-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.cp-recent-card,
.cp-staff-card {
    min-width: 0;
    border: 1px solid #e3e5e8;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.cp-recent-card {
    min-height: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 18px 20px;
}

.cp-recent-card strong,
.cp-staff-card strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #080a0d;
    font-size: 16px;
    font-weight: 800;
}

.cp-recent-card span {
    grid-column: 1;
    color: #5e636a;
    font-size: 14px;
}

.cp-recent-card em {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: #5e636a;
    font-size: 15px;
    font-style: normal;
}

.cp-staff-card {
    min-height: 78px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    position: relative;
}

.cp-staff-card .bill-status {
    position: absolute;
    top: 12px;
    right: 12px;
}

.cp-staff-card span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #5e636a;
    font-size: 13px;
}

.cp-staff-card em {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.cp-staff-card img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.cp-staff-card .cp-added-by,
.cp-page--admin .cp-recent-card .cp-added-by {
    color: #7a828c;
    font-size: 12px;
    font-weight: 600;
}

.cp-recent-card:hover,
.cp-staff-card:hover,
.cp-recent-card:focus,
.cp-staff-card:focus {
    border-color: rgba(0, 174, 239, 0.45);
    outline: none;
}

.cp-empty {
    min-height: 140px;
    display: grid;
    place-items: center;
    grid-column: 1 / -1;
    border: 1px dashed #d8dde4;
    border-radius: 14px;
    color: #6b7078;
    font-size: 15px;
}

.cp-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cp-pagination {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.cp-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
}

.cp-modal.is-open {
    display: grid;
}

.cp-modal__dialog {
    position: relative;
    width: min(100%, 640px);
    max-height: min(86vh, 760px);
    border-radius: 18px;
    background: #fff;
    padding: 28px 24px 24px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track);
}

.cp-modal__dialog::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.cp-modal__dialog::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
    margin-block: 12px;
}

.cp-modal__dialog::-webkit-scrollbar-thumb {
    min-height: 46px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb);
}

.cp-modal__dialog::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong);
}

.cp-modal__dialog h2 {
    margin: 0 0 30px;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
}

.cp-modal__close {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cp-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 14px;
}

.cp-detail-grid label {
    display: grid;
    gap: 8px;
    color: #6b7078;
    font-size: 12px;
}

.cp-detail-grid input,
.cp-detail-grid textarea {
    height: 46px;
    min-width: 0;
    border: 1px solid #8f969e;
    border-radius: 8px;
    background: #fff;
    color: #555a61;
    font-size: 15px;
    padding: 0 14px;
}

.cp-detail-grid textarea {
    min-height: 72px;
    height: auto;
    padding: 12px 14px;
    line-height: 1.35;
    resize: none;
    overflow-y: auto;
}

.cp-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.cp-modal-actions form {
    margin: 0;
}

.cp-amount-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
}

.cp-amount-form label {
    display: grid;
    gap: 8px;
    color: #6b7078;
    font-size: 12px;
}

.cp-amount-form input {
    height: 46px;
    min-width: 0;
    border: 1px solid #8f969e;
    border-radius: 8px;
    background: #fff;
    color: #555a61;
    font-size: 15px;
    padding: 0 14px;
}

.cp-modal-btn {
    min-width: 88px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #eef2f7;
    color: #263238;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.cp-modal-btn--edit,
.cp-modal-btn--print,
.cp-modal-btn--save {
    background: #00aeef;
    color: #fff;
}

.cp-modal-btn--delete {
    background: #fff0f0;
    color: #d32f2f;
}

.cp-detail-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .cp-form-grid,
    .cp-staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .cp-create-panel,
    .cp-recent-panel,
    .cp-staff-panel {
        padding: 20px;
        border-radius: 16px;
    }

    .cp-form-grid,
    .cp-recent-grid,
    .cp-staff-grid,
    .cp-detail-grid,
    .cp-amount-form {
        grid-template-columns: 1fr;
    }

    .cp-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .cp-filter-form,
    .cp-search,
    .cp-sort,
    .cp-sort .pt-btn {
        width: 100%;
    }

    .cp-date-filter,
    .cp-filter-btn,
    .cp-clear-filter {
        flex: 1 1 100%;
    }

    .cp-date-filter input {
        width: 100%;
    }

    .cp-staff-card span {
        flex-wrap: wrap;
    }

    .cp-modal {
        padding: 14px;
    }

    .cp-modal__dialog {
        max-height: calc(100dvh - 28px);
    }
}

/* Reports */
.report-page {
    width: min(100%, 1122px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.report-card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    height: 330px;
    border: 1px solid #e3e5e8;
    border-radius: 18px;
    background: #fff;
    padding: 30px 30px 28px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.report-earning-card {
    grid-column: 1 / -1;
    border: 1px solid #e3e5e8;
    border-radius: 18px;
    background: #fff;
    padding: 24px 28px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.report-earning-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.report-earning-card__head h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
}

.report-earning-card__head span {
    display: inline-flex;
    margin-top: 8px;
    border: 1px solid rgba(0, 174, 239, 0.16);
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.08);
    color: #0f75a8;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
}

.report-earning-card__head > strong {
    color: #06142d;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
}

.report-earning-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.report-earning-filter label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #5f6670;
    font-size: 12px;
    font-weight: 700;
}

.report-earning-filter input,
.report-earning-filter select {
    width: 100%;
    height: 44px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 0 12px;
    outline: 0;
}

.report-earning-filter input:focus,
.report-earning-filter select:focus {
    border-color: rgba(0, 174, 239, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}

.report-earning-filter__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-earning-filter__actions button,
.report-earning-filter__actions a {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.report-earning-filter__actions button {
    border: 0;
    background: #00aeef;
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
}

.report-earning-filter__actions a {
    border: 1px solid #d9e2ec;
    background: #fff;
    color: #64707d;
    padding: 0 14px;
}

.report-card__head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.report-card__head h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

.report-filter {
    position: relative;
    flex: 0 0 auto;
}

.report-filter__btn {
    width: 122px;
    height: 34px;
    border: 1px solid #e0e4e8;
    border-radius: 10px;
    background: #fff;
    color: #555a61;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.report-filter__btn img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.report-filter__menu {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    width: 145px;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    padding: 10px 14px;
    display: none;
    z-index: 40;
}

.report-filter.is-open .report-filter__menu {
    display: block;
}

.report-filter__menu button {
    width: 100%;
    min-height: 45px;
    border: 0;
    border-bottom: 1px solid #ececec;
    background: transparent;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.report-filter__menu button:last-child {
    border-bottom: 0;
}

.report-filter__menu button:hover,
.report-filter__menu button.is-active {
    color: #00aeef;
}

.report-filter__date {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    display: none;
    gap: 10px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    padding: 12px;
    z-index: 35;
}

.report-filter__date.is-active {
    display: grid;
}

.report-filter__date label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.report-filter__date button[data-report-custom-apply] {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #00aeef;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.report-filter__date .adm-native-date {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.report-filter__date .ap-datepick__btn {
    width: 100%;
    height: 40px;
    min-height: 40px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    overflow: visible;
}

.report-filter__date .ap-datepick__pop {
    top: 0;
    right: calc(100% + 12px);
    left: auto;
    width: 268px;
    border-radius: 14px;
    padding: 12px;
    z-index: 60;
}

.report-filter__date .ap-datepick__month {
    font-size: 14px;
}

.report-filter__date .ap-datepick__nav {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
}

.report-filter__date .ap-datepick__dow {
    gap: 4px;
    font-size: 13px;
    padding-bottom: 8px;
}

.report-filter__date .ap-datepick__grid {
    gap: 4px;
}

.report-filter__date .ap-datepick__day {
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
}

.report-card__body {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    margin-top: 30px;
    flex: 1 1 auto;
    min-height: 0;
}

.report-donut-wrap {
    display: grid;
    place-items: center;
}

.report-donut {
    position: relative;
    width: 206px;
    height: 206px;
    border-radius: 50%;
    background: var(--report-gradient, conic-gradient(#edf2f7 0deg 360deg));
}

.report-donut::before {
    content: none;
}

.report-donut::after {
    content: "";
    position: absolute;
    inset: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.report-donut__center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    text-align: center;
    color: #171b22;
}

.report-donut__center strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.report-donut__center span {
    margin-top: 8px;
    color: #6b7078;
    font-size: 12px;
    font-weight: 500;
}

.report-legend {
    display: grid;
    gap: 20px;
    align-content: start;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 239, 0.45) rgba(0, 174, 239, 0.08);
}

.report-legend::-webkit-scrollbar {
    width: 7px;
}

.report-legend::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.08);
}

.report-legend::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.45);
}

.report-legend__item {
    display: grid;
    grid-template-columns: 14px 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #566074;
    font-size: 14px;
    cursor: pointer;
}

.report-legend__item input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: #00aeef;
}

.report-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot-color, #00aeef);
}

.report-legend__item em {
    min-width: 0;
    color: #566074;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-legend__item strong {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.report-empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    color: #6b7078;
    font-size: 14px;
    border: 1px dashed #d8dde4;
    border-radius: 14px;
}

@media (max-width: 1180px) {
    .report-page {
        grid-template-columns: 1fr;
    }

    .report-earning-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-earning-filter__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .report-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .report-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-filter,
    .report-filter__btn {
        width: 100%;
    }

    .report-filter__menu,
    .report-filter__date {
        right: auto;
        left: 0;
    }

    .report-card__body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .report-earning-card {
        padding: 20px 18px;
    }

    .report-earning-card__head {
        flex-direction: column;
    }

    .report-earning-card__head > strong {
        font-size: 28px;
    }

    .report-earning-filter {
        grid-template-columns: 1fr;
    }

    .report-legend__item {
        grid-template-columns: 14px 10px minmax(0, 1fr);
    }

    .report-legend__item strong {
        grid-column: 3;
    }
}

/* ====== Fixed data cards + visible inner scrolling ====== */
.admin-shell {
    --admin-card-height: calc(100dvh - 144px);
    --admin-form-card-height: calc(100dvh - 190px);
    --admin-scroll-thumb: #9eddf4;
    --admin-scroll-thumb-strong: #7fd0ee;
    --admin-scroll-track: transparent;
}

.pt-page,
.bill-page,
.chat-shell,
.setup-page,
.medicine-page,
.lab-page,
.staff-page,
.cp-page,
.rx-page,
.rx-view-page,
.report-page {
    min-height: 0;
}

.pt-card,
.bill-page--list .bill-card,
.bill-create-layout,
.chat-shell,
.setup-shell-card,
.medicine-shell-card,
.lab-main-card,
.staff-list-shell,
.cp-recent-panel,
.rx-page--list .rx-list-card,
.report-page {
    max-height: var(--admin-card-height);
}

.cp-staff-panel {
    max-height: none;
}

.pt-card,
.bill-page--list .bill-card,
.setup-shell-card,
.medicine-shell-card,
.lab-main-card,
.staff-list-shell,
.cp-recent-panel,
.rx-page--list .rx-list-card {
    overflow: hidden;
}

.setup-shell-card,
.medicine-shell-card,
.rx-page--list .rx-list-card,
.cp-recent-panel,
.cp-staff-panel,
.report-card {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}

.pt-card,
.bill-page--list .bill-card,
.staff-list-shell,
.cp-recent-panel,
.rx-page--list .rx-list-card {
    height: var(--admin-card-height);
    min-height: 0;
}

.cp-staff-panel {
    height: auto;
    min-height: auto;
}

.bill-create-layout {
    height: clamp(520px, var(--admin-form-card-height), 780px);
}

.chat-shell,
.lab-main-card {
    height: var(--admin-card-height);
    min-height: 0;
}

.lab-main-card {
    display: flex;
    flex-direction: column;
}

.setup-shell-card,
.medicine-shell-card {
    height: var(--admin-card-height);
}

.setup-page,
.medicine-page,
.rx-settings-page,
.treatments-page {
    height: var(--admin-card-height);
    max-height: var(--admin-card-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.setup-crumb,
.setup-tabs {
    flex: 0 0 auto;
}

.setup-shell-card,
.medicine-shell-card {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.setup-toolbar,
.medicine-toolbar {
    flex: 0 0 auto;
}

.setup-detail-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.setup-detail-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.setup-doctor-left {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.setup-appointments-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[data-pt-results],
.bill-results,
.bill-patient-list,
.bill-create-panel,
.chat-users,
.chat-room__body,
.setup-list-grid,
.setup-appointments-list,
.medicine-results,
.lab-list-grid,
.staff-grid,
.staff-detail-list,
.staff-detail-main,
.cp-recent-grid,
.cp-staff-grid,
.rx-list-scroll,
.rx-appointment-list,
.rx-repeat-list,
.report-legend,
.setup-modal__panel,
.lab-modal__panel--order,
.bill-payment-box,
.bill-log-box {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.setup-doctor-list {
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
}

[data-pt-results],
.bill-results,
.medicine-results,
.setup-list-grid,
.rx-template-grid,
.setup-appointments-list,
.lab-list-grid,
.staff-grid,
.cp-recent-grid,
.cp-staff-grid-wrapper,
.rx-list-scroll {
    flex: 1 1 auto;
    align-content: start;
    padding-right: 8px;
}

.setup-list-grid,
.rx-template-grid,
.setup-appointments-list {
    max-height: none;
}

.settings-page,
.setup-page,
.medicine-page,
.lab-page {
    max-height: var(--admin-card-height);
}

.settings-grid {
    max-height: var(--admin-card-height);
}

.medicine-results,
.lab-list-grid,
.staff-grid,
.cp-recent-grid,
.cp-staff-grid-wrapper,
.rx-list-scroll {
    max-height: calc(var(--admin-card-height) - 118px);
}

.setup-doctor-list,
.setup-appointments-list,
.staff-detail-list,
.rx-appointment-list,
.rx-repeat-list,
.report-legend {
    max-height: 100%;
}

[data-pt-results] {
    min-height: 0;
}

.bill-results,
.bill-create-panel,
.staff-detail-main,
.rx-view-page .rx-appointment-list,
.setup-modal__panel {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto;
}

.medicine-results {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.medicine-grid,
.lab-list-grid,
.setup-list-grid,
.staff-grid,
.cp-recent-grid,
.cp-staff-grid,
.rx-prescription-grid {
    min-height: 0;
}

.lab-list-grid {
    flex: 1 1 auto;
}

.setup-list-grid,
.setup-doctor-list,
.setup-appointments-list,
.staff-detail-list,
.rx-appointment-list,
.rx-repeat-list,
.report-legend {
    padding-right: 8px;
}

.pt-pager,
.bill-pager,
.medicine-pager,
.settings-pager,
.staff-pagination,
.cp-pagination,
.rx-list-pagination,
.lab-pagination {
    flex: 0 0 auto;
}

.settings-pager,
.rx-template-pager,
.treatment-pager,
.setup-list-pager,
.setup-appointment-pager {
    position: static;
    margin-top: auto;
    padding: 10px 0 0;
    background: #fff;
}

.report-page {
    min-height: 0;
}

.report-card {
    min-height: 0;
    max-height: var(--admin-card-height);
    display: flex;
    flex-direction: column;
}

.report-card__body {
    min-height: 0;
    flex: 1 1 auto;
}

@supports selector(::-webkit-scrollbar) {
    :is(
        [data-pt-results],
        .bill-results,
        .bill-patient-list,
        .bill-create-panel,
        .chat-users,
        .chat-room__body,
        .setup-list-grid,
        .setup-doctor-list,
        .setup-doctor-left,
        .setup-appointments-list,
        .medicine-results,
        .lab-main-card--inventory [data-lab-results],
        .lab-list-grid,
        .staff-grid,
        .staff-detail-list,
        .staff-detail-main,
        .cp-recent-grid,
        .cp-staff-grid,
        .rx-list-scroll,
        .rx-appointment-list,
        .rx-repeat-list,
        .rx-view-medicine-list,
        .pp-modern-remark-history,
        .scp-modal__dialog,
        .report-legend,
        .setup-modal__panel,
        .lab-modal__panel--order,
        .bill-payment-box,
        .bill-log-box,
        .ap-calendar-card,
        .calendar-card
    ) {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }
}

:is(
    [data-pt-results],
    .bill-results,
    .bill-patient-list,
    .bill-create-panel,
    .chat-users,
    .chat-room__body,
    .setup-list-grid,
    .setup-doctor-list,
    .setup-appointments-list,
    .medicine-results,
    .lab-main-card--inventory [data-lab-results],
    .lab-list-grid,
    .staff-grid,
    .staff-detail-list,
    .staff-detail-main,
    .cp-recent-grid,
    .cp-staff-grid,
    .rx-list-scroll,
    .rx-appointment-list,
    .rx-repeat-list,
    .report-legend,
    .setup-modal__panel,
    .lab-modal__panel--order,
    .bill-payment-box,
    .bill-log-box
)::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

:is(
    [data-pt-results],
    .bill-results,
    .bill-patient-list,
    .bill-create-panel,
    .chat-users,
    .chat-room__body,
    .setup-list-grid,
    .setup-doctor-list,
    .setup-appointments-list,
    .medicine-results,
    .lab-main-card--inventory [data-lab-results],
    .lab-list-grid,
    .staff-grid,
    .staff-detail-list,
    .staff-detail-main,
    .cp-recent-grid,
    .cp-staff-grid,
    .rx-list-scroll,
    .rx-appointment-list,
    .rx-repeat-list,
    .report-legend,
    .setup-modal__panel,
    .lab-modal__panel--order,
    .bill-payment-box,
    .bill-log-box
)::-webkit-scrollbar-track {
    background: var(--admin-scroll-track) !important;
    border-radius: 999px;
    margin-block: 12px;
}

:is(
    [data-pt-results],
    .bill-results,
    .bill-patient-list,
    .bill-create-panel,
    .chat-users,
    .chat-room__body,
    .setup-list-grid,
    .setup-doctor-list,
    .setup-appointments-list,
    .medicine-results,
    .lab-main-card--inventory [data-lab-results],
    .lab-list-grid,
    .staff-grid,
    .staff-detail-list,
    .staff-detail-main,
    .cp-recent-grid,
    .cp-staff-grid,
    .rx-list-scroll,
    .rx-appointment-list,
    .rx-repeat-list,
    .report-legend,
    .setup-modal__panel,
    .lab-modal__panel--order,
    .bill-payment-box,
    .bill-log-box
)::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb) !important;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

:is(
        [data-pt-results],
        .bill-results,
        .bill-patient-list,
        .bill-create-panel,
        .chat-users,
        .chat-room__body,
        .setup-list-grid,
        .setup-doctor-list,
        .setup-appointments-list,
        .medicine-results,
        .lab-main-card--inventory [data-lab-results],
        .lab-list-grid,
        .staff-grid,
        .staff-detail-list,
        .staff-detail-main,
        .cp-recent-grid,
        .cp-staff-grid,
        .rx-list-scroll,
        .rx-appointment-list,
        .rx-repeat-list,
        .report-legend,
        .setup-modal__panel,
        .lab-modal__panel--order,
        .bill-payment-box,
        .bill-log-box
    )::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong) !important;
}

@media (max-width: 1180px) {
    .admin-shell {
        --admin-card-height: calc(100dvh - 142px);
        --admin-form-card-height: calc(100dvh - 176px);
    }

    .bill-create-layout,
    .staff-detail-layout,
    .rx-view-page .rx-view-layout {
        max-height: none;
    }

    .staff-detail-left,
    .staff-detail-main,
    .rx-view-page .rx-view-left,
    .rx-view-page .rx-view-right {
        max-height: var(--admin-card-height);
    }
}

@media (max-width: 900px) {
    .admin-shell {
        --admin-card-height: calc(100dvh - 148px);
        --admin-form-card-height: calc(100dvh - 182px);
    }

    .bill-create-layout,
    .staff-detail-layout,
    .rx-view-page .rx-view-layout {
        height: auto;
        max-height: none;
    }

    .bill-patient-panel,
    .bill-create-panel,
    .staff-detail-left,
    .staff-detail-main,
    .rx-view-page .rx-view-left,
    .rx-view-page .rx-view-right {
        max-height: var(--admin-card-height);
    }
}

@media (max-width: 640px) {
    .admin-shell {
        --admin-card-height: calc(100dvh - 156px);
        --admin-form-card-height: calc(100dvh - 184px);
    }

    .pt-card,
    .bill-page--list .bill-card,
    .chat-shell,
    .setup-shell-card,
    .medicine-shell-card,
    .lab-main-card,
    .staff-list-shell,
    .cp-recent-panel,
    .cp-staff-panel,
    .rx-page--list .rx-list-card,
    .report-page {
        height: var(--admin-card-height);
        max-height: var(--admin-card-height);
    }
}

.settings-page,
.staff-detail-left {
    height: var(--admin-card-height);
}

.staff-detail-left {
    overflow: hidden;
}

.staff-detail-left {
    display: flex;
    flex-direction: column;
}

/* ====== Bills list payment/date filter ====== */
.bill-filter .bill-filter__menu {
    width: 334px;
    min-height: 174px;
    top: calc(100% + 18px);
    right: 0;
    display: none;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bill-filter.is-open .bill-filter__menu {
    display: grid;
}

.bill-filter__tabs {
    min-height: 100%;
    padding: 17px 0;
    display: grid;
    align-content: start;
    background: #ffffff;
    border-right: 1px solid #e6e6e6;
}

.bill-filter__tabs button {
    width: 100%;
    height: 40px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: rgba(0, 0, 0, 0.32);
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    padding: 0 22px;
    cursor: pointer;
}

.bill-filter__tabs button:first-child {
    border-bottom-color: #e6e6e6;
}

.bill-filter__tabs button.is-active {
    color: #000000;
}

.bill-filter__panels {
    min-height: 0;
    background: #ffffff;
}

.bill-filter__panel {
    display: none;
    padding: 18px 20px;
}

.bill-filter__panel.is-active {
    display: grid;
    gap: 18px;
}

.bill-filter-check {
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 500;
}

.bill-filter-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.bill-filter__panel[data-bill-filter-panel="date"] {
    padding: 20px 18px 16px;
}

.bill-filter-date {
    display: grid;
    gap: 8px;
}

.bill-filter-date__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 7px;
}

.bill-filter-date__head select {
    height: 28px;
    min-width: 0;
    border: 1px solid #d9e0e7;
    border-radius: 6px;
    background: #ffffff;
    color: #20242a;
    font-size: 12px;
    padding: 0 8px;
}

.bill-filter-date__dow,
.bill-filter-date__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.bill-filter-date__dow {
    padding-top: 2px;
    color: #7a8798;
    font-size: 11px;
    text-align: center;
}

.bill-filter-date__day {
    width: 100%;
    height: 25px;
    border: 0;
    border-radius: 7px;
    background: #ffffff;
    color: #1f2933;
    font-size: 12px;
    cursor: pointer;
}

.bill-filter-date__day.is-muted {
    color: #8a99aa;
}

.bill-filter-date__day.is-disabled,
.bill-filter-date__day:disabled {
    color: #b8b8b8;
    background: #f4f6f8;
    cursor: not-allowed;
}

.bill-filter-date__day.is-in-range {
    background: rgba(0, 174, 239, 0.12);
}

.bill-filter-date__day.is-selected {
    background: var(--primary);
    color: #ffffff;
}

.bill-filter-date p {
    margin: 6px 0 0;
    color: #20242a;
    font-size: 12px;
    font-weight: 500;
}

/* The filter menu also carries the .pt-sort__menu class, whose generic
   "button/a" styling (47px tall, 18px font, full-width bordered rows) breaks
   the tabs and calendar. Neutralise those inside the bill filter so the
   tab/calendar styles above take effect. */
.bill-filter__menu button,
.bill-filter__menu a {
    width: auto;
    height: auto;
    border-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: normal;
}

.bill-filter__tabs button {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
}

.bill-filter__tabs button:first-child {
    border-bottom-color: #e6e6e6;
}

.bill-filter-date__day {
    height: 28px;
    font-size: 12px;
    font-weight: 500;
}

/* ====== Bills create updated Figma layout ====== */
.bill-page--create .bill-create-layout {
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 24px;
    height: calc(100dvh - 190px);
    min-height: 0;
    max-height: none;
    align-items: stretch;
}

.bill-page--create .bill-patient-panel,
.bill-page--create .bill-create-panel {
    border: 1px solid #eaeaea;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.06);
}

.bill-page--create .bill-patient-panel {
    padding: 24px;
    gap: 30px;
}

.bill-page--create .bill-patient-search {
    height: 46px;
    border-color: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

.bill-page--create .bill-patient-list {
    gap: 16px;
    padding-right: 8px;
}

.bill-page--create .bill-patient {
    min-height: 61px;
    padding: 10px;
    border-radius: 8px;
}

.bill-page--create .bill-create-panel {
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) transparent !important;
}

.bill-page--create .bill-form {
    gap: 28px;
}

.bill-page--create .bill-form-section {
    gap: 14px;
}

.bill-page--create .bill-form-section h2 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.bill-page--create .bill-form-grid {
    gap: 14px;
}

.bill-page--create .bill-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bill-page--create .bill-form-grid--discount {
    grid-template-columns: minmax(0, 1fr) 100px;
}

.bill-page--create .bill-procedure-row {
    grid-template-columns: 1fr;
}

.bill-page--create .bill-field {
    gap: 8px;
}

.bill-page--create .bill-field span,
.bill-page--create .bill-field .ap-label {
    color: rgba(0, 0, 0, 0.52);
    font-size: 12px;
    font-weight: 500;
}

.bill-page--create .bill-control,
.bill-page--create .bill-field .ap-control {
    height: 46px;
    border-color: rgba(0, 0, 0, 0.38);
    border-radius: 7px;
    color: rgba(0, 0, 0, 0.72);
    font-size: 14px;
    padding: 0 14px;
}

.bill-page--create textarea.bill-control {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    line-height: 1.45;
    resize: vertical;
}

.bill-notes-field {
    margin-top: 4px;
}

.bill-page--create .bill-control::placeholder,
.bill-page--create .ap-datepick__btn [data-ap-datepick-label] {
    color: rgba(0, 0, 0, 0.34);
}

.bill-page--create .bill-control:disabled,
.bill-page--create .ap-datepick__btn:disabled,
.bill-page--create [data-bill-amount-paid][readonly] {
    background: #f7f7f7;
    color: rgba(0, 0, 0, 0.48);
    cursor: not-allowed;
}

.bill-page--create .ap-datepick__btn:disabled [data-ap-datepick-label] {
    color: rgba(0, 0, 0, 0.48);
}

.bill-page--create select.bill-control {
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 16px) 50%;
}

.bill-page--create .bill-procedures {
    gap: 14px;
}

.bill-page--create .bill-procedure-row {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #ffffff;
    display: grid;
    gap: 18px;
    align-items: stretch;
    padding: 16px;
}

.bill-procedure-row__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px 130px;
    gap: 14px;
    align-items: end;
}

.bill-treatment-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.bill-treatment-details__left {
    display: grid;
    gap: 14px;
}

.bill-treatment-details__art {
    display: flex;
    justify-content: flex-end;
}

.bill-treatment-details__art img {
    width: min(360px, 100%);
    height: auto;
    display: block;
}

.bill-note-row {
    display: grid;
    grid-template-columns: minmax(220px, 326px) minmax(220px, 1fr) 138px;
    gap: 14px;
    align-items: end;
}

.bill-note-row__custom[hidden] {
    display: none;
}

.bill-note-add-btn {
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    padding: 0 18px;
}

.bill-note-add-btn:hover,
.bill-note-add-btn:focus-visible {
    background: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: none;
    filter: none;
    transform: none;
    text-decoration: none;
}

.bill-page--create .bill-link-btn {
    font-size: 18px;
    color: var(--primary);
    line-height: 1.2;
    margin-top: -2px;
}

.bill-page--create .bill-link-btn:hover,
.bill-page--create .bill-link-btn:focus-visible {
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
}

.bill-page--create .bill-choice-row {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.bill-page--create .bill-chip-row {
    gap: 10px;
    align-content: start;
}

.bill-page--create .bill-choice-row .bill-form-section {
    align-content: start;
}

.bill-page--create .bill-chip span {
    min-height: 28px;
    padding: 6px 13px;
    font-size: 12px;
}

.bill-page--create .bill-paid-section {
    gap: 10px;
    min-height: 92px;
}

.bill-page--create .bill-balance-line {
    margin: 0;
    color: #000000;
    font-size: 12px;
    font-weight: 500;
}

.bill-page--create .bill-balance-line strong {
    color: #ef4444;
    font-weight: 500;
}

.bill-page--create .bill-totals {
    border-color: rgba(0, 0, 0, 0.08);
    border-radius: 13px;
    padding: 14px;
    gap: 13px;
}

.bill-page--create .bill-generate-btn {
    width: fit-content;
    min-width: 116px;
    height: 46px;
    border-radius: 8px;
    font-size: 18px;
}

.bill-page--create .ap-datepick__btn {
    color: rgba(0, 0, 0, 0.34);
}

.bill-page--create .ap-datepick--dob .ap-datepick__pop {
    width: 284px;
    max-width: min(284px, calc(100vw - 72px));
    top: calc(100% + 8px);
    padding: 10px 12px 12px;
    border-color: #bac6cf;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.bill-page--create .ap-datepick__head--selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 8px;
    margin-bottom: 10px;
}

.bill-page--create .ap-datepick__select {
    width: 100%;
    min-width: 0;
    height: 32px;
    border-color: #d9e0e7;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
}

.bill-page--create .ap-datepick--dob .ap-datepick__dow {
    gap: 4px;
    padding: 2px 0 8px;
    color: #718096;
    font-size: 14px;
}

.bill-page--create .ap-datepick--dob .ap-datepick__grid {
    gap: 4px;
}

.bill-page--create .ap-datepick--dob .ap-datepick__day {
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.bill-page--create .ap-datepick__day.is-selected {
    background: var(--primary);
    box-shadow: none;
}

@media (max-width: 1180px) {
    .bill-page--create .bill-create-layout {
        min-height: 0;
        height: auto;
    }

    .bill-page--create .bill-patient-panel,
    .bill-page--create .bill-create-panel {
        max-height: var(--admin-card-height);
    }
}

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

    .bill-page--create .bill-choice-row,
    .bill-page--create .bill-form-grid--two,
    .bill-procedure-row__main,
    .bill-treatment-details,
    .bill-note-row {
        grid-template-columns: 1fr;
    }

    .bill-treatment-details__art {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .bill-page--create .bill-form-grid--discount {
        grid-template-columns: 1fr;
    }

    .bill-page--create .bill-procedure-row {
        padding: 12px;
    }
}

/* ====== Staff detail viewport fit ====== */
.staff-page--detail {
    height: calc(100dvh - 144px);
    min-height: 0;
    max-height: calc(100dvh - 144px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.staff-page--detail .staff-detail-top {
    flex: 0 0 auto;
    margin-bottom: 22px;
}

.staff-page--detail .staff-detail-layout {
    grid-template-columns: 374px minmax(0, 1fr);
    gap: 24px;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    align-items: stretch;
}

.staff-page--detail .staff-detail-left,
.staff-page--detail .staff-detail-main {
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

.staff-page--detail .staff-detail-left {
    overflow: hidden;
    padding: 24px;
}

.staff-page--detail .staff-detail-search {
    width: 100%;
    max-width: none;
    height: 47px;
    min-height: 47px;
    flex: 0 0 47px;
    margin: 0 0 30px;
    padding: 0 18px;
    border-radius: 8px;
    align-items: center;
}

.staff-page--detail .staff-detail-search input {
    height: 100%;
    line-height: 47px;
    font-size: 13px;
}

.staff-page--detail .staff-detail-list {
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.staff-page--detail .staff-detail-main {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
    box-sizing: border-box;
}

.staff-page--detail .staff-section {
    gap: 16px;
}

.staff-page--detail .staff-section + .staff-section {
    margin-top: 24px;
}

.staff-page--detail .staff-section-head h2 {
    font-size: 18px;
    font-weight: 800;
}

.staff-page--detail .staff-section-head a {
    font-size: 16px;
    font-weight: 800;
}

.staff-page--detail .staff-appointment-card,
.staff-page--detail .staff-bill-card {
    min-height: 112px;
    display: grid;
    align-items: start;
    gap: 18px 18px;
    padding: 22px 20px;
    border-radius: 16px;
    cursor: default;
}

.staff-page--detail .staff-appointment-card {
    min-height: 128px;
    grid-template-columns: minmax(0, 1fr);
    cursor: pointer;
}

.staff-page--detail .staff-bill-card {
    grid-template-columns: minmax(0, 1fr) auto;
}

.staff-page--detail .staff-appointment-card:focus {
    border-color: #00aeef;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.staff-page--detail .staff-appointment-card strong,
.staff-page--detail .staff-bill-card strong {
    min-width: 0;
    color: #070707;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

.staff-page--detail .staff-activity-head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.staff-page--detail .staff-activity-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.staff-page--detail .staff-activity-meta em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #666;
    font-size: 13px;
    font-style: normal;
    line-height: 1.3;
}

.staff-page--detail .staff-activity-meta img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.staff-page--detail .staff-bill-card a {
    grid-column: 1;
    justify-self: start;
    min-width: 88px;
    height: 34px;
    border-radius: 8px;
    font-size: 16px;
}

.staff-page--detail .staff-status {
    position: static;
    justify-self: end;
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.staff-page--detail .staff-status--completed,
.staff-page--detail .staff-status--paid {
    border: 1px solid rgba(24, 190, 48, 0.25);
    background: rgba(24, 190, 48, 0.1);
    color: #159724;
}

.staff-page--detail .staff-status--ongoing {
    border: 1px solid rgba(255, 181, 71, 0.35);
    background: rgba(255, 181, 71, 0.14);
    color: #f59e0b;
}

.staff-page--detail .staff-status--pending {
    border: 1px solid rgba(255, 76, 76, 0.25);
    background: rgba(255, 76, 76, 0.1);
    color: #d73f3f;
}

.staff-page--detail .staff-detail-empty {
    min-height: 120px;
    font-size: 15px;
}



.staff-page--detail .staff-card--compact {
    min-height: 62px;
    flex: 0 0 auto;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
}

.staff-page--detail .staff-card--compact .staff-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.staff-page--detail .staff-card--compact .staff-card__body {
    gap: 7px;
}

.staff-page--detail .staff-card--compact .staff-card__body strong {
    font-size: 15px;
    font-weight: 800;
}

.staff-page--detail .staff-card--compact .staff-card__body > span {
    gap: 10px;
    font-size: 11px;
}

.staff-page--detail .staff-card--compact .staff-card__body em {
    gap: 6px;
}

.staff-page--detail .staff-card--compact .staff-card__body img {
    width: 12px;
    height: 12px;
}

.staff-page--detail .staff-card--compact .staff-card__body i {
    height: 14px;
}

@media (max-width: 1180px) {
    .staff-page--detail .staff-detail-layout {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .staff-page--detail .staff-detail-left,
    .staff-page--detail .staff-detail-main {
        height: var(--admin-card-height);
        max-height: var(--admin-card-height);
    }
}

.settings-grid,
.rx-template-grid {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.settings-grid::-webkit-scrollbar,
.rx-template-grid::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

.settings-grid::-webkit-scrollbar-track,
.rx-template-grid::-webkit-scrollbar-track {
    background: var(--admin-scroll-track) !important;
    border-radius: 999px;
}

.settings-grid::-webkit-scrollbar-thumb,
.rx-template-grid::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb) !important;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.settings-grid::-webkit-scrollbar-thumb:hover,
.rx-template-grid::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong) !important;
}

.bill-payment-box {
    overflow-x: auto;
    overflow-y: hidden;
}

.bill-log-box {
    overflow-x: hidden;
    overflow-y: visible;
}

.rx-page--list {
    height: var(--admin-card-height);
    max-height: var(--admin-card-height);
    overflow: hidden;
}

.rx-page--list .rx-list-card {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rx-page--list .rx-list-toolbar {
    flex: 0 0 auto;
}

.rx-page--list [data-rx-list-results] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rx-page--list .rx-list-scroll {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 8px 24px 0;
    margin: 0;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.rx-page--list .rx-list-scroll::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

.rx-page--list .rx-list-scroll::-webkit-scrollbar-track {
    background: var(--admin-scroll-track) !important;
    border-radius: 999px;
}

.rx-page--list .rx-list-scroll::-webkit-scrollbar-thumb {
    min-height: 46px;
    background: var(--admin-scroll-thumb) !important;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.rx-page--list .rx-prescription-grid:last-child {
    margin-bottom: 0;
}

.rx-page--list .rx-list-pagination {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 16px 0 0;
    background: #ffffff;
}

.rx-page--list .rx-page-link,
.rx-page--list .rx-page-ellipsis {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .rx-page--list {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .rx-page--list .rx-list-card {
        height: var(--admin-card-height);
        max-height: var(--admin-card-height);
    }

    .rx-page--list .rx-list-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
    }

    .rx-page--list .bill-search {
        width: auto;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
    }

    .rx-page--list .bill-actions {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        gap: 12px;
    }

    .rx-page--list .bill-actions .pt-btn {
        width: auto;
        min-width: 142px;
        padding-inline: 16px;
    }

    .rx-page--list .bill-actions .pt-sort {
        width: auto;
        flex: 0 0 auto;
    }

    .rx-page--list .bill-actions .pt-sort__btn {
        width: auto;
        min-width: 104px;
    }
}

@media (max-width: 640px) {
    .rx-page--list .rx-list-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .rx-page--list .bill-search,
    .rx-page--list .bill-actions,
    .rx-page--list .bill-actions .pt-btn,
    .rx-page--list .bill-actions .pt-sort,
    .rx-page--list .bill-actions .pt-sort__btn {
        width: 100%;
    }

    .rx-page--list .bill-actions {
        flex-direction: column;
    }
}

/* ====== Case paper Figma alignment ====== */
.cp-page.cp-page--admin {
    width: min(100%, 1120px);
    max-width: 1120px;
    gap: 24px;
    max-height: none;
}

.cp-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
}

.cp-page--admin .cp-panel {
    border: 1px solid #eaeaea;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.06);
}

.cp-page--admin .cp-create-panel {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 364px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    overflow: visible;
    isolation: isolate;
}

.cp-create-head,
.cp-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cp-recent-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cp-list-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cp-list-stats span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9px;
    background: #f8fafc;
    color: #5f6670;
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px;
}

.cp-list-stats strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.cp-page--admin .cp-create-head {
    width: 100%;
    flex: 0 0 auto;
}

.cp-create-head h2,
.cp-recent-head h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

.cp-create-head a,
.cp-create-head button {
    border: 0;
    background: transparent;
    color: #00aeef;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.cp-page--admin .cp-create-form {
    width: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cp-page--admin .cp-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 14px;
}

.cp-field--half {
    grid-column: span 3;
}

.cp-field--third {
    grid-column: span 2;
}

.cp-field--full {
    grid-column: 1 / -1;
}

.cp-page--admin .cp-field {
    gap: 8px;
    color: #666b73;
    font-size: 12px;
    font-weight: 500;
}

.cp-page--admin .cp-control {
    height: 46px;
    border: 1px solid #9aa0a7;
    border-radius: 8px;
    color: #555a61;
    font-size: 14px;
    padding: 0 15px;
}

.cp-page--admin select.cp-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("/assets/img/navigation_grey_icon/Chevron down.svg");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 24px 24px;
}

.cp-page--admin .cp-control--textarea {
    min-height: 46px;
    height: 46px;
    resize: none;
    line-height: 44px;
    overflow: hidden;
}

.cp-page--admin .cp-control--notes {
    box-sizing: border-box;
    min-height: 46px;
    height: 46px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 20px;
    resize: none;
    overflow: hidden;
}

.cp-medicine-select {
    position: relative;
    min-height: 46px;
    border: 1px solid #9aa0a7;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    background: #fff;
    overflow: visible;
    min-width: 0;
}

.cp-medicine-tags-clip {
    overflow: hidden;
    min-width: 0;
}

.cp-medicine-select::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    z-index: 2;
    width: var(--admin-dropdown-chevron-size, 24px);
    height: var(--admin-dropdown-chevron-size, 24px);
    pointer-events: none;
    transform: translateY(-50%);
    background: url("/assets/img/navigation_grey_icon/Chevron down.svg")
        center / contain no-repeat;
}

.cp-medicine-tags {
    position: relative;
    z-index: 5;
    pointer-events: none;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 8px 7px 16px;
    padding-right: 2px;
    overflow: visible;
    scrollbar-width: none;
}

.cp-medicine-tags::-webkit-scrollbar {
    display: none;
}

.cp-med-chip {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    flex: 0 0 auto;
    min-height: 30px;
    max-width: 100%;
    border: 1px solid #e0e2e5;
    border-radius: 999px;
    background: #fff;
    color: #171b22;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 9px 0 12px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
}

.cp-med-chip__text {
    min-width: 0;
    max-width: min(420px, 100%);
    overflow-wrap: anywhere;
}

.cp-med-chip button {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: #171b22;
    display: inline-grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.cp-med-placeholder {
    color: #777d85;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
}

.cp-medicine-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    cursor: pointer;
    padding: 0;
}

.cp-medicine-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 90;
    width: 320px;
    max-width: 320px;
    max-height: 190px;
    padding: 6px;
    border: 1px solid #b8c7d6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
    box-sizing: border-box;
}

.cp-medicine-menu.is-open {
    display: grid;
    gap: 0;
}

.cp-medicine-menu::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

.cp-medicine-menu::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.cp-medicine-menu::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb);
}

.cp-medicine-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0 0 4px;
    background: #fff;
}

.cp-medicine-search {
    width: 100%;
    height: 36px;
    border: 1px solid #d8dde4;
    border-radius: 7px;
    background: #f8f9fa;
    color: #171b22;
    font-size: 13px;
    font-family: inherit;
    padding: 0 10px;
    outline: none;
}

.cp-medicine-search:focus {
    border-color: #00aeef;
    background: #fff;
}

.cp-medicine-options {
    display: grid;
    gap: 2px;
}

.cp-medicine-menu button {
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: #171b22;
    text-align: left;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
}

.cp-medicine-menu button:hover,
.cp-medicine-menu button:focus-visible,
.cp-medicine-menu button.is-selected {
    outline: none;
    background: #eef7ff;
    color: #00aeef;
}

.cp-medicine-menu button.is-selected::after {
    content: "✓";
    float: right;
    color: #00aeef;
    font-weight: 800;
}

.cp-page--admin .cp-price-wrap .cp-control {
    padding-right: 52px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cp-page--admin .cp-price-wrap .cp-control::-webkit-outer-spin-button,
.cp-page--admin .cp-price-wrap .cp-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cp-page--admin .cp-price-add {
    right: 15px;
    width: 24px;
    height: 24px;
    font-size: 22px;
    font-weight: 400;
    box-shadow: none;
}

.cp-page--admin .cp-price-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 100%;
    max-height: 210px;
    min-height: 0;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #d5dae0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cp-page--admin .cp-price-menu::-webkit-scrollbar {
    display: none;
}

.cp-page--admin .cp-price-menu.is-open {
    display: block;
}

.cp-page--admin .cp-price-menu button {
    width: 100%;
    height: 42px;
    border: 0;
    border-bottom: 1px solid #f0f1f3;
    border-radius: 0;
    background: transparent;
    color: #3d4450;
    text-align: left;
    padding: 0 18px;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.cp-page--admin .cp-price-menu button:last-child {
    border-bottom: 0;
}

.cp-page--admin .cp-price-menu button:hover {
    background: #f4fbfe;
    color: #00aeef;
}

.cp-page--admin .cp-primary-btn {
    min-width: 75px;
    height: 47px;
    flex: 0 0 auto;
    margin-top: 0;
    border-radius: 8px;
    font-size: 20px;
    box-shadow: none;
}

.cp-page--admin .cp-recent-panel {
    height: auto;
    min-height: 364px;
    max-height: none;
    padding: 30px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.cp-page--admin .cp-toolbar {
    margin: 0;
    gap: 20px;
}

.cp-page--admin .cp-filter-form {
    flex-wrap: nowrap;
}

.cp-page--admin .cp-search {
    width: auto;
    flex-basis: min(320px, 28vw);
    height: 46px;
    border-color: rgba(0, 0, 0, 0.34);
    border-radius: 10px;
}

.cp-page--admin .cp-sort .pt-sort__btn {
    min-width: 110px;
    height: 46px;
    border-radius: 9px;
    font-size: 20px;
    font-weight: 500;
}

.cp-page--admin .cp-sort .pt-sort__menu {
    top: calc(100% + 10px);
    z-index: 70;
}

.cp-page--admin .cp-recent-grid {
    min-height: 0;
    margin-top: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.cp-page--admin .cp-recent-grid::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}

.cp-page--admin .cp-recent-grid::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.cp-page--admin .cp-recent-grid::-webkit-scrollbar-thumb {
    min-height: 46px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb);
}

.cp-page--admin .cp-recent-card {
    min-height: 78px;
    align-content: center;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px 16px;
    border-radius: 14px;
    position: relative;
}

.cp-page--admin .cp-recent-card strong {
    font-size: 16px;
    padding-right: 62px;
}

.cp-page--admin .cp-recent-card .bill-status {
    position: absolute;
    top: 14px;
    right: 16px;
}

.cp-page--admin .cp-recent-card span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #555a61;
    font-size: 12px;
}

.cp-page--admin .cp-recent-card em {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555a61;
    font-style: normal;
    font-size: 12px;
}

.cp-page--admin .cp-recent-card i {
    width: 1px;
    height: 14px;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.14);
}

.cp-page--admin .cp-recent-card img {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.cp-page--admin .cp-pagination {
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 0;
    gap: 16px;
    background: #fff;
}

.cp-page--admin .cp-pagination .rx-page-link,
.cp-page--admin .cp-pagination .rx-page-ellipsis {
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .cp-page--admin .cp-recent-grid {
        grid-template-columns: 1fr;
    }

    .cp-page--admin .cp-create-panel,
    .cp-page--admin .cp-recent-panel {
        height: auto;
        max-height: none;
    }
}

@media (max-width: 760px) {
    .cp-page--admin .cp-form-grid {
        grid-template-columns: 1fr;
    }

    .cp-field--half,
    .cp-field--third,
    .cp-field--full {
        grid-column: 1;
    }

    .cp-recent-head {
        align-items: stretch;
        flex-direction: column;
    }

    .cp-page--admin .cp-toolbar,
    .cp-page--admin .cp-filter-form,
    .cp-page--admin .cp-search,
    .cp-page--admin .cp-sort,
    .cp-page--admin .cp-sort .pt-sort__btn {
        width: 100%;
    }

    .cp-page--admin .cp-filter-form {
        flex-wrap: wrap;
    }

    .cp-date-filter,
    .cp-filter-btn,
    .cp-clear-filter {
        flex: 1 1 100%;
    }

    .cp-date-filter input {
        width: 100%;
    }
}

.cp-due-modal {
    position: fixed;
    inset: 0;
    z-index: 1130;
    display: none;
    place-items: center;
    padding: 24px;
}

.cp-due-modal.is-open {
    display: grid;
}

.cp-due-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cp-due-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.25);
    padding: 34px 32px 30px;
    text-align: center;
}

.cp-due-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f1f3f5;
    color: #171b22;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.cp-due-modal__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff1f1;
    color: #dc2626;
    font-size: 30px;
    font-weight: 800;
}

.cp-due-modal__dialog h2 {
    margin: 0;
    color: #171b22;
    font-size: 25px;
    font-weight: 800;
}

.cp-due-modal__patient {
    min-height: 22px;
    margin: 7px 0 22px;
    color: #656b73;
    font-size: 15px;
    font-weight: 600;
}

.cp-due-modal__label {
    display: block;
    color: #656b73;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cp-due-modal__amount {
    display: block;
    margin-top: 4px;
    color: #dc2626;
    font-size: clamp(42px, 9vw, 58px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.cp-due-modal__message {
    margin: 18px 0 24px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.cp-due-modal__confirm {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: #087eb4;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.cp-due-modal__confirm:hover {
    background: #066d9d;
}

.cp-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: none;
    place-items: center;
    padding: 24px;
}

.cp-payment-modal.is-open {
    display: grid;
}

.cp-payment-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.39);
    cursor: default;
}

.cp-payment-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    padding: 25px 24px 24px;
    display: grid;
    gap: 16px;
}

.cp-payment-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cp-payment-modal__head h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

.cp-payment-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #f0f1f3;
    color: #171b22;
    display: inline-grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.cp-payment-card,
.cp-payment-log-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.cp-payment-card {
    padding: 15px 15px 13px;
}

.cp-payment-table {
    display: grid;
    gap: 0;
}

.cp-payment-row {
    min-height: 33px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(78px, 0.8fr) 55px minmax(
            78px,
            0.8fr
        );
    align-items: center;
    gap: 14px;
    color: #656b73;
    font-size: 12px;
}

.cp-payment-row--head {
    min-height: 28px;
    color: #171b22;
    font-weight: 700;
}

.cp-payment-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-payment-table [data-cp-payment-items] {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.cp-payment-summary {
    padding-top: 12px;
    display: grid;
    gap: 11px;
}

.cp-payment-summary div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    color: #171b22;
    font-size: 12px;
}

.cp-payment-summary strong {
    color: #656b73;
    font-size: 12px;
    font-weight: 500;
}

.cp-payment-summary strong.is-green {
    color: #00b925;
}

.cp-payment-summary strong.is-red {
    color: #ff2c2c;
}

.cp-payment-log-card {
    max-height: 112px;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.cp-payment-log-card::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

.cp-payment-log-card::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.cp-payment-log-card::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb);
}

.cp-payment-log {
    min-height: 36px;
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 10px;
}

.cp-payment-log > span {
    width: 11px;
    height: 11px;
    margin-top: 4px;
    border: 2px solid #b9f6c7;
    border-radius: 999px;
    background: #10c935;
}

.cp-payment-log strong {
    display: block;
    color: #171b22;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.cp-payment-log p {
    margin: 4px 0 0;
    color: #656b73;
    font-size: 12px;
    line-height: 1.2;
}

.cp-payment-empty {
    min-height: 54px;
    display: grid;
    place-items: center;
    color: #656b73;
    font-size: 13px;
}

@media (max-width: 620px) {
    .cp-due-modal {
        padding: 16px;
    }

    .cp-due-modal__dialog {
        padding: 30px 20px 24px;
    }

    .cp-payment-modal {
        padding: 16px;
    }

    .cp-payment-modal__dialog {
        padding: 20px 16px;
    }

    .cp-payment-row {
        grid-template-columns: minmax(0, 1.2fr) 64px 32px 64px;
        gap: 8px;
    }
}

/* ====== Consistent 24px page edge spacing ====== */
.content
    > :is(
        [data-dash-page],
        .pt-page,
        .bill-page,
        .rx-page,
        .rx-view-page,
        .schedule-page,
        .settings-page,
        .setup-page,
        .medicine-page,
        .lab-page,
        .staff-page,
        .cp-page,
        .scp-page,
        .report-page
    ) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.report-page {
    width: 100%;
    max-width: none;
}

.export-bills-page {
    width: min(100%, 1280px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 72px;
}

.export-bills-card {
    border: 1px solid #eaeaea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
    padding: 22px;
}

.export-bills-card--toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.export-bills-filter {
    flex: 1 1 640px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.export-bills-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.export-bills-actions__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.export-bills-doctor-filter {
    min-width: 230px;
}

.export-bills-doctor-filter select {
    min-width: 0;
    width: 154px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.export-bills-download {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    background: #00aeef;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    padding: 0 18px;
    box-shadow: 0 12px 24px rgba(0, 174, 239, 0.18);
}

.export-bills-download:hover,
.export-bills-download:focus {
    color: #fff;
    text-decoration: none;
}

.export-bills-download img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.export-bills-summary,
.export-bills-grid {
    display: grid;
    gap: 16px;
}

.export-bills-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.export-bills-summary article {
    min-height: 88px;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fff;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px 20px;
}

.export-bills-summary span,
.export-bills-total-list span,
.export-bills-section-head span {
    color: #64707d;
    font-size: 13px;
    font-weight: 600;
}

.export-bills-summary strong {
    color: #101828;
    font-size: 24px;
    font-weight: 850;
}

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

.export-bills-card h2,
.export-bills-section-head h2 {
    margin: 0;
    color: #101828;
    font-size: 20px;
    font-weight: 850;
}

.export-bills-total-list {
    max-height: 190px;
    overflow: auto;
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.export-bills-total-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf1f5;
    padding-bottom: 10px;
}

.export-bills-total-list strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.export-bills-total-list p,
.export-bills-empty {
    color: #667085;
    font-size: 14px;
    font-weight: 600;
}

.export-bills-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.export-bills-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #edf1f5;
    border-radius: 14px;
}

.export-bills-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

.export-bills-table th,
.export-bills-table td {
    border-bottom: 1px solid #edf1f5;
    padding: 13px 14px;
    text-align: left;
    color: #344054;
    font-size: 13px;
    white-space: nowrap;
}

.export-bills-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #101828;
    font-weight: 800;
}

.export-bills-table td:nth-child(6) {
    color: #0f172a;
    font-weight: 800;
}

.export-bills-table td.is-refund {
    color: #e11d48;
}

@media (max-width: 1180px) {
    .export-bills-summary,
    .export-bills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .export-bills-card--toolbar {
        align-items: stretch;
    }

    .export-bills-filter {
        flex: 1 1 100%;
    }

    .export-bills-actions {
        width: 100%;
        justify-content: space-between;
    }

    .export-bills-filter .cp-date-filter,
    .export-bills-actions__left .cp-filter-btn,
    .export-bills-actions__left .cp-clear-filter {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .export-bills-card--toolbar,
    .export-bills-filter,
    .export-bills-actions,
    .export-bills-actions__left,
    .export-bills-download {
        width: 100%;
    }

    .export-bills-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .export-bills-actions__left {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-bills-filter .cp-date-filter,
    .export-bills-actions__left .cp-filter-btn,
    .export-bills-actions__left .cp-clear-filter {
        flex: 1 1 100%;
    }

    .export-bills-summary,
    .export-bills-grid {
        grid-template-columns: 1fr;
    }
}

.cp-page.cp-page--admin {
    width: 100%;
    max-width: none;
    padding-bottom: 72px;
    scroll-margin-top: 24px;
}

.cp-page--admin .cp-create-panel,
.cp-page--admin .cp-recent-panel {
    scroll-margin-top: 24px;
}

.cp-page--admin .cp-recent-panel {
    height: auto;
    min-height: 364px;
    max-height: none;
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow: visible;
}

.cp-page--admin .cp-recent-grid {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: auto !important;
}

.cp-page--admin .cp-recent-grid::-webkit-scrollbar {
    display: none !important;
}

.cp-page--admin .cp-pagination {
    margin-top: 28px;
}

.rx-view-page {
    --rx-detail-height: calc(100dvh - 190px);
    max-width: none;
    gap: 18px;
    padding-bottom: 0;
}

.rx-view-page .rx-view-layout {
    grid-template-columns: minmax(300px, 374px) minmax(0, 1fr);
    gap: 26px;
    height: var(--rx-detail-height);
    max-height: var(--rx-detail-height);
    min-height: 0;
    overflow: hidden;
}

.rx-view-page .rx-view-left {
    width: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 18px;
    padding: 24px 24px 16px;
}

.rx-view-page .rx-view-right {
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 18px;
    overflow: hidden;
}

.rx-view-page .rx-view-summary {
    flex: 0 0 auto;
    min-height: 82px;
}

.rx-view-page .rx-view-prescription-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

.rx-view-page .rx-appointment-list,
.rx-view-page .rx-view-medicine-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
    -ms-overflow-style: auto;
}

.rx-view-page .rx-view-medicine-list {
    flex: 1 1 auto;
    align-content: start;
    margin-top: 22px;
}

.rx-view-page .rx-appointment-list::-webkit-scrollbar,
.rx-view-page .rx-view-medicine-list::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}

.rx-view-page .rx-appointment-list::-webkit-scrollbar-track,
.rx-view-page .rx-view-medicine-list::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
}

.rx-view-page .rx-appointment-list::-webkit-scrollbar-thumb,
.rx-view-page .rx-view-medicine-list::-webkit-scrollbar-thumb {
    min-height: 46px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb);
}

.rx-view-page .rx-appointment-list::-webkit-scrollbar-thumb:hover,
.rx-view-page .rx-view-medicine-list::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong);
}

@media (max-width: 900px) {
    .rx-view-page .rx-view-layout {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .rx-view-page .rx-view-left,
    .rx-view-page .rx-view-right,
    .rx-view-page .rx-view-prescription-card {
        height: auto;
        max-height: none;
    }

    .rx-view-page .rx-appointment-list,
    .rx-view-page .rx-view-medicine-list {
        max-height: 420px;
    }
}

/* ───── Staff Case Paper ───── */

.scp-page {
    position: relative;
}

.scp-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
}

.scp-modal.is-open {
    display: grid;
}

.scp-modal__dialog {
    position: relative;
    width: min(100%, 640px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 18px;
    background: #fff;
    padding: 28px 24px 24px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
    scrollbar-width: thin;
}

.scp-modal__dialog--detail {
    width: min(100%, 690px);
    border-radius: 24px;
    padding: 28px 26px 26px;
}

.scp-modal__dialog--detail .scp-modal__header {
    margin-bottom: 26px;
}

.scp-detail-form {
    display: grid;
}

.scp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.scp-modal__header h2 {
    margin: 0;
    color: #171b22;
    font-size: 20px;
    font-weight: 800;
}

.scp-modal__time {
    color: #5e636a;
    font-size: 14px;
}

.scp-modal__close {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.scp-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 14px;
}

.scp-field {
    display: grid;
    gap: 8px;
}

.scp-field > span {
    color: #6b7078;
    font-size: 12px;
    font-weight: 500;
}

.scp-field--full {
    grid-column: 1 / -1;
}

.scp-control,
.scp-field input[type="text"],
.scp-field input[type="number"],
.scp-field input[type="date"],
.scp-field textarea,
.scp-field select,
.scp-field input[readonly] {
    height: 46px;
    min-width: 0;
    width: 100%;
    border: 1px solid #d8dde4;
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-size: 15px;
    padding: 0 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.scp-control:focus,
.scp-field input:focus,
.scp-field select:focus {
    border-color: #00aeef;
}

.scp-field input[readonly],
.scp-field input:disabled,
.scp-field textarea:disabled {
    background: #fafbfc;
    color: #555a61;
    cursor: default;
    opacity: 1;
}

.scp-modal__dialog--detail .scp-field input:disabled,
.scp-modal__dialog--detail .scp-field textarea:disabled,
.scp-modal__dialog--detail .scp-medicine-tags--disabled {
    background: #fff;
    color: #777;
    border-color: #acacac;
}

.scp-modal__dialog--detail .scp-control:disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.scp-field textarea {
    min-height: 58px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.35;
    resize: none;
    overflow-y: auto;
}

.scp-medicine-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid #d8dde4;
    border-radius: 10px;
    background: #fff;
    padding: 6px 8px;
}

.scp-medicine-select select {
    flex: 1 1 120px;
    min-width: 120px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
    padding: 0 6px;
}

.scp-medicine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scp-medicine-tags--disabled {
    position: relative;
    min-height: 50px;
    align-items: center;
    border: 1px solid #d8dde4;
    border-radius: 10px;
    padding: 8px 44px 8px 16px;
}

.scp-medicine-tags--disabled::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #646464;
    border-bottom: 2px solid #646464;
    transform: translateY(-65%) rotate(45deg);
}

.scp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: #f2f3f5;
    color: #333;
    font-size: 13px;
    white-space: nowrap;
}

.scp-medicine-tags--disabled .scp-tag {
    height: 30px;
    border: 1px solid #e6e8ec;
    background: #fff;
    color: #333;
}

.scp-medicine-tags--disabled .scp-tag--empty {
    color: #777;
}

.scp-save-btn {
    display: block;
    width: auto;
    min-width: 90px;
    height: 42px;
    margin-top: 24px;
    border: 0;
    border-radius: 10px;
    background: #00aeef;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0 28px;
    transition: background 0.15s;
}

.scp-save-btn:hover {
    background: #009bd6;
}

.scp-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.scp-modal__dialog--detail .scp-save-btn {
    height: 52px;
    min-width: 86px;
    margin-top: 30px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    padding: 0 22px;
}

.scp-fab {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 900;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #00aeef;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.35);
    transition:
        transform 0.15s,
        background 0.15s;
}

.scp-fab:hover {
    background: #009bd6;
    transform: scale(1.08);
}

@media (max-width: 760px) {
    .scp-form-grid {
        grid-template-columns: 1fr;
    }

    .scp-field--full {
        grid-column: 1;
    }

    .scp-modal__dialog {
        padding: 20px 16px;
    }

    .scp-fab {
        right: 20px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Final UI polish: themed page scrollbars and hidden dropdown scrollbars. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:single-button:vertical:decrement,
*::-webkit-scrollbar-button:single-button:vertical:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none;
    appearance: none;
    color: transparent !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    content: none !important;
}

*::-webkit-scrollbar-corner {
    background: transparent !important;
}

.admin-shell {
    --admin-scroll-thumb: rgba(0, 174, 239, 0.56);
    --admin-scroll-thumb-strong: rgba(0, 174, 239, 0.82);
    --admin-scroll-track: rgba(0, 174, 239, 0.08);
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track);
}

.setup-doctor-left,
.pp-modern-remark-history,
.scp-modal__dialog,
.admin-shell:has(.ap-page) .content,
.admin-shell:has(.cp-page--admin) .content,
.ap-page .ap-calendar-card,
.ap-page .calendar-card {
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
    -ms-overflow-style: auto !important;
}

.setup-doctor-left::-webkit-scrollbar,
.pp-modern-remark-history::-webkit-scrollbar,
.scp-modal__dialog::-webkit-scrollbar,
.admin-shell:has(.ap-page) .content::-webkit-scrollbar,
.admin-shell:has(.cp-page--admin) .content::-webkit-scrollbar,
.ap-page .ap-calendar-card::-webkit-scrollbar,
.ap-page .calendar-card::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

.setup-doctor-left::-webkit-scrollbar-track,
.pp-modern-remark-history::-webkit-scrollbar-track,
.scp-modal__dialog::-webkit-scrollbar-track,
.admin-shell:has(.ap-page) .content::-webkit-scrollbar-track,
.admin-shell:has(.cp-page--admin) .content::-webkit-scrollbar-track,
.ap-page .ap-calendar-card::-webkit-scrollbar-track,
.ap-page .calendar-card::-webkit-scrollbar-track {
    background: var(--admin-scroll-track) !important;
    border-radius: 999px;
    margin-block: 12px;
}

.setup-doctor-left::-webkit-scrollbar-thumb,
.pp-modern-remark-history::-webkit-scrollbar-thumb,
.scp-modal__dialog::-webkit-scrollbar-thumb,
.admin-shell:has(.ap-page) .content::-webkit-scrollbar-thumb,
.admin-shell:has(.cp-page--admin) .content::-webkit-scrollbar-thumb,
.ap-page .ap-calendar-card::-webkit-scrollbar-thumb,
.ap-page .calendar-card::-webkit-scrollbar-thumb {
    min-height: 46px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--admin-scroll-thumb) !important;
}

.setup-doctor-left::-webkit-scrollbar-thumb:hover,
.pp-modern-remark-history::-webkit-scrollbar-thumb:hover,
.scp-modal__dialog::-webkit-scrollbar-thumb:hover,
.admin-shell:has(.ap-page) .content::-webkit-scrollbar-thumb:hover,
.admin-shell:has(.cp-page--admin) .content::-webkit-scrollbar-thumb:hover,
.ap-page .ap-calendar-card::-webkit-scrollbar-thumb:hover,
.ap-page .calendar-card::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong) !important;
}

.pp-dd__btn img,
.ap-datepick__btn img,
.report-filter__btn img,
.pt-sort__btn img,
.cp-medicine-select::after,
.staff-form select.setup-control,
select.setup-control,
select.bill-control,
.ap-modal__panel select.ap-control,
.cp-page--admin select.cp-control {
    --admin-dropdown-chevron-size: 24px;
}

.pp-dd__btn img,
.ap-datepick__btn img,
.report-filter__btn img,
.pt-sort__btn img {
    width: var(--admin-dropdown-chevron-size) !important;
    height: var(--admin-dropdown-chevron-size) !important;
    flex: 0 0 var(--admin-dropdown-chevron-size);
}

select.setup-control,
select.bill-control,
.ap-modal__panel select.ap-control,
.cp-page--admin select.cp-control,
.staff-form select.setup-control {
    background-size: var(--admin-dropdown-chevron-size)
        var(--admin-dropdown-chevron-size) !important;
}

.admin-tooltip-anchor {
    position: relative;
}

button[data-admin-tooltip]::before,
a[data-admin-tooltip]::before,
button[data-admin-tooltip]::after,
a[data-admin-tooltip]::after {
    position: absolute;
    left: 50%;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

button[data-admin-tooltip]::before,
a[data-admin-tooltip]::before {
    content: "";
    top: calc(100% + 4px);
    transform: translateX(-50%) translateY(-4px);
    border: 6px solid transparent;
    border-bottom-color: #111827;
}

button[data-admin-tooltip]::after,
a[data-admin-tooltip]::after {
    content: attr(data-admin-tooltip);
    top: calc(100% + 13px);
    background: black !important;
    color: white !important;
    min-width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    transform: translateX(-50%) translateY(-4px);
}

button[data-admin-tooltip]:hover::before,
a[data-admin-tooltip]:hover::before,
button[data-admin-tooltip]:focus-visible::before,
a[data-admin-tooltip]:focus-visible::before,
button[data-admin-tooltip]:hover::after,
a[data-admin-tooltip]:hover::after,
button[data-admin-tooltip]:focus-visible::after,
a[data-admin-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

:is(
    .modern-time__menu,
    .adm-select__menu,
    .pp-dd__pop,
    .pt-sort__menu,
    .ap-dd__pop,
    .report-filter__menu,
    .bill-filter__menu,
    .cp-medicine-menu,
    .cp-page--admin .cp-price-menu
) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

:is(
    .modern-time__menu,
    .adm-select__menu,
    .pp-dd__pop,
    .pt-sort__menu,
    .ap-dd__pop,
    .report-filter__menu,
    .bill-filter__menu,
    .cp-medicine-menu,
    .cp-page--admin .cp-price-menu
)::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.setup-detail-grid {
    align-items: stretch;
}

.setup-doctor-left {
    gap: 30px;
    padding-right: 12px;
    padding-bottom: 2px;
}

.setup-doctor-left .setup-detail-card {
    flex: 0 0 auto;
}

.setup-clinic-doctors-card {
    min-height: 0;
}

.setup-clinic-doctors-card .setup-doctor-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px;
    padding-bottom: 8px;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track) !important;
}

.setup-map {
    height: clamp(220px, 30vh, 300px);
}


@media (min-width: 1181px) {
    .setup-doctor-profile .setup-detail-card:not(.setup-doctor-profile-card):not(.setup-appointments-card) {
        display: flex;
        flex-direction: column;
        min-height: 700px;
        height: 700px;
    }

    .setup-doctor-profile .setup-detail-card:not(.setup-doctor-profile-card):not(.setup-appointments-card) > h2,
    .setup-doctor-profile .setup-detail-card:not(.setup-doctor-profile-card):not(.setup-appointments-card) > p {
        flex-shrink: 0;
    }

    .setup-doctor-profile .setup-map {
        flex: 1;
        width: 100%;
        margin-top: 16px;
        min-height: 0;
        height: 100%;
    }

    .setup-doctor-profile .setup-map iframe {
        height: 100%;
        width: 100%;
        border: none;
        display: block;
    }

    .setup-doctor-profile .setup-map__fallback {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 1180px) and (min-width: 900px) {
    .setup-doctor-profile .setup-detail-card:not(.setup-doctor-profile-card):not(.setup-appointments-card) {
        display: flex;
        flex-direction: column;
        min-height: 400px;
        height: auto;
    }

    .setup-doctor-profile .setup-map {
        flex: 1;
        width: 100%;
        margin-top: 16px;
        min-height: 250px;
        height: auto;
    }

    .setup-doctor-profile .setup-map iframe {
        height: 100%;
        width: 100%;
        border: none;
        display: block;
        min-height: 250px;
    }
}

@media (max-width: 899px) {
    .setup-doctor-profile .setup-detail-card:not(.setup-doctor-profile-card):not(.setup-appointments-card) {
        display: flex;
        flex-direction: column;
        min-height: 350px;
        height: auto;
    }

    .setup-doctor-profile .setup-map {
        flex: 1;
        width: 100%;
        margin-top: 16px;
        min-height: 200px;
        height: auto;
    }

    .setup-doctor-profile .setup-map iframe {
        height: 100%;
        width: 100%;
        border: none;
        display: block;
        min-height: 200px;
    }
}

.pp-notes-delete-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(215, 63, 63, 0.18);
    display: grid;
    place-items: center;
    background: rgba(215, 63, 63, 0.1);
    cursor: pointer;
    padding: 0;
    color: var(--red);
    transition: all 0.2s ease;
}

.pp-notes-delete-btn:hover {
    background: rgba(215, 63, 63, 0.2);
    border-color: rgba(215, 63, 63, 0.3);
}

.pp-notes-delete-btn img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.pp-modern-remark-wrap,
.pp-modern-notes-history article {
    position: relative;
}

.pp-modern-remark-wrap > form {
    position: absolute;
    margin: 0;
}

.pp-modern-remark-wrap > form {
    top: 18px;
    right: 16px;
}

.pp-modern-remark-wrap > form .pp-modern-delete {
    position: static;
}

.pp-modern-remark-wrap .pp-modern-remark-card {
    padding-right: 96px;
}

.pp-modern-remark-card-actions {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-modern-remark-card-actions form {
    margin: 0;
}

.pp-modern-notes-history {
    width: 100%;
    max-width: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.pp-modern-notes-history::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.pp-modern-notes-history article {
    min-width: 0;
    display: grid;
    /* grid-template-columns: minmax(0, 1fr) 28px; */
    align-items: start;
    gap: 10px 16px;
    padding-right: 0;
}

.pp-modern-notes-history article > form {
    grid-column: 2;
    grid-row: 1;
    width: 28px;
    height: 28px;
    margin: 0;
    align-self: center;
}

.pp-modern-notes-history article > p {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.pp-modern-notes-history article > div {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.pp-modern-notes-history .pp-modern-delete {
    position: static;
}

/* Delete button tooltip in Notes - positioned to the right */
.pp-modern-notes-history article > form .pp-modern-delete[data-admin-tooltip] {
    position: relative;
}

.pp-modern-notes-history article > form .pp-modern-delete[data-admin-tooltip]::before {
    display: none !important;
}

.pp-modern-notes-history article > form .pp-modern-delete[data-admin-tooltip]::after {
    content: attr(data-admin-tooltip) !important;
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #111827 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
    line-height: 1.2 !important;
    text-align: center !important;
    min-width: max-content !important;
}

.pp-modern-notes-history article > form .pp-modern-delete[data-admin-tooltip]:hover::after,
.pp-modern-notes-history article > form .pp-modern-delete[data-admin-tooltip]:focus-visible::after {
    opacity: 1 !important;
}

.pp-modern-remark-add {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    border: 1px solid rgba(0, 174, 239, 0.18);
    border-radius: 8px;
    background: rgba(0, 174, 239, 0.09);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.pp-modern-remark-add:hover {
    border-color: rgba(0, 174, 239, 0.32);
    background: rgba(0, 174, 239, 0.14);
}

@media (max-width: 640px) {
    .pp-modal.is-open {
        padding: 12px;
    }

    .pp-modal__panel--md {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        padding: 18px;
    }

    .pp-modern-notes-history {
        max-height: calc(100dvh - 132px);
    }

    .pp-modern-notes-history article {
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 8px 10px;
    }

    .pp-modern-notes-history div {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Treatment List Modal ──────────────────────────────────────────────────── */

.pp-treatment-list-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    overflow: hidden;
    max-height: calc(100vh - 80px);
}

.pp-treatment-list-panel .ap-modal__head {
    flex-shrink: 0;
    margin-bottom: 14px;
}

/* Date filter row */
.pp-tl-filter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 14px;
    border-bottom: 1px solid #eaeaea;
    flex-wrap: wrap;
}

.pp-tl-filter__label {
    color: #646464;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pp-tl-filter__input {
    height: 36px;
    border: 1px solid #d6e4f0;
    border-radius: 8px;
    background: #f5fbff;
    color: #111;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pp-tl-filter__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.pp-tl-filter__clear {
    height: 36px;
    border: 1px solid rgba(0, 174, 239, 0.3);
    border-radius: 8px;
    background: rgba(0, 174, 239, 0.06);
    color: var(--primary);
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pp-tl-filter__clear:hover {
    background: rgba(0, 174, 239, 0.14);
}

/* Scrollable list */
.pp-tl-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    gap: 14px;
    padding: 16px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #eff7fc;
}

.pp-tl-list::-webkit-scrollbar {
    width: 5px;
}

.pp-tl-list::-webkit-scrollbar-track {
    background: #eff7fc;
    border-radius: 999px;
}

.pp-tl-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 999px;
}

/* Treatment card */
.pp-tl-card {
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 16px 18px 14px;
    display: grid;
    gap: 10px;
    background: #fff;
    position: relative;
}

/* Card top row: name + status badge */
.pp-tl-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pp-tl-card__name {
    color: #111;
    font-size: 16px;
    font-weight: 700;
}

/* Status badges */
.pp-tl-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pp-tl-badge--ongoing {
    border: 1px solid #ffd899;
    background: #fff7e8;
    color: #b07300;
}

.pp-tl-badge--pending {
    border: 1px solid #ffc9c9;
    background: #fff0f0;
    color: #b42323;
}

.pp-tl-badge--completed {
    border: 1px solid #9df3aa;
    background: #eaffed;
    color: #1a7a2e;
}

/* Meta row: doctor, location, date */
.pp-tl-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: #646464;
    font-size: 12px;
}

.pp-tl-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pp-tl-card__meta img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* View details button */
.pp-tl-card__view {
    width: fit-content;
    height: 34px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 0 16px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.pp-tl-card__view:hover {
    background: #f5fbff;
    border-color: var(--primary);
    color: var(--primary);
}

/* Empty state */
.pp-tl-empty {
    padding: 32px 0;
    text-align: center;
    color: #9a9a9a;
    font-size: 14px;
}

.pp-record-list-panel {
    width: min(880px, calc(100vw - 32px));
}

.pp-record-card {
    gap: 12px;
}

.pp-record-card__id {
    flex-shrink: 0;
    color: #7b7b7b;
    font-size: 12px;
    font-weight: 600;
}

.pp-record-details {
    display: grid;
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
}

.pp-record-details__title {
    color: #222222;
    font-size: 13px;
    font-weight: 700;
}

.pp-record-details__empty {
    color: #8a8a8a;
    font-size: 12px;
}

.pp-record-medicine {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(5, minmax(72px, 1fr));
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f8fbfd;
    color: #626262;
    font-size: 11px;
}

.pp-record-medicine strong {
    color: #222222;
    font-size: 12px;
}

.pp-record-medicine em {
    grid-column: 1 / -1;
    color: #6a6a6a;
    font-style: normal;
}

.pp-record-bill-table {
    overflow: hidden;
    border: 1px solid #e8eef2;
    border-radius: 10px;
}

.pp-record-bill-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 0.35fr) minmax(95px, 0.35fr);
    gap: 12px;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    color: #626262;
    font-size: 12px;
}

.pp-record-bill-row + .pp-record-bill-row {
    border-top: 1px solid #edf1f4;
}

.pp-record-bill-row--head {
    min-height: 32px;
    background: #f5fbff;
    color: #444444;
    font-weight: 600;
}

.pp-record-bill-row > span {
    min-width: 0;
}

.pp-record-bill-row > span:last-child {
    text-align: right;
}

.pp-record-bill-row strong,
.pp-record-bill-row em {
    display: block;
}

.pp-record-bill-row strong {
    color: #222222;
}

.pp-record-bill-row em {
    margin-top: 2px;
    color: #858585;
    font-size: 11px;
    font-style: normal;
}

.pp-record-bill-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pp-record-bill-summary > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fafafa;
    color: #666666;
    font-size: 11px;
}

.pp-record-bill-summary strong {
    color: #222222;
    white-space: nowrap;
}

.pp-record-bill-summary .is-green,
.pp-record-logs .is-green {
    color: #16833b;
}

.pp-record-bill-summary .is-red,
.pp-record-logs .is-red {
    color: #c73535;
}

.pp-record-note {
    margin: 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: #fff9ed;
    color: #646464;
    font-size: 12px;
}

.pp-record-logs {
    display: grid;
    gap: 7px;
}

.pp-record-logs > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-left: 3px solid rgba(0, 174, 239, 0.45);
    border-radius: 0 8px 8px 0;
    background: #f8fbfd;
    color: #555555;
    font-size: 11px;
}

.pp-record-logs > span em {
    color: #858585;
    font-style: normal;
}

@media (max-width: 540px) {
    .pp-tl-filter {
        gap: 8px;
    }
    .pp-tl-filter__input {
        flex: 1 1 120px;
    }
    .pp-tl-card__meta {
        gap: 10px;
    }
    .pp-record-medicine {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pp-record-medicine strong,
    .pp-record-medicine em {
        grid-column: 1 / -1;
    }
    .pp-record-bill-summary {
        grid-template-columns: 1fr;
    }
    .pp-record-logs > span {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .pp-record-logs > span em {
        grid-column: 1 / -1;
    }
}

/* ============================================================
 *  Appointment page Month navigation header
 * ============================================================ */
.ap-head-month {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-datepick--jump {
    position: relative;
    flex: 0 0 auto;
}

.ap-datepick-jump__btn {
    margin-top: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    cursor: pointer;
    color: var(--black);
}

.ap-datepick-jump__btn img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.68;
}

.ap-datepick--jump .ap-datepick__pop {
    left: 0;
    top: calc(100% + 12px);
}

.ap-datepick--jump .ap-datepick__day.is-disabled,
.ap-datepick--jump .ap-datepick__day:disabled {
    color: var(--black);
    background: var(--white);
    cursor: pointer;
    opacity: 1;
}

.ap-month-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ap-month-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--stroke);
    background: var(--white);
    color: #555;
    text-decoration: none;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.ap-month-nav__btn:hover {
    background: #f0f9ff;
    border-color: #a8d8ef;
    color: var(--primary);
}

/* ============================================================
 *  Appointment Week View
 * ============================================================ */

/* OUTER box — rounded, with padding so the inner box floats inside it */
.ap-week-card {
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    overflow-y: visible;
    /* hide scrollbar but keep scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.ap-week-card::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.ap-week-legend {
    padding: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 780px;
}

/* INNER box — the calendar-grid table keeps its own border-radius: 12px
   (from calendar-grid base class). We just allow it to scroll inside. */
.ap-week-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 640px;
    border-radius: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ap-week-wrap::-webkit-scrollbar {
    display: none;
}

/* Do NOT strip calendar-grid border/radius — that IS the inner box */
.ap-week-table {
    min-width: 780px;
    width: 100%;
}

/* Sticky header */
.ap-week-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* GMT+5 cell — centered */
.ap-week-table .calendar-tz {
    text-align: center;
    vertical-align: middle;
}

/* Body cells */
.ap-week-cell {
    position: relative;
    vertical-align: top;
    padding: 4px 5px;
    /* Side-by-side layout when multiple appointments share the same slot */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}

/* Appointment button — reuses .appt from dashboard */
.ap-week-cell .appt {
    display: flex;
    flex-direction: column;
    border: none;
    text-align: left;
    cursor: pointer;
    min-height: unset;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Each appointment takes an equal share of the available width */
    flex: 1 1 0;
    min-width: 0;
}

/* Remove border from appointment buttons in Week and Day views */
.calendar-card button.appt,
.dashboard-calendar button.appt {
    border: none !important;
}

/* ============================================================
 *  Hover popup — opens to the RIGHT
 * ============================================================ */
.ap-week-cell .appt-wrap {
    position: relative;
    /* Grow/shrink alongside .appt so wrappers also share space equally */
    flex: 1 1 0;
    min-width: 0;
}

.ap-week-cell .dash-appt-pop {
    top: 0;
    left: calc(100% + 8px);
    right: auto;
    transform: translateY(0) scale(0.98);
    width: 220px;
    border-radius: 14px;
    padding: 14px;
}

/* For last column (Saturday) in week view, flip tooltip to left */
.calendar-grid--week tbody tr td:last-child .dash-appt-pop {
    left: auto;
    right: calc(50% + 8px);
}

/* For last row in week view, show tooltip above the element */
.calendar-grid--week tbody tr:last-child .dash-appt-pop {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) scale(0.98);
}

/* Update transform for last row on hover */
.calendar-grid--week tbody tr:last-child .appt-wrap:hover .dash-appt-pop,
.calendar-grid--week tbody tr:last-child .appt-wrap:focus-within .dash-appt-pop {
    transform: translateX(-50%) scale(1);
}

/* Day view: base rule - tooltips appear on right side */
[data-ap-calendar="day"] {
    overflow: hidden !important;
}

[data-ap-calendar="day"] .calendar-grid--week {
    overflow: visible !important;
}

[data-ap-calendar="day"] .calendar-grid--week tbody {
    overflow: visible !important;
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr td {
    overflow: visible !important;
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr td .dash-appt-pop {
    top: 50%;
    left: calc(100% + 8px) !important;
    right: auto !important;
    transform: translate(0, -50%) scale(0.98);
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr td .appt-wrap:hover .dash-appt-pop,
[data-ap-calendar="day"] .calendar-grid--week tbody tr td .appt-wrap:focus-within .dash-appt-pop {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

/* Day view: last two boxes in each visual row show tooltip on left (via JavaScript class) */
[data-ap-calendar="day"] .calendar-grid--week tbody tr td .ap-badges > .appt-wrap.tooltip-left .dash-appt-pop {
    left: auto !important;
    right: calc(100% + 8px) !important;
    transform: translate(0, -50%) scale(0.98);
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr td .ap-badges > .appt-wrap.tooltip-left:hover .dash-appt-pop,
[data-ap-calendar="day"] .calendar-grid--week tbody tr td .ap-badges > .appt-wrap.tooltip-left:focus-within .dash-appt-pop {
    transform: translate(0, -50%) scale(1);
}

/* Day view: last row - keep same vertical position (centered) */
[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .dash-appt-pop {
    top: 50%;
    bottom: auto;
    left: calc(100% + 8px) !important;
    right: auto !important;
    transform: translate(0, -50%) scale(0.98);
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .appt-wrap:hover .dash-appt-pop,
[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .appt-wrap:focus-within .dash-appt-pop {
    transform: translate(0, -50%) scale(1);
}

/* Day view: last row + last two columns (tooltip-left) - show tooltip on left */
[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .ap-badges > .appt-wrap.tooltip-left .dash-appt-pop {
    left: auto !important;
    right: calc(100% + 8px) !important;
    transform: translate(0, -50%) scale(0.98);
}

[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .ap-badges > .appt-wrap.tooltip-left:hover .dash-appt-pop,
[data-ap-calendar="day"] .calendar-grid--week tbody tr:last-child .ap-badges > .appt-wrap.tooltip-left:focus-within .dash-appt-pop {
    transform: translate(0, -50%) scale(1);
}

.ap-week-cell .appt-wrap:hover .dash-appt-pop {
    opacity: 1;
    transform: scale(1);
}

/* Day view: tooltip-above class for overflow detection - show tooltip above */
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above .dash-appt-pop {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(0, 0) scale(0.98);
}

[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above:hover .dash-appt-pop,
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above:focus-within .dash-appt-pop {
    transform: translate(0, 0) scale(1);
}

/* Day view: tooltip-above + tooltip-left combination */
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above.tooltip-left .dash-appt-pop {
    left: auto !important;
    right: calc(100% + 8px) !important;
}

.dash-appt-pop.is-dynamic-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    transform: scale(0.98) !important;
    z-index: 2147483000 !important;
}

.dash-appt-pop.is-dynamic-tooltip.is-tooltip-visible,
.appt-wrap:hover .dash-appt-pop.is-dynamic-tooltip,
.appt-wrap:focus-within .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .calendar-grid--week tbody tr td .appt-wrap:hover .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .calendar-grid--week tbody tr td .appt-wrap:focus-within .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-left:hover .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-left:focus-within .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above:hover .dash-appt-pop.is-dynamic-tooltip,
[data-ap-calendar="day"] .ap-badges > .appt-wrap.tooltip-above:focus-within .dash-appt-pop.is-dynamic-tooltip {
    opacity: 1;
    transform: scale(1) !important;
}

/* ============================================================
 *  Legend dot colors for all doctor color variants
 * ============================================================ */
.legend-dot--yellow {
    background: rgba(255, 237, 180, 0.85);
}
.legend-dot--red {
    background: rgba(240, 200, 200, 0.85);
}
.legend-dot--blue {
    background: rgba(200, 220, 240, 0.85);
}
.legend-dot--purple {
    background: rgba(220, 210, 235, 0.85);
}
.legend-dot--cyan {
    background: rgba(200, 240, 240, 0.85);
}

/* ============================================================
 *  Bill module completion: actions, invoice details, print
 * ============================================================ */
.bill-card-actions,
.bill-detail-actions,
.bill-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bill-card-actions {
    margin-top: 14px;
}

.bill-detail-actions {
    justify-content: flex-end;
    margin-bottom: 18px;
}

.bill-card-actions form,
.bill-detail-actions form {
    margin: 0;
}

.bill-danger-btn,
.bill-row-remove {
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.bill-danger-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    color: #e11d48;
    background: #fff1f2;
}

.bill-row-remove {
    align-self: end;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(215, 63, 63, 0.18);
    border-radius: 7px;
    color: var(--red);
    background: rgba(215, 63, 63, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.bill-row-remove img {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.bill-row-remove span {
    color: inherit;
}

.bill-row-remove:hover {
    background: rgba(215, 63, 63, 0.14);
}

.bill-edit-patient {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
}

.bill-side-note {
    margin: 12px 4px 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.bill-invoice-head,
.bill-invoice-patient,
.bill-status-form {
    display: grid;
    gap: 16px;
}

.bill-invoice-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.bill-invoice-brand {
    display: flex;
    gap: 16px;
    min-width: 0;
}

.bill-invoice-brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 58px;
}

.bill-invoice-brand h2 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
}

.bill-invoice-brand p,
.bill-invoice-meta span,
.bill-invoice-patient p,
.bill-terms p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.bill-invoice-meta {
    display: grid;
    justify-items: end;
    gap: 8px;
    text-align: right;
}

.bill-invoice-meta strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.bill-invoice-patient {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
}

.bill-invoice-patient > div {
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.bill-invoice-patient span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.bill-invoice-patient strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.bill-status-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 18px;
}

.bill-terms {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.bill-terms strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 13px;
}

@media (max-width: 760px) {
    .bill-invoice-head,
    .bill-invoice-patient,
    .bill-status-form {
        grid-template-columns: 1fr;
    }

    .bill-invoice-meta {
        justify-items: start;
        text-align: left;
    }
}

@media print {
    .sidebar,
    .navbar,
    .bill-crumb,
    .bill-detail-actions,
    .bill-no-print,
    .bill-modal {
        display: none !important;
    }

    .main-wrapper,
    .content,
    .bill-page {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .bill-detail-layout {
        display: block !important;
    }

    .bill-print-area {
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
    }
}

/* ── Patient Treatment: Notes input row with Add New button ─────────────── */
.pp-notes-input-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pp-notes-dd-wrap {
    flex: 0 0 260px;
    width: 260px;
    position: relative;
}

.pp-notes-dd-wrap .pp-dd {
    width: 100%;
}

.pp-add-note-btn {
    height: 56px;
    padding: 0 22px;
    border-radius: 16px;
    background: #00aeef;
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-width: 110px;
    flex-shrink: 0;
}

.pp-add-note-btn:hover {
    background: #0099d4;
}

.pp-add-note-btn:disabled {
    background: var(--disabled);
    color: var(--white);
    cursor: not-allowed;
}

/* Child teeth grid: 11 items (A–K) */
.pp-teeth-grid--child {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

/* Laboratory user portal - scoped to avoid admin laboratory module collisions. */
.lab-shell {
    --lab-sidebar-width: 270px;
    background: #fbfbfb;
}

.lab-shell .main-wrapper {
    margin-left: var(--lab-sidebar-width);
}

.lab-shell .sidebar {
    width: var(--lab-sidebar-width);
    padding: 20px 14px;
    border-right: 1px solid #e8e8e8;
    background: #ffffff;
}

.lab-shell .content {
    margin-top: 88px;
    height: calc(100vh - 88px);
    padding: 12px 24px 28px;
    background: #fbfbfb;
}

.lab-shell .navbar {
    height: 88px;
    left: var(--lab-sidebar-width);
    padding: 0 24px;
    border-bottom: 0;
    background: #fbfbfb;
}

.lab-shell .logo {
    height: 78px;
    margin-bottom: 24px;
    padding: 0 8px;
    align-items: flex-start;
}

.lab-shell .logo-img {
    height: 58px;
    width: auto;
}

.lab-shell .sidebar-menu {
    height: auto;
}

.lab-shell .menu-item {
    width: 242px;
    height: 53px;
    gap: 14px;
    margin-bottom: 0;
    padding: 0 14px;
    border-radius: 9px;
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
}

.lab-shell .menu-item.active {
    background: #eef5ff;
    color: var(--primary);
}

.lab-shell .menu-icon,
.lab-shell .menu-icon img {
    width: 20px;
    height: 20px;
}

.lab-shell .top-action--ghost {
    min-width: 136px;
    height: 40px;
    justify-content: center;
    gap: 14px;
    border: 1px solid #e1e1e1;
    border-radius: 9px;
    background: #ffffff;
    color: #666666;
    font-size: 17px;
    font-weight: 500;
    box-shadow: none;
}

.lab-shell .top-action--ghost img {
    width: 20px;
    height: 20px;
}

.lab-shell .navbar-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

.lab-shell .lab-portal-page {
    display: grid;
    gap: 25px;
    width: 100%;
    max-width: 1122px;
    margin: 0 auto;
}

.lab-shell .lab-dashboard-page {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 24px;
    max-width: 1122px;
    height: 100%;
    min-height: 0;
}

.lab-shell .lab-dashboard-page .lab-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.lab-shell .lab-stat-card,
.lab-shell .lab-orders-panel,
.lab-shell .lab-detail-summary,
.lab-shell .lab-detail-card {
    border-color: rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.lab-shell .lab-stat-card {
    position: relative;
    min-height: 120px;
    height: 120px;
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-rows: auto auto;
    gap: 0 18px;
    align-content: center;
    align-items: center;
    padding: 26px 30px 24px 24px;
    border-radius: 20px;
    overflow: hidden;
}

.lab-shell .lab-stat-card img {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 47px;
    height: 47px;
    justify-self: end;
    align-self: center;
    opacity: 0.38;
}

.lab-shell .lab-stat-card strong {
    grid-column: 1;
    grid-row: 1;
    color: var(--primary);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}

.lab-shell .lab-stat-card span {
    grid-column: 1;
    grid-row: 2;
    margin-top: 14px;
    color: #626262;
    font-size: 16px;
    line-height: 1.2;
}

.lab-shell .lab-stat-card--pending::after,
.lab-shell .lab-stat-card--completed::after {
    content: "";
    position: absolute;
    right: 27px;
    top: 60px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #8fdcf7;
    box-shadow: 0 0 0 3px #ffffff;
}

.lab-shell .lab-stat-card--pending::before {
    content: "";
    position: absolute;
    right: 35px;
    top: 66px;
    z-index: 1;
    width: 6px;
    height: 10px;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

.lab-shell .lab-stat-card--completed::before {
    content: "";
    position: absolute;
    right: 33px;
    top: 66px;
    z-index: 1;
    width: 10px;
    height: 6px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.lab-shell .lab-orders-panel {
    min-height: 0;
    gap: 24px;
    padding: 30px 30px 29px;
    border-radius: 20px;
    overflow: hidden;
}

.lab-shell .lab-order-tile,
.lab-shell .lab-detail-card,
.lab-shell .lab-detail-summary {
    border-radius: 18px;
}

.lab-shell .lab-order-tile {
    position: relative;
    min-height: 140px;
    align-content: start;
    gap: 15px;
    padding: 20px 20px;
    border-radius: 17px;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.lab-shell .lab-orders-panel__head h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

.lab-shell .ar-sort-button {
    width: 110px;
    height: 46px;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #efefef;
    font-size: 20px;
    font-weight: 500;
}

.lab-shell .ar-sort-button img {
    width: 24px;
    height: 24px;
}

.lab-shell .lab-dashboard-sort {
    position: relative;
    flex: 0 0 auto;
}

.lab-shell .lab-dashboard-sort__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 230px;
    display: none;
    gap: 2px;
    padding: 6px;
    border: 1px solid #d9e1e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(31, 35, 41, 0.14);
}

.lab-shell .lab-dashboard-sort.is-open .lab-dashboard-sort__menu {
    display: grid;
}

.lab-shell .lab-dashboard-sort__menu a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border-radius: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.lab-shell .lab-dashboard-sort__menu a:hover,
.lab-shell .lab-dashboard-sort__menu a:focus-visible {
    background: #e8f7fd;
    color: #1f2329;
    outline: none;
}

.lab-shell .lab-dashboard-sort__menu a.is-active {
    background: rgba(0, 174, 239, 0.12);
    color: #00aeef;
    font-weight: 700;
}

.lab-shell .lab-order-grid {
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: #00aeef #eff7fc;
}

.lab-shell .lab-order-grid::-webkit-scrollbar {
    width: 7px;
}

.lab-shell .lab-order-grid::-webkit-scrollbar-track {
    background: #eff7fc;
    border-radius: 999px;
}

.lab-shell .lab-order-grid::-webkit-scrollbar-thumb {
    background: #00aeef;
    border-radius: 999px;
}

.lab-shell .lab-order-tile h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.lab-shell .lab-order-tile__meta,
.lab-shell .lab-order-tile__meta span {
    color: #666666;
    font-size: 12px;
}

.lab-shell .lab-order-tile__meta img {
    width: 14px;
    height: 14px;
}

.lab-shell .lab-order-tile__bottom {
    margin-top: 5px;
    gap: 16px;
    font-size: 15px;
}

.lab-shell .lab-order-tile__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.lab-shell .lab-order-tile__actions form {
    margin: 0;
}

.lab-shell .lab-order-tile__bottom a {
    min-width: 112px;
    height: 32px;
    background: #efefef;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
}

.lab-shell .lab-order-tile__actions button {
    min-width: 76px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.lab-shell .lab-order-tile__actions button:hover {
    background: #0099d4;
}

.lab-shell .lab-order-status {
    position: absolute;
    top: 20px;
    right: 19px;
    min-width: 67px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.lab-shell .lab-order-status--accepted {
    border: 1px solid #cce8ff;
    background: #eaf6ff;
    color: #009cf7;
}

.lab-shell .lab-order-status--dispatched {
    border: 1px solid #bff8bc;
    background: #e8ffe8;
    color: #2fc72d;
}

.lab-shell .lab-order-tile__bottom a:hover,
.lab-shell .ar-sort-button:hover {
    background: #e8f7fd;
}

.lab-shell .lab-portal-pagination {
    gap: 14px;
    padding-top: 17px;
}

.lab-shell .lab-dashboard-pagination-row {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 17px;
}

.lab-shell .lab-dashboard-pagination-row .lab-portal-pagination {
    margin-top: 0;
    padding-top: 0;
}

.lab-shell .ar-page-number.is-active {
    background: #ffffff;
}

.lab-shell .ar-page-button,
.lab-shell .ar-page-number,
.lab-shell .ar-page-ellipsis {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 400;
}

.lab-shell .ar-page-button img {
    width: 18px;
    height: 18px;
}

.lab-shell .ar-breadcrumb {
    margin-top: -2px;
    margin-bottom: 6px;
    gap: 14px;
    color: #888888;
    font-size: 16px;
}

.lab-shell .ar-breadcrumb span[aria-hidden="true"] {
    color: #8a8a8a;
    font-size: 18px;
}

.lab-shell .lab-detail-summary {
    min-height: 105px;
    grid-template-columns:
        80px minmax(230px, 1.45fr) minmax(110px, 0.65fr)
        minmax(150px, 0.9fr) 70px 125px 72px;
    gap: 28px;
    align-items: center;
    padding: 28px 30px;
    border-radius: 17px;
}

.lab-shell .lab-detail-summary div,
.lab-shell .lab-detail-card div {
    gap: 9px;
}

.lab-shell .lab-detail-summary strong,
.lab-shell .lab-detail-card strong {
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.lab-shell .lab-detail-summary span,
.lab-shell .lab-detail-card span,
.lab-shell .lab-detail-card p {
    color: #686868;
    font-size: 14px;
    line-height: 1.3;
}

.lab-shell .lab-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 548px));
    gap: 24px;
}

.lab-shell .lab-detail-two {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.lab-shell .lab-detail-card {
    display: grid;
    min-height: 179px;
    align-content: start;
    gap: 25px;
    padding: 30px;
    border-radius: 17px;
}

.lab-shell .lab-detail-card h2 {
    font-size: 16px;
    font-weight: 500;
}

.lab-shell .lab-status-card {
    min-height: 187px;
}

.lab-shell .lab-clinic-card {
    min-height: 202px;
    gap: 10px;
}

.lab-shell .lab-clinic-card p + strong,
.lab-shell .lab-clinic-card span + p {
    margin-top: 14px;
}

.lab-shell .lab-status-form {
    gap: 27px;
}

.lab-shell .lab-status-form label {
    gap: 13px;
    color: #111111;
    font-size: 14px;
}

.lab-shell .lab-status-form input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.lab-shell .lab-status-form button {
    height: 33px;
    padding: 0 17px;
    border-radius: 7px;
    border: 0;
    background: var(--primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .lab-shell {
        --lab-sidebar-width: 236px;
    }

    .lab-shell .sidebar {
        padding-inline: 12px;
    }

    .lab-shell .menu-item {
        width: 212px;
    }

    .lab-shell .content {
        padding-top: 0;
        padding-inline: 18px;
    }

    .lab-shell .lab-portal-page,
    .lab-shell .lab-dashboard-page {
        max-width: none;
    }

    .lab-shell .lab-dashboard-page .lab-stat-grid,
    .lab-shell .lab-order-grid {
        gap: 18px;
    }

    .lab-shell .lab-orders-panel {
        padding: 24px;
    }
}

@media (max-width: 900px) {
    .admin-shell.lab-shell {
        overflow: hidden;
    }

    .lab-shell .sidebar {
        width: min(286px, 86vw);
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px 14px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 0;
        z-index: 1200;
    }

    .lab-shell .logo {
        height: 78px;
        margin-bottom: 24px;
        padding: 0 8px;
        flex: 0 0 auto;
        align-items: flex-start;
    }

    .lab-shell .logo-img {
        height: 58px;
    }

    .lab-shell .sidebar-menu {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .lab-shell .menu-item {
        width: 100%;
        min-width: 0;
        height: 53px;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-inline: 14px;
    }

    .lab-shell .main-wrapper {
        margin-left: 0;
    }

    .lab-shell .navbar {
        top: 0;
        left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        height: 72px;
        padding-inline: 18px;
    }

    .lab-shell .navbar-left {
        min-width: 0;
    }

    .lab-shell .navbar-title {
        font-size: 26px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lab-shell .admin-top-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .lab-shell .sidebar-toggle {
        display: grid;
    }

    .lab-shell .top-action--ghost {
        min-width: 118px;
        height: 38px;
        font-size: 15px;
    }

    .lab-shell .content {
        margin-top: 72px;
        height: calc(100vh - 72px);
        padding: 0 18px 24px;
    }

    .lab-shell .lab-dashboard-page {
        grid-template-rows: auto minmax(360px, 1fr);
    }

    .lab-shell .lab-dashboard-page .lab-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lab-shell .lab-order-grid,
    .lab-shell .lab-detail-grid {
        grid-template-columns: 1fr;
    }

    .lab-shell .lab-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lab-shell .lab-clinic-card {
        grid-column: auto;
    }

    .lab-shell .lab-detail-summary {
        gap: 16px;
        padding: 22px;
    }

    .lab-shell .lab-order-tile__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .lab-shell .lab-order-tile__actions {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .lab-shell .sidebar {
        height: 100vh;
        gap: 0;
        padding: 18px 12px;
    }

    .lab-shell .logo-img {
        height: 52px;
    }

    .lab-shell .menu-item {
        min-width: 0;
        width: 100%;
        height: 50px;
        padding: 0 14px;
    }

    .lab-shell .menu-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    .lab-shell .navbar {
        top: 0;
        height: 64px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 12px;
    }

    .lab-shell .navbar-left {
        gap: 8px;
    }

    .lab-shell .sidebar-toggle {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .lab-shell .navbar-title {
        font-size: 18px;
    }

    .lab-shell .top-action--ghost {
        min-width: 42px;
        width: 42px;
        height: 38px;
        padding: 0;
    }

    .lab-shell .top-action--ghost span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .lab-shell .content {
        margin-top: 64px;
        height: calc(100vh - 64px);
        padding: 0 12px 18px;
    }

    .lab-shell .lab-dashboard-page {
        grid-template-rows: none;
        height: auto;
        min-height: 100%;
        gap: 16px;
    }

    .lab-shell .lab-dashboard-page .lab-stat-grid,
    .lab-shell .lab-detail-summary,
    .lab-shell .lab-detail-two {
        grid-template-columns: 1fr;
    }

    .lab-shell .lab-stat-card {
        height: auto;
        min-height: 104px;
        padding: 20px;
        border-radius: 16px;
    }

    .lab-shell .lab-stat-card strong {
        font-size: 30px;
    }

    .lab-shell .lab-stat-card span {
        font-size: 15px;
    }

    .lab-shell .lab-stat-card img {
        width: 42px;
        height: 42px;
    }

    .lab-shell .lab-stat-card--pending::after,
    .lab-shell .lab-stat-card--completed::after {
        right: 23px;
        top: 52px;
    }

    .lab-shell .lab-stat-card--pending::before {
        right: 31px;
        top: 58px;
    }

    .lab-shell .lab-stat-card--completed::before {
        right: 29px;
        top: 58px;
    }

    .lab-shell .lab-orders-panel {
        max-height: 62vh;
        gap: 18px;
        padding: 18px;
        border-radius: 16px;
    }

    .lab-shell .lab-orders-panel__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .lab-shell .lab-orders-panel__head h2 {
        font-size: 21px;
    }

    .lab-shell .ar-sort-button {
        width: 100%;
        height: 42px;
        font-size: 16px;
    }

    .lab-shell .lab-dashboard-sort {
        width: 100%;
    }

    .lab-shell .lab-dashboard-sort__menu {
        right: auto;
        left: 0;
        width: min(100%, 260px);
    }

    .lab-shell .lab-order-grid {
        gap: 14px;
        padding-right: 2px;
    }

    .lab-shell .lab-order-tile {
        min-height: 0;
        gap: 13px;
        padding: 16px;
        border-radius: 14px;
    }

    .lab-shell .lab-order-tile h3 {
        padding-right: 78px;
        font-size: 15px;
    }

    .lab-shell .lab-order-tile__meta,
    .lab-shell .lab-order-tile__meta span {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .lab-shell .lab-order-tile__meta i {
        display: none;
    }

    .lab-shell .lab-order-tile__bottom {
        font-size: 14px;
    }

    .lab-shell .lab-order-tile__actions {
        width: 100%;
    }

    .lab-shell .lab-order-tile__bottom a,
    .lab-shell .lab-order-tile__actions form,
    .lab-shell .lab-order-tile__actions button {
        width: 100%;
    }

    .lab-shell .lab-order-tile__actions button {
        min-width: 0;
    }

    .lab-shell .lab-order-status {
        top: 16px;
        right: 14px;
    }

    .lab-shell .lab-portal-pagination {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
    }

    .lab-shell .ar-page-button,
    .lab-shell .ar-page-number,
    .lab-shell .ar-page-ellipsis {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .lab-shell .lab-detail-card,
    .lab-shell .lab-detail-summary {
        padding: 18px;
        border-radius: 16px;
    }
}
.unit-control {
    display: block;
    position: relative;
}

.unit-control::after {
    color: #8b95a1;
    content: attr(data-unit);
    font-size: 15px;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}


/* ====== SweetAlert2 Confirmation Dialog Z-Index Fix ====== */
/* Ensure confirmation popup appears in front of all modals */
.swal2-container {
    z-index: 999999 !important;
}

.swal2-modal {
    z-index: 999999 !important;
}

.swal2-popup {
    z-index: 999999 !important;
}

.swal2-backdrop {
    z-index: 999998 !important;
}

/* ============================================================
   Records-per-page selector (shared across all admin lists)
   ============================================================ */
.pt-perpage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--button, #efefef);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--black, #000);
    font-size: 15px;
    white-space: nowrap;
}

.pt-perpage__label,
.pt-perpage__suffix {
    color: rgba(0, 0, 0, 0.55);
    font-weight: 500;
    font-size: 16px;
}

.pt-perpage__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    background: transparent;
    color: var(--black, #000);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 22px 4px 6px;
    border-radius: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    min-width: 50px;
}

.pt-perpage__select:focus {
    outline: 2px solid rgba(33, 150, 243, 0.4);
    outline-offset: 1px;
}

/* When the pager partial renders its own per-page block in a pager row */
.pt-pager .pt-perpage {
    height: 40px;
}

@media (max-width: 640px) {
    .pt-perpage__label,
    .pt-perpage__suffix {
        display: none;
    }

    .lab-pagination-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .lab-shell .lab-dashboard-pagination-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}


/* Clickable prescription template card */
.setup-list-item__main--clickable {
    color: inherit;
    text-decoration: none;
}

/* Final cross-page scrollbar compatibility layer.
   Chromium gives the standard scrollbar properties precedence over the
   WebKit pseudo-elements, which restores Windows arrow buttons. Reset those
   properties after every page-specific rule so only our track/thumb render. */
@supports selector(::-webkit-scrollbar) {
    :is(
        .admin-shell,
        .rx-prescription-modal__panel,
        .rx-list-scroll,
        .rx-appointment-list,
        .rx-view-medicine-list,
        .adm-select__menu,
        .pp-dd__pop,
        .pp-tl-list,
        .sidebar-menu,
        [data-pt-results],
        .bill-results,
        .bill-patient-list,
        .bill-create-panel,
        .bill-page--create .bill-create-panel,
        .bill-payment-box,
        .bill-log-box,
        .setup-list-grid,
        .treatment-list-grid,
        .medicine-grid,
        .setup-doctor-list,
        .setup-doctor-left,
        .setup-appointments-list,
        .medicine-results,
        .lab-list-grid,
        .lab-order-grid,
        .staff-grid,
        .staff-detail-list,
        .staff-detail-main,
        .settings-grid,
        .rx-template-grid,
        .cp-recent-grid,
        .cp-staff-grid,
        .cp-medicine-menu,
        .cp-payment-log-card,
        .pp-modern-remark-history,
        .scp-modal__dialog,
        .report-legend,
        .setup-modal__panel,
        .lab-modal__panel--order,
        .chat-users,
        .chat-room__body,
        .admin-shell:has(.ap-page) .content,
        .admin-shell:has(.cp-page--admin) .content,
        .ap-page .ap-calendar-card,
        .ap-page .calendar-card
    ) {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none;
    appearance: none;
    color: transparent !important;
    background: none !important;
    background-image: none !important;
    content: none !important;
}

/* ====== Reports modern chart cards ====== */
.report-page {
    --report-ink: #111827;
    --report-muted: #64748b;
    --report-line: #e6ebf2;
    --report-soft: #f8fafc;
    --report-blue: #00aeef;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 680px), 1fr));
    gap: 24px;
    align-items: stretch;
    padding-bottom: 72px;
}

.report-card {
    display: flex;
    flex-direction: column;
    min-height: 460px;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--report-line);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0) 34%),
        #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    padding: 28px;
}

.report-card__head {
    align-items: flex-start;
    gap: 18px;
}

.report-card__title {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.report-card__title h2,
.report-card__head h2 {
    margin: 0;
    color: var(--report-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.report-card__title span {
    width: max-content;
    max-width: 100%;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 174, 239, 0.16);
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.08);
    color: #0f75a8;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
}

.report-filter {
    z-index: 12;
}

.report-filter__btn {
    width: auto;
    min-width: 148px;
    height: 44px;
    border-color: #dbe3ec;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
    padding: 0 12px 0 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.report-filter__btn:hover,
.report-filter.is-open .report-filter__btn {
    border-color: rgba(0, 174, 239, 0.42);
    box-shadow: 0 10px 22px rgba(0, 174, 239, 0.1);
}

.report-filter__menu {
    top: calc(100% + 10px);
    width: 180px;
    border-color: #e6ebf2;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.report-filter__menu button {
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    padding: 0 10px;
}

.report-filter__menu button:hover,
.report-filter__menu button.is-active {
    background: rgba(0, 174, 239, 0.1);
    color: #008fc8;
}

.report-card__body {
    flex: 1 1 auto;
    min-height: 300px;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 34px;
    overflow: visible;
}

.report-donut-wrap {
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding: 0;
}

.report-donut-label {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.report-donut-label span {
    color: var(--report-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-donut-label strong {
    color: var(--report-ink);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
}

.report-donut {
    width: 216px;
    height: 216px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.54),
        0 16px 34px rgba(15, 23, 42, 0.08);
}

.report-donut::after {
    inset: 61px;
    background:
        linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
    box-shadow:
        inset 0 0 0 1px rgba(226, 232, 240, 0.72),
        0 10px 24px rgba(15, 23, 42, 0.08);
}

.report-donut__center strong {
    color: var(--report-ink);
    font-size: 35px;
    font-weight: 900;
    line-height: 1;
}

.report-donut__center small {
    margin-top: 4px;
    color: var(--report-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-donut__center span {
    margin-top: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.report-legend {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: grid;
    gap: 12px;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 6px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 239, 0.38) transparent;
}

.report-legend::-webkit-scrollbar {
    width: 5px;
}

.report-legend::-webkit-scrollbar-track {
    background: transparent;
}

.report-legend::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 239, 0.34);
    border-radius: 999px;
}

.report-legend__item {
    min-height: 68px;
    display: grid;
    grid-template-columns: 20px 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #edf1f5;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.report-legend__item:hover {
    border-color: rgba(0, 174, 239, 0.28);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.report-legend__item.is-selected {
    border-color: rgba(0, 174, 239, 0.34);
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), #fff);
}

.report-legend__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.report-check {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
}

.report-check::after {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
}

.report-legend__item.is-selected .report-check {
    border-color: var(--report-blue);
    background: var(--report-blue);
}

.report-legend__item.is-selected .report-check::after {
    opacity: 1;
}

.report-dot {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-color, #00aeef) 16%, transparent);
}

.report-legend__main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.report-legend__item em {
    color: #334155;
    font-size: 15px;
    font-weight: 700;
}

.report-legend__item small {
    color: var(--report-muted);
    font-size: 12px;
    font-weight: 650;
}

.report-legend__item strong {
    color: var(--report-ink);
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.report-empty {
    min-height: 190px;
    border-color: #dbe3ec;
    border-radius: 18px;
    background: var(--report-soft);
    color: var(--report-muted);
    font-weight: 700;
}

@media (max-width: 1450px) {
    .report-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1260px) {
    .report-card__body {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .report-card {
        padding: 22px;
    }

    .report-card__head,
    .report-card__body {
        grid-template-columns: 1fr;
    }

    .report-card__head {
        flex-direction: column;
    }

    .report-filter,
    .report-filter__btn {
        width: 100%;
    }

    .report-filter__menu,
    .report-filter__date {
        right: auto;
        left: 0;
        width: min(100%, 260px);
    }

    .report-card__body {
        gap: 22px;
    }

    .report-donut-wrap {
        padding: 18px 12px;
    }
}

@media (max-width: 560px) {
    .report-page {
        gap: 18px;
    }

    .report-card {
        min-height: 0;
        border-radius: 18px;
        padding: 18px;
    }

    .report-card__title h2,
    .report-card__head h2 {
        font-size: 19px;
    }

    .report-donut {
        width: 188px;
        height: 188px;
    }

    .report-donut::after {
        inset: 53px;
    }

    .report-donut__center strong {
        font-size: 30px;
    }

    .report-legend {
        height: auto;
        max-height: none;
        align-content: stretch;
        overflow: visible;
        padding-right: 0;
    }

    .report-legend__item {
        grid-template-columns: 20px 12px minmax(0, 1fr);
        align-items: start;
        min-height: 0;
    }

    .report-legend__item strong {
        grid-column: 3;
    }
}


/* ============================================================
 *  Appointment Page Horizontal Scrollbar
 * ============================================================ */
/* Container wrapper for proper horizontal scrolling */
.ap-calendar-card,
.dashboard-calendar {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scroll-thumb) var(--admin-scroll-track);
}

.ap-calendar-card::-webkit-scrollbar,
.dashboard-calendar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
}

.ap-calendar-card::-webkit-scrollbar-track,
.dashboard-calendar::-webkit-scrollbar-track {
    background: var(--admin-scroll-track);
    border-radius: 999px;
    margin-inline: 12px;
}

.ap-calendar-card::-webkit-scrollbar-thumb,
.dashboard-calendar::-webkit-scrollbar-thumb {
    min-width: 46px;
    background: var(--admin-scroll-thumb);
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.ap-calendar-card::-webkit-scrollbar-thumb:hover,
.dashboard-calendar::-webkit-scrollbar-thumb:hover {
    background: var(--admin-scroll-thumb-strong);
}

/* Tables don't create their own scrolling context */
.ap-calendar,
.calendar-grid--week {
    width: 100%;
    table-layout: fixed;
}

/* Doctor Profile page - full page scrollbar */
.setup-doctor-profile {
    max-height: none !important;
    overflow: visible !important;
}

.setup-doctor-profile .setup-detail-grid {
    overflow: visible !important;
    min-height: auto !important;
}

.setup-doctor-profile .setup-doctor-left {
    overflow: visible !important;
    min-height: auto !important;
}

.setup-doctor-profile .setup-detail-card {
    overflow: visible !important;
    min-height: auto !important;
}

.setup-doctor-profile .setup-appointments-card {
    overflow: visible !important;
    min-height: auto !important;
}

/* Proper card alignment on larger screens */
@media (min-width: 1181px) {
    .setup-doctor-profile .setup-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .setup-doctor-profile .setup-detail-grid-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .setup-doctor-profile .setup-appointments-card {
        max-height: 700px;
        min-height: 700px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .setup-doctor-profile .setup-appointments-list {
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
        scrollbar-width: thin;
        -ms-overflow-style: auto;
    }
}

.setup-doctor-profile .setup-detail-grid-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 899px) {
    .setup-doctor-profile .setup-detail-grid-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Birthday module ===== */
.birthday-page {
    --birthday-theme: var(--primary);
    --birthday-theme-soft: var(--secondary);
    --birthday-line: var(--blue-stroke);
    width: 100%;
    min-height: 0;
}

.birthday-card {
    height: var(--admin-card-height, calc(100dvh - 142px));
    max-height: var(--admin-card-height, calc(100dvh - 142px));
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.birthday-summary,
.birthday-tabs,
.birthday-rule {
    flex: 0 0 auto;
}

.birthday-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.birthday-panel {
    display: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scroll-thumb, rgba(0, 174, 239, 0.56)) var(--admin-scroll-track, transparent);
}

.birthday-panel.is-active {
    display: block;
}

.birthday-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-content: start;
    min-height: 0;
}

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

.birthday-stat {
    min-height: 96px;
    border: 0;
    border-left: 5px solid var(--birthday-theme);
    border-radius: 10px;
    background: var(--birthday-theme-soft);
    color: #102033;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.birthday-stat:hover,
.birthday-stat:focus-visible,
.birthday-stat.is-active {
    transform: translateY(-1px);
    background: #eaf8ff;
    box-shadow: 0 10px 26px rgba(0, 174, 239, 0.12);
    outline: none;
}

.birthday-stat__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.birthday-stat strong {
    color: var(--birthday-theme);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.birthday-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.birthday-filter {
    min-width: 132px;
    min-height: 44px;
    border: 1px solid var(--birthday-line);
    border-radius: 10px;
    background: var(--white);
    color: var(--birthday-theme);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.birthday-filter:hover,
.birthday-filter:focus-visible,
.birthday-filter.is-active {
    border-color: var(--birthday-theme);
    background: var(--birthday-theme);
    color: var(--white);
    outline: none;
}

.birthday-rule {
    height: 1px;
    background: var(--birthday-line);
}

.birthday-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--white);
}

.birthday-table th,
.birthday-table td {
    border: 1px solid var(--birthday-line);
    padding: 16px 18px;
    text-align: center;
    color: #061326;
    font-size: 17px;
    line-height: 1.25;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.birthday-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #e5f7ff;
    color: #000;
    font-size: 16px;
    font-weight: 800;
}

.birthday-table td {
    height: 72px;
}

.birthday-table tbody tr:nth-child(odd) td {
    background: #eef8ff;
}

.birthday-table th:nth-child(1),
.birthday-table td:nth-child(1) {
    width: 34%;
}

.birthday-table th:nth-child(2),
.birthday-table td:nth-child(2) {
    width: 18%;
}

.birthday-table th:nth-child(3),
.birthday-table td:nth-child(3) {
    width: 10%;
}

.birthday-table th:nth-child(4),
.birthday-table td:nth-child(4) {
    width: 24%;
}

.birthday-table th:nth-child(5),
.birthday-table td:nth-child(5) {
    width: 14%;
}

.birthday-item {
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.birthday-item:hover {
    background: rgba(0, 174, 239, 0.03);
    border-color: rgba(0, 174, 239, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.birthday-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.birthday-left:hover,
.birthday-left:focus {
    color: inherit;
    text-decoration: none;
}

.birthday-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.birthday-meta strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--black);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.birthday-record {
    color: rgba(0, 0, 0, 0.48);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.birthday-sub {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    color: rgba(100, 100, 100, 0.85);
    font-size: 15px;
}

.birthday-sub > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.birthday-sub > span + span::before {
    content: "";
    width: 1px;
    height: 24px;
    margin-right: 2px;
    background: rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}

.birthday-sub img {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
}

.birthday-sub span span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.birthday-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.birthday-wa-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(37, 211, 102, 0.18);
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.birthday-wa-btn:hover,
.birthday-wa-btn:focus-visible {
    background: rgba(37, 211, 102, 0.2);
    color: #1faa54;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(47, 158, 103, 0.22);
    outline: none;
}

.birthday-wa-btn.is-disabled,
.birthday-wa-btn:disabled {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.birthday-wa-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.birthday-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text);
    font-size: 15px;
}

@supports selector(::-webkit-scrollbar) {
    .birthday-panel {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
}

.birthday-panel::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.birthday-panel::-webkit-scrollbar-track {
    background: var(--admin-scroll-track, transparent);
    border-radius: 999px;
    margin-block: 12px;
}

.birthday-panel::-webkit-scrollbar-thumb {
    min-height: 60px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--admin-scroll-thumb, #9eddf4);
    background-clip: padding-box;
}

@media (max-width: 980px) {
    .birthday-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .birthday-stat {
        min-height: 92px;
    }

    .birthday-list {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .birthday-card {
        padding: 14px;
        border-radius: 14px;
    }

    .birthday-page {
        gap: 18px;
    }

    .birthday-tabs {
        gap: 10px;
    }

    .birthday-filter {
        flex: 1 1 120px;
        min-width: 0;
        font-size: 14px;
    }

    .birthday-table th,
    .birthday-table td {
        padding: 12px 8px;
        font-size: 13px;
    }

    .birthday-table th {
        font-size: 13px;
    }

    .birthday-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .birthday-left,
    .birthday-actions {
        width: 100%;
    }

    .birthday-actions {
        justify-content: flex-start;
    }

    .birthday-sub {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
    }

    .birthday-sub > span + span::before {
        display: none;
    }

    .birthday-sub span span {
        white-space: normal;
    }

}
/* SMS delivery settings */
.sms-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sms-summary-card{background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:18px;display:grid;gap:6px}.sms-summary-card span,.sms-summary-card small{color:#667085}.sms-summary-card strong{font-size:28px;color:#101828}.sms-summary-card--failed strong{color:#b42318}@media(max-width:1000px){.sms-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.sms-summary-grid{grid-template-columns:1fr}}
.sms-settings-page{padding:24px;display:grid;gap:18px}.sms-breadcrumb{display:flex;gap:8px;align-items:center;color:#667085}.sms-breadcrumb a{color:#1769e0;text-decoration:none}.sms-config-card{background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:18px;display:grid;gap:8px}.sms-config-card p{margin:0;color:#667085}.sms-config-card code{overflow-wrap:anywhere}.sms-alert{padding:12px 16px;border-radius:8px}.sms-alert--success{background:#ecfdf3;color:#027a48}.sms-filters{display:flex;gap:10px;flex-wrap:wrap}.sms-filters input,.sms-filters select{min-height:42px;border:1px solid #d0d5dd;border-radius:8px;padding:8px 12px;background:#fff}.sms-filters input[type=search]{min-width:300px}.sms-filters button,.sms-resend{border:0;border-radius:8px;background:#1769e0;color:#fff;padding:9px 16px;cursor:pointer}.sms-filters button:disabled{cursor:wait;opacity:.65}.sms-filters .sms-refresh{border:1px solid #d0d5dd;background:#fff;color:#344054}.sms-refresh.is-loading span{display:inline-block;animation:sms-spin .7s linear infinite}.sms-filters a{align-self:center;color:#475467}.sms-table-wrap{overflow:auto;background:#fff;border:1px solid #e4e7ec;border-radius:12px}.sms-table{width:100%;border-collapse:collapse;min-width:1050px}.sms-table th,.sms-table td{text-align:left;padding:13px;border-bottom:1px solid #eaecf0;vertical-align:top}.sms-table th{background:#f9fafb;color:#475467;font-size:13px}.sms-table td{font-size:14px;color:#344054}.sms-table small{display:block;color:#667085;margin-top:4px}.sms-sort{display:flex;align-items:center;justify-content:space-between;gap:8px;color:inherit;text-decoration:none}.sms-sort span{color:#98a2b3;font-size:15px}.sms-sort:hover{color:#175cd3}.sms-template{margin-top:7px}.sms-template summary{color:#175cd3;cursor:pointer;font-size:12px;font-weight:600}.sms-template div{display:grid;gap:3px;margin-top:7px;padding:9px;border:1px solid #d1e9ff;border-radius:7px;background:#f5fbff;font-size:12px;min-width:220px}.sms-template div strong{margin-bottom:2px}.sms-template div span{color:#475467}.sms-request-id{max-width:240px;overflow-wrap:anywhere}.sms-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600}.sms-badge--delivered{background:#ecfdf3;color:#027a48}.sms-badge--failed,.sms-badge--rejected{background:#fef3f2;color:#b42318}.sms-badge--submitted,.sms-badge--created{background:#eff8ff;color:#175cd3}.sms-empty{text-align:center!important;padding:40px!important}.sms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;color:#667085;font-size:14px}.sms-pagination__links{display:flex;align-items:center;gap:6px}.sms-pagination__links a,.sms-pagination__links span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 11px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#344054;text-decoration:none}.sms-pagination__links a:hover{border-color:#84caff;color:#175cd3}.sms-pagination__links a.is-active{border-color:#1769e0;background:#1769e0;color:#fff}.sms-pagination__links .is-disabled{background:#f9fafb;color:#98a2b3;cursor:not-allowed}@keyframes sms-spin{to{transform:rotate(360deg)}}@media(max-width:768px){.sms-settings-page{padding:14px}.sms-filters>*{width:100%}.sms-filters input[type=search]{min-width:0}.sms-pagination{align-items:flex-start;flex-direction:column}.sms-pagination__links{max-width:100%;overflow-x:auto}}
.lab-detail-cards{display:grid;gap:16px}.lab-detail-entry{border:1px solid #dfe3e8;border-radius:12px;padding:16px;background:#fafcff}.lab-detail-entry__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.lab-detail-entry__head button{border:0;background:#fff0f1;color:#d92d20;border-radius:7px;padding:7px 11px;cursor:pointer}.lab-add-more-btn{border:1px dashed #00aeef;background:#f0fbff;color:#008fc7;border-radius:9px;padding:11px 18px;font-weight:600;cursor:pointer;justify-self:start}
.lab-order-v2{max-width:1240px;margin:0 auto;padding-bottom:40px}.lab-order-v2__alert{margin:14px 0;padding:12px 16px;border-radius:10px;background:#ecfdf3;color:#027a48}.lab-order-v2__hero{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:18px;padding:24px 26px;border:1px solid #e4e7ec;border-radius:16px 16px 0 0;background:linear-gradient(135deg,#f7fcff,#fff)}.lab-order-v2__eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#009fdb}.lab-order-v2__hero h2{margin:6px 0 4px;font-size:25px;color:#101828}.lab-order-v2__hero p,.lab-order-v2__section-title p{margin:0;color:#667085}.lab-order-v2__status{white-space:nowrap;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:700}.lab-order-v2__status--pending{background:#fff7e6;color:#b54708}.lab-order-v2__status--accepted{background:#eff8ff;color:#175cd3}.lab-order-v2__status--ready,.lab-order-v2__status--completed{background:#ecfdf3;color:#027a48}.lab-order-v2__overview{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #e4e7ec;border-top:0;border-radius:0 0 16px 16px;background:#fff}.lab-order-v2__overview>div{padding:17px 22px;border-right:1px solid #eaecf0}.lab-order-v2__overview>div:last-child{border:0}.lab-order-v2__overview span,.lab-order-v2__specs span,.lab-order-v2__notes>span,.lab-order-v2__panel>span{display:block;margin-bottom:5px;color:#667085;font-size:12px}.lab-order-v2__overview strong{color:#101828;font-size:14px}.lab-order-v2__layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;margin-top:25px}.lab-order-v2__items{display:grid;gap:14px}.lab-order-v2__section-title{display:flex;align-items:center;justify-content:space-between}.lab-order-v2__section-title h2{margin:0 0 3px;font-size:20px}.lab-order-v2__section-title>span{background:#f2f4f7;color:#475467;padding:5px 10px;border-radius:999px;font-size:12px}.lab-order-v2__item{border:1px solid #e4e7ec;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,.04)}.lab-order-v2__item-head{display:flex;align-items:center;gap:13px;padding:17px 19px;border-bottom:1px solid #eaecf0;background:#fcfcfd}.lab-order-v2__number{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e8f8ff;color:#008fc7;font-weight:800}.lab-order-v2__item-head h3{margin:0 0 2px;color:#101828;font-size:16px}.lab-order-v2__item-head p{margin:0;color:#98a2b3;font-size:12px}.lab-order-v2__units{margin-left:auto;padding:6px 10px;border-radius:8px;background:#f2f4f7;color:#344054;font-size:12px;font-weight:700}.lab-order-v2__specs{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 20px}.lab-order-v2__specs strong{color:#101828}.lab-order-v2__teeth{display:flex;flex-wrap:wrap;gap:6px}.lab-order-v2__teeth b{display:grid;place-items:center;min-width:31px;height:29px;padding:0 7px;border:1px solid #b2ddff;border-radius:7px;background:#f0f9ff;color:#026aa2;font-size:12px}.lab-order-v2__teeth em{color:#98a2b3;font-style:normal}.lab-order-v2__notes{margin:0 20px 18px;padding:13px 15px;border-radius:9px;background:#f9fafb}.lab-order-v2__notes p{margin:0;color:#475467;line-height:1.5}.lab-order-v2__side{display:grid;align-content:start;gap:15px;position:sticky;top:88px}.lab-order-v2__panel{padding:20px;border:1px solid #e4e7ec;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(16,24,40,.04)}.lab-order-v2__panel-head{display:flex;justify-content:space-between}.lab-order-v2__panel-head span{display:block;color:#667085;font-size:12px}.lab-order-v2__panel-head strong{display:block;margin-top:3px;color:#101828}.lab-order-v2__panel-head i{width:10px;height:10px;border-radius:50%;background:#12b76a}.lab-order-v2__dispatch>p{color:#667085;line-height:1.5}.lab-status-form--v2{display:grid;gap:13px}.lab-status-form--v2 label{display:flex;gap:9px;align-items:flex-start;color:#344054}.lab-status-form--v2 button{width:100%;border:0;border-radius:9px;background:#00aeef;color:#fff;padding:11px;font-weight:700;cursor:pointer}.lab-order-v2__done{margin-top:16px;padding:11px;border-radius:8px;background:#ecfdf3;color:#027a48}.lab-order-v2__dispatch small{display:block;margin-top:8px;color:#667085}.lab-order-v2__clinic h3{margin:5px 0 8px}.lab-order-v2__clinic p{color:#667085;line-height:1.55}.lab-order-v2__clinic a{display:block;margin-top:14px;padding-top:13px;border-top:1px solid #eaecf0;color:#009fdb;font-weight:700;text-decoration:none}@media(max-width:1050px){.lab-order-v2__overview{grid-template-columns:repeat(3,1fr)}.lab-order-v2__overview>div:nth-child(3){border-right:0}.lab-order-v2__overview>div:nth-child(n+4){border-top:1px solid #eaecf0}.lab-order-v2__layout{grid-template-columns:1fr}.lab-order-v2__side{position:static;grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.lab-order-v2__hero{align-items:flex-start;padding:18px;flex-direction:column}.lab-order-v2__overview{grid-template-columns:1fr 1fr}.lab-order-v2__overview>div{border-top:1px solid #eaecf0!important;border-right:1px solid #eaecf0!important}.lab-order-v2__overview>div:nth-child(odd):last-child,.lab-order-v2__overview>div:nth-child(even){border-right:0!important}.lab-order-v2__specs{grid-template-columns:1fr}.lab-order-v2__side{grid-template-columns:1fr}.lab-order-v2__section-title{align-items:flex-end}.lab-order-v2__item-head{align-items:flex-start}.lab-order-v2__units{white-space:nowrap}}
/* Laboratory order print action */
.lab-order-v2__topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.lab-order-v2__topbar .ar-breadcrumb{margin-bottom:0}.lab-order-v2__actions{display:flex;justify-content:flex-end}.lab-order-v2__print{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid #00aeef;border-radius:9px;background:#00aeef;color:#fff;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 4px 10px rgba(0,174,239,.18);transition:background .2s,border-color .2s,transform .2s}.lab-order-v2__print:hover{border-color:#009ed9;background:#009ed9;transform:translateY(-1px)}.lab-order-v2__print svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}@media(max-width:650px){.lab-order-v2__topbar{align-items:stretch;flex-direction:column;gap:12px}.lab-order-v2__print{width:100%;justify-content:center}}