/**
 * Waslat Clinic Dashboard — base theme.
 * Login: hero image `public/images/clinic/login-hero.png` + teal overlay; card per Figma 15267:11071.
 * TODO: Fine-tune :root from MCP when dashboard frame is exported.
 */
:root {
    /* Foundation / Green / Normal (Figma wordmark) */
    --clinic-brand-mark: #0e7f80;
    --clinic-primary: #0e7f80;
    --clinic-primary-dark: #0b6566;
    --clinic-primary-soft: rgba(14, 127, 128, 0.12);
    --clinic-surface: #f8fafc;
    --clinic-card: #ffffff;
    --clinic-border: #e2e8f0;
    --clinic-text: #0f172a;
    --clinic-muted: #64748b;
    --clinic-danger: #dc2626;
    --clinic-warning: #d97706;
    --clinic-success: #16a34a;
    --clinic-radius: 12px;
    --clinic-sidebar-w: 288px;
    --clinic-font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    /* Login card — Figma layout: 448×48/41, inner content 366px */
    --clinic-login-card-w: 448px;
    --clinic-login-pad-y: 48px;
    --clinic-login-pad-x: 41px;
    --clinic-login-section-gap: 30px;
    --clinic-login-inner: 366px;
    --clinic-login-heading: #101828;
    --clinic-login-subtitle: #475467;
}

[dir="rtl"] {
    --clinic-sidebar-w: 288px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.clinic-body {
    margin: 0;
    font-family: var(--clinic-font);
    background: var(--clinic-surface);
    color: var(--clinic-text);
    min-height: 100vh;
}

[dir="rtl"] body.clinic-body {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

[dir="ltr"] body.clinic-body {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

body.clinic-body--guest {
    background-color: var(--clinic-primary-dark);
    min-height: 100vh;
}

[dir="ltr"] body.clinic-body.clinic-body--guest {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

[dir="rtl"] body.clinic-body.clinic-body--guest {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

a {
    color: var(--clinic-primary-dark);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.clinic-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar — Figma Sidebar.svg + Wasalat_icon assets */
.clinic-sidebar {
    width: var(--clinic-sidebar-w);
    flex-shrink: 0;
    background: #fff;
    border-inline-end: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 100vh;
}

.clinic-sidebar__brand {
    padding: 28px 24px 20px;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}

.clinic-sidebar__close {
    display: none;
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border: none;
    border-radius: 10px;
    color: #4a5565;
    cursor: pointer;
}

.clinic-sidebar__close:hover {
    background: #f3f4f6;
    color: #101828;
}

.clinic-shell__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 40;
}

.clinic-topbar__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: #f9fafb;
    color: #4a5565;
    border-radius: 12px;
    cursor: pointer;
}

.clinic-topbar__menu-btn:hover {
    background: #f3f4f6;
    color: #101828;
}

.clinic-topbar__menu-btn:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.18);
    outline-offset: 2px;
}

.clinic-sidebar__wordmark-link {
    display: block;
    text-decoration: none;
}

.clinic-sidebar__wordmark-link:hover {
    text-decoration: none;
}

.clinic-sidebar__wordmark .clinic-login-brand__svg {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    color: var(--clinic-primary);
}

.clinic-sidebar__user {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #4a5565;
}

.clinic-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clinic-nav__group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clinic-muted);
    padding: 0.75rem 0.75rem 0.35rem;
}

.clinic-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    color: #4a5565;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    line-height: 28px;
}

.clinic-nav__link:hover {
    background: #f9fafb;
    text-decoration: none;
    color: #364153;
}

.clinic-nav__link.is-active {
    background: var(--clinic-primary);
    color: #fff;
    font-weight: 600;
}

.clinic-nav__link.is-active:hover {
    background: var(--clinic-primary-dark);
    color: #fff;
}

.clinic-nav__link--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.clinic-sidebar-nav-icon {
    display: block;
    flex-shrink: 0;
}

.clinic-sidebar__footer {
    margin-top: auto;
    padding: 16px 24px 24px;
    border-top: 1px solid #f3f4f6;
}

.clinic-sidebar__logout-form {
    margin: 0;
}

.clinic-sidebar__logout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 12px;
    margin: 0 -12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #4a5565;
    cursor: pointer;
    border-radius: 10px;
    width: auto;
    text-decoration: none;
}

.clinic-sidebar__logout:hover {
    background: #f9fafb;
    color: #364153;
}

.clinic-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clinic-topbar {
    background: var(--clinic-card);
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 32px;
    gap: 12px;
    flex-shrink: 0;
}

.clinic-topbar__page-info {
    display: flex;
    flex-direction: column;
    gap: 11.988px;
    min-width: 0;
    flex: 1 1 auto;
}

.clinic-topbar__title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #101828;
    line-height: 40px;
}

.clinic-topbar__subtitle {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #6a7282;
    line-height: normal;
}

.clinic-topbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.clinic-topbar__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: none;
    background: #f9fafb;
    color: #4a5565;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.clinic-topbar__icon-btn:hover {
    background: #f3f4f6;
    color: #101828;
    text-decoration: none;
}

.clinic-topbar__icon-btn--settings {
    background: #f9fafb;
    color: #4a5565;
}

.clinic-topbar__icon-btn--settings:hover {
    background: #f3f4f6;
    color: #101828;
}

.clinic-topbar__icon-btn:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.18);
    outline-offset: 2px;
}

.clinic-topbar__icon-btn svg {
    width: 20px;
    height: 20px;
}

.clinic-topbar__notification-dot {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fb2c36;
}

.clinic-btn {
    border: 1px solid var(--clinic-border);
    background: var(--clinic-card);
    color: var(--clinic-text);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}
.clinic-btn--primary {
    background: var(--clinic-primary);
    border-color: var(--clinic-primary);
    color: #fff;
}
.clinic-btn--primary:hover {
    background: var(--clinic-primary-dark);
    border-color: var(--clinic-primary-dark);
}

.clinic-content {
    padding: 1.5rem;
    flex: 1;
}

.clinic-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.clinic-kpi {
    background: var(--clinic-card);
    border: 1px solid var(--clinic-border);
    border-radius: var(--clinic-radius);
    padding: 1rem 1.1rem;
}
.clinic-kpi__value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--clinic-primary-dark);
    line-height: 1.2;
}
.clinic-kpi__label {
    font-size: 0.82rem;
    color: var(--clinic-muted);
    margin-top: 0.35rem;
}

.clinic-card {
    background: var(--clinic-card);
    border: 1px solid var(--clinic-border);
    border-radius: var(--clinic-radius);
    overflow: hidden;
}
.clinic-card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--clinic-border);
    font-weight: 700;
    font-size: 0.95rem;
}
.clinic-card__body {
    padding: 0;
    overflow-x: auto;
}

.clinic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.clinic-table th,
.clinic-table td {
    padding: 0.75rem 1rem;
    text-align: start;
    border-bottom: 1px solid var(--clinic-border);
}
.clinic-table th {
    background: var(--clinic-surface);
    color: var(--clinic-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.clinic-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
.clinic-badge--muted {
    background: #f1f5f9;
    color: var(--clinic-muted);
}
.clinic-badge--success {
    background: rgba(22, 163, 74, 0.12);
    color: var(--clinic-success);
}
.clinic-badge--warning {
    background: rgba(217, 119, 6, 0.12);
    color: var(--clinic-warning);
}
.clinic-badge--danger {
    background: rgba(220, 38, 38, 0.1);
    color: var(--clinic-danger);
}

.clinic-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--clinic-muted);
    font-size: 0.9rem;
}

/* ——— Clinic login (card: 15267:11071; mobile field: 15267:11185) ——— */
.clinic-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 32px;
    background-color: var(--clinic-primary-dark);
    background-image:
        linear-gradient(
            rgba(14, 127, 128, 0.65) 0%,
            rgba(7, 50, 51, 0.82) 100%
        ),
        var(--clinic-login-hero, url("/images/clinic/login-hero.png"));
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.clinic-login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 448px;
    max-width: 100%;
    padding: 48px 41px;
    border-radius: 24px;
    border: 1px solid #f3f4f6;
    background: #fff;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.clinic-login-card--forgot {
    min-height: 434px;
}

.clinic-login-card > * {
    width: 100%;
    box-sizing: border-box;
}

/* ——— Register wizard (Figma 15808:2954, 15821:2960) ——— */
.clinic-login-card--register {
    --clinic-login-card-w: min(100%, 1099px);
    max-width: 1099px;
    width: 100%;
    align-items: stretch;
    gap: 20px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.clinic-login-card--register.clinic-login-card--narrow {
    --clinic-login-card-w: 448px;
    max-width: 448px;
}

.clinic-register-intro {
    position: relative;
    width: 100%;
    text-align: center;
}

.clinic-register-intro__lang {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

[dir="rtl"] .clinic-register-intro__lang {
    flex-direction: row-reverse;
}

.clinic-login-title {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--clinic-login-heading);
}

.clinic-login-title--forgot {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: start;
}

.clinic-login-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #6a7282;
}

.clinic-login-subtitle--forgot {
    font-size: 14px;
    line-height: 22px;
    text-align: start;
}

.clinic-register-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clinic-register-section {
    width: 100%;
}

.clinic-register-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.clinic-register-section--doctors-head .clinic-register-section-head {
    margin-bottom: 8px;
}

.clinic-register-section-head__spacer {
    flex: 1;
    min-width: 8px;
}

.clinic-register-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: var(--clinic-login-heading);
    text-align: start;
}

.clinic-register-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #f3f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.clinic-register-section-icon__svg {
    display: block;
}

.clinic-register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

/* A `1fr` column will not shrink below its content's min-content width, so a
   field with anything wide in it pushes the whole row past the card instead of
   the columns giving way. Adding the "other" text box under a picker was
   enough to tip it. */
.clinic-register-grid > * {
    min-width: 0;
}

.clinic-register-grid .clinic-input-shell,
.clinic-register-grid .clinic-input-shell__control {
    min-width: 0;
}

.clinic-register-doctors-hint {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--clinic-muted);
    text-align: start;
}

.clinic-register-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 4px;
}

.clinic-register-continue {
    width: 100%;
    max-width: 595px;
}

.clinic-register-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    justify-content: center;
}

.clinic-register-actions-row .clinic-register-continue {
    flex: 1 1 240px;
    max-width: none;
}

.clinic-register-form--facility,
.clinic-register-form--account {
    gap: 24px;
}

.clinic-field--full {
    width: 100%;
}

.clinic-register-textarea--facility {
    min-height: 90px;
    resize: vertical;
}

.clinic-register-consent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 21px;
    border: 1.1px solid #f3f4f6;
    border-radius: 16px;
    background: #f9fafb;
    box-sizing: border-box;
    cursor: pointer;
}

.clinic-register-consent-card--toggle {
    cursor: default;
}

.clinic-register-consent-card--toggle .clinic-register-consent-card__text {
    cursor: pointer;
    flex: 1;
}

.clinic-register-consent-card__control--switch {
    display: flex;
    align-items: center;
}

.clinic-register-consent-card__control {
    position: relative;
    flex-shrink: 0;
}

.clinic-register-consent-card__control input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.clinic-register-checkbox {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #c7ccd4;
    border-radius: 4px;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.clinic-register-consent-card__control input:checked + .clinic-register-checkbox {
    background: var(--clinic-primary);
    border-color: var(--clinic-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.clinic-register-consent-card__text {
    color: #364153;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-align: start;
}

.clinic-register-consent-card__link {
    color: var(--clinic-primary);
    text-decoration: none;
}

.clinic-register-consent-card__link:hover {
    text-decoration: underline;
}

.clinic-register-switch {
    position: relative;
    flex-shrink: 0;
    width: 41px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #b0bec5;
    cursor: pointer;
    transition: background 0.15s ease;
}

.clinic-register-switch.is-active {
    background: var(--clinic-primary);
}

.clinic-register-switch__thumb {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.clinic-register-switch.is-active .clinic-register-switch__thumb {
    transform: translateX(17px);
}

[dir="rtl"] .clinic-register-switch.is-active .clinic-register-switch__thumb {
    transform: translateX(-17px);
}

.clinic-login-card--register.clinic-login-card--register-legal,
.clinic-login-card--register.clinic-login-card--register-location {
    gap: 30px;
}

.clinic-register-legal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.clinic-register-legal__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: #101828;
    text-decoration: none;
}

.clinic-register-legal__back svg {
    width: 16px;
    height: 16px;
}

[dir="rtl"] .clinic-register-legal__back svg {
    transform: scaleX(-1);
}

.clinic-register-legal__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: start;
}

.clinic-register-legal__title {
    margin: 0;
    color: #101828;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
}

.clinic-register-legal__subtitle {
    margin: 0;
    color: #6a7282;
    font-size: 17px;
    font-weight: 400;
    line-height: 25.5px;
}

.clinic-register-legal__card {
    width: 100%;
    max-height: 475px;
    overflow: auto;
    border-radius: 24px;
}

.clinic-register-map-form {
    width: 100%;
}

.clinic-register-map-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    border-radius: 32px;
    background: #f3f4f6;
}

.clinic-register-map-search {
    position: absolute;
    inset-inline-start: 20px;
    inset-inline-end: 20px;
    top: 20px;
    z-index: 2;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(106, 114, 130, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #101828;
    font: inherit;
}

.clinic-register-map-search:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.16);
    border-color: rgba(14, 127, 128, 0.35);
}

.clinic-register-map {
    width: 100%;
    height: 475px;
}

.clinic-btn-outline {
    appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7.992px;
    padding: 10.588px 11.939px 12.412px 13.085px;
    border-radius: 14px;
    border: 1.098px solid #e5e7eb;
    background: #fff;
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 21px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.clinic-btn-outline:hover {
    border-color: var(--clinic-primary);
    background: #f0fafa;
}

.clinic-register-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.clinic-btn-add-doctor-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
}

.clinic-btn-add-doctor-toolbar:hover {
    text-decoration: none;
    filter: brightness(0.96);
}

.clinic-icon-user-plus {
    display: block;
    flex-shrink: 0;
}

.clinic-login-submit--secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.clinic-alert--success {
    background: rgba(22, 163, 74, 0.1);
    color: var(--clinic-success);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.clinic-register-section-head--with-bulk {
    flex-wrap: wrap;
}

.clinic-register-inner-card {
    width: 100%;
    border: 1px solid #f3f4f6;
    border-radius: 24px;
    background: #fff;
    box-sizing: border-box;
}

.clinic-register-inner-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.clinic-register-inner-card__head--mint .clinic-register-inner-card__icon {
    background: #f3f3f5;
}

.clinic-register-inner-card__head--mint-strong .clinic-register-inner-card__icon {
    background: #e7f2f2;
}

.clinic-register-inner-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #364153;
    flex-shrink: 0;
}

.clinic-register-inner-card__icon-svg {
    display: block;
}

.clinic-register-inner-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--clinic-login-heading);
}

.clinic-register-inner-card__body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clinic-register-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.clinic-input-shell--select {
    padding-inline-end: 12px;
}

.clinic-input-shell__control--select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-inline-end: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 4px;
    background-size: 12px 8px;
}

[dir="rtl"] .clinic-input-shell__control--select {
    background-position: center left 2px;
}

.clinic-login-submit--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #fff;
    color: var(--clinic-primary);
    border: 2px solid var(--clinic-primary);
}

.clinic-login-submit--ghost:hover {
    background: rgba(14, 127, 128, 0.08);
}

.clinic-register-doctor-cards--figma {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.clinic-register-doctor-card--figma {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    min-width: 260px;
    max-width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e7f2f2;
    background: #fff;
    box-sizing: border-box;
}

.clinic-register-pill {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 9999px;
    border: 1px solid #e7f2f2;
    background: #fff;
    color: var(--clinic-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clinic-register-trash-form {
    margin: 0;
    flex-shrink: 0;
    align-self: flex-start;
}

.clinic-register-trash-btn {
    appearance: none;
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.clinic-register-trash-btn:hover {
    background: #fecaca;
}

.clinic-register-doctor-card__thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.clinic-register-doctor-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clinic-register-doctor-card__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clinic-register-doctor-card__name {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--clinic-login-heading);
}

.clinic-register-doctor-card__dept {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 16px;
    color: #6b7280;
}

.clinic-register-doctor-card__meta {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 16px;
    color: #6b7280;
    word-break: break-word;
}

.clinic-register-actions-equal {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.clinic-register-actions-equal .clinic-login-submit.clinic-register-continue {
    flex: 1 1 0;
    max-width: none;
    width: auto;
    min-height: 48px;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.clinic-register-continue--disabled,
.clinic-register-actions-equal .clinic-login-submit.clinic-register-continue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.clinic-register-media-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.clinic-register-upload-drop {
    width: 128px;
    height: 128px;
    border: 1px dashed #d1d5dc;
    border-radius: 16px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #99a1af;
    flex-shrink: 0;
}

/* The chosen file, shown in place of the "no image" placeholder. */
.clinic-register-upload-drop {
    position: relative;
    overflow: hidden;
}

.clinic-register-upload-drop__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.clinic-register-textarea-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.clinic-register-textarea-footer .clinic-register-help {
    margin: 0;
}

.clinic-char-counter {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    white-space: nowrap;
}

/* Short of the minimum, with something typed — the state worth flagging. */
.clinic-char-counter.is-short {
    color: #b45309;
}

.clinic-char-counter.is-met {
    color: #15803d;
}

/* The free-text box that opens under a picker set to "other". */
.clinic-option-other {
    margin-top: 8px;
}

.clinic-option-other[hidden] {
    display: none;
}

.clinic-edit-modal__field .clinic-option-other .clinic-edit-modal__input {
    width: 100%;
}

.clinic-register-upload-drop__icon {
    opacity: 0.85;
}

.clinic-register-upload-drop__label {
    font-size: 12px;
}

.clinic-register-upload-drop__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.clinic-register-inner-card--facility-image {
    margin-top: 8px;
}

.clinic-register-upload-fields {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-register-file-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: none;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.clinic-register-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease;
}

.clinic-register-file-btn:hover {
    background: var(--clinic-primary-dark);
}

.clinic-register-help {
    margin: 0;
    font-size: 13px;
    line-height: 19.5px;
    color: #6a7282;
}

.clinic-register-textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #0a0a0a;
    resize: vertical;
    box-sizing: border-box;
}

.clinic-register-textarea::placeholder {
    color: #717182;
}

.clinic-register-schedule-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #6a7282;
}

.clinic-schedule-months {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

/* Figma: flex 1 0 0, flex-direction column, gap 24px, border 1px #F3F4F6, radius 16px */
.clinic-schedule-month {
    flex: 1 0 0;
    min-width: 280px;
    border: 1.098px solid #f3f4f6;
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.clinic-schedule-month__title {
    font-weight: 600;
    font-size: 15px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--clinic-login-heading);
}

.clinic-schedule-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 12px 8px 4px;
}

.clinic-schedule-weekdays__d {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6a7282;
}

.clinic-schedule-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 4px 8px 12px;
}

/* Figma: height 64px, flex 1 0 0, radius 10px, border 1px #E5E7EB, bg #FFF */
.clinic-schedule-day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 64px;
    border: 1.098px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    color: #364153;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.clinic-schedule-day:hover:not(:disabled) {
    background: var(--clinic-primary-soft);
    border-color: rgba(14, 127, 128, 0.25);
}

.clinic-schedule-day--outside {
    background: #f9fafb;
    color: #9ca3af;
    border-color: #f3f4f6;
}

.clinic-schedule-day--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.clinic-schedule-day.is-selected {
    background: var(--clinic-primary);
    color: #fff;
    border-color: var(--clinic-primary);
}

@media (max-width: 768px) {
    .clinic-register-grid {
        grid-template-columns: 1fr;
    }

    .clinic-register-grid--3 {
        grid-template-columns: 1fr;
    }

    .clinic-register-intro__lang {
        position: static;
        align-self: flex-end;
        margin-bottom: 8px;
    }

    .clinic-register-section-head__spacer {
        display: none;
    }

    .clinic-register-consent-card {
        padding: 16px;
    }

    .clinic-register-legal__header {
        align-items: flex-start;
    }

    .clinic-register-map-search {
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        top: 12px;
    }
}

.clinic-login-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
}

