/* ═══════════════════════════════════════════════════════════════════════════
 * Mosaper.Clinic — Shell & Component Styles
 *
 * Reads tokens from design-system.css. Tokens are NOT defined here.
 * If you need a new token, add it there and reference it via var(--name).
 *
 * Class naming preserves legacy --shell-* / --enc-* selectors so existing
 * pages continue working through the redesign.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── Base ─────────────────────────────────────────────────────────────── */
html, body {
    background: var(--bg);
    color: var(--text-primary);
}

body {
    min-height: 100vh;
    background-attachment: fixed;
}

#app {
    min-height: 100vh;
}

a, .btn-link {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
a:hover, .btn-link:hover {
    color: var(--brand-hover);
}

/* ─── Layout shells ────────────────────────────────────────────────────── */
.mud-layout.shell-layout {
    min-height: 100vh;
    color: var(--text-primary);
    background: var(--bg);
}

.shell-layout--dark.mud-layout.shell-layout {
    background: var(--bg);
}

.shell-main.mud-main-content {
    background: transparent;
}

/* ─── App bar ──────────────────────────────────────────────────────────── */
.shell-appbar.mud-appbar {
    height: 60px;
    min-height: 60px;
    padding-inline: var(--space-5);
    background: var(--surface);
    color: var(--text-primary);
    border-bottom: var(--hairline) solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
}

.shell-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
}

.shell-brand:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.shell-brand__mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--brand-fg);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    flex-shrink: 0;
}

.shell-brand__eyebrow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-semi);
}

.shell-brand__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1;
}

[lang="ar"] .shell-brand__title,
[dir="rtl"] .shell-brand__title {
    font-family: var(--font-arabic-display);
}

/* ── Command palette button ───────────────────────────────────────────── */
.shell-cmdk {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 280px;
    height: 34px;
    margin-inline-start: var(--space-6);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.shell-cmdk:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
}

.shell-cmdk__icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.shell-cmdk__placeholder {
    flex: 1;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-cmdk__kbd {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    flex-shrink: 0;
}

@media (max-width: 1280px) {
    .shell-cmdk {
        width: 220px;
    }
}

.shell-appbar__meta {
    row-gap: var(--space-2);
}

.shell-zoom-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 34px;
    padding: 0 var(--space-1) 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.shell-zoom-indicator__value {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    white-space: nowrap;
}

.shell-zoom-indicator__reset.mud-icon-button {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}
.shell-zoom-indicator__reset.mud-icon-button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.shell-appbar__action.mud-icon-button {
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
.shell-appbar__action.mud-icon-button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.shell-appbar__culture .mud-button-root {
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-transform: none;
    font-weight: var(--weight-medium);
}
.shell-appbar__culture .mud-button-root:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.shell-tenant-chip.mud-chip {
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding-inline: var(--space-3);
    background: var(--surface);
    color: var(--text-primary);
    border: var(--hairline) solid var(--border);
    font-weight: var(--weight-medium);
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.shell-tenant-chip.mud-chip:hover {
    border-color: var(--border-strong);
    background: var(--hover-bg);
}

/* ── Tenant switcher card (drawer) ────────────────────────────────────── */
.shell-tenant-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-body);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.shell-tenant-card:hover {
    border-color: var(--border-strong);
    background: var(--hover-bg);
}

.shell-tenant-card__mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    flex-shrink: 0;
}

.shell-tenant-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.shell-tenant-card__eyebrow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
    line-height: 1.2;
}

.shell-tenant-card__name {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--weight-semi);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-tenant-card__chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ── User pill ────────────────────────────────────────────────────────── */
.shell-user-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 34px;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border-radius: var(--radius-pill);
    background: transparent;
    border: var(--hairline) solid transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.shell-user-pill:hover {
    background: var(--hover-bg);
    border-color: var(--border);
}

.shell-user-pill__avatar {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--brand-fg);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
}

.shell-user-pill__name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user-pill__chevron {
    color: var(--text-tertiary);
    margin-inline-start: var(--space-1);
}

/* ── User dropdown popover ────────────────────────────────────────────── */
.shell-user-popover.mud-popover {
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: var(--space-2);
}