.clinic-login-intro--forgot {
    gap: 34px;
}

.clinic-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.clinic-login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px;
    color: var(--clinic-brand-mark);
}

.clinic-login-brand--forgot {
    margin: 0;
}

.clinic-login-brand__svg {
    width: min(100%, 239px);
    height: auto;
    aspect-ratio: 239 / 24;
    display: block;
}

/* Figma Dev: Welcome Back — IBM Plex Sans 600, 30 / 36, #101828, center */
.clinic-login-welcome {
    margin: 0 0 8px; /* tight stack to subtitle; 30px before form = card gap */
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0;
    color: var(--clinic-login-heading);
}

.clinic-login-lead {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--clinic-login-subtitle);
}

.clinic-login-lead--left {
    text-align: start;
    margin-bottom: 1.25rem;
}

.clinic-login-back {
    margin-bottom: 1rem;
}

.clinic-login-back--icon {
    margin: 0;
    flex-shrink: 0;
}

.clinic-login-back-link {
    color: var(--clinic-primary-dark, #0E7F80);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.clinic-login-back-link:hover {
    text-decoration: underline;
}

.clinic-login-back-link--icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #101828;
    font-size: 22px;
    line-height: 1;
}

.clinic-login-back-link--icon:hover {
    text-decoration: none;
}

.clinic-login-copy {
    width: 100%;
}

.clinic-login-copy--forgot {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.clinic-login-copy__body {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.clinic-login-forgot {
    margin: 0 0 1.25rem;
    text-align: start;
}

.clinic-login-forgot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.75px;
    font-family: "IBM Plex Sans", sans-serif;
}

.clinic-login-forgot-link:hover .clinic-login-forgot-action {
    text-decoration: underline;
}

.clinic-login-forgot-label {
    color: #364153;
}

.clinic-login-forgot-action {
    color: var(--Foundation-Green-Normal, #0E7F80);
}

.clinic-login-text-link {
    color: var(--clinic-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    font-family: inherit;
}

.clinic-login-text-link:hover {
    text-decoration: underline;
}

.clinic-login-text-link--strong {
    font-weight: 600;
}

.clinic-login-register {
    margin: 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--clinic-login-subtitle);
}

.clinic-login-footer {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: center;
}

.clinic-login-card > .clinic-alert {
    margin: 0;
}

.clinic-lang-switch--footer {
    gap: 0.5rem;
}

.clinic-lang-switch__pill {
    appearance: none;
    border: 1px solid var(--clinic-primary);
    background: #fff;
    color: var(--clinic-primary-dark);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.clinic-lang-switch__pill:hover {
    background: rgba(14, 127, 128, 0.06);
}

.clinic-lang-switch__pill svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.clinic-login-card--stack {
    text-align: start;
}

.clinic-login-placeholder-title {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.clinic-login-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.clinic-login-card__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clinic-text);
    line-height: 1.35;
    text-align: start;
    flex: 1;
    min-width: 0;
}

.clinic-lang-switch {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.clinic-lang-switch__btn {
    appearance: none;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #d1e4e3;
    background: #fff;
    color: var(--clinic-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.clinic-lang-switch__btn svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.clinic-lang-switch__btn:hover {
    border-color: var(--clinic-primary);
    color: var(--clinic-primary-dark);
}

.clinic-lang-switch__btn.is-active {
    border-color: var(--clinic-primary);
    background: rgba(14, 127, 128, 0.1);
    color: var(--clinic-primary-dark);
}

.clinic-login-form {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.clinic-login-form--forgot {
    width: 100%;
}

.clinic-field--login {
    width: 100%;
    margin-bottom: 16px;
}

.clinic-login-form .clinic-field--login:last-of-type {
    margin-bottom: 8px;
}

.clinic-field__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--clinic-text);
    text-align: start;
}

/* Figma — label 14 / 20, #0a0a0a (IBM Plex on guest page) */
.clinic-field__label--figma {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 8px;
    color: #0a0a0a;
}

.clinic-req {
    color: var(--clinic-danger);
    font-weight: 700;
}

/* Figma 15267:11187 — required asterisk #e63946 */
.clinic-field--login .clinic-req {
    color: #e63946;
    font-weight: 400;
}

/* Figma 15267:11188 — shell #f3f3f5, 48px row, 8px radius, 12×8 padding */
.clinic-input-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    width: 100%;
    background: #f3f3f5;
    border: 1.5px solid transparent;
    border-radius: 8px;
    box-sizing: border-box;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.clinic-input-shell:hover {
    border-color: rgba(0, 0, 0, 0.06);
}

.clinic-input-shell:focus-within {
    border-color: rgba(14, 127, 128, 0.35);
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.16);
}

.clinic-input-shell--figma-border {
    background: #fff;
    border: 1px solid rgba(106, 114, 130, 0.2);
}

.clinic-input-shell--figma-border:hover {
    border-color: rgba(106, 114, 130, 0.35);
}

.clinic-input-shell--figma-border:focus-within {
    border-color: rgba(14, 127, 128, 0.35);
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.16);
}

.clinic-input-shell__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cccccc;
}

.clinic-input-shell__svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Figma 15267:11192 — 16px, line 24; placeholder #ccc */
.clinic-input-shell__control {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0a0a0a;
}

.clinic-input-shell__control::placeholder {
    color: #cccccc;
}

.clinic-input-shell__control:focus {
    outline: none;
}

/* RTL: email/tel/password inputs default to a left-aligned placeholder
   (browsers assume an LTR value), so force the start (right) edge. */
[dir="rtl"] .clinic-input-shell__control,
[dir="rtl"] .clinic-register-textarea {
    text-align: right;
}

[dir="rtl"] .clinic-input-shell__control::placeholder,
[dir="rtl"] .clinic-register-textarea::placeholder {
    text-align: right;
}

.clinic-login-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 0;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.clinic-login-submit:hover {
    background: var(--clinic-primary-dark);
}

.clinic-login-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.35);
}

.clinic-alert {
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.clinic-alert--error {
    background: rgba(220, 38, 38, 0.08);
    color: var(--clinic-danger);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

@media (max-width: 480px) {
    .clinic-login-card {
        width: 100%;
        max-width: none;
        padding: 32px 24px;
        gap: 24px;
        border-radius: 20px;
    }

    .clinic-login-card--forgot {
        min-height: auto;
    }

    .clinic-login-intro--forgot {
        gap: 28px;
    }

    .clinic-login-copy--forgot,
    .clinic-login-form--forgot {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .clinic-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: min(304px, 86vw);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    }

    [dir="rtl"] .clinic-sidebar {
        transform: translateX(100%);
    }

    .clinic-sidebar.is-open {
        transform: translateX(0);
    }

    .clinic-sidebar__close {
        display: inline-flex;
    }

    .clinic-body--menu-open .clinic-shell__backdrop {
        display: block;
    }

    .clinic-body--menu-open {
        overflow: hidden;
    }

    .clinic-topbar__menu-btn {
        display: inline-flex;
    }

    .clinic-topbar {
        padding: 16px 20px;
    }

    .clinic-topbar__title {
        font-size: 24px;
        line-height: 30px;
    }

    .clinic-topbar__subtitle {
        font-size: 14px;
        line-height: 21px;
    }

    .clinic-content {
        padding: 1rem;
    }

    .clinic-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .clinic-kpi {
        padding: 0.85rem 0.95rem;
    }

    .clinic-kpi__value {
        font-size: 1.35rem;
    }

    .clinic-table th,
    .clinic-table td {
        padding: 0.6rem 0.75rem;
        white-space: nowrap;
    }

    .clinic-profile-page {
        padding-inline: 0;
    }

    .clinic-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .clinic-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .clinic-topbar__icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .clinic-topbar__actions {
        gap: 8px;
    }
}

/* ── OTP Code Entry ─────────────────────────────────────────── */
.clinic-otp-info {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #6b7280;
    text-align: start;
    width: 100%;
}

.clinic-otp-form {
    gap: 20px;
}

.clinic-otp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
    width: 100%;
    /* OTP codes always read left-to-right, even in Arabic (RTL) UI, so the
       first digit box stays on the left and typing fills left-to-right. */
    direction: ltr;
}

.clinic-otp-box {
    width: 100%;
    height: 62px;
    padding: 0;
    border-radius: 16px;
    border: none;
    background: #eee;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #111928;
    font-family: inherit;
    outline: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    cursor: text;
}

.clinic-otp-box::placeholder {
    color: #9ca3af;
    font-size: 20px;
    font-weight: 400;
}

.clinic-otp-box:focus {
    background: #e0e0e0;
    box-shadow: 0 0 0 2px var(--clinic-primary);
}

.clinic-otp-box.is-filled {
    background: #fff;
    color: var(--clinic-primary);
}

.clinic-otp-resend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.clinic-otp-resend__info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.clinic-otp-resend__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.clinic-otp-resend__text {
    font-size: 13px;
    line-height: 20px;
    color: #6b7280;
}

.clinic-otp-resend__link {
    color: var(--clinic-primary);
    font-weight: 500;
    text-decoration: none;
}

.clinic-otp-resend__link[aria-disabled="true"] {
    color: #9ca3af;
    pointer-events: none;
}

.clinic-otp-resend__link:not([aria-disabled]):hover {
    text-decoration: underline;
}

.clinic-otp-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Registration Success Overlay ──────────────────────────── */
.clinic-register-success-overlay {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.clinic-register-success-card {
    background: #fff;
    border-radius: 24px;
    padding: 85px 50px;
    max-width: 741px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    text-align: center;
}

.clinic-register-success-icon {
    width: 114px;
    height: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ── Registration held for payment ─────────────────────────────────────── */
.clinic-register-payment-card {
    gap: 28px;
    padding: 56px 50px;
}

.clinic-register-payment-icon__ring {
    background: rgba(202, 138, 4, 0.14);
}

.clinic-register-payment-icon__circle {
    background: #ca8a04;
}

.clinic-register-payment-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0a0a0a;
}

.clinic-register-payment-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
    font-size: 15px;
    font-weight: 500;
}

.clinic-register-payment-facts {
    margin: 0;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clinic-register-payment-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.clinic-register-payment-facts > div:last-child {
    border-bottom: none;
}

.clinic-register-payment-facts dt {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.clinic-register-payment-facts dd {
    margin: 0;
    color: #0a0a0a;
    font-size: 15px;
    font-weight: 600;
}

.clinic-register-payment-facts__ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.clinic-register-payment-btn {
    min-width: 260px;
    height: 52px;
    padding: 0 32px;
    border: none;
    border-radius: 16px;
    background: var(--clinic-primary, #0f766e);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.clinic-register-payment-btn:hover {
    filter: brightness(1.08);
}

.clinic-register-payment-note {
    margin: 0;
    max-width: 460px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .clinic-register-payment-card {
        padding: 40px 22px;
    }

    .clinic-register-payment-title {
        font-size: 22px;
    }

    .clinic-register-payment-btn {
        width: 100%;
        min-width: 0;
    }
}

.clinic-register-success-icon__ring {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background: #dbecec;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clinic-register-success-icon__circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: #0e7f80;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clinic-register-success-icon__circle svg {
    width: 50px;
    height: 50px;
}

.clinic-register-success-message {
    margin: 0;
    max-width: 641px;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.6875;
    color: #000;
    letter-spacing: 0;
}

[dir="rtl"] .clinic-register-success-message {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

@media (max-width: 767px) {
    .clinic-register-success-card {
        padding: 48px 24px;
        gap: 32px;
    }

    .clinic-register-success-message {
        max-width: 100%;
        font-size: 24px;
        line-height: 1.6;
    }

    .clinic-register-success-icon {
        width: 92px;
        height: 92px;
    }

    .clinic-register-success-icon__ring {
        width: 92px;
        height: 92px;
    }

    .clinic-register-success-icon__circle {
        width: 76px;
        height: 76px;
    }

    .clinic-register-success-icon__circle svg {
        width: 42px;
        height: 42px;
    }
}

/* ── Bulk Upload Modal ──────────────────────────────────────── */
#bulk-upload-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

dialog.clinic-modal:not([open]) {
    display: none;
}

.clinic-modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.clinic-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.clinic-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #0b1f3d;
}

.clinic-modal__subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #6a7282;
}

.clinic-modal__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6a7282;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.clinic-modal__close:hover {
    background: #f3f4f6;
    color: #111928;
}

.clinic-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.clinic-modal__footer {
    width: 100%;
}

.clinic-bulk-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.clinic-bulk-drop:hover {
    border-color: var(--clinic-primary);
    background: #fafcfc;
}

.clinic-bulk-drop__hint {
    font-size: 14px;
    color: #9ca3af;
    pointer-events: none;
}

.clinic-bulk-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f4f5f7;
    border-radius: 12px;
}

.clinic-bulk-info__row {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #364153;
}

.clinic-bulk-info__row strong {
    font-weight: 700;
    color: #0b1f3d;
}

.clinic-bulk-template-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.clinic-bulk-template-link {
    font-size: 13px;
    color: var(--clinic-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: flex-start;
}

.clinic-bulk-template-link:hover {
    color: var(--clinic-primary-dark);
}

.clinic-bulk-errors {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 13px;
    line-height: 20px;
    color: #b91c1c;
    max-height: 160px;
    overflow-y: auto;
}

/* ── Settings list ───────────────────────────────────────── */
.clinic-profile-page {
    padding-inline: 8px;
}

.clinic-profile-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 24px;
    overflow: hidden;
}

/* Pages that stack these were running them straight into each other — the
   card brings no outer spacing of its own, and every such page had exactly one
   card until the visibility screen added a second. */
.clinic-profile-card + .clinic-profile-card {
    margin-top: 16px;
}

.clinic-profile-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.clinic-profile-card__head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #f9fafb;
    color: #101828;
    flex-shrink: 0;
}

.clinic-profile-card__head-icon svg {
    width: 16px;
    height: 16px;
}

.clinic-profile-card__head-title {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

/* The head is a flex ROW — an icon beside a title. A card that also wants a
   subtitle has to put the two in a column of their own, or the subtitle lines
   up beside the title instead of under it. */
.clinic-profile-card__head-text {
    min-width: 0;
}

.clinic-profile-card__head-sub {
    margin: 4px 0 0;
    color: var(--clinic-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Everything below the head. .clinic-profile-card itself has no padding — it
   is a plain rounded surface, and each section brings its own — so a card
   whose body is written straight into it renders flush against the corner. */
.clinic-profile-card__body {
    padding: 20px;
}

.clinic-profile-form {
    padding: 36px 24px 24px;
}

.clinic-profile-section + .clinic-profile-section {
    margin-top: 24px;
    padding-top: 25px;
    border-top: 1px solid #f3f4f6;
}

.clinic-profile-section__title {
    margin: 0 0 20px;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

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

.clinic-profile-field {
    min-width: 0;
}

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

.clinic-profile-field__label {
    display: block;
    margin-bottom: 8px;
    color: #364153;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.clinic-profile-field__control {
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.clinic-profile-field__shell--readonly {
    background: #ffffff;
}

.clinic-profile-hours-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding-inline: 12px;
}

.clinic-profile-hours-shell__time {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 0;
    outline: none;
}

.clinic-profile-hours-shell__time::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
}

.clinic-profile-hours-shell__sep {
    flex-shrink: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 20px;
}

.clinic-profile-days-picker {
    position: relative;
}

.clinic-profile-days-picker__trigger {
    cursor: pointer;
}

.clinic-profile-days-picker__display {
    cursor: pointer;
    user-select: none;
}

.clinic-profile-days-picker__panel {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 30;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.clinic-profile-days-picker:hover .clinic-profile-days-picker__panel,
.clinic-profile-days-picker:focus-within .clinic-profile-days-picker__panel,
.clinic-profile-days-picker.is-open .clinic-profile-days-picker__panel {
    display: grid;
}

.clinic-profile-day-chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.clinic-profile-day-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.clinic-profile-day-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    color: #364153;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.clinic-profile-day-chip input:checked + span {
    border-color: rgba(14, 127, 128, 0.35);
    background: rgba(14, 127, 128, 0.12);
    color: #0e7f80;
}

.clinic-profile-day-chip input:focus-visible + span {
    outline: 2px solid rgba(14, 127, 128, 0.22);
    outline-offset: 2px;
}

.clinic-profile-textarea {
    width: 100%;
    min-height: 64px;
    padding: 13px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    resize: vertical;
    background: #ffffff;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clinic-profile-textarea:hover {
    border-color: rgba(106, 114, 130, 0.35);
}

.clinic-profile-textarea:focus {
    outline: none;
    border-color: rgba(14, 127, 128, 0.35);
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.16);
}

.clinic-profile-textarea--readonly {
    background: #ffffff;
}

.clinic-profile-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.clinic-profile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 135px;
    min-height: 44px;
    padding: 11px 16px;
    border: none;
    border-radius: 14px;
    background: #0e7f80;
    color: #ffffff;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.clinic-profile-submit:hover {
    background: #0b6566;
}

.clinic-profile-submit:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.22);
    outline-offset: 2px;
}

.clinic-profile-submit svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[dir="rtl"] .clinic-profile-card__head-title,
[dir="rtl"] .clinic-profile-section__title,
[dir="rtl"] .clinic-profile-field__label,
[dir="rtl"] .clinic-profile-field__control,
[dir="rtl"] .clinic-profile-textarea,
[dir="rtl"] .clinic-profile-submit {
    font-family: "Tajawal", "IBM Plex Sans", system-ui, sans-serif;
}

.clinic-settings-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1088px;
    width: 100%;
}

.clinic-settings-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 114px;
    padding: 25px 24px 25px 25px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 24px;
    text-align: start;
    text-decoration: none;
    color: #101828;
    font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.clinic-settings-item:hover {
    background: #fcfdfd;
    border-color: #e5e7eb;
    text-decoration: none;
    color: #101828;
}

.clinic-settings-item:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.18);
    outline-offset: 2px;
}

.clinic-settings-item__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #e7f2f2;
    color: #0b6b6c;
}

.clinic-settings-item__icon svg {
    width: 32px;
    height: 32px;
}

.clinic-settings-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.clinic-settings-item__title {
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 25.5px;
    color: #101828;
}

.clinic-settings-item__sub {
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 22.75px;
    color: #6a7282;
}

.clinic-settings-item__chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #98a2b3;
}

[dir="rtl"] .clinic-settings-item__chevron {
    transform: scaleX(-1);
}

[dir="rtl"] .clinic-settings-item__title,
[dir="rtl"] .clinic-settings-item__sub {
    font-family: "Tajawal", "IBM Plex Sans", system-ui, sans-serif;
}


/* ── Change-password flow (centered card within dashboard) ──────────────── */
.clinic-settings-flow {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.clinic-settings-flow__card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 32px 28px;
    width: 100%;
    max-width: 460px;
}

.clinic-settings-flow__header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
    margin-bottom: 28px;
}

.clinic-settings-flow__back {
    grid-row: 1;
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: #0A0A0A;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.clinic-settings-flow__back:hover {
    opacity: 0.6;
    text-decoration: none;
    color: #0A0A0A;
}

[dir="rtl"] .clinic-settings-flow__back {
    transform: scaleX(-1);
}

.clinic-settings-flow__title {
    grid-row: 1;
    grid-column: 2;
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--clinic-text);
    line-height: 1.3;
}

.clinic-settings-flow__subtitle {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    color: var(--clinic-muted);
}

.clinic-settings-flow__btn {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: var(--clinic-primary);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.clinic-settings-flow__btn:hover {
    background: var(--clinic-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

.clinic-settings-flow__btn--outline {
    background: transparent;
    color: var(--clinic-primary);
    border: 2px solid var(--clinic-primary);
}

.clinic-settings-flow__btn--outline:hover {
    background: var(--clinic-primary-soft);
    color: var(--clinic-primary-dark);
}

/* success screen — Figma: padding 45px 0, gap 56px */
.clinic-settings-flow__success {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
    text-align: center;
    padding: 45px 0;
    width: 100%;
}

.clinic-settings-flow__success-title {
    width: 100%;
    max-width: 663px;
    margin: 0;
    color: #000;
    text-align: center;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 54px;
}

/* ── Change-password modal (<dialog>) ───────────────────────────────────── */
.clinic-modal__dialog {
    border: none;
    outline: none;
    border-radius: 20px;
    padding: 32px 28px;
    width: min(460px, calc(100vw - 2rem));
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

/* Wider dialog when showing the success step — Figma: 741×458, radius 24 */
.clinic-modal__dialog--success {
    width: min(741px, calc(100vw - 2rem));
    padding: 0;
    border-radius: 24px;
}

.clinic-modal__dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

/* ── Language picker (inside lang modal) ────────────────────────────────── */
.clinic-lang-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.clinic-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--clinic-card);
    border: 1px solid var(--clinic-border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--clinic-text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.clinic-lang-option:hover {
    background: var(--clinic-surface);
}

.clinic-lang-option.is-active {
    border-color: var(--clinic-primary);
    background: var(--clinic-primary-soft);
    color: var(--clinic-primary-dark);
}

.clinic-lang-option__check {
    color: var(--clinic-primary);
    font-weight: 700;
    opacity: 0;
}

.clinic-lang-option.is-active .clinic-lang-option__check {
    opacity: 1;
}

/* ── Legal pages (Terms / Privacy) ───────────────────────────────────────── */
.clinic-legal__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    color: var(--clinic-text);
}

.clinic-legal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clinic-primary);
}

.clinic-legal__head-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--clinic-text);
}

.clinic-legal__body {
    padding: 1.25rem 1.5rem 1.75rem;
    overflow: visible;
}

.clinic-legal__section + .clinic-legal__section {
    margin-top: 1.5rem;
}

.clinic-legal__section-title {
    margin: 0 0 0.5rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--clinic-text);
    line-height: 1.4;
}

.clinic-legal__section-body {
    margin: 0;
    color: var(--clinic-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.clinic-legal__list {
    margin: 0.6rem 0 0;
    padding-inline-start: 1.4rem;
    color: var(--clinic-muted);
    font-size: 0.9rem;
    line-height: 1.85;
}

.clinic-legal__list li {
    padding-inline-start: 0.25rem;
}

.clinic-legal__list--plain {
    list-style: none;
    padding-inline-start: 0;
    line-height: 1.95;
}

.clinic-legal__list--plain li {
    padding-inline-start: 0;
}

.clinic-legal__footer {
    margin-top: 1.75rem;
    padding: 0.75rem 1rem;
    background: var(--clinic-surface);
    border: 1px solid var(--clinic-border);
    border-radius: 8px;
    color: var(--clinic-muted);
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .clinic-topbar {
        padding: 14px 16px;
        gap: 10px;
    }

    .clinic-topbar__page-info {
        gap: 4px;
    }

    .clinic-topbar__title {
        font-size: 20px;
        line-height: 26px;
    }

    .clinic-topbar__subtitle {
        font-size: 13px;
        line-height: 19px;
    }

    .clinic-topbar__actions {
        gap: 8px;
    }

    .clinic-profile-form {
        padding: 24px 16px 16px;
    }

    .clinic-profile-card {
        border-radius: 20px;
    }

    .clinic-profile-card__head {
        padding: 16px;
    }

    .clinic-profile-card__head-title,
    .clinic-profile-section__title {
        font-size: 17px;
        line-height: 26px;
    }

    .clinic-profile-submit {
        width: 100%;
    }

    .clinic-settings-item {
        min-height: 96px;
        gap: 14px;
        padding: 18px 16px;
        border-radius: 20px;
    }

    .clinic-settings-item__icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .clinic-settings-item__icon svg {
        width: 26px;
        height: 26px;
    }

    .clinic-settings-item__title {
        font-size: 16px;
        line-height: 23px;
    }

    .clinic-settings-item__sub {
        font-size: 13px;
        line-height: 20px;
    }

    .clinic-legal__body {
        padding: 1rem 1rem 1.25rem;
    }

    .clinic-legal__section-title {
        font-size: 0.95rem;
    }

    .clinic-legal__section-body,
    .clinic-legal__list {
        font-size: 0.86rem;
    }
}

/* ── Doctors Management page ─────────────────────────────────────────────── */
.clinic-doctors-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Plan seat counter in the doctors toolbar. */
.clinic-doctors-toolbar__spacer {
    flex: 1 1 auto;
}

.clinic-doctor-quota {
    font-size: 13px;
    color: var(--clinic-muted);
    padding: 6px 12px;
    border-radius: 999px;
    background: #f8fafc;
    white-space: nowrap;
}

.clinic-doctor-quota strong {
    color: var(--clinic-primary);
    font-weight: 600;
}

.clinic-doctor-quota.is-full {
    background: #fef2f2;
}

.clinic-doctor-quota.is-full strong {
    color: #dc2626;
}

.clinic-btn-add-doctor-toolbar.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.clinic-doctors-card {
    border-radius: 16px;
}

.clinic-doctors-table {
    font-size: 0.9rem;
}

.clinic-doctors-table thead th {
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--clinic-muted);
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--clinic-border);
}

.clinic-doctors-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--clinic-text);
    vertical-align: middle;
}

.clinic-doctors-table tbody tr:last-child td {
    border-bottom: none;
}

.clinic-doctors-table__name {
    font-weight: 600;
}

.clinic-doctors-table__col-center {
    text-align: center;
}

.clinic-doctors-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clinic-doctor-pass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clinic-doctor-pass__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: #0f172a;
    direction: ltr;
}

.clinic-doctor-pass__btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    color: #0f766e;
    cursor: pointer;
    transition: background-color .15s ease;
}

.clinic-doctor-pass__btn:hover {
    background: #f1f5f9;
}

.clinic-doctor-pass__empty {
    color: #94a3b8;
}

.clinic-doctors-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--clinic-muted);
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.clinic-doctors-action:hover {
    background: var(--clinic-surface);
}

.clinic-doctors-action--schedule {
    background: rgba(14, 127, 128, 0.08);
    color: var(--clinic-primary);
}

.clinic-doctors-action--schedule:hover {
    background: rgba(14, 127, 128, 0.16);
}

.clinic-doctors-action--edit {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.clinic-doctors-action--edit:hover {
    background: rgba(37, 99, 235, 0.16);
}

.clinic-doctors-action--delete {
    background: rgba(220, 38, 38, 0.08);
    color: var(--clinic-danger);
}

.clinic-doctors-action--delete:hover {
    background: rgba(220, 38, 38, 0.16);
}

/* Status pills (used on doctors table; reusable elsewhere) */
.clinic-status-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.clinic-status-pill--approved {
    background: #fef9c3;
    color: #a16207;
}

.clinic-status-pill--pending {
    background: #ffedd5;
    color: #c2410c;
}

.clinic-status-pill--rejected {
    background: #fee2e2;
    color: #b91c1c;
}

.clinic-status-pill--active {
    background: #dcfce7;
    color: #15803d;
}

.clinic-doctors-pagination {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--clinic-border);
}

.clinic-doctors-pagination nav {
    display: flex;
    justify-content: flex-end;
}

/* ── Appointments page ─────────────────────────────────────────────────── */
.clinic-appointments-card {
    border-radius: 16px;
}

.clinic-appointments-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--clinic-border);
}

.clinic-appointments-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.clinic-appointments-filters__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 150px;
    margin: 0;
}

.clinic-appointments-filters__field--search {
    flex: 2 1 280px;
}

.clinic-appointments-filters__field--narrow {
    flex: 0 0 96px;
    min-width: 96px;
}

.clinic-appointments-filters__field > span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.clinic-appointments-filters__field select,
.clinic-appointments-filters__field input {
    width: 100%;
    height: 36px;
    padding: 0 13px;
    border: 1.098px solid #e5e7eb;
    border-radius: 14px;
    background: #f3f3f5;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    outline: none;
}

.clinic-appointments-filters__field select {
    cursor: pointer;
}

.clinic-appointments-filters__field select:focus,
.clinic-appointments-filters__field input:focus {
    border-color: var(--clinic-primary, #0f766e);
}

.clinic-appointments-filters__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.clinic-appointments-filters__apply {
    height: 36px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    background: var(--clinic-primary, #0f766e);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.clinic-appointments-filters__apply:hover {
    filter: brightness(1.08);
}

.clinic-appointments-filters__clear {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.clinic-appointments-filters__clear:hover {
    color: #b91c1c;
}

.clinic-appointments-filters__count {
    margin-inline-start: auto;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 720px) {
    .clinic-appointments-filters__field,
    .clinic-appointments-filters__field--search,
    .clinic-appointments-filters__field--narrow {
        flex: 1 1 100%;
        min-width: 0;
    }

    .clinic-appointments-filters__count {
        margin-inline-start: 0;
    }
}

.clinic-appointments-table {
    font-size: 0.9rem;
}

.clinic-appointments-table thead th {
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--clinic-muted);
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--clinic-border);
}

.clinic-appointments-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--clinic-text);
    vertical-align: middle;
}

.clinic-appointments-table tbody tr:last-child td {
    border-bottom: none;
}

.clinic-appointments-table__name {
    font-weight: 600;
}

.clinic-appointments-table__col-center {
    text-align: center;
}

/* Visit-type pills (used on appointments table) */
.clinic-visit-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.clinic-visit-pill--checkup {
    background: #f3e8ff;
    color: #7e22ce;
}

.clinic-visit-pill--consultation {
    background: #dbeafe;
    color: #1d4ed8;
}

.clinic-visit-pill--followup {
    background: #fef9c3;
    color: #a16207;
}

/* Booking-source pills (app / clinic dashboard / integration) */
.clinic-source-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.clinic-source-pill--waslat_care_app {
    background: #ecfdf5;
    color: #047857;
}

.clinic-source-pill--clinic_admin {
    background: #eff6ff;
    color: #1d4ed8;
}

.clinic-source-pill--integration {
    background: #fff7ed;
    color: #c2410c;
}

.clinic-notifications__source-pill,
.clinic-dashboard__notification-body .clinic-source-pill {
    margin-top: 0.45rem;
}

/* Appointment-status pills */
.clinic-status-pill--appt-pending {
    background: #fef9c3;
    color: #a16207;
}

.clinic-status-pill--appt-confirmed {
    background: #dbeafe;
    color: #1d4ed8;
}

.clinic-status-pill--appt-completed {
    background: #dcfce7;
    color: #15803d;
}

.clinic-status-pill--appt-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.clinic-status-pill--appt-unavailable {
    background: #ffedd5;
    color: #c2410c;
}

@media (max-width: 768px) {
    .clinic-appointments-table thead th,
    .clinic-appointments-table tbody td {
        padding: 0.75rem 0.75rem;
        font-size: 0.85rem;
    }
}

.clinic-appointments-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.clinic-appointments-row:hover {
    background: var(--clinic-surface);
}

/* ── Appointment details page ──────────────────────────────────────────── */
.clinic-appt-show {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clinic-appt-show__status {
    align-self: flex-end;
}

.clinic-appt-section {
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 16px;
    overflow: hidden;
}

.clinic-appt-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid var(--clinic-border);
}

.clinic-appt-section__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-appt-section__icon--violet {
    background: #ede9fe;
    color: #6d28d9;
}

.clinic-appt-section__icon--amber {
    background: #fef3c7;
    color: #b45309;
}

.clinic-appt-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--clinic-text);
}

.clinic-appt-section__body {
    padding: 20px 24px;
}

.clinic-appt-grid {
    display: grid;
    gap: 16px;
}

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

.clinic-appt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.clinic-appt-field__label {
    font-size: 0.82rem;
    color: var(--clinic-muted);
}

.clinic-appt-field__value {
    font-size: 0.92rem;
    color: var(--clinic-text);
}

.clinic-appt-field__value--strong {
    font-weight: 600;
}

.clinic-appt-field__value--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--clinic-text);
    font-weight: 500;
}

.clinic-appt-field__value--link {
    color: var(--clinic-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.clinic-appt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
}

.clinic-appt-field--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.clinic-appt-field--row .clinic-appt-field__label {
    flex-shrink: 0;
}

.clinic-appt-field--row .clinic-appt-field__value {
    text-align: end;
}

.clinic-appt-notes {
    margin: 0;
    color: var(--clinic-text);
    font-size: 0.92rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .clinic-appt-grid--3 {
        grid-template-columns: 1fr;
    }

    .clinic-appt-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .clinic-doctors-toolbar {
        justify-content: stretch;
    }

    .clinic-doctors-toolbar > * {
        flex: 1 1 auto;
    }

    .clinic-doctors-table thead th,
    .clinic-doctors-table tbody td {
        padding: 0.75rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ── Topbar back button (used on Add Doctor) ─────────────────────────────── */
.clinic-topbar__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clinic-topbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--clinic-text);
    background: transparent;
    flex-shrink: 0;
}

.clinic-topbar__back:hover {
    background: #f3f4f6;
    text-decoration: none;
}

[dir="rtl"] .clinic-topbar__back svg {
    transform: scaleX(-1);
}

/* ── Add Doctor page ────────────────────────────────────────────────────── */
.clinic-doctors-create {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.clinic-schedule-months--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.clinic-schedule-months--2col .clinic-schedule-month {
    flex: none;
    min-width: 0;
}

@media (max-width: 900px) {
    .clinic-schedule-months--2col {
        grid-template-columns: 1fr;
    }
}

.clinic-doctors-create__file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
    transition: filter 0.15s ease;
}

.clinic-doctors-create__file-btn:hover {
    filter: brightness(0.96);
}

.clinic-doctors-create__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.clinic-doctors-create__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.clinic-doctors-create__btn--cancel {
    background: #fff;
    color: var(--clinic-text);
    border-color: var(--clinic-border);
}

.clinic-doctors-create__btn--cancel:hover {
    background: var(--clinic-surface);
    text-decoration: none;
}

.clinic-doctors-create__btn--submit {
    background: var(--clinic-primary);
    color: #fff;
    min-width: 220px;
}

.clinic-doctors-create__btn--submit:hover {
    background: var(--clinic-primary-dark);
}

@media (max-width: 540px) {
    .clinic-doctors-create__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .clinic-doctors-create__btn {
        width: 100%;
    }
}

/* ── Doctor schedule detail ─────────────────────────────────────────────── */
.clinic-doctor-schedule-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clinic-doctor-schedule-page__toolbar {
    display: flex;
    align-items: center;
}

.clinic-doctor-schedule-page__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1.098px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
}

.clinic-doctor-schedule-page__back:hover {
    background: #f9fafb;
    text-decoration: none;
}

.clinic-doctor-schedule-page__back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[dir="rtl"] .clinic-doctor-schedule-page__back svg {
    transform: scaleX(-1);
}

.clinic-doctor-schedule-hero {
    background: #ffffff;
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    overflow: hidden;
}

.clinic-doctor-schedule-hero__inner {
    padding: 24px;
}

.clinic-doctor-schedule-hero__headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.clinic-doctor-schedule-hero__name {
    margin: 0;
    width: 100%;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.clinic-doctor-schedule-hero__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.clinic-doctor-schedule-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #364153;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.clinic-doctor-schedule-chip--primary {
    background: rgba(14, 127, 128, 0.1);
    color: #0e7f80;
}

.clinic-doctor-schedule-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clinic-doctor-schedule-block__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clinic-doctor-schedule-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #f9fafb;
    color: #101828;
    flex-shrink: 0;
}

.clinic-doctor-schedule-block__icon svg {
    width: 20px;
    height: 20px;
}

.clinic-doctor-schedule-block__title {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.clinic-doctor-schedule-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.clinic-doctor-schedule-month {
    display: flex;
    flex-direction: column;
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    background: #ffffff;
    overflow: hidden;
}

.clinic-doctor-schedule-month__head {
    padding: 20px;
    border-bottom: 1.098px solid #f3f4f6;
}

.clinic-doctor-schedule-month__title {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.clinic-doctor-schedule-month__body {
    padding: 20px;
}

.clinic-doctor-schedule-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.clinic-doctor-schedule-weekdays__item {
    text-align: center;
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.clinic-doctor-schedule-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.clinic-doctor-schedule-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 62px;
    padding: 5px 4px;
    border: 1.098px solid #f3f4f6;
    border-radius: 14px;
    background: #ffffff;
}

.clinic-doctor-schedule-day--weekend {
    background: #f9fafb;
}

.clinic-doctor-schedule-day--outside {
    background: #ffffff;
}

.clinic-doctor-schedule-day--outside.clinic-doctor-schedule-day--weekend {
    background: #f9fafb;
}

.clinic-doctor-schedule-day--scheduled {
    border-color: #0e7f80;
}

.clinic-doctor-schedule-day__label {
    width: 100%;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 16.5px;
    text-align: start;
}

.clinic-doctor-schedule-day--outside .clinic-doctor-schedule-day__label {
    color: transparent;
}

.clinic-doctor-schedule-day:not(.clinic-doctor-schedule-day--scheduled):not(.clinic-doctor-schedule-day--outside) .clinic-doctor-schedule-day__label,
.clinic-doctor-schedule-day--outside .clinic-doctor-schedule-day__label {
    color: #99a1af;
}

.clinic-doctor-schedule-day__dot {
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0e7f80;
    flex-shrink: 0;
}

.clinic-doctor-schedule-month__legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 20px 20px;
}

.clinic-doctor-schedule-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #364153;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.clinic-doctor-schedule-legend__dot,
.clinic-doctor-schedule-legend__weekend {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

.clinic-doctor-schedule-legend__dot {
    background: #0e7f80;
}

.clinic-doctor-schedule-legend__weekend {
    border-radius: 4px;
    border: 1px solid #f3f4f6;
    background: #f9fafb;
}

.clinic-doctor-schedule-info {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 24px 20px;
    border: 1.098px solid rgba(14, 127, 128, 0.2);
    border-radius: 24px;
    background: rgba(14, 127, 128, 0.05);
}

.clinic-doctor-schedule-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(14, 127, 128, 0.1);
    color: #0b6b6c;
    flex-shrink: 0;
}

.clinic-doctor-schedule-info__icon svg {
    width: 20px;
    height: 20px;
}

.clinic-doctor-schedule-info__content {
    min-width: 0;
    flex: 1 0 0;
}

.clinic-doctor-schedule-info__title {
    margin: 0 0 3.996px;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22.5px;
}

.clinic-doctor-schedule-info__body {
    margin: 0;
    color: #4a5565;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.75px;
}

@media (max-width: 991px) {
    .clinic-doctor-schedule-months {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .clinic-doctor-schedule-page__back {
        width: 100%;
        justify-content: center;
    }

    .clinic-doctor-schedule-hero__headline {
        gap: 8px;
    }

    .clinic-doctor-schedule-block__title,
    .clinic-doctor-schedule-hero__name {
        font-size: 20px;
        line-height: 28px;
    }

    .clinic-doctor-schedule-month__body,
    .clinic-doctor-schedule-month__head,
    .clinic-doctor-schedule-month__legend {
        padding-inline: 14px;
    }

    .clinic-doctor-schedule-days,
    .clinic-doctor-schedule-weekdays {
        gap: 6px;
    }

    .clinic-doctor-schedule-day {
        min-height: 54px;
        padding: 5px 3px;
    }

    .clinic-doctor-schedule-day__label,
    .clinic-doctor-schedule-weekdays__item,
    .clinic-doctor-schedule-legend {
        font-size: 11px;
    }

    .clinic-doctor-schedule-info {
        padding: 16px;
        gap: 12px;
    }
}

/* ─── Doctor Save Success Overlay ──────────────────────────────── */

.clinic-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    animation: clinic-save-overlay-in 0.25s ease forwards;
}

.clinic-save-overlay.is-hiding {
    animation: clinic-save-overlay-out 0.35s ease forwards;
}

@keyframes clinic-save-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes clinic-save-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.clinic-save-overlay__card {
    background: #fff;
    border-radius: 24px;
    padding: 45px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: 100%;
    max-width: 460px;
    animation: clinic-save-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.clinic-save-overlay.is-hiding .clinic-save-overlay__card {
    animation: clinic-save-card-out 0.3s ease forwards;
}

@keyframes clinic-save-card-in {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

@keyframes clinic-save-card-out {
    from { transform: scale(1);    opacity: 1; }
    to   { transform: scale(0.9);  opacity: 0; }
}

.clinic-save-overlay__icon-wrap {
    position: relative;
    width: 114px;
    height: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-save-overlay__ring {
    position: absolute;
    inset: -19px;
    border-radius: 50%;
    background: #dbecec;
}

.clinic-save-overlay__circle {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #0e7f80;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clinic-save-overlay__text {
    margin: 0;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 54px;
    color: #000;
    text-align: center;
}

/* ─── Doctor Delete Confirmation Modal ─────────────────────────── */

.clinic-delete-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.clinic-delete-modal-overlay.is-open {
    display: flex;
}

.clinic-delete-modal {
    background: #fff;
    border-radius: 24px;
    padding: 45px 56px;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 47px;
}

.clinic-delete-modal__icon-wrap {
    flex-shrink: 0;
    line-height: 0;
}

.clinic-delete-modal__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    width: 100%;
}

.clinic-delete-modal__title {
    margin: 0;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 28px;
    color: #0a0a0a;
    white-space: nowrap;
}

.clinic-delete-modal__subtitle {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #717182;
}

.clinic-delete-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.clinic-delete-modal__btn-confirm {
    display: block;
    width: 100%;
    height: 48px;
    background: #b91c1c;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.clinic-delete-modal__btn-confirm:hover {
    background: #991b1b;
}

.clinic-delete-modal__btn-back {
    display: block;
    width: 100%;
    height: 48px;
    background: transparent;
    border: 1px solid #141414;
    border-radius: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #141414;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.clinic-delete-modal__btn-back:hover {
    background: #f3f4f6;
}

@media (max-width: 480px) {
    .clinic-delete-modal {
        padding: 32px 24px;
    }

    .clinic-delete-modal__title {
        font-size: 24px;
    }
}

/* ─── Doctor Edit Modal ─────────────────────────────────────────── */

.clinic-edit-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

.clinic-edit-modal-overlay.is-open {
    display: flex;
}

body.modal-open {
    overflow: hidden;
}

.clinic-edit-modal {
    background: #fff;
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 752px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

/* Header */
.clinic-edit-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.clinic-edit-modal__header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
    min-width: 0;
}

.clinic-edit-modal__title {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #101828;
}

.clinic-edit-modal__subtitle {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #6a7282;
}

.clinic-edit-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6a7282;
    opacity: 0.7;
    border-radius: 6px;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}

.clinic-edit-modal__close:hover {
    opacity: 1;
    background: #f3f4f6;
}

/* Validation errors */
.clinic-edit-modal__errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
}

.clinic-edit-modal__errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clinic-edit-modal__errors li {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 13px;
    color: #b91c1c;
    line-height: 1.5;
}

/* Form */
.clinic-edit-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.clinic-edit-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.clinic-edit-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-edit-modal__label {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #364153;
    display: flex;
    align-items: center;
    gap: 3px;
}

.clinic-edit-modal__required {
    color: #fb2c36;
    font-size: 14px;
    line-height: 1;
}

.clinic-edit-modal__input {
    height: 48px;
    padding: 4px 12px;
    border: 1px solid rgba(106, 114, 130, 0.2);
    border-radius: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #101828;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.clinic-edit-modal__input::placeholder {
    color: #717182;
}

.clinic-edit-modal__input:focus {
    border-color: #0e7f80;
}

/* Input with icon */
.clinic-edit-modal__input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.clinic-edit-modal__input-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: #717182;
    pointer-events: none;
    flex-shrink: 0;
}