.shell-user-popover__header {
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.shell-user-popover__name {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .shell-user-popover__name,
[dir="rtl"] .shell-user-popover__name {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.shell-user-popover__tenant {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.shell-user-popover__rule.mud-divider {
    margin: var(--space-1) 0;
    border-color: var(--border-subtle);
}

.shell-user-popover.mud-popover .mud-list-item {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-sm);
    transition: background var(--duration-fast) var(--ease-standard);
}

.shell-user-popover.mud-popover .mud-list-item:hover {
    background: var(--hover-bg);
}

/* ─── Drawer ───────────────────────────────────────────────────────────── */
.shell-drawer.mud-drawer {
    width: 264px;
    color: var(--text-primary);
    background: var(--surface);
    border-inline-end: var(--hairline) solid var(--border);
    box-shadow: none;
}

.shell-drawer__header {
    min-height: auto;
    padding: var(--space-5) var(--space-4) var(--space-3);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.shell-drawer__header-content {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
}

.shell-drawer__eyebrow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-semi);
}

.shell-drawer__tenant {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.shell-nav__identity {
    margin: var(--space-3) var(--space-4) var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
}

.shell-nav__identity-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.shell-nav__identity-avatar.mud-avatar {
    width: 36px;
    height: 36px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: var(--weight-semi);
}

.shell-nav__identity-title {
    color: var(--text-primary);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
}

.shell-nav__identity-subtitle {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.shell-nav {
    padding: var(--space-2) var(--space-2) var(--space-5);
}

.shell-nav__section {
    padding: var(--space-4) var(--space-3) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
}

.shell-nav__section:first-child {
    padding-top: var(--space-2);
}

.shell-nav .mud-nav-link,
.shell-nav .mud-nav-group .mud-nav-link {
    margin: 1px 0;
    padding-block: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.shell-nav .mud-nav-link .mud-nav-link-text,
.shell-nav .mud-nav-group .mud-nav-link-text,
.shell-nav .mud-nav-group .mud-nav-group-text {
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
}

.shell-nav .mud-nav-link:hover,
.shell-nav .mud-nav-group .mud-nav-link:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.shell-nav .mud-nav-link.active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: var(--weight-semi);
}
.shell-nav .mud-nav-link.active .mud-nav-link-text {
    font-weight: var(--weight-semi);
}
.shell-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--brand);
}

.shell-nav .mud-nav-group .mud-nav-group-button {
    margin: 1px 0;
    padding-block: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
}
.shell-nav .mud-nav-group .mud-nav-group-button .mud-nav-link-icon {
    color: var(--text-tertiary);
}

/* ─── Main content ─────────────────────────────────────────────────────── */
.shell-content {
    max-width: 1480px;
    padding: var(--space-7) var(--space-6) var(--space-9);
}

.shell-breadcrumbs {
    padding: 0 0 var(--space-5);
    opacity: 1;
}

.shell-breadcrumbs .mud-breadcrumb-item a,
.shell-breadcrumbs .mud-breadcrumb-item .mud-link {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.shell-breadcrumbs .mud-breadcrumb-item a:hover,
.shell-breadcrumbs .mud-breadcrumb-item .mud-link:hover {
    color: var(--text-primary);
}

.shell-breadcrumbs .mud-breadcrumb-separator {
    font-size: var(--text-2xs);
    color: var(--text-disabled);
    margin-inline: var(--space-1);
}

.shell-breadcrumbs .mud-breadcrumb-item:last-child .mud-link,
.shell-breadcrumbs .mud-breadcrumb-item:last-child span {
    color: var(--text-primary);
    font-weight: var(--weight-semi);
}

@media (max-width: 599.98px) {
    .shell-breadcrumbs {
        display: none;
    }
}

.shell-page,
.booking-page,
.referrals-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ─── Page heading utilities ───────────────────────────────────────────── */
.referrals-page__title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

[lang="ar"] .referrals-page__title,
[dir="rtl"] .referrals-page__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

/* ─── Tabs (shell-wide) ────────────────────────────────────────────────── *
 * Replaces Material's heavy underline-tab look with a calmer pill style.
 * Active tab gets brand color, optional brand-soft background, and a small
 * brand bar instead of the prominent default indicator.                    */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-tabs-toolbar {
    min-height: auto;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tabs-panels {
    padding-top: var(--space-5);
    background: transparent;
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tab {
    min-height: 36px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
    gap: var(--space-2);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tab .mud-icon-root {
    color: inherit;
    width: 16px;
    height: 16px;
    margin-inline-end: var(--space-1);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tab.mud-tab-active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: var(--weight-semi);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tab-slider {
    background: var(--brand);
    height: 2px;
    border-radius: var(--radius-pill);
    bottom: 0;
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-tabs-tabbar-inner {
    overflow-x: auto;
}

/* Tabs with .tabs-bare class: no surface, hairline under, underline-only
   indicator. Use for inline tab groups (e.g., inside section bodies). */
:is(.shell-layout, .empty-layout, .auth-shell) .tabs-bare .mud-tabs-toolbar {
    background: transparent;
    border: none;
    border-bottom: var(--hairline) solid var(--border-subtle);
    border-radius: 0;
    padding: 0;
}

:is(.shell-layout, .empty-layout, .auth-shell) .tabs-bare .mud-tab.mud-tab-active {
    background: transparent;
    color: var(--brand);
}

:is(.shell-layout, .empty-layout, .auth-shell) .tabs-bare .mud-tab-slider {
    bottom: 0;
}

/* Legacy referrals-tabs alias — preserved for any inline usage */
.referrals-tabs .mud-tabs-toolbar,
.referrals-tabs .mud-tabs-panels,
.referrals-tabs .mud-tab,
.referrals-tabs .mud-tab.mud-tab-active { /* inherit from above */ }

/* ─── Cards & panels (referrals/shell-shared) ──────────────────────────── */
.referrals-filter.mud-paper,
.referrals-stat.mud-card,
.referrals-panel.mud-paper {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
}

.referrals-stat .mud-card-content {
    padding: var(--space-5);
}

.referrals-grid .mud-table-container,
.referrals-table {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
}

.referrals-grid table,
.referrals-table table {
    background: transparent;
}

.referrals-grid thead th,
.referrals-table thead th {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    background: var(--bg-subtle);
    border-bottom: var(--hairline) solid var(--border);
    padding-block: var(--space-3);
}

.referrals-grid tbody td,
.referrals-table tbody td {
    border-bottom: var(--hairline) solid var(--border-subtle);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.referrals-grid tbody tr:hover,
.referrals-table tbody tr:hover {
    background: var(--hover-bg);
}

/* ─── Auth shell ───────────────────────────────────────────────────────── */
.empty-layout.mud-layout .mud-main-content {
    background: transparent;
}

.auth-shell {
    min-height: 100vh;
    color: var(--text-primary);
    background: var(--bg);
}

.auth-shell--dark {
    background: var(--bg);
}

/* ─── Generic MudPaper / MudCard treatment (shell-wide) ────────────────── *
 * Cleaner, sharper than the legacy 26-30px radii + heavy shadows.         */
:is(.shell-layout, .empty-layout, .auth-shell)
    .mud-paper:not(.booking-hero):not(.booking-metric):not(.referrals-filter):not(.referrals-panel):not(.auth-card):not(.auth-brand-panel),
:is(.shell-layout, .empty-layout, .auth-shell)
    .mud-card:not(.booking-card):not(.referrals-stat):not(.auth-card) {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
}

/* ─── Popover-hosted surfaces (menus, selects, autocomplete, date/time
   pickers) ──────────────────────────────────────────────────────────────
 * MudBlazor renders these via a portal outside the layout tree, so the
 * .mud-paper flattening above (scoped to .shell-layout/.empty-layout/
 * .auth-shell) never reaches them — they were the only surfaces still
 * rendering MudBlazor's stock heavy Material elevation shadow next to an
 * otherwise flat, hairline-bordered shell. */
.mud-popover .mud-paper,
.mud-popover.mud-paper {
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
}

.mud-popover [class*="mud-elevation-"] {
    box-shadow: var(--shadow-lg);
}

/* Keep the options list as the only scroll container inside profile selects.
   Flex sizing accounts for the popover border within its maximum height. */
.mud-popover.clinic-profile-select-popover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clinic-profile-select-popover > .mud-list {
    min-height: 0;
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-header,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-content,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-actions {
    position: relative;
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-header {
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-content {
    padding: var(--space-5);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-card-actions {
    padding: var(--space-3) var(--space-5) var(--space-5);
    border-top: var(--hairline) solid var(--border-subtle);
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-root {
    border-radius: var(--radius-sm);
    text-transform: none;
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
    letter-spacing: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-filled {
    box-shadow: var(--shadow-xs);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-filled:hover {
    box-shadow: var(--shadow-sm);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-filled.mud-button-filled-primary {
    background: var(--brand);
    color: var(--brand-fg);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--brand-hover);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-outlined {
    border: var(--hairline) solid var(--border);
    color: var(--text-primary);
    background: var(--surface);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-outlined:hover {
    border-color: var(--border-strong);
    background: var(--hover-bg);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-text {
    color: var(--text-primary);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-button-text:hover {
    background: var(--hover-bg);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-icon-button {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-icon-button:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

/* ─── Inputs ───────────────────────────────────────────────────────────── */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-control {
    color: var(--text-primary);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-control-input-container {
    border-radius: var(--radius-sm);
    background: var(--surface);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-label,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-adornment,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-helper-text {
    color: var(--text-tertiary) !important;
    font-weight: var(--weight-medium);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-slot {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-outlined-border {
    stroke: var(--border);
    transition: stroke var(--duration-fast) var(--ease-standard);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-control:hover .mud-input-outlined-border {
    stroke: var(--border-strong);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-control.mud-input-focused .mud-input-outlined-border,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-input-control.mud-input-focused.mud-input-outlined-border {
    stroke: var(--brand);
    stroke-width: 1.5;
}

/* Required field asterisk — MudBlazor adds .mud-input-required when Required="true" */
.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    content: " *";
    color: var(--danger) !important;
    font-weight: var(--weight-semi);
}

/* ─── Tables (shell-wide) ──────────────────────────────────────────────── */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-table-container,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-simple-table {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-table-root,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-simple-table table {
    background: transparent;
}

:is(.shell-layout, .empty-layout, .auth-shell) thead th {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    background: var(--bg-subtle);
    border-bottom: var(--hairline) solid var(--border);
    padding-block: var(--space-3);
}

:is(.shell-layout, .empty-layout, .auth-shell) tbody td {
    border-bottom: var(--hairline) solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

:is(.shell-layout, .empty-layout, .auth-shell) tbody tr:last-child td {
    border-bottom: none;
}

:is(.shell-layout, .empty-layout, .auth-shell) tbody tr:hover {
    background: var(--hover-bg);
}

/* ─── Chips ────────────────────────────────────────────────────────────── */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-chip {
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semi);
    font-size: var(--text-xs);
    letter-spacing: 0;
    height: 24px;
}

/* ─── Alerts ───────────────────────────────────────────────────────────── */
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert {
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
}

:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-filled-error,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-text-error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in oklch, var(--danger) 25%, transparent);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-filled-warning,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-text-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: color-mix(in oklch, var(--warning) 25%, transparent);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-filled-success,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-text-success {
    background: var(--success-soft);
    color: var(--success);
    border-color: color-mix(in oklch, var(--success) 25%, transparent);
}
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-filled-info,
:is(.shell-layout, .empty-layout, .auth-shell) .mud-alert.mud-alert-text-info {
    background: var(--info-soft);
    color: var(--info);
    border-color: color-mix(in oklch, var(--info) 25%, transparent);
}

/* ─── Dialogs ──────────────────────────────────────────────────────────── */
.mud-dialog .mud-paper {
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: var(--shadow-xl);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    padding: var(--space-5) var(--space-6) var(--space-3);
}

[lang="ar"] .mud-dialog .mud-dialog-title,
[dir="rtl"] .mud-dialog .mud-dialog-title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.mud-dialog .mud-dialog-content {
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-6);
}

.mud-dialog .mud-dialog-actions {
    color: var(--text-primary);
    padding: var(--space-3) var(--space-6) var(--space-5);
    gap: var(--space-2);
}

/* ─── Booking page (now flat — no gradients) ──────────────────────────── */
.booking-hero.mud-paper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

/* Editorial decorative rule on the hero — sets it apart without gradients */
.booking-hero.mud-paper::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background: var(--brand);
}

[dir="rtl"] .booking-hero.mud-paper::before {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.booking-hero__eyebrow {
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-semi);
}

.booking-hero__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-block: var(--space-1) var(--space-2);
}

[lang="ar"] .booking-hero__title,
[dir="rtl"] .booking-hero__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.booking-hero__subtitle {
    color: var(--text-secondary);
    font-size: var(--text-md);
}

.booking-hero__actions {
    justify-content: flex-end;
    gap: var(--space-3);
}

.booking-date-picker {
    min-width: 220px;
}

.booking-date-picker .mud-input-control-input-container {
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.booking-date-picker .mud-input-slot {
    color: var(--text-primary);
}

.booking-date-picker .mud-input-label,
.booking-date-picker .mud-input-adornment {
    color: var(--text-secondary) !important;
}

.booking-primary-action {
    min-height: 44px;
    padding-inline: var(--space-5);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}

.booking-metric.mud-paper {
    height: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
}

.booking-metric__icon {
    margin-bottom: var(--space-3);
    color: var(--brand);
}

.booking-metric__value {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.booking-metric__label,
.booking-card__subtitle {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.booking-card.mud-card {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    box-shadow: none;
}

.booking-card .mud-card-header {
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.booking-card .mud-card-content {
    padding: var(--space-5);
}

.booking-date-chip.mud-chip {
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-primary);
    border: var(--hairline) solid var(--border);
}

.booking-loading {
    display: grid;
    place-items: center;
    min-height: 240px;
}

.booking-empty-state {
    display: grid;
    place-items: center;
    gap: var(--space-3);
    min-height: 280px;
    padding: var(--space-7);
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
    background: var(--surface);
}

.booking-empty-state__icon.mud-avatar {
    width: 56px;
    height: 56px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border: var(--hairline) solid var(--border);
}

.booking-table .mud-table-container {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: var(--hairline) solid var(--border);
}

.booking-table table {
    background: var(--surface);
}

.booking-table thead th {
    padding-block: var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    background: var(--bg-subtle);
    border-bottom: var(--hairline) solid var(--border);
}

.booking-table tbody td {
    border-bottom: var(--hairline) solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.booking-table tbody tr:hover {
    background: var(--hover-bg);
}

.booking-queue-chip.mud-chip {
    font-weight: var(--weight-semi);
}

.booking-actions {
    justify-content: flex-end;
    gap: var(--space-1);
}

.booking-actions .mud-icon-button {
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
}
.booking-actions .mud-icon-button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* ─── RTL left-to-right values ───────────────────────────────────────── */
/* Phone numbers and addresses read left to right even in Arabic; without this, "+20 100 123"
   is shown as "123 100 20+" while typing. Keep them aligned with the surrounding fields. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

/* ─── Arabic typography ───────────────────────────────────────────────── */
/* Arabic letters join; tracked labels and eyebrows would pull them apart. */
html[lang="ar"] body * {
    letter-spacing: 0 !important;
}

/* ─── RTL icon mirroring ──────────────────────────────────────────────── */
.mud-rtl .rtl-mirror,
[dir="rtl"] .rtl-mirror {
    transform: scaleX(-1);
    display: inline-flex;
}

/* MudBlazor renders icons as inline SVG with no name attribute, so directional icons are matched
   by their path data. Chevrons and arrows used for navigation carry .rtl-mirror explicitly instead,
   because MudBlazor already flips its own pager and picker chevrons. */
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h9v-2H4V8l8,5l8-5v5h2V6C22,4.9,21.1,4,20,4z M12,11L4,6h16L12,11z M19,15l4,4 l-4,4v-3h-4v-2h4V15z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6h-6z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M22 12l-4-4v3H3v2h15v3z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"]),
[dir="rtl"] svg.mud-icon-root:not(.rtl-mirror *, .mud-flip-x-rtl *):has(> path[d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z"]) {
    transform: scaleX(-1);
}

/* ─── EmptyState ───────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-5);
    text-align: center;
    min-height: 220px;
}

.empty-state__avatar.mud-avatar {
    width: 56px;
    height: 56px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border: var(--hairline) solid var(--border);
}

.empty-state__title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

[lang="ar"] .empty-state__title,
[dir="rtl"] .empty-state__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.empty-state__subtitle {
    color: var(--text-tertiary);
    max-width: 42ch;
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
}

.empty-state__action {
    margin-top: var(--space-3);
}

/* ─── SkeletonLoader ───────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-loader {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.skeleton-row__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-block {
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            90deg,
            var(--surface-sunken) 0%,
            color-mix(in srgb, var(--border) 40%, var(--surface-sunken)) 50%,
            var(--surface-sunken) 100%
        );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s linear infinite;
}

.skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.skeleton-line {
    height: 12px;
}

.skeleton-line--primary {
    height: 14px;
}

.skeleton-line--secondary {
    height: 11px;
    opacity: 0.7;
}

.skeleton-action {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ─── Auth (login/register) ────────────────────────────────────────────── *
 * Two-pane layout: brand panel + form. Mobile collapses to single column. */
.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-9) var(--space-9);
    background: var(--surface);
    border-inline-end: var(--hairline) solid var(--border);
    overflow: hidden;
    isolation: isolate;
}

/* Editorial dotted-grid texture — adds atmosphere without gradients */
.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 1px 1px,
        var(--border) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    opacity: 0.5;
    mask-image: radial-gradient(
        ellipse at 30% 50%,
        black 30%,
        transparent 75%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at 30% 50%,
        black 30%,
        transparent 75%
    );
    z-index: 0;
}

.auth-brand-panel > * {
    position: relative;
    z-index: 1;
}

.auth-brand-panel__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.auth-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--brand-fg);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
}

.auth-brand-name {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

[lang="ar"] .auth-brand-name,
[dir="rtl"] .auth-brand-name {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.auth-brand-tag {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.auth-brand-headline {
    max-width: 28ch;
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
    margin: 0;
}

[lang="ar"] .auth-brand-headline,
[dir="rtl"] .auth-brand-headline {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.auth-brand-headline em {
    font-style: normal;
    color: var(--brand);
}

.auth-brand-lede {
    max-width: 42ch;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-top: var(--space-5);
}

.auth-brand-rule {
    height: 1px;
    background: var(--border);
    margin-block: var(--space-7);
    border: none;
}

.auth-brand-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.auth-brand-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.auth-brand-stat__value {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.auth-brand-stat__label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.auth-brand-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}


.auth-form-panel {
    display: grid;
    place-items: center;
    padding: var(--space-7) var(--space-7);
    background: var(--bg);
}

.auth-form-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth-form-card__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-form-card__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.auth-form-card__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

[lang="ar"] .auth-form-card__title,
[dir="rtl"] .auth-form-card__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.auth-form-card__subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.auth-form-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-form-card__submit.mud-button-root {
    height: 44px;
    margin-top: var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
}

.auth-form-card__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.auth-form-card__divider::before,
.auth-form-card__divider::after {
    content: "";
    height: 1px;
    background: var(--border);
}

.auth-form-card__footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.auth-form-card__footer-link {
    color: var(--brand);
    font-weight: var(--weight-semi);
}
.auth-form-card__footer-link:hover {
    color: var(--brand-hover);
}


.auth-form-card__locale {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.auth-form-card__locale-btn.mud-button-root {
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-tertiary);
    text-transform: none;
    background: transparent;
    border: var(--hairline) solid transparent;
}

.auth-form-card__locale-btn.mud-button-root:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.auth-form-card__locale-btn.is-active.mud-button-root {
    color: var(--text-primary);
    background: var(--surface-sunken);
    border-color: var(--border);
}

@media (max-width: 1024px) {
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-brand-panel {
        padding: var(--space-7);
        border-inline-end: none;
        border-bottom: var(--hairline) solid var(--border);
    }
    .auth-brand-headline {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 768px) {
    .auth-brand-panel {
        display: none;
    }
    .auth-form-panel {
        padding: var(--space-5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Page-template primitives (PageHeader, Section, MetricCard, Toolbar)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PageHeader ───────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.page-header__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.page-header__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.page-header__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.page-header__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

[lang="ar"] .page-header__title,
[dir="rtl"] .page-header__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.page-header__subtitle {
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 64ch;
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.page-header__tabs {
    margin-bottom: calc(var(--space-5) * -1);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

@media (max-width: 599.98px) {
    .page-header__title {
        font-size: var(--text-2xl);
    }
    .page-header__main {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header__actions {
        justify-content: flex-start;
    }
}

/* ─── Section ──────────────────────────────────────────────────────────── */
.page-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.page-section--bordered .page-section__body {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
}

.page-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-section__heading-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.page-section__eyebrow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.page-section__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

[lang="ar"] .page-section__title,
[dir="rtl"] .page-section__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.page-section__description {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 60ch;
}

.page-section__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ─── MetricCard ───────────────────────────────────────────────────────── */
.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    transition: border-color var(--duration-fast) var(--ease-standard);
    position: relative;
}

.metric-card:hover {
    border-color: var(--border-strong);
}

.metric-card--highlight {
    border-color: color-mix(in oklch, var(--brand) 30%, var(--border));
    background: var(--brand-soft);
}

.metric-card--highlight .metric-card__label,
.metric-card--highlight .metric-card__value {
    color: var(--brand);
}

.metric-card__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.metric-card--highlight .metric-card__icon {
    background: var(--surface);
    color: var(--brand);
}

.metric-card__label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.metric-card__value {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-4xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.metric-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.metric-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.metric-card__delta--up {
    background: var(--success-soft);
    color: var(--success);
}

.metric-card__delta--down {
    background: var(--danger-soft);
    color: var(--danger);
}

.metric-card__delta--flat {
    background: var(--surface-sunken);
    color: var(--text-tertiary);
}

.metric-card__description {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

@media (max-width: 599.98px) {
    .metric-card__value {
        font-size: var(--text-3xl);
    }
}

/* ─── Toolbar ──────────────────────────────────────────────────────────── */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    flex-wrap: wrap;
}

.page-toolbar__search {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.page-toolbar__search .mud-input-control-input-container {
    background: var(--surface-sunken);
}

.page-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.page-toolbar__spacer {
    flex: 1;
}

.page-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    .page-toolbar__search {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Tenant selection page
 * ═══════════════════════════════════════════════════════════════════════════ */

.tenant-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-9) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.tenant-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: var(--hairline) solid var(--border);
    flex-wrap: wrap;
}

.tenant-page__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tenant-page__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.tenant-page__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

[lang="ar"] .tenant-page__title,
[dir="rtl"] .tenant-page__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-page__subtitle {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0;
    max-width: 56ch;
}

.tenant-page__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tenant-page__search {
    min-width: 240px;
}

.tenant-page__search .mud-input-control-input-container {
    background: var(--surface-sunken);
}

.tenant-page__loading {
    display: grid;
    place-items: center;
    min-height: 240px;
}

/* ─── Tenant card grid ────────────────────────────────────────────────── */
.tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.tenant-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 220px;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-body);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
}

.tenant-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.tenant-card.is-current {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.tenant-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.tenant-card__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--brand-fg);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
}

.tenant-card.is-current .tenant-card__mark {
    background: var(--brand);
}

.tenant-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--brand-fg);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.tenant-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.tenant-card__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

[lang="ar"] .tenant-card__name,
[dir="rtl"] .tenant-card__name {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-card__key {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: var(--surface-sunken);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    align-self: flex-start;
    margin-top: var(--space-1);
}

.tenant-card.is-current .tenant-card__key {
    background: var(--surface);
}

.tenant-card__description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-2) 0 0;
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tenant-card__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: var(--space-3);
    border-top: var(--hairline) solid var(--border-subtle);
}

.tenant-card.is-current .tenant-card__footer {
    border-top-color: color-mix(in oklch, var(--brand) 25%, transparent);
}

.tenant-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--brand);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
}

/* ─── Tenant create card ──────────────────────────────────────────────── */
.tenant-create-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
}

.tenant-create-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.tenant-create-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .tenant-create-card__title,
[dir="rtl"] .tenant-create-card__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-create-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.tenant-create-card__input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
}

.tenant-create-card__input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.tenant-create-card__input:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

.tenant-create-card__hint {
    margin: 4px 8px 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.tenant-create-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ─── Tenant empty state ──────────────────────────────────────────────── */
.tenant-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px dashed var(--border);
    text-align: center;
}

.tenant-empty__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.tenant-empty__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .tenant-empty__title,
[dir="rtl"] .tenant-empty__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-empty__subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 48ch;
    line-height: var(--leading-normal);
    margin: 0;
}

/* ─── Tenant invitations ──────────────────────────────────────────────── */
.tenant-invitations {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
}

.tenant-invitations__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.tenant-invitations__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .tenant-invitations__title,
[dir="rtl"] .tenant-invitations__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-invitations__count {
    font-size: var(--text-xs);
    color: var(--brand);
    background: var(--brand-soft);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semi);
}

.tenant-invitations__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tenant-invitation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
    flex-wrap: wrap;
}

.tenant-invitation__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.tenant-invitation__name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.tenant-invitation__meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tenant-invitation__meta strong {
    color: var(--text-secondary);
    font-weight: var(--weight-semi);
}

.tenant-invitation__sep {
    color: var(--text-disabled);
}

.tenant-invitation__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ─── Join-link invitation (clinic picker) ────────────────────────────── */
.tenant-link-invite {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--brand-soft);
    border: var(--hairline) solid var(--brand);
    flex-wrap: wrap;
}

.tenant-link-invite__mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--brand-fg);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
}

.tenant-link-invite__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 260px;
    min-width: 0;
}

.tenant-link-invite__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.tenant-link-invite__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .tenant-link-invite__title,
[dir="rtl"] .tenant-link-invite__title {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.tenant-link-invite__note {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.tenant-link-invite__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tenant-join__hint {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ─── Invitation share (Users → Invitations) ─────────────────────────── */
.invite-channel-toggle {
    width: 100%;
}

.invitation-share {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* White in both themes: the code's quiet zone must stay light for scanners. */
.invitation-share__qr {
    align-self: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: #ffffff;
    border: var(--hairline) solid var(--border);
    line-height: 0;
}

.invitation-share__hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.invitation-share__copy {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.invitation-share__field {
    flex: 1 1 auto;
    min-width: 0;
}

.invitation-share__field input {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.invitation-share__meta {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.invitation-row__invitee {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invitation-row__muted {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.invitation-row__method {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.qr-code-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ─── Join page (/join/{token}) ───────────────────────────────────────── */
.join-page {
    display: grid;
    min-height: 100vh;
    background: var(--bg);
}

.join-page__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.join-page__brand-name {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-md);
    color: var(--text-primary);
}

.join-page__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.join-page__meta strong {
    color: var(--text-secondary);
    font-weight: var(--weight-semi);
}

/* The separator belongs to the item after it, so a wrapped line never ends with a dangling dot. */
.join-page__meta > span + span::before {
    content: "•";
    margin-inline-end: var(--space-2);
    color: var(--text-disabled);
}

@media (max-width: 599.98px) {
    .tenant-link-invite__actions {
        width: 100%;
        justify-content: flex-end;
    }
    .invitation-share__copy {
        flex-direction: column;
        align-items: stretch;
    }
    .tenant-page {
        padding: var(--space-5) var(--space-3);
    }
    .tenant-page__title {
        font-size: var(--text-2xl);
    }
    .tenant-page__header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Dashboard (Index.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.dashboard-grid__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

@media (max-width: 1200px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ─── Status bars (today's appointment status) ────────────────────────── */
.status-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.status-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.status-bar__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.status-bar__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.status-bar__value {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.status-bar__value strong {
    color: var(--text-primary);
    font-weight: var(--weight-semi);
}

.status-bar__pct {
    margin-inline-start: var(--space-2);
    color: var(--text-tertiary);
}

.status-bar__track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.status-bar__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow) var(--ease-decel);
}

.status-bar__fill--success {
    background: var(--success);
}

.status-bar__fill--warning {
    background: var(--warning);
}

.status-bar__fill--danger {
    background: var(--danger);
}

/* ─── Activity feed ───────────────────────────────────────────────────── */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-feed__item {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
    padding-block: var(--space-2);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.activity-feed__item:last-child {
    border-bottom: none;
}

.activity-feed__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--text-tertiary);
    margin-top: 6px;
    flex-shrink: 0;
}

.activity-feed__dot--brand    { background: var(--brand); }
.activity-feed__dot--info     { background: var(--info); }
.activity-feed__dot--success  { background: var(--success); }
.activity-feed__dot--neutral  { background: var(--text-tertiary); }

.activity-feed__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-feed__title {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.activity-feed__time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ─── Quick actions ───────────────────────────────────────────────────── */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.quick-action:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--text-primary);
}

.quick-action:hover .quick-action__icon {
    background: var(--brand);
    color: var(--brand-fg);
}

.quick-action:hover .quick-action__chevron {
    color: var(--brand);
    transform: translateX(2px);
}

[dir="rtl"] .quick-action:hover .quick-action__chevron {
    transform: translateX(-2px);
}

.quick-action__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--brand);
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.quick-action__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.quick-action__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.quick-action__hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.quick-action__chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

@media (max-width: 599.98px) {
    .quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ─── Demographics ────────────────────────────────────────────────────── */
.demographics {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.demographics__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.demographics__label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.demographics__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.demographic-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.demographic-chip--brand {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: color-mix(in oklch, var(--brand) 20%, transparent);
}

.demographic-chip--info {
    background: var(--info-soft);
    color: var(--info);
    border-color: color-mix(in oklch, var(--info) 20%, transparent);
}

.demographic-chip__count {
    font-weight: var(--weight-semi);
    color: inherit;
    opacity: 0.85;
}

/* ─── Sparkline chart (examination trends) ────────────────────────────── */
.sparkline-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    align-items: end;
    min-height: 200px;
}

.sparkline-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    min-height: 0;
}

.sparkline-bar__count {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-secondary);
}

.sparkline-bar__track {
    flex: 1;
    width: 100%;
    max-width: 56px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow: hidden;
    min-height: 80px;
}

.sparkline-bar__fill {
    width: 100%;
    background: var(--brand);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height var(--duration-slow) var(--ease-decel);
}

.sparkline-bar__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: var(--text-2xs);
    line-height: 1.2;
}

.sparkline-bar__day {
    color: var(--text-secondary);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.sparkline-bar__dom {
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Patient list (PatientList.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

.patient-list-card {
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    overflow: hidden;
}

.patient-list-card .mud-table {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.patient-list-card .mud-table-container {
    border-radius: 0;
    border: none;
}

.patient-list__count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.patient-list__count-label {
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
}

.patient-list__name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.patient-list__avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xs);
    letter-spacing: 0;
    flex-shrink: 0;
}

.patient-list__name {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.patient-list__code {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.patient-list__phone {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    letter-spacing: 0;
}

.patient-list__unit {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-inline-start: var(--space-1);
}

.patient-list__blood {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
}

.patient-list__blood--empty {
    background: transparent;
    color: var(--text-disabled);
}

.patient-list__th-actions,
.patient-list__td-actions {
    text-align: end;
    width: 1%;
    white-space: nowrap;
}

.patient-list__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.patient-list-card tbody tr:hover .patient-list__row-actions {
    opacity: 1;
}

.patient-list__row-action-danger:hover {
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Booking list (BookingList.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

.booking-list__count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.booking-list__count .mud-icon-root {
    color: var(--text-tertiary);
    width: 14px;
    height: 14px;
}

.booking-list__th-queue {
    width: 1%;
    white-space: nowrap;
}

.booking-list__queue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}

.booking-list__name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.booking-list__avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xs);
    flex-shrink: 0;
    border: var(--hairline) solid var(--border);
}

.booking-list__name {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.booking-list__code {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.booking-list__time {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--weight-semi);
    letter-spacing: 0;
}

.booking-list__resource {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.booking-list__type {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border: var(--hairline) solid var(--border-subtle);
}

.booking-list__type--walkin {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: color-mix(in oklch, var(--warning) 25%, transparent);
}

.booking-list__type--recurring {
    background: var(--info-soft);
    color: var(--info);
    border-color: color-mix(in oklch, var(--info) 25%, transparent);
}

.booking-list__type--followup {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: color-mix(in oklch, var(--brand) 25%, transparent);
}

.booking-list__type--scheduled {
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.booking-list__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.booking-list__status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.booking-list__status--examined {
    background: var(--success-soft);
    color: var(--success);
}

.booking-list__status--absent {
    background: var(--warning-soft);
    color: var(--warning);
}

.booking-list__status--confirmed {
    background: var(--info-soft);
    color: var(--info);
}

.booking-list__status--pending {
    background: var(--surface-sunken);
    color: var(--text-tertiary);
}

.booking-list__th-actions,
.booking-list__td-actions {
    text-align: end;
    width: 1%;
    white-space: nowrap;
}

.booking-list__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.booking-list__table tbody tr:hover .booking-list__row-actions {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Calendar (Calendar.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    flex-wrap: wrap;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.calendar-nav__period {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    margin-inline-start: var(--space-3);
}

[lang="ar"] .calendar-nav__period,
[dir="rtl"] .calendar-nav__period {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.calendar-views {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border);
}

.calendar-view-btn {
    height: 30px;
    padding: 0 var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.calendar-view-btn:hover {
    color: var(--text-primary);
}

.calendar-view-btn.is-active {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

/* ─── Day view: timeline ─────────────────────────────────────────────── */
.calendar-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.calendar-day__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.calendar-day__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.calendar-day__stat-value {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.calendar-day__stat-value--info    { color: var(--info); }
.calendar-day__stat-value--success { color: var(--success); }

.calendar-day__stat-label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.calendar-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.calendar-timeline__item {
    display: grid;
    grid-template-columns: 60px 12px 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    border-bottom: var(--hairline) solid var(--border-subtle);
    transition: background var(--duration-fast) var(--ease-standard);
}

.calendar-timeline__item:hover {
    background: var(--hover-bg);
}

.calendar-timeline__item:last-child {
    border-bottom: none;
}

.calendar-timeline__time {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    letter-spacing: 0;
}

.calendar-timeline__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--dot-color, var(--brand));
}

.calendar-timeline__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.calendar-timeline__chevron {
    color: var(--text-tertiary);
}

/* ─── Week view: grid ─────────────────────────────────────────────────── */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    min-height: 400px;
}

.calendar-week__day {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border-subtle);
    overflow: hidden;
    min-width: 0;
}

.calendar-week__day.is-today {
    border-color: var(--brand);
}

.calendar-week__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: var(--hairline) solid var(--border-subtle);
    background: var(--bg-subtle);
}

.calendar-week__day.is-today .calendar-week__head {
    background: var(--brand-soft);
}

.calendar-week__dow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.calendar-week__day.is-today .calendar-week__dow {
    color: var(--brand);
}

.calendar-week__dom {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1;
}

.calendar-week__day.is-today .calendar-week__dom {
    color: var(--brand);
}

.calendar-week__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    flex: 1;
    min-height: 160px;
}

.calendar-week__apt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: none;
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-align: start;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
    min-width: 0;
}

.calendar-week__apt:hover {
    background: var(--brand-soft);
}

.calendar-week__apt-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--dot-color, var(--brand));
    flex-shrink: 0;
}

.calendar-week__apt-time {
    color: var(--text-secondary);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xs);
    letter-spacing: 0;
    flex-shrink: 0;
}

.calendar-week__apt-name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.calendar-week__more {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-1);
    font-weight: var(--weight-semi);
}

.calendar-week__empty {
    color: var(--text-disabled);
    font-size: var(--text-xs);
    text-align: center;
    padding-block: var(--space-4);
}

@media (max-width: 1024px) {
    .calendar-week {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .calendar-week {
        grid-template-columns: 1fr;
    }
}

/* ─── Month view ──────────────────────────────────────────────────────── */
.calendar-month {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.calendar-month__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: var(--hairline) solid var(--border-subtle);
    flex-wrap: wrap;
}

.calendar-month__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.calendar-month__hero-eyebrow {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
}

.calendar-month__hero-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

[lang="ar"] .calendar-month__hero-name,
[dir="rtl"] .calendar-month__hero-name {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.calendar-month__hero-stats {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.calendar-month__hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.calendar-month__hero-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: 1;
}

.calendar-month__hero-stat-label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semi);
}

.calendar-month__date-btn {
    background: transparent;
    border: none;
    color: var(--brand);
    font-family: var(--font-body);
    font-weight: var(--weight-semi);
    cursor: pointer;
    padding: 0;
    text-align: start;
}

.calendar-month__date-btn:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.calendar-month__cell {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.calendar-month__cell--info    { color: var(--info); }
.calendar-month__cell--success { color: var(--success); }
.calendar-month__cell--warning { color: var(--warning); }
.calendar-month__cell--danger  { color: var(--danger); }

/* ─── Status pill (calendar) ──────────────────────────────────────────── */
.calendar-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.calendar-status__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.calendar-status--confirmed { background: var(--info-soft);    color: var(--info); }
.calendar-status--completed { background: var(--success-soft); color: var(--success); }
.calendar-status--pending   { background: var(--warning-soft); color: var(--warning); }
.calendar-status--absent    { background: var(--danger-soft);  color: var(--danger); }

/* ─── Calendar legend ─────────────────────────────────────────────────── */
.calendar-legend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.calendar-legend__label {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semi);
    font-size: var(--text-2xs);
}

.calendar-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.calendar-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
}

.calendar-legend__dot--info    { background: var(--info); }
.calendar-legend__dot--success { background: var(--success); }
.calendar-legend__dot--warning { background: var(--warning); }
.calendar-legend__dot--danger  { background: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
 * Notifications (Notifications.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Filter chips ────────────────────────────────────────────────────── */
.notification-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 30px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    border: var(--hairline) solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.notification-filter:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.notification-filter.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

.notification-filter__count {
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
}

.notification-filter.is-active .notification-filter__count {
    background: var(--surface);
    color: var(--brand);
}

/* ─── Notification list ───────────────────────────────────────────────── */
.notification-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notification {
    display: grid;
    grid-template-columns: 12px 36px 1fr auto;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.notification:hover {
    border-color: var(--border-strong);
}

.notification.is-unread {
    background: var(--brand-soft);
    border-color: color-mix(in oklch, var(--brand) 25%, transparent);
}

.notification.notification--urgent {
    border-inline-start: 3px solid var(--danger);
}

.notification.notification--high {
    border-inline-start: 3px solid var(--warning);
}

.notification__indicator {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
}

.notification__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 20%, transparent);
}

.notification__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.notification__icon--brand   { background: var(--brand-soft);   color: var(--brand); }
.notification__icon--info    { background: var(--info-soft);    color: var(--info); }
.notification__icon--success { background: var(--success-soft); color: var(--success); }
.notification__icon--warning { background: var(--warning-soft); color: var(--warning); }
.notification__icon--danger  { background: var(--danger-soft);  color: var(--danger); }

.notification__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.notification__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.notification__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-snug);
}

.notification.is-unread .notification__title {
    font-weight: var(--weight-bold);
}

.notification__time {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.notification__message {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.notification__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.notification__type {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.notification__type--brand   { background: var(--brand-soft);   color: var(--brand); }
.notification__type--info    { background: var(--info-soft);    color: var(--info); }
.notification__type--success { background: var(--success-soft); color: var(--success); }
.notification__type--warning { background: var(--warning-soft); color: var(--warning); }
.notification__type--danger  { background: var(--danger-soft);  color: var(--danger); }

.notification__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: transparent;
    border: none;
    color: var(--brand);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    cursor: pointer;
    padding: 0;
    transition: color var(--duration-fast) var(--ease-standard);
}

.notification__link:hover {
    color: var(--brand-hover);
}

.notification__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.notification:hover .notification__actions {
    opacity: 1;
}

@media (max-width: 599.98px) {
    .notification {
        grid-template-columns: 8px 32px 1fr;
        grid-template-rows: auto auto;
    }
    .notification__actions {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-content: flex-end;
        opacity: 1;
    }
    .notification__head {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Settings (Settings.razor) — form archetype
 * ═══════════════════════════════════════════════════════════════════════════ */

.settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.settings-fields__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--border-subtle);
}

.settings-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
}

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

.settings-toggle:hover {
    background: var(--surface);
}

.settings-toggle__label {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

/* ─── Database & system info ──────────────────────────────────────────── */
.settings-database {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .settings-database {
        grid-template-columns: 1fr;
    }
}

.settings-database__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings-database__buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.settings-system {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
}

.settings-system__title {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semi);
    margin-bottom: var(--space-3);
}

.settings-system__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.settings-system__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: var(--hairline) solid var(--border-subtle);
}

.settings-system__row:last-child {
    border-bottom: none;
}

.settings-system__row dt {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0;
}

.settings-system__row dd {
    font-size: var(--text-xs);
    color: var(--text-primary);
    margin: 0;
    font-weight: var(--weight-medium);
    text-align: end;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Billing (Billing.razor) — partial sweep
 * ═══════════════════════════════════════════════════════════════════════════ */

.billing-tab-panel,
.reports-tab-panel {
    padding: var(--space-5) 0 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * StatusPill primitive — shared semantic badge
 * ═══════════════════════════════════════════════════════════════════════════ */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.status-pill--sm {
    height: 20px;
    padding: 0 var(--space-2);
    font-size: 10px;
}

.status-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex-shrink: 0;
}

.status-pill__icon {
    width: 12px !important;
    height: 12px !important;
    color: inherit;
    flex-shrink: 0;
}

.status-pill--brand   { background: var(--brand-soft);   color: var(--brand); }
.status-pill--success { background: var(--success-soft); color: var(--success); }
.status-pill--warning { background: var(--warning-soft); color: var(--warning); }
.status-pill--danger  { background: var(--danger-soft);  color: var(--danger); }
.status-pill--info    { background: var(--info-soft);    color: var(--info); }
.status-pill--muted   { background: transparent; color: var(--text-tertiary); border: var(--hairline) solid var(--border); }
.status-pill--neutral { background: var(--surface-sunken); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
 * DataTable<T> primitive
 * ═══════════════════════════════════════════════════════════════════════════ */

.data-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.data-table__toolbar {
    /* inherits page-toolbar styling from Toolbar primitive */
}

.data-table__count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
}

.data-table__count-label {
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
}

.data-table__surface {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    overflow: hidden;
}

.data-table__surface .mud-table {
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

.data-table__surface .mud-table-container {
    border: none;
    border-radius: 0;
    background: transparent;
}

.data-table__surface .mud-table-pagination {
    border-top: var(--hairline) solid var(--border-subtle);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.data-table__loading {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
}

.data-table__empty {
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px dashed var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Discounts (Discounts.razor)
 * ═══════════════════════════════════════════════════════════════════════════ */

.discount-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.discount-form-grid__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--hairline) solid var(--border-subtle);
}

.discount-validate {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) auto;
    gap: var(--space-3);
    align-items: flex-end;
}

@media (max-width: 599.98px) {
    .discount-validate {
        grid-template-columns: 1fr;
    }
}

/* ─── Blazor error boundary ────────────────────────────────────────────── */
.blazor-error-boundary {
    background: var(--danger);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-9);
    color: var(--neutral-0);
    border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 959.98px) {
    .shell-appbar.mud-appbar {
        padding-inline: var(--space-3);
    }

    .shell-drawer.mud-drawer {
        width: 264px;
    }

    .booking-hero.mud-paper {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-5);
    }

    .booking-hero__actions {
        justify-content: stretch;
    }

    .booking-date-picker {
        min-width: 100%;
    }

    .booking-primary-action {
        width: 100%;
    }
}

@media (max-width: 599.98px) {
    .shell-brand__eyebrow {
        display: none;
    }

    .shell-appbar__meta {
        gap: var(--space-1);
    }

    .shell-appbar__culture {
        display: none;
    }

    .shell-content {
        padding: var(--space-5) var(--space-3) var(--space-7);
    }

    .booking-card .mud-card-header,
    .booking-card .mud-card-content {
        padding-inline: var(--space-4);
    }
}

/* ─── Caller ID ─────────────────────────────────────────────────────────── */
/* Floats over every page so the receptionist can act while still on the phone.
   Above the app bar and drawer, below dialogs and snackbars. */
.incoming-call {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: calc(var(--mud-zindex-appbar, 1300) + 50);
    width: min(380px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-9));
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: incoming-call-enter var(--duration-normal) var(--ease-decel);
}

@keyframes incoming-call-enter {
    from { opacity: 0; transform: translateY(var(--space-3)); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .incoming-call { animation: none; }
}

.incoming-call__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
}

.incoming-call__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
}

.incoming-call__heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.incoming-call__eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.incoming-call__number {
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    /* Phone numbers read left to right in Arabic too, but sit under the label on the start side. */
    unicode-bidi: isolate;
    align-self: flex-start;
}

.incoming-call__close.mud-icon-button {
    color: var(--text-secondary);
}

.incoming-call__body {
    overflow-y: auto;
    padding: var(--space-2) var(--space-4);
}

.incoming-call__status,
.incoming-call__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.incoming-call__status--error {
    color: var(--danger);
}

.incoming-call__matches {
    list-style: none;
    margin: 0;
    padding: 0;
}

.incoming-call__match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.incoming-call__match + .incoming-call__match {
    border-block-start: 1px solid var(--border-subtle);
}

.incoming-call__patient {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.incoming-call__name {
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    overflow-wrap: anywhere;
}

.incoming-call__meta,
.incoming-call__visit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.incoming-call__visit {
    color: var(--text-tertiary);
}

.incoming-call__match-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    flex: none;
}

.incoming-call__footer {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
}

.caller-lookup__hint {
    color: var(--text-secondary);
    margin-block-end: var(--space-2);
}

.caller-lookup__device {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
}

.caller-lookup__device-hint {
    display: block;
    color: var(--text-tertiary);
    padding-inline-start: var(--space-1);
}

@media (max-width: 599.98px) {
    /* A full-width sheet is easier to reach one-handed during a call. */
    .incoming-call {
        inset-inline: var(--space-2);
        inset-block-end: var(--space-2);
        width: auto;
    }
}

/* WhatsApp inbox: conversation list beside the open conversation; stacked on narrow screens. */

.whatsapp-inbox {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    height: calc(100vh - 8rem);
    min-height: 28rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.whatsapp-inbox__list {
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid var(--border);
    overflow-y: auto;
}

.whatsapp-inbox__list-tools {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.whatsapp-inbox__conversation {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.whatsapp-inbox__conversation:hover {
    background: var(--hover-bg);
}

.whatsapp-inbox__conversation--active {
    background: var(--brand-soft);
}

.whatsapp-inbox__conversation-top,
.whatsapp-inbox__conversation-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}

.whatsapp-inbox__name {
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whatsapp-inbox__time,
.whatsapp-inbox__preview {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.whatsapp-inbox__preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whatsapp-inbox__badge {
    min-width: 1.25rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    text-align: center;
}

.whatsapp-inbox__thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.whatsapp-inbox__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.whatsapp-inbox__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.whatsapp-inbox__patient {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.whatsapp-inbox__messages {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    padding: var(--space-4);
    overflow-y: auto;
    background: var(--surface-sunken);
}

.whatsapp-inbox__message {
    max-width: min(36rem, 80%);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.whatsapp-inbox__message--in {
    align-self: flex-start;
}

.whatsapp-inbox__message--out {
    align-self: flex-end;
    background: var(--brand-soft);
}

.whatsapp-inbox__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.whatsapp-inbox__media,
.whatsapp-inbox__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.whatsapp-inbox__footer,
.whatsapp-inbox__meta {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
}

.whatsapp-inbox__error {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--mud-palette-error);
}

.whatsapp-inbox__composer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.whatsapp-inbox__composer .whatsapp-inbox__input {
    flex: 1 1 18rem;
}

.whatsapp-inbox__composer .whatsapp-inbox__template {
    flex: 0 1 16rem;
}

.whatsapp-inbox__hint {
    flex: 1 1 18rem;
}

.whatsapp-inbox__empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    color: var(--text-tertiary);
}

@media (max-width: 900px) {
    .whatsapp-inbox {
        grid-template-columns: 1fr;
        height: auto;
    }

    .whatsapp-inbox__list {
        max-height: 40vh;
        border-inline-end: 0;
        border-bottom: 1px solid var(--border);
    }

    .whatsapp-inbox__messages {
        max-height: 60vh;
    }
}