.clinic-edit-modal__input--with-icon {
    padding-inline-start: 36px;
}

/* Select */
.clinic-edit-modal__select-wrap {
    position: relative;
}

.clinic-edit-modal__select {
    appearance: none;
    -webkit-appearance: none;
    height: 48px;
    padding: 4px 36px 4px 13px;
    border: 1px solid rgba(106, 114, 130, 0.2);
    border-radius: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #717182;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

[dir="rtl"] .clinic-edit-modal__select {
    padding: 4px 13px 4px 36px;
}

.clinic-edit-modal__select:focus {
    border-color: #0e7f80;
}

.clinic-edit-modal__select-chevron {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #717182;
    pointer-events: none;
}

/* Image section */
.clinic-edit-modal__image-section {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.clinic-edit-modal__image-preview {
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    border: 1.098px dashed #d1d5dc;
    border-radius: 16px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    position: relative;
}

.clinic-edit-modal__image-placeholder-icon {
    color: #99a1af;
}

.clinic-edit-modal__image-placeholder-text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #99a1af;
    text-align: center;
}

.clinic-edit-modal__image-placeholder-icon.u-hidden,
.clinic-edit-modal__image-placeholder-text.u-hidden {
    display: none;
}

.clinic-edit-modal__image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.clinic-edit-modal__image-uploader {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-edit-modal__image-btn {
    display: block;
    height: 44px;
    background: #0e7f80;
    border-radius: 14px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    transition: background 0.15s;
}

.clinic-edit-modal__image-btn:hover {
    background: #0b6b6c;
}

.clinic-edit-modal__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Textarea */
.clinic-edit-modal__textarea {
    padding: 8px 12px;
    border: 1.098px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #101828;
    width: 100%;
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.clinic-edit-modal__textarea::placeholder {
    color: #717182;
}

.clinic-edit-modal__textarea:focus {
    border-color: #0e7f80;
}

.clinic-edit-modal__hint {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    color: #6a7282;
}

/* Submit button */
.clinic-edit-modal__submit {
    display: block;
    width: 100%;
    height: 48px;
    background: #0e7f80;
    border: none;
    border-radius: 8px;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.clinic-edit-modal__submit:hover {
    background: #0b6b6c;
}

/* Responsive */
@media (max-width: 640px) {
    .clinic-edit-modal {
        padding: 16px 12px;
        border-radius: 16px;
    }

    .clinic-edit-modal__row {
        grid-template-columns: 1fr;
    }

    .clinic-edit-modal__image-section {
        flex-direction: column;
        align-items: stretch;
    }

    .clinic-edit-modal__image-preview {
        width: 100%;
        height: 120px;
    }
}

/* ── Complaints page ───────────────────────────────────────────────────── */
.clinic-complaints-card {
    border-radius: 22px;
}

.clinic-complaints-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--clinic-text);
}

.clinic-complaints-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: var(--clinic-surface);
    color: var(--clinic-muted);
    flex-shrink: 0;
}

.clinic-complaints-card__title {
    color: #101828;
    font-size: 1.05rem;
    font-weight: 600;
}

.clinic-complaints-table {
    font-size: 0.9rem;
}

.clinic-complaints-table thead th {
    background: var(--clinic-surface);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.85rem;
    color: #364153;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--clinic-border);
    text-align: center;
}

.clinic-complaints-table thead th:first-child {
    text-align: center;
}

.clinic-complaints-table tbody td {
    padding: 1.05rem 0.5rem;
    color: #0a0a0a;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #f9fafb;
}

.clinic-complaints-table tbody tr:last-child td {
    border-bottom: none;
}

.clinic-complaints-table__col-center {
    text-align: center;
}

.clinic-complaints-table__name {
    font-weight: 500;
    color: #0a0a0a;
    text-align: center;
}

.clinic-complaints-table__subject {
    color: #0a0a0a;
    font-weight: 400;
}

.clinic-complaints-table__date {
    color: #0a0a0a;
    font-weight: 400;
}

/* Category pills (Figma: Service / Billing / Staff / Facility) */
.clinic-cat-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.clinic-cat-pill--service {
    background: #f3e8ff;
    color: #8200db;
}

.clinic-cat-pill--billing {
    background: #dcfce7;
    color: #008236;
}

.clinic-cat-pill--staff {
    background: #ffe2e2;
    color: #c10007;
}

.clinic-cat-pill--facility {
    background: #fef3c6;
    color: #bb4d00;
}

/* Status pills (complaints-specific colors) */
.clinic-status-pill--cmp-new {
    background: #dbeafe;
    color: #1447e6;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}

.clinic-status-pill--cmp-in-progress {
    background: #ffedd4;
    color: #ca3500;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}

.clinic-status-pill--cmp-responded {
    background: rgba(14, 127, 128, 0.1);
    color: #0e7f80;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}

.clinic-status-pill--cmp-closed {
    background: #f3f4f6;
    color: #364153;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Action buttons (view / delete) */
.clinic-complaints-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clinic-complaints-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.clinic-complaints-action--view {
    background: #f6f6f6;
    color: #4a5565;
}

.clinic-complaints-action--view:hover {
    background: #ececec;
}

.clinic-complaints-action--delete {
    background: #fef2f2;
    color: #fb2c36;
}

.clinic-complaints-action--delete:hover {
    background: #fee2e2;
}

@media (max-width: 768px) {
    .clinic-complaints-table thead th,
    .clinic-complaints-table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.82rem;
    }

    .clinic-complaints-action {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
}

.clinic-complaints-action-form {
    display: inline-flex;
    margin: 0;
}

/* ── Complaint show page ───────────────────────────────────────────────── */
.clinic-complaint-show {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clinic-complaint-show__topbar {
    display: flex;
    align-items: center;
}

.clinic-complaint-show__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    color: #0a0a0a;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.clinic-complaint-show__back:hover {
    background: var(--clinic-surface);
    border-color: #d1d5db;
}

.clinic-complaint-show__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.clinic-complaint-show__main {
    min-width: 0;
}

.clinic-complaint-show__card {
    border-radius: 22px;
    overflow: hidden;
}

.clinic-complaint-show__head {
    padding: 22px 24px;
    border-bottom: 1px solid var(--clinic-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clinic-complaint-show__head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.clinic-complaint-show__title {
    margin: 0;
    font-family: 'IBM Plex Sans', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #101828;
    line-height: 2rem;
    word-break: break-word;
}

.clinic-complaint-show__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clinic-complaint-show__patient-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #ffe2e2;
    color: #c10007;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 8px;
    line-height: 1.4;
}

.clinic-complaint-show__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clinic-complaint-reason {
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clinic-complaint-reason__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
}

.clinic-complaint-reason__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.clinic-complaint-reason__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #0a0a0a;
}

.clinic-complaint-reason__body {
    background: rgba(14, 127, 128, 0.05);
    border: 1px solid rgba(14, 127, 128, 0.2);
    color: #0e7f80;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    padding: 16px;
    border-radius: 10px;
}

.clinic-complaint-section__title {
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #101828;
    line-height: 1.75rem;
}

.clinic-complaint-section__box {
    background: var(--clinic-surface);
    border: 1px solid var(--clinic-border);
    border-radius: 16px;
    padding: 18px 20px;
    color: #364153;
    font-size: 0.94rem;
    line-height: 1.6;
    white-space: pre-line;
    word-break: break-word;
}

.clinic-complaint-images {
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 16px 20px;
}

.clinic-complaint-images__head {
    margin-bottom: 16px;
}

.clinic-complaint-images__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #0a0a0a;
}

.clinic-complaint-images__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.clinic-complaint-images__item {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: zoom-in;
    transition: transform 0.15s ease;
}

.clinic-complaint-images__item:hover {
    transform: scale(1.02);
}

.clinic-complaint-images__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clinic-complaint-images__hint {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: var(--clinic-muted);
    line-height: 1.4;
}

.clinic-complaint-replies {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clinic-complaint-reply {
    background: rgba(14, 127, 128, 0.04);
    border: 1px solid rgba(14, 127, 128, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
}

.clinic-complaint-reply__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}

.clinic-complaint-reply__author {
    color: #0e7f80;
    font-weight: 600;
}

.clinic-complaint-reply__date {
    color: var(--clinic-muted);
}

.clinic-complaint-reply__body {
    margin: 0;
    color: #364153;
    line-height: 1.55;
    font-size: 0.92rem;
    white-space: pre-line;
    word-break: break-word;
}

.clinic-complaint-reply-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clinic-complaint-reply-form__label {
    font-size: 0.86rem;
    font-weight: 500;
    color: #364153;
}

.clinic-complaint-reply-form__textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    color: #0a0a0a;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clinic-complaint-reply-form__textarea::placeholder {
    color: #717182;
}

.clinic-complaint-reply-form__textarea:focus {
    outline: none;
    border-color: var(--clinic-primary);
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.12);
}

.clinic-complaint-reply-form__textarea.is-invalid {
    border-color: var(--clinic-danger);
}

.clinic-complaint-reply-form__error {
    margin: 0;
    font-size: 0.82rem;
    color: var(--clinic-danger);
}

.clinic-complaint-reply-form__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 14px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

.clinic-complaint-show__aside {
    position: sticky;
    top: 24px;
}

.clinic-complaint-status-card {
    border-radius: 22px;
    overflow: hidden;
}

.clinic-complaint-status-card__head {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--clinic-border);
}

.clinic-complaint-status-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #101828;
    line-height: 1.75rem;
}

.clinic-complaint-status-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clinic-complaint-status-form__label {
    font-size: 0.86rem;
    font-weight: 500;
    color: #364153;
}

.clinic-complaint-status-form__select-wrap {
    position: relative;
}

.clinic-complaint-status-form__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 48px;
    padding: 0 40px 0 14px;
    border: none;
    border-radius: 14px;
    background-color: #f3f3f5;
    color: #0a0a0a;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23717182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    transition: box-shadow 0.15s ease;
}

[dir="rtl"] .clinic-complaint-status-form__select {
    padding: 0 14px 0 40px;
    background-position: left 14px center;
}

.clinic-complaint-status-form__select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.18);
}

.clinic-complaint-status-form__select.is-invalid {
    box-shadow: 0 0 0 2px var(--clinic-danger);
}

.clinic-complaint-status-form__select option[disabled] {
    color: #717182;
}

.clinic-complaint-status-form__submit {
    height: 48px;
    border-radius: 14px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

@media (max-width: 960px) {
    .clinic-complaint-show__grid {
        grid-template-columns: 1fr;
    }

    .clinic-complaint-show__aside {
        position: static;
    }
}

@media (max-width: 600px) {
    .clinic-complaint-show__head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .clinic-complaint-show__body {
        padding: 18px;
    }

    .clinic-complaint-show__title {
        font-size: 1.3rem;
        line-height: 1.75rem;
    }
}

/* ── Subscription page ──────────────────────────────────────────────────── */
.clinic-alert {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
}
.clinic-alert--success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.clinic-subscription-current {
    margin-bottom: 24px;
}
.clinic-subscription-current__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clinic-primary);
}
.clinic-subscription-current__body {
    padding: 24px;
}
.clinic-subscription-current__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.clinic-subscription-current__plan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.clinic-subscription-current__plan-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #101828;
}
.clinic-subscription-current__price {
    color: var(--clinic-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}
.clinic-subscription-current__price-period {
    font-size: 15px;
    font-weight: 500;
    color: var(--clinic-muted);
    margin-inline-start: 4px;
}
.clinic-subscription-current__remaining {
    text-align: end;
}
.clinic-subscription-current__remaining-label {
    font-size: 13px;
    color: var(--clinic-muted);
}
.clinic-subscription-current__remaining-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--clinic-primary);
    line-height: 1;
    margin-top: 4px;
}
.clinic-subscription-current__period {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 4px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    font-size: 14px;
    color: #4a5565;
    flex-wrap: wrap;
}
.clinic-subscription-current__period-label {
    color: var(--clinic-muted);
}
.clinic-subscription-current__period-value {
    font-weight: 500;
    color: #364153;
}
.clinic-subscription-current__features-title {
    margin-top: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #101828;
    font-size: 15px;
}
.clinic-subscription-current__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
.clinic-subscription-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.clinic-subscription-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4a5565;
}
.clinic-subscription-features li svg {
    flex-shrink: 0;
    color: #16a34a;
}
.clinic-subscription-current__actions {
    margin-top: 18px;
}
.clinic-subscription-current__renew {
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}
.clinic-subscription-current__renew.is-active {
    background: var(--clinic-primary);
    color: #fff;
}
.clinic-subscription-current__renew.is-active:hover {
    background: var(--clinic-primary-dark);
}
.clinic-subscription-current__renew.is-disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.clinic-subscription-empty {
    margin-bottom: 24px;
}
.clinic-subscription-empty__body {
    padding: 36px 24px;
    text-align: center;
}
.clinic-subscription-empty__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #101828;
}
.clinic-subscription-empty__subtitle {
    margin: 0;
    color: var(--clinic-muted);
    font-size: 15px;
}

.clinic-subscription-packages__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clinic-primary);
}
.clinic-subscription-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 24px;
}
.clinic-subscription-plan {
    position: relative;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 16px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.clinic-subscription-plan.is-current {
    border-color: var(--clinic-primary);
    box-shadow: 0 1px 0 var(--clinic-primary) inset, 0 6px 16px rgba(14, 127, 128, 0.08);
}
.clinic-subscription-plan__pill {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    background: var(--clinic-primary);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}
.clinic-subscription-plan__name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #101828;
}
.clinic-subscription-plan__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--clinic-primary);
    margin-bottom: 16px;
}
.clinic-subscription-plan__amount {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}
.clinic-subscription-plan__period {
    font-size: 12px;
    color: var(--clinic-muted);
}
.clinic-subscription-plan__custom {
    font-size: 22px;
    font-weight: 700;
}
.clinic-subscription-plan__contact {
    font-size: 12px;
    color: var(--clinic-muted);
    margin-inline-start: 4px;
}
/* Doctor seats — the one plan attribute the registration wizard enforces, so
   it is called out above the free-text feature list rather than buried in it. */
.clinic-subscription-plan__seats {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
    color: #4a5565;
}
.clinic-subscription-plan__seats strong {
    font-weight: 600;
    color: var(--clinic-primary);
}
.clinic-subscription-plan__cta:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.clinic-subscription-plan__features {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 0 0;
    border-top: 1px dashed #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.clinic-subscription-plan__features li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #4a5565;
    line-height: 1.4;
}
.clinic-subscription-plan__features li svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: #16a34a;
}
.clinic-subscription-plan__cta {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.clinic-subscription-plan__cta.is-select {
    background: #f9fafb;
    color: #4a5565;
    border-color: #e5e7eb;
}
.clinic-subscription-plan__cta.is-select:hover {
    background: #f3f4f6;
}
.clinic-subscription-plan__cta.is-upgrade {
    background: var(--clinic-primary);
    color: #fff;
}
.clinic-subscription-plan__cta.is-upgrade:hover {
    background: var(--clinic-primary-dark);
}
.clinic-subscription-plan__cta.is-downgrade {
    background: #f97316;
    color: #fff;
}
.clinic-subscription-plan__cta.is-downgrade:hover {
    background: #ea580c;
}
.clinic-subscription-plan__cta.is-current {
    background: #f3f4f6;
    color: #6b7280;
    cursor: default;
}

@media (max-width: 1100px) {
    .clinic-subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .clinic-subscription-current__features {
        grid-template-columns: 1fr;
    }
    .clinic-subscription-current__top {
        flex-direction: column;
        align-items: flex-start;
    }
    .clinic-subscription-current__remaining {
        text-align: start;
    }
}
@media (max-width: 540px) {
    .clinic-subscription-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Topbar page actions slot (used by Announcements list) ─────────────── */
.clinic-topbar__page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Announcements (Ads) ──────────────────────────────────────────────── */
.clinic-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.clinic-ads-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    background: var(--clinic-primary);
    color: #fff;
    border: none;
    text-decoration: none;
}
.clinic-ads-new-btn:hover {
    background: var(--clinic-primary-dark);
    color: #fff;
    text-decoration: none;
}

.clinic-ads-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clinic-primary);
}

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

.clinic-ads-table th,
.clinic-ads-table td {
    vertical-align: middle;
}
.clinic-ads-table__actions {
    text-align: end;
    white-space: nowrap;
}

.clinic-ads-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.clinic-ads-badge.is-pending-payment {
    background: #cffafe;
    color: #0e7490;
}
.clinic-ads-badge.is-pending-approval {
    background: #fed7aa;
    color: #c2410c;
}
.clinic-ads-badge.is-approved {
    background: #bbf7d0;
    color: #15803d;
}
.clinic-ads-badge.is-published {
    background: #fef9c3;
    color: #a16207;
}
.clinic-ads-badge.is-rejected {
    background: #fecaca;
    color: #b91c1c;
}
.clinic-ads-badge.is-expired {
    background: #ede9fe;
    color: #6d28d9;
}

.clinic-ads-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    margin-inline-start: 4px;
}
.clinic-ads-action--view {
    background: #f3f4f6;
    color: #4a5565;
}
.clinic-ads-action--view:hover {
    background: #e5e7eb;
    color: #101828;
    text-decoration: none;
}
.clinic-ads-action--delete {
    background: #fee2e2;
    color: #dc2626;
}
.clinic-ads-action--delete:hover {
    background: #fecaca;
    color: #991b1b;
}
.clinic-ads-action-form {
    display: inline-block;
    margin: 0;
}

.clinic-pagination {
    padding: 16px;
    display: flex;
    justify-content: center;
}

/* Create announcement */
.clinic-ads-create {
    padding: 24px;
}
.clinic-ads-create__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline-end: 28px;
}
.clinic-ads-create__head {
    margin-bottom: 18px;
}
.clinic-ads-create__title {
    margin: 0;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
    color: #101828;
}
.clinic-ads-create__subtitle {
    margin: 0;
    color: #6a7282;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 15px;
    line-height: 22.5px;
}
.clinic-ads-create__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.clinic-ads-create__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #101828;
}
.clinic-ads-create__dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    border: 1.166px solid rgba(106, 114, 130, 0.2);
    border-radius: 8px;
    padding: 8px 16px 8px 12px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
}
.clinic-ads-create__dropzone:hover {
    border-color: var(--clinic-primary);
    background: #fcfdfd;
}
.clinic-ads-create__dropzone-empty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
    font-size: 14px;
    line-height: 20px;
}
.clinic-ads-create__dropzone-preview {
    max-width: 100%;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
.clinic-ads-create__textarea,
.clinic-ads-create__input {
    width: 100%;
    padding: 13px 16px;
    border: 1.166px solid rgba(106, 114, 130, 0.2);
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: #101828;
    background: #fff;
    box-sizing: border-box;
}
.clinic-ads-create__textarea:focus,
.clinic-ads-create__input:focus {
    outline: none;
    border-color: var(--clinic-primary);
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.12);
}
.clinic-ads-create__textarea {
    resize: vertical;
    min-height: 76px;
    line-height: 20px;
}
.clinic-ads-create__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.clinic-ads-create__price-card {
    width: 100%;
    border: 1.098px solid rgba(14, 127, 128, 0.2);
    background: rgba(14, 127, 128, 0.05);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    color: var(--clinic-primary);
    box-sizing: border-box;
}
.clinic-ads-create__price-label {
    font-size: 14px;
    line-height: 21px;
    color: #101828;
    margin-bottom: 16px;
}
.clinic-ads-create__price-value {
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: var(--clinic-primary);
}
.clinic-ads-create__submit {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: none;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.clinic-ads-create__submit:hover {
    background: var(--clinic-primary-dark);
}

/* Show announcement */
.clinic-ads-show {
    padding: 24px;
}
.clinic-ads-show__head {
    margin-bottom: 12px;
}
.clinic-ads-show__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4a5565;
    text-decoration: none;
    font-size: 14px;
}

/* Schedule management */
.clinic-topbar__page-actions form {
    margin: 0;
}

.clinic-schedule-board,
.clinic-schedule-detail__section {
    background: #fff;
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
}

.clinic-schedule-board {
    overflow: hidden;
}

.clinic-schedule-board__card-head {
    border-bottom: 1.098px solid #f3f4f6;
    padding: 20px;
}

.clinic-schedule-board__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clinic-schedule-board__head-icon,
.clinic-schedule-detail__icon {
    width: 31.984px;
    height: 31.984px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-schedule-board__head-icon {
    border-radius: 16px;
    background: #f9fafb;
}

.clinic-schedule-board__head-icon img,
.clinic-schedule-detail__icon svg,
.clinic-schedule-table__icon-action img,
.clinic-schedule-detail__footer-icon svg,
.clinic-schedule-feedback__icon svg {
    width: 15.984px;
    height: 15.984px;
    display: block;
}

.clinic-schedule-detail__icon {
    background: #d7ebeb;
    color: #084c4d;
}

.clinic-schedule-board__heading {
    display: grid;
    gap: 4px;
}

.clinic-schedule-board__heading h2 {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.clinic-schedule-board__hint {
    margin: 0;
    color: #6a7282;
    font-size: 15px;
    line-height: 22px;
}

.clinic-schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.clinic-schedule-table thead th {
    background: #f9fafb;
    border-bottom: 1.098px solid #f3f4f6;
    padding: 18px 8px;
    color: #364153;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.clinic-schedule-table tbody td {
    height: 64px;
    padding: 12px 8px;
    border-bottom: 1.098px solid #f9fafb;
    color: #4a5565;
    font-size: 15px;
    line-height: 21.429px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.clinic-schedule-table tbody tr:last-child td {
    border-bottom: 0;
}

.clinic-schedule-table__center {
    text-align: center;
}

.clinic-schedule-table__doctor-name {
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-weight: 500;
}

.clinic-schedule-table__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.clinic-schedule-table__actions form {
    margin: 0;
}

.clinic-schedule-table__icon-action {
    width: 39.993px;
    height: 39.993px;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: #364153;
    background: #f6f6f6;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.clinic-schedule-table__icon-action img {
    pointer-events: none;
}

.clinic-schedule-table__icon-action:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.clinic-schedule-table__icon-action--view:hover {
    background: #eef2f6;
    color: #101828;
}

.clinic-schedule-table__icon-action--approve {
    background: #eafff1;
    color: #008236;
}

.clinic-schedule-table__icon-action--approve:hover {
    background: #d6f7e4;
}

.clinic-schedule-table__icon-action--reject {
    background: #fef2f2;
    color: #b42318;
}

.clinic-schedule-table__icon-action--reject:hover {
    background: #fee2e2;
}

.clinic-schedule-table .clinic-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 13px;
    min-height: 28px;
    border-radius: 36829000px;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 18.571px;
    font-weight: 500;
}

.clinic-schedule-table .clinic-status-pill--active {
    background: #dcfce7;
    color: #008236;
}

.clinic-schedule-table .clinic-status-pill--rejected {
    background: #fee2e2;
    color: #b91c1c;
}

.clinic-schedule-table .clinic-status-pill--pending {
    background: #ffedd4;
    color: #ca3500;
}

.clinic-schedule-detail {
    display: grid;
    gap: 24px;
}

.clinic-schedule-detail__ghost {
    min-width: 136px;
}

.clinic-schedule-detail__danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 43.989px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1.098px solid #ffc9c9;
    background: #fff;
    color: #e7000b;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.clinic-schedule-detail__danger:hover {
    background: #fef2f2;
    border-color: #fda4af;
}

.clinic-schedule-detail__approve {
    min-width: 147px;
}

.clinic-schedule-detail__section {
    overflow: hidden;
}

.clinic-schedule-detail__section--notes {
    background: #eff6ff;
    border-color: #dbeafe;
}

.clinic-schedule-detail__section-header {
    border-bottom: 1.098px solid #f3f4f6;
    padding: 20px;
}

.clinic-schedule-detail__section-header--notes {
    border-bottom-color: #dbeafe;
}

.clinic-schedule-detail__section-body {
    padding: 24px;
}

.clinic-schedule-detail__section-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clinic-schedule-detail__section-head h3 {
    margin: 0;
    color: #101828;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.clinic-schedule-detail__section--notes .clinic-schedule-detail__section-head h3 {
    color: #1c398e;
}

.clinic-schedule-detail__info-grid,
.clinic-schedule-detail__stats-grid {
    display: grid;
    gap: 16px;
}

.clinic-schedule-detail__info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clinic-schedule-detail__stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clinic-schedule-detail__info-item,
.clinic-schedule-detail__stat-card {
    display: grid;
    gap: 8px;
    padding: 17px;
    border-radius: 16px;
    border: 1.098px solid #f3f4f6;
    background: #f9fafb;
}

.clinic-schedule-detail__info-item span,
.clinic-schedule-detail__stat-card span,
.clinic-schedule-detail__days-label {
    color: #6a7282;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
}

.clinic-schedule-detail__info-item strong,
.clinic-schedule-detail__stat-card strong,
.clinic-schedule-detail__section-value {
    margin: 0;
    color: #101828;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.clinic-schedule-detail__days-field {
    display: grid;
    gap: 12px;
}

.clinic-schedule-detail__days-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6a7282;
}

.clinic-schedule-edit-form__actions {
    display: none;
}

@media (max-width: 720px) {
    .clinic-schedule-edit-form__actions {
        display: flex;
        justify-content: flex-end;
        padding: 0 24px 24px;
    }
}

.clinic-schedule-detail__days-list,
.clinic-schedule-detail__days-select {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.clinic-schedule-detail__day-pill,
.clinic-schedule-day-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43.989px;
    padding: 9px 17px;
    border-radius: 14px;
    border: 1.098px solid #c7e0e0;
    background: #d7ebeb;
    color: #084c4d;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.clinic-schedule-day-option {
    position: relative;
}

.clinic-schedule-day-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.clinic-schedule-day-option input:not(:checked) + span {
    background: #fff;
    border-color: #e5e7eb;
    color: #0a0a0a;
}

.clinic-schedule-detail__note {
    margin: 0;
    color: #1447e6;
    font-size: 15px;
    line-height: 22.5px;
}

.clinic-schedule-detail__footer-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-radius: 16px;
    border: 1.098px solid #f3f4f6;
    background: #f9fafb;
    color: #4a5565;
    font-size: 15px;
    line-height: 24.375px;
}

.clinic-schedule-detail__footer-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-schedule-detail__footer-note--active .clinic-schedule-detail__footer-icon {
    color: #008236;
}

.clinic-schedule-detail__footer-note--pending .clinic-schedule-detail__footer-icon {
    color: #ca3500;
}

.clinic-schedule-detail__footer-note--rejected .clinic-schedule-detail__footer-icon {
    color: #b91c1c;
}

.clinic-schedule-feedback {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.34);
    padding: 16px;
}

.clinic-schedule-feedback__card {
    width: min(100%, 760px);
    background: #fff;
    border-radius: 24px;
    padding: 45px 32px;
    display: grid;
    justify-items: center;
    gap: 56px;
    text-align: center;
}

.clinic-schedule-feedback__icon {
    position: relative;
    width: 114px;
    height: 114px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.clinic-schedule-feedback__icon::before,
.clinic-schedule-feedback__icon::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

.clinic-schedule-feedback__icon::before {
    inset: -19px;
    opacity: 0.16;
}

.clinic-schedule-feedback__icon::after {
    inset: 4px;
}

.clinic-schedule-feedback__icon--approved {
    background: #0e7f80;
}

.clinic-schedule-feedback__icon--approved::before {
    background: rgba(14, 127, 128, 0.2);
}

.clinic-schedule-feedback__icon--approved::after {
    background: rgba(255, 255, 255, 0.12);
}

.clinic-schedule-feedback__icon--rejected {
    background: #e7000b;
}

.clinic-schedule-feedback__icon--rejected::before {
    background: rgba(231, 0, 11, 0.18);
}

.clinic-schedule-feedback__icon--rejected::after {
    background: rgba(255, 255, 255, 0.12);
}

.clinic-schedule-feedback__icon svg {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
}

.clinic-schedule-feedback__card p {
    margin: 0;
    max-width: 621px;
    color: #000;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 32px;
    line-height: 54px;
    font-weight: 500;
}
.clinic-reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.clinic-reports-statuses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.clinic-reports-statuses div {
    padding: 18px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    display: grid;
    gap: 6px;
}
.clinic-reports-statuses strong {
    font-size: 28px;
    line-height: 1;
    color: #101828;
}
.clinic-reports-statuses span {
    color: #6a7282;
    font-size: 14px;
}
.clinic-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.clinic-report-list li {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #f3f4f6;
    background: #f9fafb;
}

.clinic-reports-export {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 11px 14px 11px 12px;
    border-radius: 14px;
    background: #0e7f80;
    color: #fff;
    text-decoration: none;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.clinic-reports-export:hover {
    background: #0a6f70;
}

.clinic-reports-export img {
    width: 16px;
    height: 16px;
    display: block;
}

.clinic-reports-page {
    display: grid;
    gap: 24px;
}

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

.clinic-reports-summary__card,
.clinic-reports-section {
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}

.clinic-reports-summary__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 209px;
    padding: 24px;
}

.clinic-reports-summary__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47.985px;
    height: 47.985px;
    border-radius: 16px;
}

.clinic-reports-summary__icon img {
    width: 23.993px;
    height: 23.993px;
    display: block;
}

.clinic-reports-summary__icon--bookings {
    background: #eff6ff;
}

.clinic-reports-summary__icon--completed {
    background: #f0fdf4;
}

.clinic-reports-summary__icon--cancelled {
    background: #fef2f2;
}

.clinic-reports-summary__icon--no-show {
    background: #fff7ed;
}

.clinic-reports-summary__content {
    display: grid;
    gap: 8px;
}

.clinic-reports-summary__label {
    margin: 0;
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.clinic-reports-summary__value {
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
}

.clinic-reports-summary__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
}

.clinic-reports-summary__meta img {
    width: 16px;
    height: 16px;
    display: block;
}

.clinic-reports-summary__meta-text {
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-reports-summary__meta--positive {
    color: #00a63e;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
}

.clinic-reports-summary__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}

.clinic-reports-summary__badge--positive {
    background: #dcfce7;
    color: #008236;
}

.clinic-reports-summary__badge--danger {
    background: #ffe2e2;
    color: #c10007;
}

.clinic-reports-summary__badge--warning {
    background: #ffedd4;
    color: #ca3500;
}

.clinic-reports-section__header {
    padding: 20px;
    border-bottom: 1.098px solid #f3f4f6;
}

.clinic-reports-section__header--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.clinic-reports-section__title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.clinic-reports-section__title-wrap h2 {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.clinic-reports-section__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31.984px;
    height: 31.984px;
    border-radius: 16px;
}

.clinic-reports-section__title-icon img {
    width: 15.984px;
    height: 15.984px;
    display: block;
}

.clinic-reports-section__title-icon--periods {
    background: #eff6ff;
}

.clinic-reports-section__title-icon--doctors {
    background: rgba(14, 127, 128, 0.1);
}

.clinic-reports-filter {
    margin: 0;
}

.clinic-reports-filter__field {
    position: relative;
    min-width: 192px;
}

.clinic-reports-filter__field select {
    width: 100%;
    height: 36px;
    padding: 0 38px 0 13px;
    border: 1.098px solid #e5e7eb;
    border-radius: 14px;
    background: #f3f3f5;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
    appearance: none;
    outline: none;
    cursor: pointer;
}

.clinic-reports-filter__field img {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

html[dir="rtl"] .clinic-reports-filter__field select {
    padding: 0 13px 0 38px;
}

html[dir="rtl"] .clinic-reports-filter__field img {
    right: auto;
    left: 13px;
}

.clinic-reports-table-wrap {
    overflow-x: auto;
}

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

.clinic-reports-table thead tr {
    background: #f9fafb;
}

.clinic-reports-table th,
.clinic-reports-table td {
    padding: 17px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1.098px solid #f3f4f6;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

html[dir="rtl"] .clinic-reports-table th,
html[dir="rtl"] .clinic-reports-table td {
    text-align: right;
}

.clinic-reports-table th {
    color: #364153;
    font-weight: 500;
    white-space: nowrap;
}

.clinic-reports-table tbody tr:last-child td {
    border-bottom: none;
}

.clinic-reports-table td {
    color: #4a5565;
    font-weight: 400;
}

.clinic-reports-table__primary {
    color: #101828 !important;
    font-weight: 500 !important;
}

.clinic-reports-table__strong {
    color: #101828 !important;
    font-weight: 600 !important;
}

.clinic-reports-table__revenue {
    color: #0e7f80 !important;
    font-weight: 600 !important;
}

.clinic-reports-period-completed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clinic-reports-period-completed__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: #dcfce7;
    color: #008236;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 11px;
    line-height: 15.7px;
    font-weight: 500;
}

.clinic-reports-progress,
.clinic-reports-performance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clinic-reports-progress__track {
    display: inline-flex;
    width: 219.775px;
    height: 8px;
    border-radius: 9999px;
    background: #f3f4f6;
    overflow: hidden;
}

.clinic-reports-progress__fill,
.clinic-reports-performance__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: #0e7f80;
}

.clinic-reports-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.clinic-reports-rating__star {
    color: #f0b100;
    font-weight: 400;
}

.clinic-reports-performance__track {
    display: inline-flex;
    width: 95.988px;
    height: 8px;
    border-radius: 9999px;
    background: #f3f4f6;
    overflow: hidden;
}

.clinic-reports-performance__label {
    color: #4a5565;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 17.14px;
    font-weight: 400;
}

.clinic-reports-section__title-icon--cancellations {
    background: #fef2f2;
}

.clinic-reports-section__title-icon--exports {
    background: #f9fafb;
}

.clinic-reports-cancellations {
    display: grid;
    gap: 24px;
    padding: 24px;
}

.clinic-reports-cancellations__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.clinic-reports-cancellations__left,
.clinic-reports-cancellations__right {
    display: grid;
    align-content: start;
    gap: 16px;
}

.clinic-reports-cancel-card {
    display: grid;
    gap: 16px;
    padding: 21px;
    border: 1.098px solid #ffe2e2;
    border-radius: 16px;
    background: #fef2f2;
}

.clinic-reports-cancel-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.clinic-reports-cancel-card__top p {
    margin: 0 0 4px;
    color: #e7000b;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
}

.clinic-reports-cancel-card__top strong {
    color: #c10007;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
}

.clinic-reports-cancel-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 13px;
    border-radius: 9999px;
    background: #ffe2e2;
    color: #c10007;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
}

.clinic-reports-cancel-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clinic-reports-cancel-card__trend img {
    width: 16px;
    height: 16px;
    display: block;
}

.clinic-reports-cancel-card__trend span {
    color: #e7000b;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-reports-cancel-card__trend small {
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-reports-cancel-breakdown {
    display: grid;
    gap: 12px;
}

.clinic-reports-cancel-breakdown h3,
.clinic-reports-cancellations__right h3,
.clinic-reports-recommendations__content h3 {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 600;
}

.clinic-reports-cancel-breakdown__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.clinic-reports-cancel-breakdown__card {
    display: grid;
    gap: 4px;
    padding: 17px;
    border: 1.098px solid #f3f4f6;
    border-radius: 16px;
    background: #f9fafb;
}

.clinic-reports-cancel-breakdown__card p,
.clinic-reports-cancel-breakdown__card span {
    margin: 0;
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
}

.clinic-reports-cancel-breakdown__card p {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.clinic-reports-cancel-breakdown__card strong {
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.clinic-reports-cancel-breakdown__card span {
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 400;
}

.clinic-reports-reasons {
    display: grid;
    gap: 16px;
}

.clinic-reports-reasons__row {
    display: grid;
    gap: 8px;
}

.clinic-reports-reasons__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.clinic-reports-reasons__title,
.clinic-reports-reasons__stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.clinic-reports-reasons__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #ffe2e2;
    color: #c10007;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 600;
}

.clinic-reports-reasons__reason {
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.clinic-reports-reasons__stats span {
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-reports-reasons__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: #ffe2e2;
    color: #c10007 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
}

.clinic-reports-reasons__track {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: #f3f4f6;
    overflow: hidden;
}

.clinic-reports-reasons__fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #ff6467 0%, #e7000b 100%);
}

.clinic-reports-recommendations {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 21px;
    border: 1.098px solid #dbeafe;
    border-radius: 16px;
    background: #eff6ff;
}

.clinic-reports-recommendations__icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.clinic-reports-recommendations__content {
    display: grid;
    gap: 8px;
}

.clinic-reports-recommendations__content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.clinic-reports-recommendations__content li {
    color: #1447e6;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-reports-export-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 24px;
}

.clinic-reports-export-cards__card {
    display: grid;
    gap: 8px;
    min-height: 104px;
    padding: 21px 13px;
    border: 1.098px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
}

.clinic-reports-export-cards__card img {
    width: 16px;
    height: 16px;
    display: block;
}

.clinic-reports-export-cards__card div {
    display: grid;
    gap: 2px;
}

.clinic-reports-export-cards__card strong {
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
}

.clinic-reports-export-cards__card span {
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 17.14px;
    font-weight: 500;
}

.clinic-reports-export-cards__card:hover {
    border-color: #d0d5dd;
    background: #fafafa;
}
.clinic-external-booking__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px;
    border: none;
    border-radius: 14px;
    background: #0e7f80;
    color: #fff;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
}

.clinic-external-booking__add-btn img,
.clinic-external-booking__add-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.clinic-external-booking__add-btn:hover {
    background: #0a6a6b;
}

.clinic-external-booking__card {
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}

.clinic-external-booking__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 20px;
    border-bottom: 1.098px solid #f3f4f6;
}

.clinic-external-booking__card-head h2 {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.clinic-external-booking__card-icon {
    width: 31.984px;
    height: 31.984px;
    border-radius: 16px;
    background: #f9fafb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-external-booking__card-icon img {
    width: 15.984px;
    height: 15.984px;
    display: block;
}

.clinic-external-booking__card-body {
    padding: 44px 20px 32px;
}

.clinic-external-booking__list {
    display: grid;
    gap: 12px;
}

.clinic-external-booking__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 78.649px;
    padding: 17px;
    border: 1.098px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.clinic-external-booking__row-main {
    display: grid;
    gap: 4px;
}

.clinic-external-booking__row-main h3 {
    margin: 0;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.clinic-external-booking__row-main p {
    margin: 0;
    color: #6a7282;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.clinic-external-booking__unblock-btn {
    min-width: 86.555px;
    min-height: 35.997px;
    padding: 7px 17px;
    border-radius: 14px;
    border: 1.098px solid #ffc9c9;
    background: #fff;
    color: #e7000b;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    cursor: pointer;
}

.clinic-external-booking__unblock-btn:hover {
    background: #fff5f5;
}

.clinic-external-booking__empty {
    min-height: 520px;
    border: 1.098px dashed #d5d7da;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a7282;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    background: #fcfcfd;
}

.clinic-body--locked {
    overflow: hidden;
}

.clinic-external-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 130;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: transparent;
}

.clinic-external-modal.is-visible {
    display: flex;
}

.clinic-external-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 13, 18, 0.64);
}

.clinic-external-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 742px);
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18);
}

.clinic-external-modal__dialog--form {
    padding: 20px 16px;
    max-height: min(90vh, 820px);
    overflow-y: auto;
}

.clinic-external-modal__dialog--confirm {
    width: min(100%, 440px);
    padding: 51px 56px;
    display: grid;
    justify-items: center;
    gap: 56px;
}

.clinic-external-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.clinic-external-modal__header h2 {
    margin: 0 0 8px;
    color: #101828;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}

.clinic-external-modal__header p {
    margin: 0;
    color: #6a7282;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 21px;
}

.clinic-external-modal__close {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6a7282;
    cursor: pointer;
    opacity: 0.7;
    flex-shrink: 0;
}

.clinic-external-modal__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.clinic-external-form {
    display: grid;
    gap: 16px;
    padding-top: 16px;
}

.clinic-external-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.clinic-external-form__field {
    display: grid;
    gap: 8px;
}

.clinic-external-form__field > span {
    color: #0a0a0a;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.clinic-external-form__control {
    position: relative;
    height: 48px;
    border: 1.166px solid rgba(106, 114, 130, 0.2);
    border-radius: 8px;
    background: #fff;
}

.clinic-external-form__control:has(textarea),
.clinic-external-form__control--textarea {
    height: auto;
    min-height: 96px;
}

.clinic-external-form__control input,
.clinic-external-form__control select,
.clinic-external-form__control textarea {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    border: none;
    background: transparent;
    color: #101828;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 16px;
    line-height: normal;
    outline: none;
    appearance: none;
    box-sizing: border-box;
}

.clinic-external-form__control textarea {
    display: block;
    min-height: 96px;
    height: auto;
    padding: 12px 16px;
    line-height: 1.45;
    resize: vertical;
}

.clinic-external-form__control input::placeholder,
.clinic-external-form__control select:invalid,
.clinic-external-form__control textarea::placeholder {
    color: #cccccc;
}

.clinic-external-form__hint {
    color: #6a7282;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

.clinic-external-form__hint:empty {
    display: none;
}

.clinic-external-form__control--select img {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

.clinic-external-form__error {
    color: #b42318;
    font-size: 13px;
    line-height: 18px;
}

.clinic-external-form__availability {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #475467;
}

.clinic-external-form__availability-label {
    font-weight: 600;
    color: #0e7f80;
}

.clinic-external-form__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.clinic-external-form__submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #0e7f80;
    color: #fff;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    cursor: pointer;
}

.clinic-external-form__submit:hover {
    background: #0a6a6b;
}

.clinic-external-modal__confirm-copy {
    display: grid;
    justify-items: center;
    gap: 21px;
    text-align: center;
}

.clinic-external-modal__confirm-copy h2 {
    margin: 0;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
}

.clinic-external-modal__confirm-copy p {
    margin: 0;
    max-width: 328px;
    color: #717182;
    font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.clinic-external-modal__confirm-actions {
    width: 100%;
    display: grid;
    gap: 12px;
}

.clinic-external-modal__confirm-actions form {
    margin: 0;
}

.clinic-external-modal__confirm-btn,
.clinic-external-modal__ghost-btn {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    cursor: pointer;
}

.clinic-external-modal__confirm-btn {
    border: none;
    background: #b91c1c;
    color: #fff;
}

.clinic-external-modal__ghost-btn {
    border: 1px solid #141414;
    background: #fff;
    color: #141414;
}

.clinic-external-feedback {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 13, 18, 0.6);
}

.clinic-external-feedback__card {
    width: min(100%, 766px);
    min-height: 340px;
    padding: 45px 40px;
    border-radius: 24px;
    background: #fff;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 56px;
    text-align: center;
}

.clinic-external-feedback__card p {
    margin: 0;
    max-width: 653px;
    color: #000;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 32px;
    line-height: 54px;
    font-weight: 500;
}

.clinic-external-feedback__icon-wrap {
    position: relative;
    width: 114px;
    height: 114px;
}

.clinic-external-feedback__icon-wrap--confirm {
    width: 114px;
    height: 114px;
}

.clinic-external-feedback__ring,
.clinic-external-feedback__badge,
.clinic-external-feedback__glyph {
    position: absolute;
    display: block;
}

.clinic-external-feedback__ring {
    inset: -19px;
    width: calc(100% + 38px);
    height: calc(100% + 38px);
}

.clinic-external-feedback__badge,
.clinic-external-feedback__glyph {
    inset: 4.75px;
    width: calc(100% - 9.5px);
    height: calc(100% - 9.5px);
}
.clinic-urgent-list {
    display: grid;
    gap: 16px;
}
.clinic-urgent-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #f3f4f6;
    background: #f9fafb;
}
.clinic-urgent-card__main,
.clinic-urgent-card__form {
    display: grid;
    gap: 8px;
}

.clinic-urgent-card h3 {
    margin: 0;
    color: #101828;
    font-size: 17px;
}

.clinic-urgent-card p {
    margin: 0;
    color: #6a7282;
}

.clinic-urgent-card__main span {
    color: #6a7282;
    font-size: 14px;
}
.clinic-urgent-card__reason {
    width: 100%;
    min-height: 74px;
    border-radius: 14px;
    border: 1px solid #d5d7da;
    padding: 12px 14px;
    font: inherit;
    resize: vertical;
    background: #fff;
}
.clinic-urgent-board {
    display: grid;
}

.clinic-urgent-board__list {
    display: grid;
    gap: 16px;
}

.clinic-urgent-board__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 166.148px;
    padding: 25.091px 25.091px 24px;
    border: 1.098px solid #f1f5f9;
    border-radius: 14px;
    background: #fff;
}

.clinic-urgent-board__alert {
    width: 35.997px;
    height: 35.997px;
    border-radius: 10px;
    background: #fee2e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.clinic-urgent-board__alert img {
    width: 19.997px;
    height: 19.997px;
    display: block;
}

.clinic-urgent-board__content {
    display: grid;
    gap: 7.992px;
}

.clinic-urgent-board__content h3 {
    margin: 0;
    color: #0a0a0a;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}

.clinic-urgent-board__meta {
    display: grid;
    gap: 3.996px;
}

.clinic-urgent-board__meta-row {
    display: flex;
    align-items: center;
    gap: 7.992px;
    min-height: 23.993px;
}

.clinic-urgent-board__meta-icon {
    width: 23.993px;
    height: 23.993px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-urgent-board__meta-icon img {
    width: 12px;
    height: 12px;
    display: block;
}

.clinic-urgent-board__meta-icon--date {
    background: #eff6ff;
}

.clinic-urgent-board__meta-icon--time {
    background: #faf5ff;
}

.clinic-urgent-board__meta-icon--affected {
    background: #fef2f2;
}

.clinic-urgent-board__meta-row p {
    margin: 0;
    color: #717182;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.clinic-urgent-board__affected {
    color: #d4183d !important;
    font-weight: 500 !important;
}

.clinic-urgent-board__meta-icon--reason {
    background: #fff7ed;
    color: #c2410c;
}

.clinic-urgent-board__meta-row--reason {
    align-items: flex-start;
}

.clinic-urgent-board__reason {
    margin: 0;
    color: #364153;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.clinic-urgent-board__reason-label {
    color: #717182;
    font-weight: 600;
}

.clinic-urgent-board__empty {
    min-height: 320px;
    border: 1.098px dashed #d5d7da;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fcfcfd;
    color: #6a7282;
    font-size: 16px;
    line-height: 24px;
}
.clinic-form-error {
    margin: 10px 0 0;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .clinic-schedule-table {
        min-width: 920px;
    }

    .clinic-schedule-detail__info-grid,
    .clinic-schedule-detail__stats-grid,
    .clinic-reports-grid,
    .clinic-urgent-card {
        grid-template-columns: 1fr;
    }

    .clinic-reports-statuses {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .clinic-topbar__page-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .clinic-external-booking__add-btn {
        width: 100%;
        justify-content: center;
    }

    .clinic-external-booking__card-body {
        padding: 24px 16px;
    }

    .clinic-external-booking__row {
        flex-direction: column;
        align-items: stretch;
    }

    .clinic-external-booking__unblock-btn {
        width: 100%;
    }

    .clinic-urgent-board__card {
        padding: 20px 16px;
    }

    .clinic-external-form__grid {
        grid-template-columns: 1fr;
    }

    .clinic-external-modal__dialog--confirm {
        padding: 40px 20px;
    }

    .clinic-external-feedback__card {
        min-height: 280px;
        gap: 32px;
        padding: 32px 20px;
    }

    .clinic-external-feedback__card p {
        font-size: 22px;
        line-height: 1.55;
    }

    .clinic-schedule-board__title-wrap {
        align-items: flex-start;
    }

    .clinic-schedule-feedback__card {
        gap: 32px;
        padding: 32px 20px;
    }

    .clinic-schedule-feedback__card p {
        font-size: 22px;
        line-height: 1.55;
    }

    .clinic-schedule-detail__ghost,
    .clinic-schedule-detail__approve,
    .clinic-schedule-detail__danger {
        min-width: 100%;
    }
}
.clinic-ads-show__back:hover {
    color: var(--clinic-primary);
    text-decoration: none;
}
[dir="rtl"] .clinic-ads-show__back svg {
    transform: scaleX(-1);
}
.clinic-ads-show__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.clinic-ads-show__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #101828;
}
.clinic-ads-show__section {
    margin-bottom: 22px;
}
.clinic-ads-show__label {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 10px;
}
.clinic-ads-show__image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
}
.clinic-ads-show__details {
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5565;
    white-space: pre-line;
}
.clinic-ads-show__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.clinic-ads-show__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--clinic-primary);
}
.clinic-ads-show__meta-label {
    color: var(--clinic-muted);
    font-size: 12px;
}
.clinic-ads-show__meta-value {
    color: #101828;
    font-weight: 500;
    font-size: 14px;
}

@media (max-width: 640px) {
    .clinic-ads-create__row,
    .clinic-ads-show__meta {
        grid-template-columns: 1fr;
    }
    .clinic-ads-new-btn span {
        display: none;
    }
    .clinic-ads-new-btn {
        padding: 10px 12px;
    }
}

/* ── Generic overlay (used for create + success overlays) ──────────────── */
.clinic-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    box-sizing: border-box;
}
.clinic-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.clinic-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.clinic-overlay__panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    padding: 28px 28px 24px;
    transform: scale(0.96);
    transition: transform 0.18s ease;
    box-sizing: border-box;
}
.clinic-overlay.is-open .clinic-overlay__panel {
    transform: scale(1);
}
/* Link to an uploaded legal document (commercial register certificate). */
.clinic-profile-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--clinic-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.clinic-profile-doc-link:hover {
    background: #f1f5f9;
}

/* Urgent-unavailability summary.
   Replaces a 12-column grid that was almost always zeros: the clean case
   states the finding, and the busy case lists only the doctors it concerns. */
.clinic-urgent-clear {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
}
.clinic-urgent-clear__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clinic-urgent-clear__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.clinic-urgent-clear__hint {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--clinic-muted);
}

/* Three framing numbers plus the month picker, on one line. */
.clinic-urgent__stats {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    flex-wrap: wrap;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.clinic-urgent__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.clinic-urgent__stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.clinic-urgent__stat-value--text {
    font-size: 17px;
    padding-bottom: 4px;
    color: #b45309;
}
.clinic-urgent__stat-label {
    font-size: 12px;
    color: var(--clinic-muted);
}

/* Pushed to the far end so the reading order is numbers first, control last. */
.clinic-urgent__picker {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clinic-urgent__picker-label {
    font-size: 12px;
    color: var(--clinic-muted);
}
.clinic-urgent__select {
    min-width: 168px;
    padding: 7px 10px;
    border: 1px solid var(--clinic-border);
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}
.clinic-urgent__select:focus-visible {
    outline: 2px solid var(--clinic-primary);
    outline-offset: 1px;
}

.clinic-urgent-list {
    list-style: none;
    margin: 0;
    padding: 6px 22px 4px;
}
.clinic-urgent-item {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.clinic-urgent-item:last-child {
    border-bottom: none;
}
.clinic-urgent-item[hidden] {
    display: none;
}
.clinic-urgent-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.clinic-urgent-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.clinic-urgent-item__total {
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
    white-space: nowrap;
}

/* Share of the visible period, so two doctors can be compared by length
   without reading either number. */
.clinic-urgent-item__track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.clinic-urgent-item__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.clinic-urgent-empty-month {
    margin: 0;
    padding: 10px 22px 16px;
    font-size: 13px;
    color: var(--clinic-muted);
}
.clinic-urgent-empty-month[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .clinic-urgent__stats {
        gap: 18px;
    }
    .clinic-urgent__picker {
        margin-inline-start: 0;
        width: 100%;
    }
    .clinic-urgent__select {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clinic-urgent-item__bar {
        transition: none;
    }
}

.clinic-urgent-footnote {
    margin: 0;
    padding: 4px 22px 18px;
    font-size: 12px;
    color: var(--clinic-muted);
}

/* Late-notice control in the appointments table. */
.clinic-late-btn {
    padding: 6px 12px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.clinic-late-btn:hover {
    background: #fef3c7;
}
.clinic-late-sent {
    font-size: 12px;
    color: #16a34a;
    font-weight: 600;
    white-space: nowrap;
}
.clinic-late-na {
    color: #cbd5e1;
}

/* Pay-now button on an unpaid ad row. Carries the amount, so the clinic is
   not sent to a gateway to find out what it costs. */
.clinic-ads-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background: var(--clinic-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.clinic-ads-pay-btn:hover {
    filter: brightness(1.08);
}
.clinic-ads-pay-btn__amount {
    font-weight: 400;
    opacity: .85;
}

/* Payment outcome modal — success and failure share a layout so the only
   thing that changes between them is what actually differs. */
.clinic-overlay__panel--payment {
    width: min(440px, 100%);
    text-align: center;
    padding: 32px 28px 24px;
}
.clinic-payment-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clinic-payment-icon.is-ok {
    background: #dcfce7;
    color: #16a34a;
}
.clinic-payment-icon.is-fail {
    background: #fee2e2;
    color: #dc2626;
}
.clinic-payment-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}
.clinic-payment-message {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
}
.clinic-payment-details {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
    text-align: start;
}
.clinic-payment-details__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 5px 0;
}
.clinic-payment-details__row dt {
    color: #64748b;
    margin: 0;
}
.clinic-payment-details__row dd {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    /* References are long and must not push the label off the row. */
    word-break: break-all;
    text-align: end;
}
.clinic-payment-actions {
    display: flex;
    gap: 10px;
}
.clinic-payment-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.clinic-payment-btn--retry {
    background: var(--clinic-primary);
    color: #fff;
}
.clinic-payment-btn--close {
    background: #fff;
    color: #475569;
    border-color: #e2e8f0;
}

/* Terms & conditions modal on the registration account step. */
.clinic-overlay__panel--terms {
    width: min(760px, 100%);
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.clinic-terms-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--clinic-primary);
}
.clinic-terms-modal__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--clinic-muted);
}
/* The legal text scrolls inside the panel so the accept row stays reachable
   without scrolling the whole dialog. */
.clinic-terms-modal__body {
    max-height: min(52vh, 460px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}
.clinic-terms-modal__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.clinic-terms-modal__accept,
.clinic-terms-modal__dismiss {
    flex: 1 1 160px;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.clinic-terms-modal__accept {
    background: var(--clinic-primary);
    color: #fff;
}
.clinic-terms-modal__dismiss {
    background: #fff;
    color: #475569;
    border-color: #e2e8f0;
}
/* The consent link is a <button> now (it opens the modal) — strip the button
   chrome so it still reads as inline text inside the sentence. */
button.clinic-register-consent-card__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.clinic-overlay__close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.clinic-overlay__close:hover {
    background: #f3f4f6;
    color: #101828;
}

body.clinic-overlay-open {
    overflow: hidden;
}

/* Inside-overlay create form spacing tweaks */
.clinic-overlay__panel .clinic-ads-create__form {
    margin-top: 22px;
}
.clinic-overlay--ads-create {
    overflow-y: auto;
}
.clinic-overlay__panel--ads-form,
.clinic-overlay__panel--ads-summary {
    width: min(747px, 100%);
    padding: 20px 16px;
    border-radius: 24px;
    border: 1.098px solid #f3f4f6;
    box-shadow:
        0 1px 1.5px rgba(0, 0, 0, 0.1),
        0 1px 1px rgba(0, 0, 0, 0.1);
}
.clinic-overlay__panel--ads-summary {
    display: flex;
    flex-direction: column;
    gap: 31px;
}
.clinic-overlay--ads-create .clinic-overlay__close {
    top: 18px;
    inset-inline-end: 12px;
    width: 24px;
    height: 24px;
}

/* Success overlay (Payment Successful / Subscription Updated / Request Sent) */
.clinic-overlay--success .clinic-overlay__panel--success {
    width: min(720px, 100%);
    text-align: center;
    padding: 64px 56px;
    border-radius: 24px;
}
.clinic-success-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}
.clinic-success-icon__ring {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    background: rgba(14, 127, 128, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.clinic-success-icon__circle {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--clinic-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clinic-success-icon__circle svg {
    width: 60px;
    height: 60px;
}
.clinic-success-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #101828;
    margin: 0;
}
.clinic-success-message {
    color: var(--clinic-muted);
    margin: 16px 0 0;
}
.clinic-success-next {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 16px 18px;
    text-align: start;
    margin-bottom: 18px;
}
.clinic-success-next__icon {
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 2px;
}
.clinic-success-next__title {
    font-weight: 700;
    color: #15803d;
    margin-bottom: 4px;
}
.clinic-success-next__body {
    color: #15803d;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
.clinic-success-close {
    background: var(--clinic-primary);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-width: 120px;
}
.clinic-success-close:hover {
    background: var(--clinic-primary-dark);
}

@media (max-width: 640px) {
    .clinic-overlay {
        padding: 0;
    }
    .clinic-overlay__panel {
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        align-self: flex-end;
        width: 100%;
        margin-top: auto;
    }
    .clinic-overlay__panel--ads-form,
    .clinic-overlay__panel--ads-summary {
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        align-self: flex-end;
        width: 100%;
        margin-top: auto;
        padding: 16px 16px 20px;
    }
    .clinic-overlay--success .clinic-overlay__panel--success {
        padding: 40px 24px;
        border-radius: 16px;
    }
    .clinic-success-icon__ring {
        width: 140px;
        height: 140px;
    }
    .clinic-success-icon__circle {
        width: 96px;
        height: 96px;
    }
    .clinic-success-title {
        font-size: 24px;
    }
}

/* ── Confirm overlay (replaces browser native confirm()) ───────────────── */
.clinic-overlay__panel--confirm {
    width: min(440px, 100%);
    text-align: center;
    padding: 32px 28px 24px;
}
.clinic-confirm__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(14, 127, 128, 0.12);
    color: var(--clinic-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.clinic-confirm__icon[data-variant="danger"] {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}
.clinic-confirm__icon[data-variant="warning"] {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}
.clinic-confirm__title {
    font-size: 18px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 6px;
}
.clinic-confirm__message {
    color: var(--clinic-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}
.clinic-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.clinic-confirm__btn {
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-width: 110px;
}
.clinic-confirm__btn--cancel {
    background: #f3f4f6;
    color: #4a5565;
}
.clinic-confirm__btn--cancel:hover {
    background: #e5e7eb;
}
.clinic-confirm__btn--ok {
    background: var(--clinic-primary);
    color: #fff;
}
.clinic-confirm__btn--ok:hover {
    background: var(--clinic-primary-dark);
}
.clinic-confirm__btn--ok[data-variant="danger"] {
    background: #dc2626;
}
.clinic-confirm__btn--ok[data-variant="danger"]:hover {
    background: #b91c1c;
}
.clinic-confirm__btn--ok[data-variant="warning"] {
    background: #f97316;
}
.clinic-confirm__btn--ok[data-variant="warning"]:hover {
    background: #ea580c;
}

@media (max-width: 1180px) {
    .clinic-reports-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clinic-reports-cancellations__grid,
    .clinic-reports-export-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .clinic-reports-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .clinic-reports-section__header--between {
        flex-direction: column;
        align-items: stretch;
    }

    .clinic-reports-filter__field {
        width: 100%;
        min-width: 0;
    }

    .clinic-reports-cancel-breakdown__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .clinic-reports-reasons__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Clinic Emergency (Urgent Unavailability) --- */
.clinic-emergency {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.clinic-emergency__card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clinic-emergency__warning {
    background: #fee2e2;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.clinic-emergency__warning-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-emergency__warning-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.clinic-emergency__warning-text {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clinic-emergency__warning-text h3 {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #b91c1c;
}

.clinic-emergency__warning-text p {
    margin: 0;
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #b91c1c;
}

.clinic-emergency__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.clinic-emergency__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.clinic-emergency__label {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #4a5565;
}

.clinic-emergency__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.clinic-emergency__option {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 55.96px;
    padding: 0 17px;
    background: #f7f7f8;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.clinic-emergency__option span {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    text-align: start;
}

.clinic-emergency__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.clinic-emergency__option.is-selected {
    background: #e7f2f2;
    border-color: #0e7f80;
}

.clinic-emergency__panel {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.clinic-emergency__panel.is-visible {
    display: flex;
}

.clinic-emergency__input {
    background: #f5f5f5;
    border-radius: 12px;
    height: 50.146px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.clinic-emergency__input input {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #111827;
    width: 100%;
    cursor: text;
}

.clinic-emergency__input input[type="date"]::-webkit-calendar-picker-indicator,
.clinic-emergency__input input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.clinic-emergency__input input::placeholder {
    color: #6b7280;
    font-size: 12px;
}

[dir="rtl"] .clinic-emergency__input input {
    text-align: right;
}

.clinic-emergency__error {
    color: #b91c1c;
    font-size: 12px;
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
}

.clinic-emergency__submit {
    background: #e63946;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    height: 48px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    transition: background-color 0.15s ease;
}

.clinic-emergency__submit:hover {
    background: #d12d3a;
}

.clinic-emergency__submit-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-emergency__submit-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Active state card */
.clinic-emergency__card--active {
    align-items: stretch;
    padding: 16px;
    gap: 0;
}

.clinic-emergency__alert-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.clinic-emergency__alert-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clinic-emergency__alert-circle img {
    width: 40px;
    height: 40px;
    display: block;
}

.clinic-emergency__active-title {
    margin: 18px 0 0;
    text-align: center;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #b91c1c;
}

.clinic-emergency__active-subtitle {
    margin: 6px 0 0;
    text-align: center;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4a5565;
}

.clinic-emergency__details {
    margin: 18px auto 0;
    width: 100%;
    max-width: 772px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clinic-emergency__details-title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #101828;
}

.clinic-emergency__details-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-emergency__detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4a5565;
}

.clinic-emergency__detail-label {
    color: #6a7282;
    font-weight: 500;
}

.clinic-emergency__detail-value {
    color: #101828;
    font-weight: 600;
}

.clinic-emergency__cancel-form {
    margin: 18px auto 8px;
    width: 100%;
    max-width: 772px;
}

.clinic-emergency__cancel-btn {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background: #e63946;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    transition: background-color 0.15s ease;
}

.clinic-emergency__cancel-btn:hover {
    background: #d12d3a;
}

/* Success / cancel toast overlay */
.clinic-emergency-feedback {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1200;
    padding: 16px;
    animation: clinic-emergency-fade 0.15s ease both;
    cursor: pointer;
}

.clinic-emergency-feedback__card {
    background: #ffffff;
    border-radius: 24px;
    min-width: 320px;
    max-width: 540px;
    width: 100%;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
    text-align: center;
    cursor: default;
}

.clinic-emergency-feedback__icon-wrap {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-emergency-feedback__icon-wrap svg {
    width: 100%;
    height: 100%;
}

.clinic-emergency-feedback__card p {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    color: #101828;
}

@keyframes clinic-emergency-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640px) {
    .clinic-emergency__warning {
        padding: 12px;
    }

    .clinic-emergency__warning-text p {
        line-height: 1.6;
    }

    .clinic-emergency__option {
        height: 52px;
    }

    .clinic-emergency__alert-wrap {
        margin-top: 24px;
    }

    .clinic-emergency-feedback__card {
        padding: 32px 20px;
    }

    .clinic-emergency-feedback__card p {
        font-size: 18px;
    }
}

/* =========================================================
   Clinic Notifications page (Figma 15441:11290 etc.)
   ========================================================= */

.clinic-topbar__icon-btn--bell.is-active {
    background: #0e7f80;
    color: #fff;
}

.clinic-topbar__icon-btn--bell.is-active:hover {
    background: #0a6566;
    color: #fff;
}

.clinic-topbar__notification-badge {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff;
}

.clinic-topbar__notification-badge.is-hidden {
    display: none;
}

@keyframes clinic-bell-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14, 127, 128, 0.45); }
    50%  { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(14, 127, 128, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14, 127, 128, 0); }
}

.clinic-topbar__icon-btn--bell.is-pulsing {
    animation: clinic-bell-pulse 1.4s ease-out 1;
}

/* =========================================================
   Notification toasts (polled from /clinic/notifications/poll)
   ========================================================= */

.clinic-notifications-toast-host {
    position: fixed;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 32px));
}

.clinic-notifications-toast {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    text-decoration: none;
    color: inherit;
    pointer-events: auto;
    transform: translateY(-6px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.clinic-notifications-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.clinic-notifications-toast:hover {
    border-color: rgba(14, 127, 128, 0.35);
}

.clinic-notifications-toast__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.clinic-notifications-toast__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.clinic-notifications-toast__title {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.clinic-notifications-toast__body {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.clinic-notifications {
    display: block;
    width: 100%;
}

.clinic-notifications__top-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clinic-notifications__top-form {
    display: inline-flex;
    margin: 0;
}

.clinic-notifications__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid #e4e7ec;
    background: #fff;
    color: #344054;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.clinic-notifications__btn:hover {
    background: #f9fafb;
    color: #101828;
}

.clinic-notifications__btn:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.25);
    outline-offset: 2px;
}

.clinic-notifications__btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.clinic-notifications__btn--ghost {
    background: #fff;
    color: #344054;
}

.clinic-notifications__btn--danger-ghost {
    background: #fff;
    color: #b42318;
    border-color: #fecdca;
}

.clinic-notifications__btn--danger-ghost:hover {
    background: #fef3f2;
    color: #912018;
}

.clinic-notifications__btn--soft {
    background: #f2f4f7;
    border-color: #f2f4f7;
    color: #344054;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.clinic-notifications__btn--soft:hover {
    background: #e4e7ec;
    color: #101828;
}

.clinic-notifications__btn--primary {
    background: #0e7f80;
    border-color: #0e7f80;
    color: #fff;
}

.clinic-notifications__btn--primary:hover {
    background: #0a6566;
    border-color: #0a6566;
    color: #fff;
}

.clinic-notifications__btn-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.clinic-notifications__card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.clinic-notifications__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #f2f4f7;
}

.clinic-notifications__card-header-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(14, 127, 128, 0.12);
    color: #0e7f80;
}

.clinic-notifications__card-title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #101828;
}

.clinic-notifications__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clinic-notifications__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f2f4f7;
    transition: background 0.15s ease;
}

.clinic-notifications__item:last-child {
    border-bottom: 0;
}

.clinic-notifications__item.is-unread {
    background: #f9fafb;
}

.clinic-notifications__item-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-notifications__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

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

.clinic-notifications__item-head-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.clinic-notifications__item-title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.45;
    color: #101828;
}

.clinic-notifications__item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.clinic-notifications__item-link:hover .clinic-notifications__item-title {
    text-decoration: underline;
}

.clinic-notifications__unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0e7f80;
    flex: 0 0 8px;
}

.clinic-notifications__priority {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.clinic-notifications__priority--high {
    background: #fef3f2;
    color: #b42318;
}

.clinic-notifications__priority--medium {
    background: #fff6ed;
    color: #b54708;
}

.clinic-notifications__priority--low {
    background: #f2f4f7;
    color: #475467;
}

.clinic-notifications__item-time {
    flex: 0 0 auto;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    white-space: nowrap;
}

.clinic-notifications__item-text {
    margin: 0 0 12px 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #475467;
    overflow-wrap: anywhere;
}

.clinic-notifications__item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clinic-notifications__action-form {
    margin: 0;
    display: inline-flex;
}

.clinic-notifications__icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f2f4f7;
    color: #344054;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.clinic-notifications__icon-btn:hover {
    background: #e4e7ec;
    color: #101828;
}

.clinic-notifications__icon-btn:focus-visible {
    outline: 2px solid rgba(14, 127, 128, 0.25);
    outline-offset: 2px;
}

.clinic-notifications__icon-btn--danger {
    background: #fef3f2;
    color: #b42318;
    border-color: #fecdca;
}

.clinic-notifications__icon-btn--danger:hover {
    background: #fee4e2;
    color: #912018;
}

.clinic-notifications__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
}

.clinic-notifications__empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(14, 127, 128, 0.1);
    color: #0e7f80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-notifications__empty-title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #101828;
}

.clinic-notifications__empty-subtitle {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #475467;
    max-width: 420px;
}

.clinic-notifications__pagination {
    padding: 16px 24px;
    border-top: 1px solid #f2f4f7;
    display: flex;
    justify-content: center;
}

.clinic-notifications__pagination nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 720px) {
    .clinic-notifications__card-header {
        padding: 16px 18px;
    }

    .clinic-notifications__item {
        padding: 18px;
        gap: 12px;
    }

    .clinic-notifications__item-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .clinic-notifications__item-head {
        flex-direction: column;
        gap: 6px;
    }

    .clinic-notifications__item-time {
        align-self: flex-start;
    }

    .clinic-notifications__top-actions {
        gap: 6px;
    }

    .clinic-notifications__btn {
        padding: 9px 12px;
        font-size: 13px;
    }
}

/* =========================================================
   Clinic Overview Dashboard page (Figma 15292:7000)
   ========================================================= */

.clinic-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.clinic-dashboard__kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.clinic-dashboard__kpi {
    background: #fff;
    border: 1.098px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 144px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.clinic-dashboard__kpi:hover {
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06);
    transform: translateY(-1px);
}

.clinic-dashboard__kpi-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-dashboard__kpi-icon--blue { background: #eff6ff; color: #2563EB; }
.clinic-dashboard__kpi-icon--teal { background: #f0fdfa; color: #0e7f80; }
.clinic-dashboard__kpi-icon--orange { background: #fff7ed; color: #EA580C; }
.clinic-dashboard__kpi-icon--green { background: #f0fdf4; color: #16A34A; }
.clinic-dashboard__kpi-icon--red { background: #fef2f2; color: #DC2626; }
.clinic-dashboard__kpi-icon--purple { background: #faf5ff; color: #7C3AED; }

.clinic-dashboard__kpi-value {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
    overflow-wrap: anywhere;
}

.clinic-dashboard__kpi-label {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16.25px;
    color: #6a7282;
}

.clinic-dashboard__card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.clinic-dashboard__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #f2f4f7;
}

.clinic-dashboard__card-header-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(14, 127, 128, 0.12);
    color: #0e7f80;
}

.clinic-dashboard__card-title {
    margin: 0;
    flex: 1 1 auto;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #101828;
}

.clinic-dashboard__card-link {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0e7f80;
    text-decoration: none;
}

.clinic-dashboard__card-link:hover {
    color: #0a6566;
    text-decoration: underline;
}

.clinic-dashboard__card-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.clinic-dashboard__card-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6a7282;
    font-weight: 500;
}

.clinic-dashboard__card--table {
    margin-top: 16px;
}

.clinic-dashboard__table-wrap {
    padding: 0;
}

.clinic-dashboard__urgent-table th,
.clinic-dashboard__urgent-table td {
    white-space: nowrap;
}

.clinic-dashboard__urgent-table__month,
.clinic-dashboard__urgent-table__count,
.clinic-dashboard__urgent-table__total {
    text-align: center;
}

.clinic-dashboard__urgent-table__doctor {
    font-weight: 600;
    color: #101828;
    min-width: 160px;
}

.clinic-dashboard__urgent-table__count.has-value,
.clinic-dashboard__urgent-table__total.has-value {
    font-weight: 600;
    color: #0e7f80;
}

.clinic-dashboard__notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clinic-dashboard__notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #f2f4f7;
}

.clinic-dashboard__notification-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.clinic-dashboard__notification-link:hover .clinic-dashboard__notification-title {
    text-decoration: underline;
}

.clinic-dashboard__notification:last-child {
    border-bottom: 0;
}

.clinic-dashboard__notification.is-unread {
    background: #fbfcfd;
}

.clinic-dashboard__notification-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-dashboard__notification-icon svg {
    width: 16px;
    height: 16px;
}

.clinic-dashboard__notification-body {
    flex: 1 1 auto;
    min-width: 0;
}

.clinic-dashboard__notification-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.clinic-dashboard__notification-title {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #101828;
    overflow-wrap: anywhere;
}

.clinic-dashboard__notification-time {
    flex: 0 0 auto;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #99a1af;
    white-space: nowrap;
}

.clinic-dashboard__notification-text {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 17.875px;
    color: #4a5565;
    overflow-wrap: anywhere;
}

.clinic-dashboard__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    gap: 10px;
}

.clinic-dashboard__empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(14, 127, 128, 0.1);
    color: #0e7f80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-dashboard__empty-text {
    margin: 0;
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6A7282;
}

@media (max-width: 1024px) {
    .clinic-dashboard__kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .clinic-dashboard__kpi-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .clinic-dashboard__kpi {
        min-height: 0;
        padding: 16px;
    }

    .clinic-dashboard__kpi-value {
        font-size: 22px;
        line-height: 28px;
    }

    .clinic-dashboard__kpi-label {
        font-size: 12px;
        line-height: 15px;
    }

    .clinic-dashboard__card-header {
        padding: 16px 18px;
    }

    .clinic-dashboard__notification {
        padding: 14px 18px;
    }
}

/* ==========================================================================
   Contact Platform Support page (Figma 15335:27957 + 15497 dialogs)
   ========================================================================== */
.clinic-contact {
    display: block;
}

.clinic-contact__new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: #0e7f80;
    color: #ffffff;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.clinic-contact__new-btn:hover {
    background: #0a6566;
}

.clinic-contact__new-btn:active {
    transform: translateY(1px);
}

.clinic-contact__card {
    background: #ffffff;
    border: 1.098px solid #f3f4f6;
    border-radius: 24px;
    overflow: hidden;
}

.clinic-contact__card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    border-bottom: 1.098px solid #f3f4f6;
}

.clinic-contact__card-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #f9fafb;
    color: #4a5565;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clinic-contact__card-title {
    margin: 0;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #101828;
}

.clinic-contact__table-wrap {
    overflow-x: auto;
}

.clinic-contact__table {
    width: 100%;
    border-collapse: collapse;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
}

.clinic-contact__table thead tr {
    background: #f9fafb;
    border-bottom: 1.098px solid #f3f4f6;
}

.clinic-contact__table th {
    padding: 15px 8px;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 21.43px;
    color: #364153;
    border-bottom: none;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
}

.clinic-contact__table tbody tr {
    border-bottom: 1.098px solid #f9fafb;
    transition: background 0.15s ease;
}

.clinic-contact__table tbody tr:last-child {
    border-bottom: none;
}

.clinic-contact__table tbody tr:hover {
    background: #fbfcfd;
}

.clinic-contact__table td {
    padding: 19px 8px;
    font-size: 15px;
    line-height: 21.43px;
    color: #4a5565;
    border-bottom: none;
    text-align: center;
    vertical-align: middle;
}

.clinic-contact__td-subject {
    color: #101828;
    font-weight: 500;
    text-align: center;
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
}

.clinic-contact__td-center {
    text-align: center;
}

.clinic-contact__td-date {
    font-weight: 400;
    color: #4a5565;
}

.clinic-contact__th-actions {
    text-align: end;
}

.clinic-contact__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 13px;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 13px;
    line-height: 18.57px;
    border: 1.098px solid transparent;
    white-space: nowrap;
}

.clinic-contact__badge--priority-high {
    background: #ffe2e2;
    color: #c10007;
}

.clinic-contact__badge--priority-medium {
    background: #ffedd4;
    color: #ca3500;
}

.clinic-contact__badge--priority-low {
    background: #dcfce7;
    color: #008236;
}

.clinic-contact__badge--status-new {
    background: #dbeafe;
    color: #1447e6;
}

.clinic-contact__badge--status-in_progress {
    background: #ffedd4;
    color: #ca3500;
}

.clinic-contact__badge--status-replied {
    background: #dcfce7;
    color: #008236;
}

.clinic-contact__view-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #f6f6f6;
    border: none;
    color: #4a5565;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.clinic-contact__view-btn:hover {
    background: #ecedee;
    color: #0e7f80;
}

.clinic-contact__view-btn:focus-visible {
    outline: 2px solid #0e7f80;
    outline-offset: 2px;
}

.clinic-contact__empty {
    padding: 56px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.clinic-contact__empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: #f9fafb;
    color: #6a7282;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clinic-contact__empty-title {
    margin: 0;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #101828;
}

.clinic-contact__empty-subtitle {
    margin: 0;
    font-size: 14px;
    color: #6a7282;
    max-width: 380px;
}

.clinic-contact__pagination {
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    border-top: 1.098px solid #f3f4f6;
}

/* --- Dialog overlays (New Message + Message Details) --- */
.clinic-overlay--dialog .clinic-overlay__panel {
    padding: 0;
    width: min(741px, 100%);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.clinic-contact-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.clinic-contact-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 8px;
}

.clinic-contact-dialog__title {
    margin: 0;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    color: #101828;
}

.clinic-contact-dialog__subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: #6a7282;
}

.clinic-contact-dialog__close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.clinic-contact-dialog__close:hover {
    background: #f3f4f6;
    color: #101828;
}

.clinic-contact-dialog__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 24px;
}

.clinic-contact-dialog__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-contact-dialog__label {
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #101828;
}

.clinic-contact-dialog__input,
.clinic-contact-dialog__textarea {
    width: 100%;
    border: 1.098px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 13px 14px;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #101828;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.clinic-contact-dialog__textarea {
    min-height: 110px;
    resize: vertical;
}

.clinic-contact-dialog__input::placeholder,
.clinic-contact-dialog__textarea::placeholder {
    color: #9ca3af;
}

.clinic-contact-dialog__input:focus,
.clinic-contact-dialog__textarea:focus {
    outline: none;
    border-color: #0e7f80;
    box-shadow: 0 0 0 3px rgba(14, 127, 128, 0.15);
}

.clinic-contact-dialog__input.is-invalid,
.clinic-contact-dialog__textarea.is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.clinic-contact-dialog__error {
    margin: 0;
    font-size: 13px;
    color: #b42318;
}

.clinic-contact-dialog__submit {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: #0e7f80;
    color: #ffffff;
    border: none;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.clinic-contact-dialog__submit:hover {
    background: #0a6566;
}

.clinic-contact-dialog__submit:active {
    transform: translateY(1px);
}

/* --- View dialog body --- */
.clinic-contact-view__body {
    padding: 4px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clinic-contact-view__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.clinic-contact-view__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clinic-contact-view__label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #4a5565;
    line-height: 19.5px;
}

.clinic-contact-view__value {
    margin: 0;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #101828;
}

.clinic-contact-view__section {
    border: 1.098px solid #f3f4f6;
    background: #fafafb;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-contact-view__section--reply {
    background: #f0f9fa;
    border-color: #d2eaeb;
}

.clinic-contact-view__paragraph {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: #1f2937;
    white-space: pre-wrap;
}

.clinic-contact-view__paragraph--muted {
    color: #6a7282;
    font-style: italic;
}

.clinic-contact-view__date {
    margin: 0;
    font-size: 13px;
    color: #6a7282;
}

@media (max-width: 720px) {
    .clinic-contact__card-header {
        padding: 16px 18px;
        gap: 12px;
    }

    .clinic-contact__card-header-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .clinic-contact__card-title {
        font-size: 17px;
        line-height: 24px;
    }

    .clinic-contact__table th,
    .clinic-contact__table td {
        padding: 14px 6px;
        font-size: 13px;
    }

    .clinic-contact__td-subject {
        font-size: 13px;
    }

    .clinic-contact__badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    .clinic-contact__view-btn {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .clinic-contact__new-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }

    .clinic-contact-dialog__header {
        padding: 18px 18px 6px;
    }

    .clinic-contact-dialog__title {
        font-size: 19px;
        line-height: 26px;
    }

    .clinic-contact-dialog__form,
    .clinic-contact-view__body {
        padding-inline: 18px;
    }

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

/* ==========================================================================
   Bootstrap-classed pagination (rendered by Laravel's Paginator::useBootstrap())
   — styled here so all clinic tables render a consistent, themed paginator
   without pulling in the full Bootstrap CSS bundle.
   ========================================================================== */
.clinic-content .pagination,
.clinic-doctors-pagination .pagination,
.clinic-contact__pagination .pagination,
.clinic-notifications__pagination .pagination,
.clinic-pagination .pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "IBM Plex Sans", "Tajawal", sans-serif;
    flex-wrap: wrap;
    justify-content: center;
}

.clinic-content .pagination .page-item {
    display: inline-flex;
}

.clinic-content .pagination .page-link,
.clinic-content .pagination .page-item > span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.098px solid #f3f4f6;
    border-radius: 12px;
    background: #ffffff;
    color: #4a5565;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.clinic-content .pagination .page-link:hover {
    background: #f9fafb;
    color: #0e7f80;
    border-color: #d2eaeb;
}

.clinic-content .pagination .page-link:focus-visible {
    outline: 2px solid #0e7f80;
    outline-offset: 2px;
}

.clinic-content .pagination .page-item.active .page-link,
.clinic-content .pagination .page-item.active > span {
    background: #0e7f80;
    color: #ffffff;
    border-color: #0e7f80;
}

.clinic-content .pagination .page-item.disabled .page-link,
.clinic-content .pagination .page-item.disabled > span {
    color: #9ca3af;
    background: #fafafb;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bootstrap renders previous/next arrows as raw "« / »" — keep them readable */
.clinic-content .pagination .page-item:first-child .page-link,
.clinic-content .pagination .page-item:last-child .page-link {
    font-size: 18px;
    line-height: 1;
}

/* Ellipsis (the "..." item Laravel injects for long ranges) */
.clinic-content .pagination .page-item.disabled > span[aria-disabled="true"] {
    border-color: transparent;
    background: transparent;
    color: #6a7282;
    min-width: 28px;
    padding: 0 4px;
}

/* RTL: keep arrows visually consistent */
[dir="rtl"] .clinic-content .pagination .page-item:first-child .page-link,
[dir="rtl"] .clinic-content .pagination .page-item:last-child .page-link {
    transform: scaleX(-1);
}

/* Wrappers across pages */
.clinic-doctors-pagination,
.clinic-contact__pagination,
.clinic-notifications__pagination,
.clinic-pagination {
    display: flex;
    justify-content: center;
}

@media (max-width: 720px) {
    .clinic-content .pagination .page-link,
    .clinic-content .pagination .page-item > span {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 10px;
    }
}

/* =============================================================
   Splash overlay
   Shows on every page load of the clinic guest layout (login,
   register, forgot-password, …) — covers the page in white,
   fades the WASLAT CARE wordmark in, then fades the whole overlay
   out to reveal the underlying page.
   Figma source:
     - White state:  node-id 15335-28727
     - Logo state:   node-id 15335-28690 (Foundation/Green/Normal #0E7F80)
   ============================================================= */
.clinic-splash-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
    transition: opacity 500ms ease-out, visibility 0s linear 0s;
    pointer-events: auto;
}

.clinic-splash-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 500ms ease-out, visibility 0s linear 500ms;
}

.clinic-splash-overlay__stage {
    color: #0E7F80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 720px;
    padding: 0 24px;
    opacity: 0;
    transform: scale(0.96);
    animation: clinic-splash-logo-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms forwards;
}

.clinic-splash-overlay__stage svg {
    width: 100%;
    max-width: 665px;
    height: auto;
    display: block;
}

@keyframes clinic-splash-logo-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clinic-splash-overlay__stage {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .clinic-splash-overlay,
    .clinic-splash-overlay.is-hidden {
        transition: opacity 200ms linear, visibility 0s linear;
    }
}

@media (max-width: 640px) {
    .clinic-splash-overlay__stage {
        padding: 0 16px;
    }

    .clinic-splash-overlay__stage svg {
        max-width: 320px;
    }
}

/* ---- Pending availability requests / doctor availability windows ---- */
.clinic-pending-board {
    margin-bottom: 24px;
}

.clinic-pending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.clinic-pending-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--clinic-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.clinic-pending-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.clinic-pending-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.clinic-pending-card__doctor {
    font-weight: 700;
    color: #1f2937;
}

.clinic-pending-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: #4b5563;
    font-size: 0.86rem;
}

.clinic-pending-card__time {
    font-weight: 600;
    color: #0b6b6c;
}

.clinic-pending-card__days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.clinic-pending-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.clinic-pending-reject {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clinic-pending-note {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--clinic-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.82rem;
    min-width: 160px;
}

.clinic-pending-btn {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.clinic-pending-btn--approve {
    background: #0e7f80;
    color: #fff;
}

.clinic-pending-btn--approve:hover {
    background: #0b6b6c;
}

.clinic-pending-btn--reject {
    background: #fee2e2;
    color: #b91c1c;
}

.clinic-pending-btn--reject:hover {
    background: #fecaca;
}

@media (max-width: 640px) {
    .clinic-pending-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .clinic-pending-card__actions {
        width: 100%;
    }

    .clinic-pending-reject {
        flex: 1;
    }

    .clinic-pending-note {
        flex: 1;
    }
}

/* Inline field validation (e.g. invalid email format on registration) */
.clinic-input-shell:has(.clinic-input-shell__control.is-invalid) {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.clinic-field__error {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #b42318;
}

.clinic-field__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #667085;
}

/* Password show/hide toggle (eye icon) inside the input shell */
.clinic-input-shell__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
}

.clinic-input-shell__toggle:hover,
.clinic-input-shell__toggle:focus-visible {
    color: #0e7f80;
    outline: none;
}

.clinic-input-shell__toggle-icon--hide {
    display: none;
}

.clinic-input-shell__toggle.is-revealed .clinic-input-shell__toggle-icon--show {
    display: none;
}

.clinic-input-shell__toggle.is-revealed .clinic-input-shell__toggle-icon--hide {
    display: inline;
}

/* ── Patient-app visibility ────────────────────────────────────────────── */

.clinic-visibility-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 24px 0;
    padding: 12px 16px;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: var(--clinic-radius);
    background: rgba(217, 119, 6, 0.08);
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
}

.clinic-visibility-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.clinic-visibility-banner span {
    flex: 1;
}

.clinic-visibility-banner a {
    color: var(--clinic-primary);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.clinic-visibility__state.is-hidden .clinic-profile-card__head-icon {
    color: var(--clinic-warning);
    background: rgba(217, 119, 6, 0.12);
}

.clinic-visibility__state.is-live .clinic-profile-card__head-icon {
    color: var(--clinic-success);
    background: rgba(22, 163, 74, 0.12);
}

.clinic-visibility__since {
    margin-top: 6px;
    color: var(--clinic-muted);
    font-size: 13px;
}

.clinic-visibility__blockers ul {
    margin: 8px 0;
    padding-inline-start: 18px;
    list-style: disc;
}

.clinic-visibility__blockers li {
    margin-bottom: 4px;
}

.clinic-visibility__form {
    margin-top: 20px;
}

/* The margin exists to separate the action from the blockers notice above it.
   With no blockers the form is the body's only child, and the body's own
   padding is already the whole gap. */
.clinic-visibility__form:first-child {
    margin-top: 0;
}

.clinic-visibility__meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.clinic-visibility__bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--clinic-border);
    overflow: hidden;
}

.clinic-visibility__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--clinic-primary);
    transition: width 0.3s ease;
}

.clinic-visibility__readiness-note {
    margin-bottom: 16px;
    color: var(--clinic-muted);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .clinic-visibility-banner {
        margin-inline: 16px;
        flex-wrap: wrap;
    }
}

/* ── Branches ────────────────────────────────────────────────────────────────
   The branches page reuses the doctors toolbar (quota chip + primary action)
   and the shared status pills. Only the branch card itself is new: a plain
   .clinic-profile-card was wrong for it, because that class carries no padding
   of its own — its padding lives on __head / __body — so the content sat flush
   against the rounded corner and the status pill spilled out of the box. */

.clinic-branches__list {
    display: grid;
    gap: 12px;
}

.clinic-branch-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--clinic-border, #f3f4f6);
    border-radius: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.clinic-branch-card:hover {
    border-color: var(--clinic-primary-soft, rgba(14, 127, 128, 0.12));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.clinic-branch-card__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--clinic-primary-soft, rgba(14, 127, 128, 0.12));
    color: var(--clinic-primary, #0e7f80);
}

.clinic-branch-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.clinic-branch-card__name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--clinic-text, #0f172a);
    /* Branch names come straight from the registration form and can be long. */
    overflow-wrap: anywhere;
}

/* One wrapping line rather than a stack: three short facts down the right edge
   left a tall card mostly empty, and they read fine side by side. */
.clinic-branch-card__metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
}

.clinic-branch-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--clinic-muted, #64748b);
}

.clinic-branch-card__meta svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

/* Phone and email are latin even in the Arabic UI, so they are marked dir=ltr;
   this keeps them from being pushed away from their icon in an RTL row. */
.clinic-branch-card__meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.clinic-branch-card > .clinic-status-pill {
    flex: 0 0 auto;
    align-self: flex-start;
}

.clinic-status-pill--awaiting-payment {
    background: #e0e7ff;
    color: #4338ca;
}

.clinic-branches__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 44px 24px;
    background: #ffffff;
    border: 1px dashed var(--clinic-border, #e2e8f0);
    border-radius: 18px;
}

.clinic-branches__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 16px;
    background: #f8fafc;
    color: var(--clinic-muted, #94a3b8);
}

.clinic-branches__empty-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--clinic-text, #0f172a);
}

.clinic-branches__empty-hint {
    max-width: 46ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--clinic-muted, #64748b);
}

/* The branches page and the branch-mode registration banner both explain a
   state rather than report a success or a failure, so neither green nor red
   fits — and without this rule they were rendering as an unstyled block. */
.clinic-alert--info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.clinic-alert--info strong {
    display: block;
    margin-bottom: 2px;
}

/* "Approved — pay to publish" on the ad detail page: the sentence and the pay
   button share one row, and wrap onto two on a narrow screen. */
.clinic-ads-show__pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Keeps the "add branch" and "discard draft" forms from stretching to the full
   toolbar width the way a bare block-level form would. */
.clinic-inline-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 640px) {
    .clinic-branch-card {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .clinic-branch-card__body {
        flex: 1 1 100%;
        order: 2;
    }

    .clinic-branch-card > .clinic-status-pill {
        order: 1;
        margin-inline-start: auto;
    }
}

/* ── Process timeline ────────────────────────────────────────────────────────
   The "order status" tracker, for anything in the app that runs in steps: an
   ad being reviewed and paid for, a registration waiting on an admin, a
   subscription running down, a doctor waiting on a schedule.

   Both panels load this stylesheet, so the same component renders for a clinic
   and for an admin. The track is drawn as a line behind the dots, with a fill
   that stops at the step the process is actually on — a half-finished process
   must never look finished. */

.process-timeline {
    background: #ffffff;
    border: 1px solid var(--clinic-border, #e2e8f0);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
}

.process-timeline__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.process-timeline__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--clinic-text, #0f172a);
}

.process-timeline__pill {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--clinic-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.process-timeline__pill.is-done {
    background: #dcfce7;
    color: #15803d;
}

.process-timeline__pill.is-stopped {
    background: #fee2e2;
    color: #b91c1c;
}

/* The track: one column per step, with the connecting line drawn behind the
   dots by ::before (the rail) and ::after (the fill). */
.process-timeline__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--process-steps, 4), 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-timeline__track::before,
.process-timeline__track::after {
    content: "";
    position: absolute;
    inset-block-start: 13px;
    height: 4px;
    border-radius: 999px;
    /* Stops at the centre of the first and last dots rather than running off
       the ends of the row. */
    inset-inline-start: calc(50% / var(--process-steps, 4));
    inset-inline-end: calc(50% / var(--process-steps, 4));
}

.process-timeline__track::before {
    background: var(--clinic-border, #e2e8f0);
}

.process-timeline__track::after {
    inset-inline-end: auto;
    width: calc((100% - (100% / var(--process-steps, 4))) * (var(--process-fill, 0%) / 100%));
    background: var(--clinic-primary, #0e7f80);
    transition: width 0.4s ease;
}

.process-timeline.is-stopped .process-timeline__track::after {
    background: #dc2626;
}

.process-timeline__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.process-timeline__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--clinic-border, #e2e8f0);
    color: #ffffff;
    margin-bottom: 6px;
}

.process-timeline__dot svg {
    width: 14px;
    height: 14px;
}

.process-timeline__step.is-done .process-timeline__dot {
    background: var(--clinic-primary, #0e7f80);
    border-color: var(--clinic-primary, #0e7f80);
}

/* The step the process is sitting on: filled, and ringed so it reads as "here"
   rather than as another completed one. */
.process-timeline__step.is-current .process-timeline__dot {
    background: #ffffff;
    border-color: var(--clinic-primary, #0e7f80);
    box-shadow: 0 0 0 4px var(--clinic-primary-soft, rgba(14, 127, 128, 0.12));
}

.process-timeline__step.is-failed .process-timeline__dot {
    background: #dc2626;
    border-color: #dc2626;
}

.process-timeline__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--clinic-text, #0f172a);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.process-timeline__step.is-upcoming .process-timeline__label {
    color: var(--clinic-muted, #94a3b8);
    font-weight: 500;
}

.process-timeline__step.is-failed .process-timeline__label {
    color: #b91c1c;
}

.process-timeline__hint {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--clinic-muted, #64748b);
    overflow-wrap: anywhere;
}

.process-timeline__action {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--clinic-primary, #0e7f80);
    text-decoration: underline;
}

.process-timeline__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.process-timeline__callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--clinic-muted, #475569);
    font-size: 13px;
    line-height: 1.6;
}

.process-timeline.is-stopped .process-timeline__callout {
    background: #fef2f2;
    color: #b91c1c;
}

.process-timeline__callout svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.process-timeline.is-compact {
    padding: 16px;
}

.process-timeline.is-compact .process-timeline__head {
    margin-bottom: 16px;
}

/* Narrow screens turn the track on its side: four labels across a phone is
   unreadable, and a vertical list is the ordinary mobile shape for this. */
@media (max-width: 640px) {
    .process-timeline__track {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .process-timeline__track::before,
    .process-timeline__track::after {
        inset-block-start: 0;
        inset-inline-start: 13px;
        inset-inline-end: auto;
        width: 4px;
        height: calc(100% - 30px);
    }

    .process-timeline__track::after {
        height: calc((100% - 30px) * (var(--process-fill, 0%) / 100%));
        width: 4px;
        transition: height 0.4s ease;
    }

    .process-timeline__step {
        flex-direction: row;
        align-items: flex-start;
        text-align: start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .process-timeline__dot {
        margin-bottom: 0;
    }

    .process-timeline__label,
    .process-timeline__hint,
    .process-timeline__action {
        flex: 1 1 calc(100% - 42px);
    }
}

/* A brief tint when a tracker refreshes itself, so a change that arrives while
   the reader is looking elsewhere on the page still registers. */
.process-timeline--updated {
    animation: process-timeline-flash 1.2s ease;
}

@keyframes process-timeline-flash {
    0%   { box-shadow: 0 0 0 0 var(--clinic-primary-soft, rgba(14, 127, 128, 0.12)); }
    30%  { box-shadow: 0 0 0 6px var(--clinic-primary-soft, rgba(14, 127, 128, 0.12)); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-timeline--updated {
        animation: none;
    }
}

/* ── Doctor profile update requests ──────────────────────────────────────── */

.clinic-doctor-update__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 18px;
}

.clinic-doctor-update__table th {
    text-align: start;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--clinic-muted, #64748b);
    border-bottom: 1px solid var(--clinic-border, #e2e8f0);
}

.clinic-doctor-update__table td {
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
    overflow-wrap: anywhere;
}

/* The two columns that matter: what it is now, and what it would become. */
.clinic-doctor-update__table td.is-current {
    color: var(--clinic-muted, #94a3b8);
    text-decoration: line-through;
}

.clinic-doctor-update__table td.is-requested {
    color: var(--clinic-text, #0f172a);
    font-weight: 600;
}

.clinic-doctor-update__photo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.clinic-doctor-update__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.clinic-doctor-update__reject {
    display: flex;
    flex: 1 1 320px;
    gap: 8px;
    margin: 0;
}

.clinic-doctor-update__reason {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--clinic-border, #e2e8f0);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .clinic-doctor-update__table th:first-child,
    .clinic-doctor-update__table td:first-child {
        width: 30%;
    }

    .clinic-doctor-update__reject {
        flex: 1 1 100%;
    }
}