/* Move Well Physiotherapy unified theme. */
:root {
    --brand: #63a71c;
    --brand-soft: #ddf4c5;
    --paper: #f5f4f2;
    --paper-alt: #eeefe9;
    --paper-strong: #ffffff;
    --ink: #111111;
    --color-headings: #363637;
    --muted: #4f514d;
    --line: #d8d9d3;
    --button-text: #f5f7f4;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --shadow: rgba(17, 17, 17, 0.08);
    --color-mwp-green: var(--brand);
    --color-mwp-gray: #333333;
    --error-bg: #fde7ec;
    --error-text: #a51031;
    --error-border: #e62149;
    --success-bg: #eafbdc;
    --success-text: #3a7f16;
    --success-border: #6fdd37;
    --app-sidebar: #123f3d;
    --app-sidebar-raised: #1b554f;
    --app-workspace: #eef4f0;
    --app-surface: #ffffff;
    --app-radius-sm: 10px;
    --app-radius-md: 16px;
    --app-radius-lg: 22px;
    --app-space-1: 8px;
    --app-space-2: 12px;
    --app-space-3: 16px;
    --app-space-4: 24px;
    --app-space-5: 32px;
    --app-shadow-card: 0 10px 28px rgba(18, 63, 61, 0.08);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body,
body.landing-page,
body.app-page,
body.auth-page {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

body.landing-page.theme-dark,
body.app-page.theme-dark,
body.auth-page.theme-dark {
    --brand: #8bd53d;
    --brand-soft: #344226;
    --paper: #101010;
    --paper-alt: #171717;
    --paper-strong: #1a1a1a;
    --ink: #f5f5f2;
    --color-headings: #e6e6e6;
    --muted: #d6d6d6;
    --line: #343434;
    --button-text: #0a1d00;
    --nav-bg: rgba(17, 17, 17, 0.92);
    --shadow: rgba(0, 0, 0, 0.32);
    --error-bg: #4a1222;
    --error-text: #ff9ab0;
    --success-bg: #263d16;
    --success-text: #b9f58b;
    --app-sidebar: #0c2e2d;
    --app-sidebar-raised: #164744;
    --app-workspace: #101d1b;
    --app-surface: #182825;
    --app-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.message.error {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

.message.success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.error-page {
    max-width: 620px;
    padding: 2rem;
    text-align: center;
}

.error-page-code {
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.error-page h1 {
    color: var(--color-headings);
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-page-message {
    color: var(--muted);
    margin-bottom: 2rem;
}

body.landing-page *,
body.app-page *,
body.auth-page * {
    box-sizing: border-box;
}

h1,
.dashboard-heading h1,
.physiotherapist-dashboard .dashboard-heading h1,
.users-index-page h1,
.auth-card legend {
    font-family: "Lexend", sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Lexend", sans-serif;
    color: var(--color-headings);
}

.top-nav,
body.app-page .top-nav,
body.auth-page .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 12px 20px 0;
}

.nav-shell,
body.app-page .nav-shell,
body.auth-page .nav-shell {
    max-width: 1200px;
    min-height: 54px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--nav-bg);
    border: 0px;
    border-radius: 999px;
    padding: 7px 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 18px var(--shadow);
}

.brand-block {
    display: flex;
    align-items: center;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.brand-block .nav-link {
    font-weight: 800;
}

.brand-block .nav-link {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

button.theme-toggle {
    width: 38px;
    height: 38px;
    line-height: 0;
}

.nav-links,
body.app-page .nav-links,
body.auth-page .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.nav-link,
.nav-link:visited,
.nav-link:focus,
body.app-page .nav-link,
body.auth-page .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.48rem 0.65rem;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link:focus,
body.app-page .nav-link:hover,
body.app-page .nav-link:focus,
body.auth-page .nav-link:hover,
body.auth-page .nav-link:focus,
.auth-card .button-outline:hover,
.auth-card .button-clear:hover {
    background: var(--brand-soft);
    color: var(--ink);
    transform: translateY(-1px);
}

.nav-icon,
.primary-btn svg,
.secondary-btn svg,
.staff-login svg,
.theme-toggle svg {
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.theme-toggle,
body.app-page .theme-toggle,
body.auth-page .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0px;
    border-radius: 999px;
    background: var(--brand);
    font-size: 0;
    justify-content: center;
    line-height: 0;
    color: var(--button-text);
    cursor: pointer;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    visibility: visible;
}

.theme-toggle .theme-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.nav-action-primary,
.nav-action-primary:visited,
.nav-action-primary:focus {
    background: var(--brand);
    color: var(--button-text);
    font-weight: 700;
}

.nav-action-primary:hover,
.nav-action-primary:focus-visible {
    background: var(--ink);
    color: var(--paper-strong);
    transform: translateY(-1px);
}

body.app-page.theme-dark .nav-action-primary,
body.auth-page.theme-dark .nav-action-primary {
    color: #0a1d00;
}

body.app-page.theme-light .nav-action-primary,
body.auth-page.theme-light .nav-action-primary {
    color: #f5f7f4;
}

.nav-action-booking,
.nav-action-booking:visited,
.nav-action-booking:focus {
    background: var(--brand-soft);
    color: var(--ink);
    font-weight: 700;
}

.nav-action-booking:hover,
.nav-action-booking:focus-visible {
    background: var(--brand);
    color: var(--button-text);
    transform: translateY(-1px);
}

.nav-menu-toggle {
    display: none;
    border: 0px;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.56rem 0.8rem;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

body.app-page main.main {
    max-width: 1200px;
    padding: 80px 24px 36px;
}

body.app-page main.main > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.app-page main.admin-layout-main {
    max-width: 1320px;
    padding: 80px 24px 36px;
}

.admin-layout-shell {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.admin-layout-shell > .macos-content {
    min-width: 0;
}

.admin-layout-shell .container {
    max-width: none;
    padding: 0;
}

body.app-page .row > .column-responsive {
    grid-column: 1 / -1;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

body.app-page .content {
    background: var(--paper-strong);
    color: var(--ink);
    border: 0px;
    border-radius: 24px;
    box-shadow: 0 8px 24px var(--shadow);
}

body.app-page .content h1,
body.app-page .content h2,
body.app-page .content h3,
body.app-page .content h4,
body.app-page .content h5,
body.app-page .content h6,
body.app-page .content legend {
    color: var(--color-headings);
}

body.app-page .content a,
body.app-page .side-nav a,
body.app-page .content .pagination a {
    color: var(--brand);
}

body.app-page .content a:hover,
body.app-page .content a:focus,
body.app-page .side-nav a:hover,
body.app-page .side-nav a:focus,
body.app-page .content .pagination a:hover,
body.app-page .content .pagination a:focus {
    color: var(--ink);
}

body.app-page .content table {
    background: var(--paper-strong);
    color: var(--ink);
}

body.app-page .content th,
body.app-page .content td {
    border-bottom-color: var(--line);
}

body.app-page .content th {
    color: var(--ink);
}

body.app-page .content input,
body.app-page .content select,
body.app-page .content textarea {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink);
}

body.app-page.theme-dark .appointment-form input,
body.app-page.theme-dark .appointment-form select,
body.app-page.theme-dark .appointment-form textarea {
    background: var(--paper-strong);
    color: #f5f5f2;
}

body.app-page .content input::placeholder,
body.app-page .content textarea::placeholder {
    color: var(--muted);
}

body.app-page .content label {
    color: var(--muted);
}

body.app-page .content blockquote {
    border-left-color: var(--brand);
    color: var(--ink);
}

body.app-page .content hr,
body.app-page .side-nav {
    border-color: var(--line);
}

body.app-page .side-nav .heading {
    color: var(--color-headings);
}

body.app-page .content sub {
    color: var(--muted);
}

body.auth-page {
    display: flex;
    flex-direction: column;
}

body.auth-page main.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 36px;
}

body.auth-page .auth-layout-container {
    width: min(100%, 760px);
}

body.auth-page .container.login,
body.auth-page .container.register {
    width: min(100%, 760px);
    max-width: none;
}

body.auth-page .container.login .column-50,
body.auth-page .container.register .column-50 {
    width: 100%;
    margin-left: 0;
}

.auth-card,
body.auth-page .users.form.content,
.users-index-page,
.physiotherapist-panel {
    background: var(--paper-strong);
    border: 0px;
    border-radius: 24px;
    box-shadow: 0 8px 24px var(--shadow);
}

.auth-card {
    width: 100%;
    padding: 44px 52px;
}

body.auth-page .users.form.content {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 44px 52px;
}

body.auth-page .forget-password-page {
    width: min(100%, 960px);
}

body.auth-page .forget-password-page .users.form.content {
    width: 100%;
}

.auth-card legend {
    margin-bottom: 24px;
    color: var(--color-headings);
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    line-height: 0.92;
    letter-spacing: 0.03em;
}

.auth-card label,
.history-form-panel label {
    color: var(--muted);
    font-weight: 700;
}

.auth-card input,
.history-form-panel input,
.history-form-panel textarea {
    border: 0px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

.auth-card button,
.auth-card .button,
.users-index-page .button {
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: var(--button-text);
    font-weight: 700;
}

body.app-page.theme-light .users-index-page .page-heading .button {
    color: #17300b;
}

body.app-page.theme-dark .users-index-page .page-heading .button {
    color: #0a1d00;
    background: var(--brand);
}

.auth-card .button-clear {
    color: var(--button-text);
    /*background-color: var(--brand-soft);*/
}

body.app-page > footer,
body.auth-page > footer {
    width: min(100%, 1200px);
    margin: 0 auto;
    border-top: 1px solid var(--line);
    padding: 0 24px 16px;
    color: var(--muted);
}

body.app-page > footer.site-footer,
body.auth-page > footer.site-footer {
    border-top: 0;
    padding: 12px 24px 28px;
}

body.app-page > footer p,
body.auth-page > footer p {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
}

.users-index-page,
.admin-index-page {
    padding: 38px;
}

.users-index-page .page-heading,
.admin-index-page .page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.users-index-page h1,
.admin-index-page h1 {
    margin: 0;
    color: var(--color-headings);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-weight: 400;
}

.users-index-page table,
.admin-index-page table,
.patient-table {
    margin-bottom: 0;
    background: var(--paper-strong);
    border-radius: 16px;
    overflow: hidden;
}

.users-index-page th,
.admin-index-page th,
.patient-table th {
    background: var(--brand-soft);
    color: var(--ink);
}

.users-index-page td,
.users-index-page th,
.admin-index-page td,
.admin-index-page th,
.patient-table td,
.patient-table th {
    border-bottom-color: var(--line);
}

.users-index-page .actions,
.admin-index-page .actions {
    white-space: nowrap;
}

.users-index-page .paginator,
.admin-index-page .paginator {
    margin-top: 28px;
    color: var(--muted);
}

.users-index-page .pagination a,
.admin-index-page .pagination a {
    color: var(--brand);
}

.admin-index-page .page-heading h1 {
    font-weight: 400;
}

.inquiry-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.inquiry-filter {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--paper-alt);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.inquiry-filter:hover,
.inquiry-filter:focus,
.inquiry-filter-active {
    background: var(--brand-soft);
    color: var(--ink);
}

.admin-index-page .button,
.admin-index-page .actions a,
.admin-index-page .actions button {
    border-radius: 999px;
    font-weight: 700;
}

.admin-index-page .button {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--button-text);
}

.admin-index-page .button:hover,
.admin-index-page .button:focus {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-strong);
}

.admin-index-page td a {
    color: var(--brand);
    font-weight: 700;
}

.admin-index-page td a:hover,
.admin-index-page td a:focus {
    color: var(--ink);
}

.admin-index-page .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-index-page .actions a,
.admin-index-page .actions button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border: 0px;
    background: transparent;
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.2;
}

.admin-index-page .actions a:hover,
.admin-index-page .actions a:focus,
.admin-index-page .actions button:hover,
.admin-index-page .actions button:focus {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--ink);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.status-badge-success {
    background: var(--brand-soft);
    color: var(--brand);
}

.status-badge-pending {
    background: var(--paper-alt);
    color: var(--muted);
}

/* Landing page */
body.landing-page {
    font-size: 16px;
}

body.landing-page main {
    padding-top: 80px;
}

.hero {
    padding: 0px 0 24px;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    align-items: center;
    background: var(--paper-strong);
    border: 0px;
    border-radius: 28px;
    padding: 52px;
    box-shadow: 0 8px 24px var(--shadow);
}

.eyebrow,
.section-heading p,
.dashboard-eyebrow {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

h1 {
    margin: 0;
    color: var(--brand);
    font-size: clamp(4rem, 8vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
}

.hero-copy {
    max-width: 620px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 1.08rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
}

.primary-btn,
.secondary-btn,
.staff-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.94rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.primary-btn,
.primary-btn:visited,
.primary-btn:focus,
.staff-login,
.staff-login:visited,
.staff-login:focus {
    background: var(--brand);
    border: 1px solid transparent;
    color: var(--button-text);
}

.secondary-btn,
.secondary-btn:visited,
.secondary-btn:focus {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink);
}

.primary-btn:hover,
.secondary-btn:hover,
.staff-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--shadow);
}

.hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.hero-logo {
    display: block;
    width: min(100%, 220px);
    margin: 0 auto;
    height: auto;
}

.panel-card {
    width: 100%;
    background: var(--brand-soft);
    border: 0px;
    border-radius: 20px;
    padding: 28px;
}

.label {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--brand);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.panel-card h3 {
    margin: 0;
    font-size: 2.1rem;
    line-height: 1.1;
}

.panel-card p,
.feature p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric strong {
    font-size: 1.35rem;
}

.metric span {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.content-section {
    padding-top: 28px;
}

.content-block {
    background: var(--paper-strong);
    border: 0px;
    border-radius: 24px;
    padding: 52px 44px;
    box-shadow: 0 8px 24px var(--shadow);
}

.section-heading h2 {
    max-width: 600px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    font-weight: 700;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 34px;
}

.feature {
    background: var(--paper);
    border: 0px;
    border-radius: 16px;
    padding: 24px;
}

.number {
    color: var(--brand);
    font-family: "Lexend", sans-serif;
    font-size: 2.6rem;
    line-height: 1;
}

.feature h3 {
    margin: 14px 0 10px;
    font-size: 1.4rem;
}

.site-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px 28px;
    font-size: 0.88rem;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.footer-note {
    color: var(--muted);
    font-size: 0.82rem;
}

.history-back-link {
    margin-bottom: 20px;
}

/* Patient and physiotherapist dashboards */
.patient-dashboard {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 0 48px;
}

.dashboard-heading {
    margin-bottom: 34px;
}

.dashboard-heading h1,
.physiotherapist-dashboard .dashboard-heading h1 {
    margin: 0;
    color: var(--color-headings);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-transform: none;
}

.dashboard-heading > p:last-child {
    color: var(--muted);
    font-size: 1.1rem;
}

.dashboard-section {
    margin-bottom: 42px;
}

.profile-picture-card {
    align-items: center;
    background: var(--paper-strong);
    border-radius: 12px;
    box-shadow: 0 10px 24px var(--shadow);
    display: flex;
    gap: 24px;
    padding: 24px;
}

.profile-avatar {
    border: 4px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 8px 20px var(--shadow);
    height: 128px;
    object-fit: cover;
    width: 128px;
}

.profile-picture-form {
    flex: 1;
}

.profile-picture-form input[type="file"] {
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .profile-picture-card {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-avatar {
        align-self: center;
    }
}

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

.appointment-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    border-left: 4px solid var(--brand);
    background: var(--paper-strong);
    padding: 18px 20px;
}

.appointment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.appointment-actions .dashboard-link {
    min-height: 38px;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
}

.dashboard-link-danger {
    border-color: #b33a3a;
    color: #b33a3a;
}

.dashboard-link-danger:hover,
.dashboard-link-danger:focus {
    background: #b33a3a;
    color: #fff;
}

.section-heading {
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
    padding-bottom: 12px;
}

.section-heading h2 {
    margin: 0;
}

.appointment-empty,
.appointment-form,
.physiotherapist-empty {
    background: var(--paper-strong);
    border-left: 4px solid var(--brand);
    padding: 26px;
}

.appointment-empty h3 {
    margin: 0 0 6px;
}

.appointment-empty p,
.physiotherapist-empty p {
    color: var(--muted);
    margin: 0 0 20px;
}

.dashboard-button,
.dashboard-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 2px solid var(--brand);
    border-radius: 24px;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dashboard-button {
    background: var(--brand);
    color: var(--button-text);
}

.dashboard-button:disabled,
.dashboard-button[disabled] {
    background: #b7d993;
    border-color: #b7d993;
    color: #1f2a18;
    opacity: 1;
    cursor: not-allowed;
}

.appointment-form .dashboard-button:disabled,
.appointment-form .dashboard-button[disabled] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--button-text);
    opacity: 0.25;
}

.dashboard-button:disabled:hover,
.dashboard-button[disabled]:hover {
    background: #b7d993;
    border-color: #b7d993;
    color: #1f2a18;
    transform: none;
}

.dashboard-button:hover,
.dashboard-link:hover,
.dashboard-button:focus,
.dashboard-link:focus {
    background: var(--brand);
    color: var(--button-text);
    transform: translateY(-1px);
}

.dashboard-link-primary,
.dashboard-button-primary {
    background: var(--brand);
    color: var(--button-text);
}

.nav-links .nav-action-booking {
    order: 98;
}

.nav-links .nav-action-primary {
    order: 99;
}

.appointment-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.appointment-form-actions .dashboard-button,
.appointment-form-actions .dashboard-link {
    min-width: 170px;
}

.blogArticles.index.content .dashboard-link {
    margin-bottom: 18px;
}

.blogArticles.index.content h3 {
    clear: both;
}

.dashboard-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.appointment-booking {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 0 48px;
}

.appointment-form {
    border-radius: 16px;
}

.appointment-form fieldset {
    margin-bottom: 24px;
}

.time-slot-group > label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.time-slot {
    display: block;
    margin: 0;
}

.time-slot input {
    position: absolute;
    opacity: 0;
}

.time-slot span {
    display: block;
    border: 0px;
    padding: 12px;
    text-align: center;
}

.time-slot input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--button-text);
}

.time-slot input:disabled + span {
    background: var(--line);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.time-slot input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.form-note,
.patient-count,
.patient-email {
    color: var(--muted);
}

.form-note {
    font-size: 0.9rem;
    margin: 12px 0 0;
}

.physiotherapist-dashboard {
    max-width: 1180px;
    margin: 0 auto;
}

.physiotherapist-panel {
    padding: 30px;
}

.dashboard-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin: -8px -8px 30px;
    padding: 0 8px 16px;
}

.dashboard-tab {
    display: inline-flex;
    gap: 8px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
    padding: 0.65rem 1rem;
}

.dashboard-tab-active {
    background: var(--brand-soft);
    color: var(--ink);
    font-weight: 700;
}

.dashboard-tab:hover,
.dashboard-tab:focus-visible {
    background: var(--brand-soft);
    color: var(--ink);
    transform: translateY(-1px);
}

.calendar-heading {
    align-items: center;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-headings);
}

.calendar-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}

.calendar-nav-button:hover,
.calendar-nav-button:focus-visible {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
}

.appointment-calendar {
    min-width: 0;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-weekdays span {
    padding: 0 4px 8px;
}

.calendar-day {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    padding: 8px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: var(--paper-strong);
}

.calendar-day:nth-child(7n) {
    border-right: 1px solid var(--line);
}

.calendar-day:nth-last-child(-n + 7) {
    border-bottom: 1px solid var(--line);
}

.calendar-day-empty {
    background: var(--paper);
}

.calendar-day-number {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.calendar-appointment {
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 5px 6px;
    border: 0;
    border-radius: 5px;
    background: var(--brand-soft);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-appointment:hover,
.calendar-appointment:focus-visible {
    background: var(--brand);
    color: var(--button-text);
}

.appointment-details {
    align-self: start;
    min-height: 180px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}

.appointment-details h3,
.appointment-details p {
    margin-top: 0;
}

.appointment-details h3 {
    margin-bottom: 10px;
}

.appointment-details p:last-child {
    margin-bottom: 0;
}

.appointment-detail-date,
.appointment-detail-time {
    color: var(--muted);
}

.appointment-detail-time {
    font-weight: 700;
}

.appointment-record-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.appointment-record-link:hover,
.appointment-record-link:focus-visible {
    color: var(--ink);
    text-decoration: underline;
}

.dashboard-tab-panel[hidden] {
    display: none;
}

.panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.panel-heading h2 {
    margin: 0;
}

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

.patient-name {
    display: block;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.patient-email {
    display: block;
    font-size: 0.88rem;
    margin-top: 3px;
}

.patient-action {
    text-align: right;
    white-space: nowrap;
}

.physiotherapist-empty {
    background: var(--paper);
}

.physiotherapist-empty h3,
.physiotherapist-empty p {
    margin-top: 0;
}

.physiotherapist-empty p {
    margin-bottom: 0;
}

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

    .calendar-day {
        min-height: 88px;
        padding: 5px;
    }

    .calendar-appointment {
        padding: 4px;
        font-size: 0.68rem;
    }
}

/* Admin dashboard */
.admin-dashboard {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 0 48px;
}

.admin-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.admin-dashboard-header h1 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.admin-dashboard-header p,
.admin-panel-heading p {
    margin: 8px 0 0;
    color: var(--muted);
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.admin-panel {
    min-width: 0;
    background: var(--paper-strong);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 8px 24px var(--shadow);
    padding: 24px;
}

/* Content-block driven landing page */
body.landing-page {
    background: var(--paper);
}

body.landing-page main {
    width: min(100%, 1480px);
    max-width: none;
    padding: 104px clamp(24px, 5vw, 88px) 72px;
}

body.landing-page .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 6vw, 100px);
    align-items: center;
    min-height: min(760px, 78vh);
    padding: 0;
}

body.landing-page .hero-copy-column {
    max-width: 620px;
}

body.landing-page .hero h1 {
    max-width: 590px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(4rem, 8vw, 8.5rem);
    letter-spacing: -0.055em;
    line-height: 0.86;
    text-transform: none;
}

body.landing-page .hero-copy {
    max-width: 510px;
    margin: 28px 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
}

body.landing-page .hero-copy p,
body.landing-page .section-copy p,
body.landing-page .hero-card p {
    margin: 0;
}

body.landing-page .hero-media {
    position: relative;
    min-width: 0;
}

body.landing-page .hero-image {
    display: block;
    width: 100%;
    height: clamp(420px, 62vw, 720px);
    object-fit: cover;
}

body.landing-page .hero-card {
    position: absolute;
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(16px, 4vw, 56px);
    width: min(360px, calc(100% - 32px));
    padding: 28px;
    background: var(--paper-strong);
}

body.landing-page .hero-card h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 2.5vw, 2.3rem);
    line-height: 1.05;
}

body.landing-page .landing-section {
    padding: clamp(88px, 13vw, 180px) 0 0;
}

body.landing-page .section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.2fr);
    gap: 24px 8vw;
    align-items: end;
}

body.landing-page .section-heading .eyebrow {
    grid-column: 1 / -1;
    margin: 0;
}

body.landing-page .section-heading h2 {
    max-width: 850px;
    margin: 0;
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 6.2rem);
    letter-spacing: -0.055em;
    line-height: 0.92;
}

body.landing-page .section-copy {
    max-width: 420px;
    color: var(--muted);
    font-size: 1.05rem;
}

body.landing-page .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-top: 72px;
}

body.landing-page .feature-card {
    min-height: 280px;
    padding: 28px 30px 34px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.landing-page .feature-card + .feature-card {
    padding-left: 30px;
}

body.landing-page .feature-card > span {
    color: var(--brand);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.landing-page .feature-card h3 {
    margin: 60px 0 12px;
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

body.landing-page .feature-card p {
    max-width: 310px;
    margin: 0;
    color: var(--muted);
}

body.landing-page .story-section {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(36px, 8vw, 130px);
    align-items: center;
}

body.landing-page .story-image img {
    display: block;
    width: 100%;
    height: clamp(360px, 48vw, 620px);
    object-fit: cover;
}

body.landing-page .story-content h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: -0.05em;
    line-height: 0.92;
}

body.landing-page .story-content p:not(.eyebrow) {
    max-width: 410px;
    color: var(--muted);
    font-size: 1.1rem;
}

body.landing-page .site-footer {
    width: min(100%, 1480px);
    max-width: none;
    padding: 0 clamp(24px, 5vw, 88px) 36px;
}

body.landing-page .footer-inner {
    border-top: 0;
}

@media (max-width: 800px) {
    .admin-layout-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    body.landing-page .hero,
    body.landing-page .story-section {
        grid-template-columns: 1fr;
    }

    body.landing-page .hero {
        min-height: 0;
    }

    body.landing-page .hero-media {
        order: -1;
    }

    body.landing-page .section-heading {
        display: block;
    }

    body.landing-page .section-copy {
        margin-top: 24px;
    }

    body.landing-page .feature-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 40px;
    }

    body.landing-page .feature-card,
    body.landing-page .feature-card + .feature-card {
        min-height: 0;
        padding: 24px 0;
    }

    body.landing-page .feature-card h3 {
        margin-top: 28px;
    }
}

/* Phase A authenticated application shell. */
body.authenticated-app {
    background: var(--app-workspace);
}

body.authenticated-app main.main,
body.authenticated-app main.admin-layout-main {
    width: 100%;
    max-width: none;
    padding: 84px clamp(24px, 3vw, 48px) 48px;
}

.dashboard-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 70;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px clamp(24px, 3vw, 48px);
    background: var(--paper-strong);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.dashboard-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-topbar-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

.dashboard-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.dashboard-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0.45rem 0.7rem;
    border-radius: var(--app-radius-sm);
    color: var(--muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.dashboard-topbar-link:hover,
.dashboard-topbar-link:focus-visible {
    background: var(--brand-soft);
    color: var(--ink);
}

.dashboard-topbar-link-action {
    color: var(--brand);
    font-weight: 700;
}

.dashboard-topbar-logout {
    color: var(--ink);
    font-weight: 700;
}

.dashboard-topbar .theme-toggle {
    flex: 0 0 38px;
}

.dashboard-topbar .nav-menu-toggle {
    display: none;
}

.dashboard-workspace,
.macos-workspace {
    width: 100%;
    max-width: none;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(24px, 2.5vw, 40px);
    padding: 0;
}

.dashboard-workspace > .macos-content,
.macos-workspace > .macos-content {
    min-width: 0;
}

.macos-sidebar {
    top: 84px;
    min-height: calc(100vh - 132px);
    padding: 22px 14px 16px;
    border: 0;
    border-radius: var(--app-radius-lg);
    background: var(--app-sidebar);
    box-shadow: 0 14px 32px rgba(18, 63, 61, 0.14);
    backdrop-filter: none;
}

.macos-sidebar-title {
    gap: 11px;
    padding: 2px 9px 28px;
    color: #f4fbf6;
}

.macos-sidebar-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
    border-radius: 11px;
    background: var(--brand);
    padding: 5px;
}

.macos-sidebar-title strong {
    color: #f4fbf6;
    font-size: 0.96rem;
}

.macos-sidebar-title div span {
    color: rgba(244, 251, 246, 0.66);
}

.macos-sidebar-nav {
    gap: 6px;
}

.macos-sidebar-item {
    min-height: 44px;
    padding: 0.62rem 0.8rem;
    border-radius: var(--app-radius-sm);
    color: rgba(244, 251, 246, 0.72);
}

.macos-sidebar-item:hover,
.macos-sidebar-item:focus-visible,
.macos-sidebar-item-active {
    background: var(--app-sidebar-raised);
    color: #f4fbf6;
}

.macos-sidebar-item-active {
    box-shadow: inset -4px 0 0 var(--brand);
}

.macos-sidebar-footer {
    border-top-color: rgba(244, 251, 246, 0.14) !important;
}

.macos-workspace .admin-panel,
.macos-workspace .physiotherapist-panel,
.macos-workspace .dashboard-section,
.macos-workspace .diary-section,
.macos-workspace .content {
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

.macos-workspace .dashboard-heading,
.macos-workspace .admin-dashboard-header,
.macos-workspace .panel-heading {
    max-width: none;
}

@media (min-width: 1500px) {
    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-left: clamp(32px, 4vw, 72px);
        padding-right: clamp(32px, 4vw, 72px);
    }
}

@media (max-width: 800px) {
    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding: 76px 16px 32px;
    }

    .dashboard-topbar {
        flex-wrap: wrap;
        min-height: 58px;
        padding: 9px 16px;
    }

    .dashboard-topbar-status {
        flex: 1;
        min-width: 0;
    }

    .dashboard-topbar-actions {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 0;
        padding: 6px 0 2px;
    }

    .dashboard-topbar-actions.dashboard-nav-open,
    .dashboard-topbar-actions.nav-links-open {
        display: flex;
    }

    .dashboard-topbar-link {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-topbar .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-workspace,
    .macos-workspace {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .macos-sidebar {
        position: static;
        min-height: 0;
    }
}

.admin-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-panel-heading h2 {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-panel-count {
    display: inline-flex;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--ink);
    font-weight: 700;
}

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

.admin-table {
    width: 100%;
    margin: 0;
}

.admin-table th {
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-table td,
.admin-table th {
    padding: 14px 10px;
}

.admin-table td:first-child,
.admin-table th:first-child {
    padding-left: 0;
}

.admin-table td:last-child,
.admin-table th:last-child {
    padding-right: 0;
}

.admin-table-secondary {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.88rem;
}

.admin-table-action {
    text-align: right;
    white-space: nowrap;
}

.admin-table .dashboard-link,
.admin-appointment .dashboard-link {
    min-height: 36px;
    border: 0;
    background: var(--paper-alt);
    color: var(--ink);
    font-size: 0.88rem;
}

.admin-table .dashboard-link:hover,
.admin-table .dashboard-link:focus-visible,
.admin-appointment .dashboard-link:hover,
.admin-appointment .dashboard-link:focus-visible {
    background: var(--brand-soft);
    color: var(--ink);
}

.admin-appointment-list {
    display: grid;
    gap: 10px;
}

.admin-appointment {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.admin-appointment:first-child {
    padding-top: 0;
}

.admin-appointment:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-appointment strong,
.admin-appointment span {
    display: block;
}

.admin-appointment > div:first-child span {
    margin-top: 3px;
    color: var(--muted);
}

.admin-appointment-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-appointment .dashboard-link-danger {
    color: #a33b46;
}

.admin-empty-state {
    padding: 24px 0 4px;
}

.admin-empty-state h3 {
    margin: 0 0 6px;
}

.admin-empty-state p {
    margin: 0;
    color: var(--muted);
}

.admin-form-page .back-link {
    margin-bottom: 24px;
}

.admin-form-panel {
    max-width: 820px;
}

.admin-form-panel fieldset + fieldset {
    margin-top: 28px;
}

.admin-form-panel legend {
    margin-bottom: 18px;
    color: var(--color-headings);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.admin-form-panel input,
.admin-form-panel select,
.admin-form-panel textarea {
    border: 0px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

.form-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* macOS-inspired administration workspace */
body.app-page {
    background: var(--paper);
}

.macos-workspace {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 24px;
    max-width: 1320px;
    padding: 20px 0 56px;
}

.dashboard-workspace {
    align-items: start;
    width: min(100%, 1480px);
    max-width: none;
}

.dashboard-workspace .patient-dashboard,
.dashboard-workspace .physiotherapist-dashboard,
.dashboard-workspace .diary-page,
.dashboard-workspace .appointment-booking {
    max-width: none;
    margin: 0;
    padding-top: 0;
}

.dashboard-workspace .macos-sidebar-footer {
    border-top: 1px solid var(--line);
}

.dashboard-workspace > .macos-content {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.macos-sidebar {
    position: sticky;
    top: 88px;
    align-self: start;
    min-height: calc(100vh - 144px);
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.1);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}

.theme-dark .macos-sidebar {
    background: rgba(35, 35, 35, 0.62);
    border-color: rgba(255, 255, 255, 0.12);
}

.macos-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
}

.macos-sidebar-title strong,
.macos-sidebar-title span {
    display: block;
}

.macos-sidebar-title strong {
    font-size: 0.95rem;
}

.macos-sidebar-title div span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
}

.macos-sidebar-mark {
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand);
    color: var(--button-text) !important;
    font-size: 0.75rem;
    font-weight: 800;
}

.macos-sidebar-nav {
    display: grid;
    gap: 4px;
}

.macos-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.macos-sidebar-item span {
    width: 18px;
    color: currentColor;
    text-align: center;
}

.macos-sidebar-item > i,
.dashboard-topbar .nav-icon,
.nav-link .nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    font-size: 18px;
    line-height: 1;
}

body.authenticated-app > footer.site-footer {
    width: calc(100% - 260px);
    max-width: none;
    margin-left: 260px;
}

body.authenticated-app.sidebar-collapsed > footer.site-footer {
    width: calc(100% - 72px);
    margin-left: 72px;
}

body.app-page *,
body.landing-page *,
body.auth-page * {
    text-transform: none !important;
}

@media (max-width: 1100px) and (min-width: 961px) {
    body.authenticated-app > footer.site-footer {
        width: calc(100% - 220px);
        margin-left: 220px;
    }
}

@media (max-width: 960px) {
    body.authenticated-app > footer.site-footer,
    body.authenticated-app.sidebar-collapsed > footer.site-footer {
        width: 100%;
        margin-left: 0;
    }
}

.macos-sidebar-item:hover,
.macos-sidebar-item:focus-visible,
.macos-sidebar-item-active {
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

.theme-dark .macos-sidebar-item:hover,
.theme-dark .macos-sidebar-item:focus-visible,
.theme-dark .macos-sidebar-item-active {
    background: rgba(255, 255, 255, 0.1);
}

.macos-sidebar-item-active {
    font-weight: 700;
}

.macos-sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
}

.macos-content {
    min-width: 0;
}

.macos-window-kicker {
    margin: 0 0 8px !important;
    color: var(--brand) !important;
    font-size: 0.82rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.macos-workspace .admin-panel {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}

.theme-dark .macos-workspace .admin-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(35, 35, 35, 0.7);
}

.macos-workspace .admin-table .dashboard-link,
.macos-workspace .admin-appointment .dashboard-link {
    border-radius: 9px;
    background: rgba(118, 118, 128, 0.12);
}

.macos-workspace .admin-table .dashboard-link:hover,
.macos-workspace .admin-table .dashboard-link:focus-visible,
.macos-workspace .admin-appointment .dashboard-link:hover,
.macos-workspace .admin-appointment .dashboard-link:focus-visible {
    background: var(--brand-soft);
}

.macos-workspace .admin-form-panel input,
.macos-workspace .admin-form-panel select,
.macos-workspace .admin-form-panel textarea {
    background: rgba(118, 118, 128, 0.1);
    border-color: rgba(118, 118, 128, 0.22);
}

@media (max-width: 800px) {
    .macos-workspace {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .macos-sidebar {
        position: static;
        min-height: 0;
    }

    .macos-sidebar-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .macos-sidebar-footer {
        padding-top: 8px;
    }

    .dashboard-workspace .macos-sidebar-footer {
        margin-top: 8px;
    }
}

.patient-info-back {
    margin-bottom: 20px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.patient-info-page .back-link,
.patient-info-page .dashboard-link,
.patient-info-page .dashboard-button,
.patient-info-page button {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.patient-info-page .back-link:hover,
.patient-info-page .back-link:focus-visible {
    background: var(--brand-soft);
    color: var(--ink);
    transform: translateY(-1px);
}

.back-link::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.patient-info-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 22px;
    margin-bottom: 22px;
}

.patient-details {
    display: grid;
    gap: 18px;
    margin: 0;
}

.patient-details div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.patient-details dt {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.patient-details dd {
    margin: 0;
}

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

.history-entry {
    border-left: 3px solid var(--brand);
    background: var(--paper);
    padding: 16px 18px;
}

.history-entry p {
    margin: 10px 0 0;
    white-space: normal;
}

.history-entry-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.history-entry-meta strong {
    color: var(--ink);
}

.history-form-panel form {
    margin-bottom: 0;
}

/* Patient diary */
.diary-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 0 64px;
}

.diary-section {
    margin-bottom: 42px;
}

.diary-form {
    display: grid;
    gap: 22px;
}

.required-fields-note {
    color: var(--muted);
    font-size: 0.85rem;
    margin: -4px 0 0;
}

.required-field::after {
    color: var(--required, #c62828);
    content: ' *';
    font-weight: 700;
}

.required-marker {
    color: var(--required, #c62828);
    font-weight: 700;
}

.contactForms .required-marker {
    color: var(--required, #c62828);
    font-weight: 700;
}

.contactForms .phone-input-wrap,
.patient-profile-page .phone-input-wrap {
    align-items: center;
    border: 0.1rem solid #d1d1d1;
    border-radius: 0.4rem;
    display: flex;
    min-height: 3.8rem;
    padding-left: 1rem;
}

.contactForms .phone-input-wrap:focus-within,
.patient-profile-page .phone-input-wrap:focus-within {
    border-color: var(--color-cakephp-blue);
}

.contactForms .phone-prefix,
.patient-profile-page .phone-prefix {
    color: inherit;
    flex: 0 0 auto;
    font-weight: 600;
}

.contactForms .phone-input-wrap input,
.patient-profile-page .phone-input-wrap input {
    border: 0;
    box-shadow: none;
    flex: 1 1 auto;
    margin: 0;
}

.diary-form-grid,
.diary-entry-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.diary-card {
    background: var(--paper-strong);
    border: 0px;
    border-radius: 6px;
    box-shadow: 0 10px 24px var(--shadow);
    padding: 22px;
    animation: diary-card-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.diary-card:hover,
.diary-card:focus-within {
    border-color: var(--brand);
    box-shadow: 0 16px 30px var(--shadow-hover, rgba(17, 17, 17, 0.12));
    transform: translateY(-3px);
}

.diary-card:nth-child(2),
.diary-entry:nth-child(2) {
    animation-delay: 0.12s;
}

.diary-card:nth-child(3),
.diary-entry:nth-child(3) {
    animation-delay: 0.24s;
}

.diary-card:nth-child(4),
.diary-entry:nth-child(4) {
    animation-delay: 0.36s;
}

.diary-card:nth-child(5),
.diary-entry:nth-child(5) {
    animation-delay: 0.48s;
}

.diary-card:nth-child(6) {
    animation-delay: 0.6s;
}

.diary-card-experience,
.diary-card-pain {
    grid-column: span 2;
}

.diary-card-heading,
.diary-entry-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.diary-card-number {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 0.75rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
}

.diary-card-kicker {
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.diary-card h3 {
    font-size: 1.25rem;
    margin: 0;
}

.diary-card label:not(.pain-option):not(.exercise-toggle) {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.diary-card input[type="date"],
.diary-card textarea {
    background: var(--paper);
    border-color: var(--line);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.diary-card input[type="date"]:focus,
.diary-card textarea:focus {
    background: var(--paper-strong);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.diary-card textarea {
    min-height: 104px;
    resize: vertical;
}

.pain-picker {
    border: 0;
    margin: 0;
    padding: 0;
}

.pain-picker legend {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.pain-options {
    display: grid;
    grid-template-columns: repeat(11, minmax(28px, 1fr));
    gap: 6px;
}

.pain-option,
.exercise-option {
    cursor: pointer;
    display: block;
    margin: 0;
    position: relative;
}

.pain-option input,
.exercise-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.pain-option span,
.exercise-option span {
    align-items: center;
    background: var(--paper);
    border: 0px;
    color: var(--muted);
    display: flex;
    font-weight: 700;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pain-option span {
    border-radius: 4px;
    height: 42px;
}

.exercise-option span {
    border-radius: 5px;
    min-height: 48px;
}

.pain-option:hover span,
.pain-option input:focus-visible + span,
.exercise-option:hover span,
.exercise-option input:focus-visible + span {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}

.pain-option input:checked + span,
.exercise-option input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--button-text);
    transform: translateY(-2px);
}

.pain-option input:checked + span {
    animation: pain-choice-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.exercise-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-option input:checked + span {
    animation: exercise-choice-pop 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.diary-form .dashboard-button {
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.diary-form .dashboard-button:hover {
    box-shadow: 0 8px 18px var(--shadow-hover, rgba(17, 17, 17, 0.12));
}

.diary-form .dashboard-button:active {
    box-shadow: 0 2px 6px var(--shadow);
    transform: translateY(2px) scale(0.98);
}

.diary-entry {
    background: var(--paper-strong);
    border: 0px;
    border-radius: 6px;
    box-shadow: 0 10px 24px var(--shadow);
    padding: 22px;
    animation: diary-card-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.diary-entry:hover {
    border-color: var(--brand);
    box-shadow: 0 20px 36px var(--shadow-hover, rgba(17, 17, 17, 0.16));
    transform: translateY(-6px) scale(1.01);
}

.diary-entry-heading {
    align-items: baseline;
    justify-content: space-between;
}

.diary-entry-heading h3 {
    margin: 0;
}

.diary-pain {
    align-items: baseline;
    color: var(--brand);
    display: inline-flex;
    gap: 3px;
    white-space: nowrap;
}

.diary-pain strong {
    font-size: 1.7rem;
    line-height: 1;
}

.diary-pain small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.diary-entry-meta {
    border-bottom: 1px solid var(--line);
    margin: 18px 0 16px;
    padding-bottom: 14px;
}

.diary-status {
    align-items: center;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 7px;
}

.diary-status > span {
    background: var(--muted);
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.diary-status.is-complete {
    color: var(--brand);
}

.diary-status.is-complete > span {
    background: var(--brand);
}

.diary-entry-experience,
.diary-entry p {
    color: var(--muted);
}

.diary-entry-experience {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.diary-entry p {
    margin: 16px 0 0;
    white-space: normal;
}

.diary-entry-details {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
    padding-top: 14px;
}

.diary-entry-details p {
    font-size: 0.9rem;
    margin: 0;
}

.diary-entry-details strong {
    color: var(--color-headings);
}

@keyframes diary-card-in {
    from {
        opacity: 0;
        transform: translateY(36px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pain-choice-pop {
    0% { transform: translateY(-2px) scale(0.94); }
    60% { transform: translateY(-2px) scale(1.1); }
    100% { transform: translateY(-2px) scale(1); }
}

@keyframes exercise-choice-pop {
    0% { transform: translateY(-2px) scale(0.94); }
    65% { transform: translateY(-2px) scale(1.08); }
    100% { transform: translateY(-2px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .diary-card,
    .diary-entry,
    .pain-option input:checked + span,
    .exercise-option input:checked + span {
        animation: none;
        transition: none;
    }
}

@media (max-width: 700px) {
    .diary-form-grid,
    .diary-entry-list {
        grid-template-columns: 1fr;
    }

    .diary-card-experience,
    .diary-card-pain {
        grid-column: auto;
    }

    .pain-options {
        grid-template-columns: repeat(6, minmax(28px, 1fr));
    }

    .diary-entry-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .diary-entry-details {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 800px) {
    .nav-shell,
    body.app-page .nav-shell,
    body.auth-page .nav-shell {
        border-radius: 24px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .nav-links,
    body.app-page .nav-links,
    body.auth-page .nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0 4px;
    }

    .nav-links.nav-links-open {
        display: flex;
    }

    .nav-links .nav-link {
        justify-content: flex-start;
        width: 100%;
        border-radius: 14px;
        padding: 0.7rem 0.85rem;
    }

    .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }

    .users-index-page,
    .admin-index-page,
    .auth-card,
    body.auth-page .users.form.content {
        padding: 28px 20px;
    }

    .users-index-page .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-links {
        grid-template-columns: 1fr 1fr;
    }

    .time-slots {
        grid-template-columns: 1fr 1fr;
    }

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

    .patient-action {
        text-align: left;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-appointment {
        grid-template-columns: 1fr 1fr;
    }

    .admin-appointment-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .form-two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Phase A correction: authenticated shell cascade and application scale. */
body.authenticated-app .dashboard-topbar {
    left: 260px;
    padding-left: clamp(24px, 3vw, 48px);
}

body.authenticated-app main.main,
body.authenticated-app main.admin-layout-main {
    padding-left: calc(260px + clamp(24px, 3vw, 48px));
    padding-right: clamp(24px, 3vw, 48px);
}

body.authenticated-app .dashboard-workspace,
body.authenticated-app .macos-workspace {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
}

body.authenticated-app .admin-layout-shell {
    display: block;
}

body.authenticated-app .macos-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 260px;
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: var(--app-sidebar);
    box-shadow: 8px 0 24px rgba(18, 63, 61, 0.12);
    color: #f4fbf6;
}

body.authenticated-app .macos-sidebar-item:hover,
body.authenticated-app .macos-sidebar-item:focus-visible,
body.authenticated-app .macos-sidebar-item-active {
    background: var(--app-sidebar-raised);
    color: #f4fbf6;
}

body.authenticated-app .dashboard-heading h1,
body.authenticated-app .physiotherapist-dashboard .dashboard-heading h1,
body.authenticated-app .admin-dashboard-header h1 {
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body.authenticated-app .section-heading h2,
body.authenticated-app .panel-heading h2,
body.authenticated-app .admin-panel-heading h2 {
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: 0;
}

body.authenticated-app .dashboard-heading > p:last-child,
body.authenticated-app .admin-dashboard-header > div > p:last-child {
    font-size: 0.95rem;
}

@media (min-width: 1500px) {
    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-left: calc(260px + clamp(32px, 4vw, 72px));
        padding-right: clamp(32px, 4vw, 72px);
    }

    body.authenticated-app .dashboard-topbar {
        padding-left: clamp(32px, 4vw, 72px);
        padding-right: clamp(32px, 4vw, 72px);
    }
}

@media (max-width: 800px) {
    body.authenticated-app .dashboard-topbar {
        left: 0;
        padding: 9px 16px;
    }

    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding: 76px 16px 32px;
    }

    body.authenticated-app .macos-sidebar {
        position: static;
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: visible;
        border-radius: var(--app-radius-lg);
        box-shadow: var(--app-shadow-card);
    }
}

/* Phase A final sidebar contrast fix. */
body.authenticated-app .macos-sidebar-title strong {
    color: #f4fbf6;
}

body.authenticated-app .macos-sidebar-title div span {
    color: rgba(244, 251, 246, 0.66);
}

body.authenticated-app .macos-sidebar-item {
    color: rgba(244, 251, 246, 0.78);
}

body.authenticated-app .macos-sidebar-item:hover,
body.authenticated-app .macos-sidebar-item:focus-visible,
body.authenticated-app .macos-sidebar-item-active {
    background: var(--app-sidebar-raised);
    color: #f4fbf6;
}

/* Phase B: Patient Dashboard redesign. */
body.authenticated-app .patient-dashboard-redesign {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

body.authenticated-app .patient-dashboard-header > div {
    min-width: 0;
}

body.authenticated-app .patient-dashboard-header .dashboard-eyebrow {
    margin-bottom: 6px;
}

body.authenticated-app .patient-dashboard-header h1 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

body.authenticated-app .patient-dashboard-header > div > p:last-child {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

body.authenticated-app .patient-dashboard-header-action {
    flex-shrink: 0;
}

/* Prominent next appointment card. */
body.authenticated-app .patient-next-appointment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 118px;
    margin-bottom: 28px;
    padding: 22px 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-sidebar);
    color: #f4fbf6;
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-next-date {
    display: flex;
    width: 58px;
    min-height: 68px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
    background: rgba(255, 255, 255, 0.1);
}

body.authenticated-app .patient-next-date span {
    color: rgba(244, 251, 246, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.authenticated-app .patient-next-date strong {
    margin-top: 2px;
    color: #ffffff;
    font-family: "Lexend", sans-serif;
    font-size: 1.45rem;
    line-height: 1;
}

body.authenticated-app .patient-dashboard-kicker {
    margin: 0 0 5px;
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

body.authenticated-app .patient-next-details h2,
body.authenticated-app .patient-next-empty h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Lexend", sans-serif;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    font-weight: 600;
    line-height: 1.25;
}

body.authenticated-app .patient-next-details > p:last-child {
    margin: 6px 0 0;
    color: rgba(244, 251, 246, 0.7);
    font-size: 0.88rem;
}

body.authenticated-app .patient-next-action {
    display: flex;
    justify-content: flex-end;
}

body.authenticated-app .patient-next-appointment .dashboard-link {
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: #ffffff;
    color: var(--app-sidebar);
    font-size: 0.84rem;
}

body.authenticated-app .patient-next-appointment .dashboard-link:hover,
body.authenticated-app .patient-next-appointment .dashboard-link:focus-visible {
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

/* Empty appointment state inside the same prominent card. */
body.authenticated-app .patient-next-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.authenticated-app .patient-next-empty > div {
    min-width: 0;
}

body.authenticated-app .patient-next-empty > div > p:last-child {
    margin: 7px 0 0;
    color: rgba(244, 251, 246, 0.72);
    font-size: 0.9rem;
}

body.authenticated-app .patient-next-empty .dashboard-button {
    flex-shrink: 0;
    min-height: 40px;
    border: 0;
    border-radius: var(--app-radius-sm);
}

/* Existing patient functionality presented as dashboard tools. */
body.authenticated-app .patient-care-tools {
    margin-top: 8px;
}

body.authenticated-app .patient-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

body.authenticated-app .patient-section-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
}

body.authenticated-app .patient-care-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .patient-care-tool {
    display: flex;
    min-width: 0;
    min-height: 190px;
    flex-direction: column;
    padding: 20px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-care-tool-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 700;
}

body.authenticated-app .patient-care-tool h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-care-tool p {
    margin: 8px 0 18px;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

body.authenticated-app .patient-care-tool-link {
    margin-top: auto;
    color: var(--app-sidebar);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .patient-care-tool-link::after {
    content: " →";
}

body.authenticated-app .patient-care-tool-link:hover,
body.authenticated-app .patient-care-tool-link:focus-visible {
    color: var(--brand);
}

/* Dark mode adjustments. */
body.authenticated-app.theme-dark .patient-next-appointment {
    background: var(--app-sidebar);
}

body.authenticated-app.theme-dark .patient-care-tool-link {
    color: var(--brand);
}

/* Patient dashboard responsive layout. */
@media (max-width: 1200px) {
    body.authenticated-app .patient-care-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .patient-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-next-appointment {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .patient-next-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    body.authenticated-app .patient-next-empty {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-care-tool-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-next-appointment {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-next-date {
        width: 54px;
    }
}

/* Phase B: Patient appointments redesign. */
body.authenticated-app .patient-appointments-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

body.authenticated-app .patient-page-header > div {
    min-width: 0;
}

body.authenticated-app .patient-page-header h1 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

body.authenticated-app .patient-page-header > div > p:last-child {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

body.authenticated-app .patient-page-header .dashboard-button {
    flex-shrink: 0;
}

body.authenticated-app .patient-appointments-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-appointments-main {
    min-width: 0;
    display: grid;
    gap: 20px;
}

body.authenticated-app .patient-appointments-section {
    padding: 22px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-appointments-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.authenticated-app .patient-appointments-section-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-appointments-count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

body.authenticated-app .patient-appointment-list {
    display: grid;
    gap: 10px;
}

body.authenticated-app .patient-appointment-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .patient-appointment-card-upcoming {
    background: var(--app-workspace);
}

body.authenticated-app .patient-appointment-card-past {
    opacity: 0.88;
}

body.authenticated-app .patient-appointment-date {
    display: flex;
    width: 52px;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--brand-soft);
}

body.authenticated-app .patient-appointment-date span {
    color: var(--brand);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.authenticated-app .patient-appointment-date strong {
    margin-top: 2px;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    line-height: 1;
}

body.authenticated-app .patient-appointment-details {
    min-width: 0;
}

body.authenticated-app .patient-appointment-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.authenticated-app .patient-appointment-title-row h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 0.96rem;
    font-weight: 600;
}

body.authenticated-app .patient-appointment-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.67rem;
    font-weight: 700;
}

body.authenticated-app .patient-appointment-status-past {
    background: var(--paper-alt);
    color: var(--muted);
}

body.authenticated-app .patient-appointment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.8rem;
}

body.authenticated-app .patient-appointment-meta span + span::before {
    content: "•";
    margin-right: 14px;
    color: var(--line);
}

body.authenticated-app .patient-appointment-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.authenticated-app .patient-appointment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--app-surface);
    color: var(--app-sidebar);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .patient-appointment-action:hover,
body.authenticated-app .patient-appointment-action:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

body.authenticated-app .patient-appointment-action-danger {
    color: #a33b46;
}

body.authenticated-app .patient-appointment-action-danger:hover,
body.authenticated-app .patient-appointment-action-danger:focus-visible {
    border-color: #a33b46;
    background: #f8e8ea;
    color: #8a2f38;
}

body.authenticated-app .patient-appointments-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 110px;
    padding: 18px;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .patient-appointments-empty h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
}

body.authenticated-app .patient-appointments-empty p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

body.authenticated-app .patient-appointments-empty-quiet {
    justify-content: flex-start;
}

body.authenticated-app .patient-appointments-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .patient-appointment-info-card {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-appointment-info-card h3 {
    margin: 0 0 9px;
    color: var(--color-headings);
    font-size: 0.95rem;
    font-weight: 600;
}

body.authenticated-app .patient-appointment-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app .patient-appointment-info-card ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.82rem;
}

body.authenticated-app .patient-appointment-info-card li + li {
    margin-top: 6px;
}

/* Dark-mode appointment adjustments. */
body.authenticated-app.theme-dark .patient-appointment-card,
body.authenticated-app.theme-dark .patient-appointments-empty {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .patient-appointment-action {
    background: var(--app-surface);
    color: var(--brand);
}

body.authenticated-app.theme-dark .patient-appointment-action-danger {
    color: #ff9aa5;
}

/* Appointment page responsiveness. */
@media (max-width: 1100px) {
    body.authenticated-app .patient-appointments-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-appointments-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .patient-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-appointment-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .patient-appointment-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-appointments-aside {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-appointment-card {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-appointment-date {
        width: 50px;
    }

    body.authenticated-app .patient-appointment-meta {
        flex-direction: column;
        gap: 4px;
    }

    body.authenticated-app .patient-appointment-meta span + span::before {
        content: none;
    }

    body.authenticated-app .patient-appointments-empty {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Phase B: Patient booking/change appointment redesign. */
body.authenticated-app .patient-booking-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-booking-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-booking-panel-heading {
    margin-bottom: 22px;
}

body.authenticated-app .patient-booking-panel-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-booking-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.authenticated-app .patient-booking-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .patient-booking-field label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .patient-booking-field select,
body.authenticated-app .patient-booking-field input {
    width: 100%;
    min-height: 46px;
    margin: 6px 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .patient-booking-field select:focus,
body.authenticated-app .patient-booking-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .patient-booking-physiotherapist-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}

body.authenticated-app .patient-booking-physiotherapist-profile[hidden] {
    display: none;
}

body.authenticated-app .patient-booking-physiotherapist-avatar {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 800;
}

body.authenticated-app .patient-booking-physiotherapist-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.authenticated-app .patient-booking-physiotherapist-copy {
    min-width: 0;
}

body.authenticated-app .patient-booking-physiotherapist-copy h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 1rem;
}

body.authenticated-app .patient-booking-physiotherapist-copy p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

body.authenticated-app .patient-booking-time-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-booking-time-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

body.authenticated-app .patient-booking-time-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-booking-time-heading .form-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: right;
}

body.authenticated-app .patient-booking-time-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.authenticated-app .patient-booking-time {
    margin: 0;
}

body.authenticated-app .patient-booking-time input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.authenticated-app .patient-booking-time span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.authenticated-app .patient-booking-time input:checked + span {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

body.authenticated-app .patient-booking-time input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

body.authenticated-app .patient-booking-time input:disabled + span {
    background: var(--paper-alt);
    color: var(--muted);
    opacity: 0.48;
    cursor: not-allowed;
}

body.authenticated-app .patient-booking-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-booking-back {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .patient-booking-back::before {
    content: "← ";
}

body.authenticated-app .patient-booking-back:hover,
body.authenticated-app .patient-booking-back:focus-visible {
    color: var(--brand);
}

body.authenticated-app .patient-booking-actions .dashboard-button {
    min-width: 190px;
    min-height: 42px;
    border-radius: 10px;
}

body.authenticated-app .patient-booking-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .patient-booking-info-card {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-booking-info-card h3 {
    margin: 0 0 8px;
    color: var(--color-headings);
    font-size: 0.95rem;
    font-weight: 600;
}

body.authenticated-app .patient-booking-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app .patient-booking-info-card-highlight {
    background: var(--brand-soft);
}

body.authenticated-app.theme-dark .patient-booking-field select,
body.authenticated-app.theme-dark .patient-booking-field input,
body.authenticated-app.theme-dark .patient-booking-time span {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .patient-booking-time input:checked + span {
    background: var(--brand-soft);
    color: var(--brand);
}

@media (max-width: 1100px) {
    body.authenticated-app .patient-booking-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-booking-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.authenticated-app .patient-booking-fields {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-booking-time-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.authenticated-app .patient-booking-time-heading,
    body.authenticated-app .patient-booking-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-booking-time-heading .form-note {
        text-align: left;
    }

    body.authenticated-app .patient-booking-actions .dashboard-button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-booking-aside {
        grid-template-columns: 1fr;
    }
}

/* Phase B: Patient treatment history redesign. */
body.authenticated-app .patient-history-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-history-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-history-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-history-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.authenticated-app .patient-history-panel-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-history-count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

body.authenticated-app .patient-history-timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding-left: 18px;
}

body.authenticated-app .patient-history-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 4px;
    width: 1px;
    background: var(--line);
}

body.authenticated-app .patient-history-record {
    position: relative;
    display: grid;
    grid-template-columns: minmax(105px, 130px) minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0 18px 18px;
    border: 0;
}

body.authenticated-app .patient-history-record + .patient-history-record {
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-history-marker {
    position: absolute;
    top: 27px;
    left: -18px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

body.authenticated-app .patient-history-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.authenticated-app .patient-history-date strong {
    color: var(--color-headings);
    font-size: 0.86rem;
    font-weight: 700;
}

body.authenticated-app .patient-history-date span {
    color: var(--muted);
    font-size: 0.76rem;
}

body.authenticated-app .patient-history-record-content {
    min-width: 0;
}

body.authenticated-app .patient-history-record-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.authenticated-app .patient-history-record-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 0.96rem;
    font-weight: 600;
}

body.authenticated-app .patient-history-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.66rem;
    font-weight: 700;
}

body.authenticated-app .patient-history-preview {
    margin: 7px 0 10px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app .patient-history-link {
    color: var(--app-sidebar);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .patient-history-link::after {
    content: " →";
}

body.authenticated-app .patient-history-link:hover,
body.authenticated-app .patient-history-link:focus-visible {
    color: var(--brand);
}

body.authenticated-app .patient-history-empty {
    padding: 22px;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .patient-history-empty h3 {
    margin: 0 0 6px;
    color: var(--color-headings);
    font-size: 1rem;
}

body.authenticated-app .patient-history-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

body.authenticated-app .patient-history-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .patient-history-info-card {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-history-info-card h3 {
    margin: 0 0 8px;
    color: var(--color-headings);
    font-size: 0.95rem;
    font-weight: 600;
}

body.authenticated-app .patient-history-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app.theme-dark .patient-history-empty {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .patient-history-link {
    color: var(--brand);
}

@media (max-width: 1100px) {
    body.authenticated-app .patient-history-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-history-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.authenticated-app .patient-history-record {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-history-aside {
        grid-template-columns: 1fr;
    }
}

/* Responsive layout refinements for tablet widths and 4:3 displays. */
@media (max-width: 1100px) {
    body.authenticated-app .dashboard-topbar {
        gap: 12px;
    }

    body.authenticated-app .macos-sidebar {
        width: 220px;
    }

    body.authenticated-app .dashboard-topbar {
        left: 220px;
    }

    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-left: calc(220px + 24px);
        padding-right: 24px;
    }

    body.authenticated-app .patient-dashboard-header,
    body.authenticated-app .patient-page-header,
    body.authenticated-app .admin-dashboard-header {
        gap: 16px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .calendar-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-booking-fields,
    body.authenticated-app .patient-profile-field-grid,
    body.authenticated-app .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .top-nav,
    body.app-page .top-nav,
    body.auth-page .top-nav {
        padding: 8px 16px 0;
    }

    .nav-shell,
    body.app-page .nav-shell,
    body.auth-page .nav-shell {
        border-radius: 22px;
    }

    .nav-links,
    body.app-page .nav-links,
    body.auth-page .nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0 4px;
    }

    .nav-links.nav-links-open {
        display: flex;
    }

    .nav-links .nav-link {
        justify-content: flex-start;
        width: 100%;
        border-radius: 14px;
        padding: 0.7rem 0.85rem;
    }

    .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.authenticated-app .dashboard-topbar {
        left: 0;
    }

    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    body.authenticated-app .macos-sidebar {
        position: static;
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: visible;
        border-radius: var(--app-radius-lg);
        box-shadow: var(--app-shadow-card);
    }

    body.authenticated-app .macos-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.authenticated-app .patient-dashboard-header,
    body.authenticated-app .patient-page-header,
    body.authenticated-app .admin-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-dashboard-header-action,
    body.authenticated-app .patient-page-header .dashboard-button {
        width: 100%;
    }

    body.authenticated-app .patient-dashboard-header-action .dashboard-button,
    body.authenticated-app .patient-page-header .dashboard-button {
        width: 100%;
    }

    body.authenticated-app .patient-next-appointment {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .patient-next-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    body.authenticated-app .patient-appointment-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .patient-appointment-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    body.authenticated-app .patient-appointments-layout,
    body.authenticated-app .patient-booking-layout,
    body.authenticated-app .patient-history-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-appointments-aside,
    body.authenticated-app .patient-booking-aside,
    body.authenticated-app .patient-history-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.landing-page main {
        padding-top: 88px;
    }

    body.landing-page .hero {
        min-height: 0;
        gap: 32px;
    }

    body.landing-page .hero h1 {
        font-size: clamp(3.4rem, 8vw, 6rem);
    }
}

@media (max-width: 700px) {
    body.app-page main,
    body.app-page main.main,
    body.app-page main.admin-layout-main,
    body.auth-page main.main {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.authenticated-app .macos-sidebar-nav,
    body.authenticated-app .patient-appointments-aside,
    body.authenticated-app .patient-booking-aside,
    body.authenticated-app .patient-history-aside,
    body.authenticated-app .patient-booking-fields,
    body.authenticated-app .patient-profile-field-grid,
    body.authenticated-app .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-next-appointment,
    body.authenticated-app .patient-appointment-card {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-next-action,
    body.authenticated-app .patient-appointment-actions {
        grid-column: auto;
    }

    body.authenticated-app .patient-next-empty,
    body.authenticated-app .patient-appointments-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-booking-time-heading,
    body.authenticated-app .patient-booking-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .patient-booking-actions .dashboard-button {
        width: 100%;
    }

    body.landing-page .hero,
    body.landing-page .story-section {
        grid-template-columns: 1fr;
    }

    body.landing-page .hero-media {
        order: -1;
    }

    body.landing-page .hero-image {
        height: min(78vw, 520px);
    }
}

/* Shared authenticated shell refinements for tablets, 4:3 screens and collapsed navigation. */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(244, 251, 246, 0.24);
    border-radius: 8px;
    background: transparent;
    color: #f4fbf6;
    font-size: 1.3rem;
    line-height: 1;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    border-color: var(--brand);
    background: var(--app-sidebar-raised);
}

body.authenticated-app .admin-layout-shell,
body.authenticated-app .macos-workspace {
    min-width: 0;
}

body.authenticated-app .blogArticles {
    min-width: 0;
}

body.authenticated-app .blogArticles.view {
    max-width: 960px;
    margin: 0 auto;
}

body.authenticated-app .blogArticles.index.content {
    width: 100%;
}

body.authenticated-app .row {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 36px);
    align-items: start;
}

body.authenticated-app .row > .column {
    width: auto;
    margin-left: 0;
}

body.authenticated-app .row > .column-80 {
    width: auto;
}

body.authenticated-app .row .side-nav {
    margin: 0;
    padding: 16px;
    background: var(--paper-strong);
    border: 1px solid var(--line);
    border-radius: var(--app-radius-md);
}

body.authenticated-app .row .side-nav + .side-nav {
    margin-top: 16px;
}

body.sidebar-collapsed .macos-sidebar {
    width: 72px;
}

body.sidebar-collapsed .dashboard-topbar {
    left: 72px;
}

body.sidebar-collapsed main.main,
body.sidebar-collapsed main.admin-layout-main {
    padding-left: calc(72px + clamp(24px, 3vw, 48px));
}

body.sidebar-collapsed .macos-sidebar-title {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .macos-sidebar-title > div {
    display: none;
}

body.sidebar-collapsed .macos-sidebar-title .sidebar-toggle {
    position: absolute;
    top: 14px;
    right: 8px;
    width: 24px;
    height: 24px;
}

body.sidebar-collapsed .macos-sidebar-nav {
    margin-top: 12px;
}

body.sidebar-collapsed .macos-sidebar-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 0;
}

body.sidebar-collapsed .macos-sidebar-item span {
    font-size: 1rem;
}

body.sidebar-collapsed .macos-sidebar-footer .macos-sidebar-item {
    font-size: 0;
}

@media (max-width: 1100px) and (min-width: 961px) {
    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-left: calc(220px + 20px);
        padding-right: 20px;
    }

    body.authenticated-app .macos-sidebar {
        width: 220px;
    }

    body.authenticated-app .dashboard-topbar {
        left: 220px;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.authenticated-app .dashboard-topbar-status {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.authenticated-app .dashboard-topbar-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    body.sidebar-collapsed main.main,
    body.sidebar-collapsed main.admin-layout-main {
        padding-left: 92px;
    }

    body.sidebar-collapsed .dashboard-topbar {
        left: 72px;
    }
}

@media (max-width: 960px) {
    body.authenticated-app .row {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .row .side-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.authenticated-app .row .side-nav .heading {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    body.authenticated-app .row .side-nav + .side-nav {
        margin-top: 0;
    }
}

@media (max-width: 960px) {
    body.authenticated-app .macos-sidebar {
        width: 100%;
    }

    body.sidebar-collapsed .dashboard-topbar {
        left: 0;
    }

    body.sidebar-collapsed main.main,
    body.sidebar-collapsed main.admin-layout-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    body.sidebar-collapsed .macos-sidebar {
        width: 100%;
    }

    body.sidebar-collapsed .macos-sidebar-nav,
    body.sidebar-collapsed .macos-sidebar-footer {
        display: none;
    }

    body.sidebar-collapsed .macos-sidebar-title {
        padding-bottom: 2px;
    }
}

@media (max-aspect-ratio: 4/3) and (min-width: 961px) {
    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-top: 72px;
        padding-bottom: 28px;
    }

    body.authenticated-app .content {
        border-radius: var(--app-radius-md);
    }

    body.authenticated-app .row {
        grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-aspect-ratio: 4/3) and (min-width: 961px) {
    body.authenticated-app .macos-sidebar {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    body.authenticated-app main.main,
    body.authenticated-app main.admin-layout-main {
        padding-top: 76px;
        padding-bottom: 32px;
    }

    body.landing-page main {
        padding-top: 88px;
        padding-bottom: 48px;
    }

    body.landing-page .hero {
        min-height: min(620px, 72vh);
    }

    body.landing-page .hero-image {
        height: min(58vw, 620px);
    }
}

/* Phase B: Patient treatment note detail redesign. */
body.authenticated-app .patient-history-detail-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-history-detail-back {
    flex-shrink: 0;
    color: var(--app-sidebar);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .patient-history-detail-back::before {
    content: "← ";
}

body.authenticated-app .patient-history-detail-back:hover,
body.authenticated-app .patient-history-detail-back:focus-visible {
    color: var(--brand);
}

body.authenticated-app .patient-history-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-history-detail-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-history-detail-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

body.authenticated-app .patient-history-detail-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-history-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

body.authenticated-app .patient-history-detail-meta > div {
    padding: 14px 16px;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .patient-history-detail-meta span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.authenticated-app .patient-history-detail-meta strong {
    display: block;
    color: var(--color-headings);
    font-size: 0.88rem;
    font-weight: 600;
}

body.authenticated-app .patient-history-note {
    padding: 22px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--app-workspace);
}

body.authenticated-app .patient-history-note p {
    margin: 0;
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.7;
}

body.authenticated-app.theme-dark .patient-history-detail-meta > div,
body.authenticated-app.theme-dark .patient-history-note {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .patient-history-detail-back {
    color: var(--brand);
}

@media (max-width: 1100px) {
    body.authenticated-app .patient-history-detail-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-history-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.authenticated-app .patient-history-detail-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-history-aside {
        grid-template-columns: 1fr;
    }
}

/* Phase B: Patient diary redesign. */
body.authenticated-app .patient-diary-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-diary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-diary-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-diary-panel-heading,
body.authenticated-app .patient-diary-history-heading,
body.authenticated-app .patient-diary-section-heading,
body.authenticated-app .patient-diary-entry-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

body.authenticated-app .patient-diary-panel-heading {
    margin-bottom: 22px;
}

body.authenticated-app .patient-diary-panel-heading h2,
body.authenticated-app .patient-diary-history-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-diary-required {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

body.authenticated-app .patient-diary-form {
    margin: 0;
}

body.authenticated-app .patient-diary-top-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

body.authenticated-app .patient-diary-field {
    min-width: 0;
}

body.authenticated-app .patient-diary-field label,
body.authenticated-app .patient-diary-field-label,
body.authenticated-app .patient-diary-form-section > label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .patient-diary-field input[type="date"],
body.authenticated-app .patient-diary-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .patient-diary-field input[type="date"] {
    min-height: 46px;
}

body.authenticated-app .patient-diary-form textarea {
    min-height: 110px;
    resize: vertical;
}

body.authenticated-app .patient-diary-field input[type="date"]:focus,
body.authenticated-app .patient-diary-form textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .patient-diary-exercise-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.authenticated-app .patient-diary-exercise-options .exercise-option span {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--muted);
}

body.authenticated-app .patient-diary-exercise-options .exercise-option input:checked + span {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

body.authenticated-app .patient-diary-form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-diary-section-heading {
    margin-bottom: 12px;
}

body.authenticated-app .patient-diary-section-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-diary-pain-value {
    color: var(--brand);
    font-size: 0.9rem;
    font-weight: 700;
}

body.authenticated-app .patient-diary-pain-options {
    display: grid;
    grid-template-columns: repeat(11, minmax(34px, 1fr));
    gap: 7px;
}

body.authenticated-app .patient-diary-pain-options .pain-option span {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--muted);
}

body.authenticated-app .patient-diary-pain-options .pain-option input:checked + span {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--button-text);
}

body.authenticated-app .patient-diary-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .patient-diary-detail-grid .patient-diary-form-section {
    min-width: 0;
}

body.authenticated-app .patient-diary-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-diary-form-actions .dashboard-button {
    min-width: 170px;
    border-radius: 10px;
}

body.authenticated-app .patient-diary-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .patient-diary-info-card {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-diary-info-card h3 {
    margin: 0 0 8px;
    color: var(--color-headings);
    font-size: 0.95rem;
    font-weight: 600;
}

body.authenticated-app .patient-diary-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app .patient-diary-history {
    margin-top: 22px;
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-diary-history-heading {
    margin-bottom: 18px;
}

body.authenticated-app .patient-diary-entry-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.authenticated-app .patient-diary-entry {
    min-width: 0;
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .patient-diary-entry-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-diary-entry-pain {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--brand);
}

body.authenticated-app .patient-diary-entry-pain strong {
    font-size: 1.45rem;
    line-height: 1;
}

body.authenticated-app .patient-diary-entry-pain small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

body.authenticated-app .patient-diary-entry-status {
    margin: 14px 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

body.authenticated-app .patient-diary-entry-experience {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

body.authenticated-app .patient-diary-entry-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-diary-entry-details span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.authenticated-app .patient-diary-entry-details p {
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app.theme-dark .patient-diary-field input[type="date"],
body.authenticated-app.theme-dark .patient-diary-form textarea,
body.authenticated-app.theme-dark .patient-diary-entry,
body.authenticated-app.theme-dark .patient-diary-exercise-options .exercise-option span,
body.authenticated-app.theme-dark .patient-diary-pain-options .pain-option span {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .patient-diary-exercise-options .exercise-option input:checked + span {
    background: var(--brand-soft);
    color: var(--brand);
}

@media (max-width: 1100px) {
    body.authenticated-app .patient-diary-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-diary-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.authenticated-app .patient-diary-entry-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .patient-diary-top-fields,
    body.authenticated-app .patient-diary-detail-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-diary-pain-options {
        grid-template-columns: repeat(6, minmax(34px, 1fr));
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-diary-aside {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-diary-entry-details {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-diary-form-actions .dashboard-button {
        width: 100%;
    }
}

/* Phase B: Patient personal information redesign. */
body.authenticated-app .patient-profile-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .patient-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .patient-profile-main {
    min-width: 0;
}

body.authenticated-app .patient-profile-panel,
body.authenticated-app .patient-profile-picture-panel,
body.authenticated-app .patient-profile-info-card {
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .patient-profile-panel {
    padding: 24px;
}

body.authenticated-app .patient-profile-panel-heading {
    margin-bottom: 20px;
}

body.authenticated-app .patient-profile-panel-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .patient-profile-form {
    margin: 0;
}

body.authenticated-app .patient-profile-form-section {
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-profile-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body.authenticated-app .patient-profile-form-heading {
    margin-bottom: 16px;
}

body.authenticated-app .patient-profile-form-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-profile-form-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

body.authenticated-app .patient-profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .patient-profile-field {
    min-width: 0;
}

body.authenticated-app .patient-profile-field-full {
    grid-column: 1 / -1;
}

body.authenticated-app .patient-profile-field label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .patient-profile-field input,
body.authenticated-app .patient-profile-field select {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .patient-profile-field input:focus,
body.authenticated-app .patient-profile-field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .patient-profile-field .phone-input-wrap {
    display: flex;
    min-height: 46px;
    align-items: center;
    margin-top: 6px;
    padding-left: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
}

body.authenticated-app .patient-profile-field .phone-input-wrap:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

body.authenticated-app .patient-profile-field .phone-prefix {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

body.authenticated-app .patient-profile-field .phone-input-wrap input {
    min-height: 44px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.authenticated-app .patient-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .patient-profile-form-actions .dashboard-button {
    min-width: 200px;
    border-radius: 10px;
}

body.authenticated-app .patient-profile-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .patient-profile-picture-panel,
body.authenticated-app .patient-profile-info-card {
    padding: 18px;
}

body.authenticated-app .patient-profile-picture-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

body.authenticated-app .patient-profile-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: cover;
    border-radius: 18px;
    background: var(--paper);
}

body.authenticated-app .patient-profile-picture-header h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .patient-profile-picture-form {
    margin: 0;
}

body.authenticated-app .patient-profile-picture-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .patient-profile-picture-form input[type="file"] {
    width: 100%;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.8rem;
}

body.authenticated-app .patient-profile-upload-note {
    margin: 8px 0 14px;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

body.authenticated-app .patient-profile-picture-form .dashboard-button {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
}

body.authenticated-app .patient-profile-info-card h3 {
    margin: 0 0 8px;
    color: var(--color-headings);
    font-size: 0.95rem;
    font-weight: 600;
}

body.authenticated-app .patient-profile-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app.theme-dark .patient-profile-field input,
body.authenticated-app.theme-dark .patient-profile-field select,
body.authenticated-app.theme-dark .patient-profile-field .phone-input-wrap,
body.authenticated-app.theme-dark .patient-profile-avatar {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .patient-profile-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-profile-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.authenticated-app .patient-profile-field-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-profile-field-full {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    body.authenticated-app .patient-profile-aside {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .patient-profile-form-actions .dashboard-button {
        width: 100%;
    }

    body.authenticated-app .patient-profile-picture-header {
        align-items: flex-start;
    }
}
/* Phase B: Physiotherapist dashboard redesign. */
body.authenticated-app .physiotherapist-dashboard-redesign {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .physio-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

body.authenticated-app .physio-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .physio-summary-card p {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

body.authenticated-app .physio-summary-card strong {
    display: block;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.45rem;
    line-height: 1;
}

body.authenticated-app .physio-dashboard-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .physio-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.authenticated-app .physio-panel-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .physio-patient-table-wrap {
    width: 100%;
    overflow-x: auto;
}

body.authenticated-app .physio-patient-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

body.authenticated-app .physio-patient-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.authenticated-app .physio-patient-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.84rem;
    vertical-align: middle;
}

body.authenticated-app .physio-patient-table tbody tr:last-child td {
    border-bottom: 0;
}

body.authenticated-app .physio-patient-table tbody tr:hover {
    background: var(--app-workspace);
}

body.authenticated-app .physio-patient-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

body.authenticated-app .physio-patient-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
}

body.authenticated-app .physio-patient-identity > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body.authenticated-app .physio-patient-table .patient-name {
    color: var(--color-headings);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .physio-patient-table .patient-name:hover,
body.authenticated-app .physio-patient-table .patient-name:focus-visible {
    color: var(--brand);
}

body.authenticated-app .physio-patient-table .patient-email {
    color: var(--muted);
    font-size: 0.74rem;
}

body.authenticated-app .physio-patient-table .patient-action {
    text-align: right;
    white-space: nowrap;
}

body.authenticated-app .physio-patient-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--app-surface);
    color: var(--app-sidebar);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .physio-patient-action::after {
    content: " →";
}

body.authenticated-app .physio-patient-action:hover,
body.authenticated-app .physio-patient-action:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

/* Calendar panel. */
body.authenticated-app .physio-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
    gap: 18px;
    align-items: start;
}

body.authenticated-app .appointment-calendar {
    min-width: 0;
}

body.authenticated-app .calendar-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.authenticated-app .calendar-navigation strong {
    min-width: 130px;
    color: var(--color-headings);
    font-size: 0.88rem;
    text-align: center;
}

body.authenticated-app .calendar-nav-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--app-surface);
    color: var(--app-sidebar);
}

body.authenticated-app .calendar-nav-button:hover,
body.authenticated-app .calendar-nav-button:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
}

body.authenticated-app .calendar-weekdays,
body.authenticated-app .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

body.authenticated-app .calendar-weekdays {
    margin-bottom: 6px;
}

body.authenticated-app .calendar-weekdays span {
    padding: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

body.authenticated-app .calendar-grid {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--app-radius-sm);
}

body.authenticated-app .calendar-day {
    min-height: 100px;
    padding: 7px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

body.authenticated-app .calendar-day:nth-child(7n) {
    border-right: 0;
}

body.authenticated-app .calendar-day-empty {
    background: var(--paper-alt);
}

body.authenticated-app .calendar-day-number {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

body.authenticated-app .calendar-appointment {
    width: 100%;
    margin: 3px 0 0;
    padding: 5px 6px;
    border: 0;
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--app-sidebar);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

body.authenticated-app .calendar-appointment:hover,
body.authenticated-app .calendar-appointment:focus-visible {
    background: var(--brand);
    color: var(--button-text);
}

body.authenticated-app .physio-appointment-details {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-workspace);
}

body.authenticated-app .physio-appointment-details h3 {
    margin: 0 0 8px;
    color: var(--color-headings);
    font-size: 1rem;
}

body.authenticated-app .physio-appointment-details p {
    color: var(--muted);
    font-size: 0.82rem;
}

body.authenticated-app .appointment-record-link {
    display: inline-flex;
    margin-top: 10px;
    color: var(--app-sidebar);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .appointment-record-link::after {
    content: " →";
}

body.authenticated-app .appointment-record-link:hover,
body.authenticated-app .appointment-record-link:focus-visible {
    color: var(--brand);
}

/* Empty states. */
body.authenticated-app .physiotherapist-empty {
    padding: 20px;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .physiotherapist-empty h3 {
    margin: 0 0 6px;
    color: var(--color-headings);
    font-size: 1rem;
}

body.authenticated-app .physiotherapist-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

/* Dark mode. */
body.authenticated-app.theme-dark .calendar-day,
body.authenticated-app.theme-dark .physiotherapist-empty {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .calendar-day-empty {
    background: rgba(255, 255, 255, 0.02);
}

body.authenticated-app.theme-dark .physio-patient-action,
body.authenticated-app.theme-dark .appointment-record-link {
    color: var(--brand);
}

/* Responsive physiotherapist dashboard. */
@media (max-width: 1100px) {
    body.authenticated-app .physio-summary-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-calendar-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    body.authenticated-app .physio-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .calendar-navigation {
        align-self: stretch;
        justify-content: space-between;
    }

    body.authenticated-app .calendar-day {
        min-height: 82px;
    }
}

@media (max-width: 650px) {
    body.authenticated-app .physio-dashboard-panel {
        padding: 16px;
    }

    body.authenticated-app .physio-summary-grid {
        gap: 10px;
    }

    body.authenticated-app .calendar-weekdays span {
        font-size: 0.58rem;
    }

    body.authenticated-app .calendar-day {
        min-height: 70px;
        padding: 5px;
    }

    body.authenticated-app .calendar-appointment {
        font-size: 0.58rem;
    }
}
/* Phase B: Physiotherapist patient record redesign. */
body.authenticated-app .physio-patient-record-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .physio-patient-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

body.authenticated-app .physio-patient-summary-contact {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
}

body.authenticated-app .physio-patient-record-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

body.authenticated-app .physio-patient-details-panel,
body.authenticated-app .physio-patient-history-panel,
body.authenticated-app .physio-add-note-panel,
body.authenticated-app .physio-patient-appointments-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .physio-patient-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

body.authenticated-app .physio-patient-details > div {
    min-width: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

body.authenticated-app .physio-patient-details > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

body.authenticated-app .physio-patient-details > div:nth-child(odd) {
    padding-right: 16px;
}

body.authenticated-app .physio-patient-details > div:nth-child(even) {
    padding-left: 16px;
}

body.authenticated-app .physio-patient-details dt {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.authenticated-app .physio-patient-details dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.86rem;
    line-height: 1.5;
}

body.authenticated-app .physio-history-timeline {
    position: relative;
    display: grid;
    padding-left: 18px;
}

body.authenticated-app .physio-history-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    width: 1px;
    background: var(--line);
}

body.authenticated-app .physio-history-record {
    position: relative;
    display: grid;
    grid-template-columns: minmax(100px, 120px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0 18px 18px;
}

body.authenticated-app .physio-history-record + .physio-history-record {
    border-top: 1px solid var(--line);
}

body.authenticated-app .physio-history-marker {
    position: absolute;
    top: 27px;
    left: -18px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

body.authenticated-app .physio-history-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.authenticated-app .physio-history-date strong {
    color: var(--color-headings);
    font-size: 0.84rem;
    font-weight: 700;
}

body.authenticated-app .physio-history-date span {
    color: var(--muted);
    font-size: 0.74rem;
}

body.authenticated-app .physio-history-content {
    min-width: 0;
}

body.authenticated-app .physio-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

body.authenticated-app .physio-history-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 0.94rem;
    font-weight: 600;
}

body.authenticated-app .physio-history-content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.55;
}

body.authenticated-app .physio-history-appointment {
    margin-bottom: 8px !important;
    color: var(--app-sidebar) !important;
    font-size: 0.75rem !important;
}

body.authenticated-app .physio-history-appointment a {
    color: inherit;
    font-weight: 700;
}

body.authenticated-app .physio-history-edit {
    flex-shrink: 0;
    color: var(--app-sidebar);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .physio-history-edit:hover,
body.authenticated-app .physio-history-edit:focus-visible {
    color: var(--brand);
}

body.authenticated-app .physio-add-note-panel {
    margin-top: 0;
}

body.authenticated-app .physio-appointment-list {
    display: grid;
}

body.authenticated-app .physio-appointment-list-item {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .physio-appointment-list-item strong,
body.authenticated-app .physio-appointment-list-item span {
    display: block;
}

body.authenticated-app .physio-appointment-list-item strong {
    color: var(--color-headings);
    font-size: 0.86rem;
}

body.authenticated-app .physio-appointment-list-item > div span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.76rem;
}

body.authenticated-app .physio-appointment-status {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

body.authenticated-app .physio-appointment-status-upcoming {
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

body.authenticated-app .physio-appointment-status-pending {
    background: rgba(190, 113, 37, 0.12);
    color: #99530e;
}

body.authenticated-app .physio-appointment-status-complete {
    background: rgba(42, 129, 83, 0.12);
    color: #26744b;
}

body.authenticated-app .physio-edit-note-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

body.authenticated-app .physio-edit-note-details dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

body.authenticated-app .physio-edit-note-details dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.8rem;
}

body.authenticated-app .physio-history-form {
    margin: 0;
}

body.authenticated-app .physio-history-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .physio-history-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .physio-history-form select,
body.authenticated-app .physio-history-form input,
body.authenticated-app .physio-history-form textarea {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .physio-history-form select,
body.authenticated-app .physio-history-form input {
    min-height: 46px;
}

body.authenticated-app .physio-history-form textarea {
    min-height: 130px;
    resize: vertical;
}

body.authenticated-app .physio-history-form select:focus,
body.authenticated-app .physio-history-form input:focus,
body.authenticated-app .physio-history-form textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .physio-history-notes-field {
    margin-top: 16px;
}

body.authenticated-app .physio-history-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .physio-history-form-actions .dashboard-button {
    min-width: 170px;
    border-radius: 10px;
}

body.authenticated-app.theme-dark .physio-history-form select,
body.authenticated-app.theme-dark .physio-history-form input,
body.authenticated-app.theme-dark .physio-history-form textarea {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .physio-history-edit {
    color: var(--brand);
}

@media (max-width: 1100px) {
    body.authenticated-app .physio-patient-summary-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-patient-record-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-appointment-list-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.authenticated-app .physio-appointment-list-item .physio-patient-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .physio-patient-details,
    body.authenticated-app .physio-history-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-patient-details > div:nth-child(odd),
    body.authenticated-app .physio-patient-details > div:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }

    body.authenticated-app .physio-history-record {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Phase B: Physiotherapist edit treatment note redesign. */
body.authenticated-app .physio-edit-note-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .physio-edit-note-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .physio-edit-note-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .physio-edit-note-date {
    max-width: 420px;
}

body.authenticated-app .physio-edit-note-panel .physio-history-form {
    margin: 0;
}

body.authenticated-app .physio-edit-note-panel label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .physio-edit-note-panel input,
body.authenticated-app .physio-edit-note-panel textarea {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .physio-edit-note-panel input {
    min-height: 46px;
}

body.authenticated-app .physio-edit-note-panel textarea {
    min-height: 220px;
    resize: vertical;
}

body.authenticated-app .physio-edit-note-panel input:focus,
body.authenticated-app .physio-edit-note-panel textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .physio-edit-note-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app.theme-dark .physio-edit-note-panel input,
body.authenticated-app.theme-dark .physio-edit-note-panel textarea {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .physio-edit-note-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-edit-note-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.authenticated-app .physio-edit-note-aside {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .physio-edit-note-date {
        max-width: none;
    }

    body.authenticated-app .physio-history-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.authenticated-app .physio-history-form-actions .dashboard-button {
        width: 100%;
    }
}
/* Phase B: Admin dashboard redesign. */
body.authenticated-app .admin-dashboard-redesign {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

/* Admin overview summary cards. */
body.authenticated-app .admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

body.authenticated-app .admin-summary-grid-seven {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.authenticated-app .admin-summary-card-link {
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

body.authenticated-app .admin-summary-card-link:hover,
body.authenticated-app .admin-summary-card-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-card), 0 0 0 2px var(--brand-soft);
}

body.authenticated-app .admin-summary-card > span:last-child {
    min-width: 0;
}

body.authenticated-app .admin-card-label,
body.authenticated-app .admin-card-period {
    display: block;
}

body.authenticated-app .admin-card-label {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

body.authenticated-app .admin-card-period {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.68rem;
}

body.authenticated-app .admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-record-filter-bar {
    align-items: flex-end;
}

body.authenticated-app .admin-filter-bar label {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

body.authenticated-app .admin-date-range-field {
    display: grid;
    gap: 5px;
}


body.authenticated-app .admin-date-range-field label {
    color: var(--muted);
    font-size: 0.7rem;
}

body.authenticated-app .admin-filter-bar select,
body.authenticated-app .admin-filter-bar input {
    width: auto;
    min-width: 130px;
    margin: 0;
}

body.authenticated-app .admin-period-dropdown {
    position: relative;
    min-width: 150px;
}

body.authenticated-app .admin-period-native {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.authenticated-app .admin-period-trigger {
    display: flex;
    width: 100%;
    min-width: 150px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--color-headings);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
}

body.authenticated-app .admin-period-trigger:hover,
body.authenticated-app .admin-period-trigger:focus-visible {
    border-color: var(--brand);
    outline: 2px solid var(--brand-soft);
}

body.authenticated-app .admin-period-arrow {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

body.authenticated-app .admin-period-trigger[aria-expanded="true"] .admin-period-arrow {
    transform: rotate(225deg) translate(-1px, -1px);
}

body.authenticated-app .admin-period-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card), 0 12px 30px rgba(21, 39, 32, 0.14);
}

body.authenticated-app .admin-period-menu[hidden] {
    display: none;
}

body.authenticated-app .admin-period-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-headings);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
}

body.authenticated-app .admin-period-option:hover,
body.authenticated-app .admin-period-option:focus-visible,
body.authenticated-app .admin-period-option-selected {
    background: var(--brand-soft);
    color: var(--brand);
    outline: none;
}

body.authenticated-app .admin-period-check {
    visibility: hidden;
    color: var(--brand);
    font-size: 0.85rem;
}

body.authenticated-app .admin-period-option-selected .admin-period-check {
    visibility: visible;
}

body.authenticated-app .admin-filter-bar input[type="search"] {
    min-width: 190px;
}

body.authenticated-app .admin-custom-date-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.authenticated-app .admin-custom-date-fields[hidden] {
    display: none;
}

body.authenticated-app .admin-custom-date-picker {
    position: relative;
}

body.authenticated-app .admin-single-date-picker {
    display: inline-block;
    max-width: 100%;
}

body.authenticated-app .admin-date-hidden-value {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.authenticated-app .admin-date-single-fields {
    display: flex;
    align-items: end;
    gap: 8px;
}

body.authenticated-app .admin-date-time {
    width: auto;
    min-width: 112px;
    margin: 0;
}

body.authenticated-app .admin-date-range-fields {
    display: flex;
    align-items: end;
    gap: 10px;
}

body.authenticated-app .admin-date-field {
    display: grid;
    gap: 5px;
}

body.authenticated-app .admin-date-range-field label,
body.authenticated-app .admin-date-field label {
    color: var(--muted);
    font-size: 0.7rem;
}

body.authenticated-app .admin-date-trigger {
    min-width: 138px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
}

body.authenticated-app .admin-date-trigger-filled {
    color: var(--color-headings);
}

body.authenticated-app .admin-date-trigger:hover,
body.authenticated-app .admin-date-trigger:focus-visible,
body.authenticated-app .admin-date-nav:hover,
body.authenticated-app .admin-date-nav:focus-visible,
body.authenticated-app .admin-date-clear:hover,
body.authenticated-app .admin-date-clear:focus-visible {
    border-color: var(--brand);
    outline: 2px solid var(--brand-soft);
}

body.authenticated-app .admin-date-range-separator {
    padding-bottom: 10px;
    color: var(--muted);
    font-size: 0.78rem;
}

body.authenticated-app .admin-date-calendar {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    left: 0;
    width: min(310px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card), 0 12px 30px rgba(21, 39, 32, 0.14);
}

body.authenticated-app .admin-date-calendar[hidden] {
    display: none;
}

body.authenticated-app .admin-date-calendar-header,
body.authenticated-app .admin-date-calendar-footer,
body.authenticated-app .admin-date-weekdays,
body.authenticated-app .admin-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
}

body.authenticated-app .admin-date-calendar-header {
    grid-template-columns: 34px 1fr 34px;
    margin-bottom: 14px;
    text-align: center;
}

body.authenticated-app .admin-date-calendar-header strong {
    color: var(--color-headings);
    font-size: 0.9rem;
}

body.authenticated-app .admin-date-nav {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--brand);
    font-size: 1.4rem;
    line-height: 1;
    background: transparent;
}

body.authenticated-app .admin-date-weekdays {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

body.authenticated-app .admin-date-grid {
    row-gap: 3px;
}

body.authenticated-app .admin-date-day {
    width: 34px;
    height: 34px;
    justify-self: center;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-headings);
    font-size: 0.78rem;
    line-height: 32px;
    text-align: center;
}

body.authenticated-app .admin-date-day:hover,
body.authenticated-app .admin-date-day:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}

body.authenticated-app .admin-date-day-empty {
    pointer-events: none;
}

body.authenticated-app .admin-date-day-today {
    border-color: var(--brand);
    font-weight: 700;
}

body.authenticated-app .admin-date-day-selected {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

body.authenticated-app .admin-date-day-in-range {
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--color-headings);
}

body.authenticated-app .admin-date-calendar-footer {
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-date-calendar-footer span {
    color: var(--muted);
    font-size: 0.7rem;
}

body.authenticated-app .admin-date-clear {
    margin: 0;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--brand);
    font-size: 0.7rem;
    background: transparent;
}

body.authenticated-app .admin-records-page,
body.authenticated-app .admin-records-panel {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.authenticated-app .admin-records-panel {
    padding: 24px;
}

body.authenticated-app .admin-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-summary-card p {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

body.authenticated-app .admin-summary-card strong {
    display: block;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.45rem;
    line-height: 1;
}

/* Patients + appointments overview layout. */
body.authenticated-app .admin-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-overview-panel {
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-overview-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.authenticated-app .admin-overview-heading > div {
    min-width: 0;
}

body.authenticated-app .admin-overview-heading h2 {
    margin: 0;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

body.authenticated-app .admin-overview-heading > div > p:last-child {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

body.authenticated-app .admin-panel-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Admin patient table. */
body.authenticated-app .admin-redesign-table-wrap {
    width: 100%;
    overflow-x: auto;
}

body.authenticated-app .admin-redesign-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

body.authenticated-app .admin-redesign-table th {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.authenticated-app .admin-redesign-table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.82rem;
    vertical-align: middle;
}

body.authenticated-app .admin-redesign-table tbody tr:last-child td {
    border-bottom: 0;
}

body.authenticated-app .admin-redesign-table tbody tr:hover {
    background: var(--app-workspace);
}

body.authenticated-app .admin-patient-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
}

body.authenticated-app .admin-patient-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
}

body.authenticated-app .admin-patient-identity > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

body.authenticated-app .admin-patient-identity strong {
    color: var(--color-headings);
    font-size: 0.87rem;
    font-weight: 700;
}

body.authenticated-app .admin-table-secondary {
    color: var(--muted);
    font-size: 0.74rem;
}

body.authenticated-app .admin-table-action {
    text-align: right;
    white-space: nowrap;
}

/* Shared admin row actions. */
body.authenticated-app .admin-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--app-surface);
    color: var(--app-sidebar);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .admin-row-action:hover,
body.authenticated-app .admin-row-action:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--app-sidebar);
}

body.authenticated-app .admin-row-action-danger {
    color: #a33b46;
}

body.authenticated-app .admin-row-action-danger:hover,
body.authenticated-app .admin-row-action-danger:focus-visible {
    border-color: #a33b46;
    background: #f8e8ea;
    color: #8a2f38;
}

/* Appointment overview list. */
body.authenticated-app .admin-redesign-appointment-list {
    display: grid;
    gap: 10px;
}

body.authenticated-app .admin-redesign-appointment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .admin-redesign-appointment-date {
    display: flex;
    width: 50px;
    min-height: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--brand-soft);
}

body.authenticated-app .admin-redesign-appointment-date span {
    color: var(--brand);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.authenticated-app .admin-redesign-appointment-date strong {
    margin-top: 2px;
    color: var(--color-headings);
    font-family: "Lexend", sans-serif;
    font-size: 1.15rem;
    line-height: 1;
}

body.authenticated-app .admin-redesign-appointment-details {
    min-width: 0;
}

body.authenticated-app .admin-redesign-appointment-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body.authenticated-app .admin-redesign-appointment-heading strong {
    color: var(--color-headings);
    font-size: 0.9rem;
    font-weight: 700;
}

body.authenticated-app .admin-redesign-appointment-details p {
    margin: 5px 0 2px;
    color: var(--muted);
    font-size: 0.76rem;
}

body.authenticated-app .admin-redesign-appointment-details > span {
    color: var(--muted);
    font-size: 0.74rem;
}

body.authenticated-app .admin-appointment-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.64rem;
    font-weight: 700;
}

body.authenticated-app .admin-appointment-status-past {
    background: var(--paper-alt);
    color: var(--muted);
}

body.authenticated-app .admin-redesign-appointment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Empty states. */
body.authenticated-app .admin-empty-state {
    padding: 20px;
    border-radius: var(--app-radius-sm);
    background: var(--paper);
}

body.authenticated-app .admin-empty-state h3 {
    margin: 0 0 6px;
    color: var(--color-headings);
    font-size: 1rem;
}

body.authenticated-app .admin-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

/* Dark mode. */
body.authenticated-app.theme-dark .admin-redesign-appointment,
body.authenticated-app.theme-dark .admin-empty-state {
    background: rgba(255, 255, 255, 0.04);
}

body.authenticated-app.theme-dark .admin-row-action {
    background: var(--app-surface);
    color: var(--brand);
}

body.authenticated-app.theme-dark .admin-row-action-danger {
    color: #ff9aa5;
}

/* Responsive admin dashboard. */
@media (max-width: 1250px) {
    body.authenticated-app .admin-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    body.authenticated-app .admin-summary-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-summary-grid-seven {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-overview-panel {
        padding: 16px;
    }

    body.authenticated-app .admin-overview-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .admin-redesign-appointment {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .admin-redesign-appointment-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    body.authenticated-app .admin-summary-grid-seven {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-filter-bar,
    body.authenticated-app .admin-custom-date-fields {
        align-items: stretch;
        flex-direction: column;
    }

    body.authenticated-app .admin-filter-bar select,
    body.authenticated-app .admin-filter-bar input,
    body.authenticated-app .admin-filter-bar button {
        width: 100%;
    }

    body.authenticated-app .admin-custom-date-picker,
    body.authenticated-app .admin-date-range-fields {
        width: 100%;
    }

    body.authenticated-app .admin-date-range-fields {
        align-items: stretch;
        flex-direction: column;
    }

    body.authenticated-app .admin-date-range-separator {
        display: none;
    }

    body.authenticated-app .admin-date-trigger {
        width: 100%;
    }

    body.authenticated-app .admin-date-calendar {
        left: 50%;
        transform: translateX(-50%);
    }

    body.authenticated-app .admin-redesign-appointment {
        grid-template-columns: 1fr;
    }
}
/* Phase B: Admin edit patient redesign. */
body.authenticated-app .admin-edit-patient-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-edit-patient-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-edit-patient-panel {
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-edit-patient-form {
    margin: 0;
}

body.authenticated-app .admin-edit-patient-section {
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-edit-patient-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body.authenticated-app .admin-form-section-heading {
    margin-bottom: 16px;
}

body.authenticated-app .admin-form-section-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .admin-form-section-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body.authenticated-app .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.authenticated-app .admin-form-field {
    min-width: 0;
}

body.authenticated-app .admin-form-field-full {
    grid-column: 1 / -1;
}

body.authenticated-app .admin-form-field label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .admin-form-field input,
body.authenticated-app .admin-form-field select,
body.authenticated-app .admin-form-field textarea {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-form-field input,
body.authenticated-app .admin-form-field select {
    min-height: 46px;
}

body.authenticated-app .admin-form-field textarea {
    min-height: 90px;
    resize: vertical;
}

body.authenticated-app .admin-form-field select[multiple] {
    min-height: 130px;
    padding: 8px;
}

body.authenticated-app .admin-form-field input:focus,
body.authenticated-app .admin-form-field select:focus,
body.authenticated-app .admin-form-field textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .admin-form-help {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

body.authenticated-app .admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-form-actions .dashboard-button {
    min-width: 180px;
    border-radius: 10px;
}

/* Right-side patient information. */
body.authenticated-app .admin-edit-patient-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-patient-summary-card {
    padding: 18px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-patient-summary-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

body.authenticated-app .admin-patient-summary-avatar {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 700;
}

body.authenticated-app .admin-patient-summary-heading h3 {
    margin: 0;
    color: var(--color-headings);
    font-size: 1rem;
    font-weight: 600;
}

body.authenticated-app .admin-patient-summary-card > p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

/* Dark mode. */
body.authenticated-app.theme-dark .admin-form-field input,
body.authenticated-app.theme-dark .admin-form-field select,
body.authenticated-app.theme-dark .admin-form-field textarea {
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive admin patient form. */
@media (max-width: 1100px) {
    body.authenticated-app .admin-edit-patient-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-edit-patient-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-edit-patient-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-form-field-full {
        grid-column: auto;
    }

    body.authenticated-app .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body.authenticated-app .admin-form-actions .dashboard-button {
        width: 100%;
    }
}

/* Phase B: Admin edit appointment redesign. */
body.authenticated-app .admin-edit-appointment-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-edit-appointment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-edit-appointment-panel {
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-edit-appointment-form {
    margin: 0;
}

body.authenticated-app .admin-edit-appointment-form .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

body.authenticated-app .admin-edit-appointment-form .admin-form-field {
    min-width: 0;
}

body.authenticated-app .admin-edit-appointment-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .admin-edit-appointment-form input,
body.authenticated-app .admin-edit-appointment-form select {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-edit-appointment-form input:focus,
body.authenticated-app .admin-edit-appointment-form select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .admin-edit-appointment-form .admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-edit-appointment-form
    .admin-form-actions
    .dashboard-button {
    min-width: 170px;
    border-radius: 10px;
}

body.authenticated-app .admin-edit-appointment-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app.theme-dark .admin-edit-appointment-form input,
body.authenticated-app.theme-dark .admin-edit-appointment-form select {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-edit-appointment-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-edit-appointment-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-edit-appointment-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-edit-appointment-form .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-edit-appointment-form .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body.authenticated-app .admin-edit-appointment-form
        .admin-form-actions
        .dashboard-button {
        width: 100%;
    }
}

/* Phase B: Admin inquiries redesign. */
body.authenticated-app .admin-inquiries-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-inquiries-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-inquiries-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

body.authenticated-app .admin-inquiries-panel-heading h2 {
    margin: 4px 0 0;
}

body.authenticated-app .admin-inquiry-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

body.authenticated-app .admin-inquiry-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body.authenticated-app .admin-inquiry-filter:hover,
body.authenticated-app .admin-inquiry-filter:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}

body.authenticated-app .admin-inquiry-filter-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-list {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-inquiry-item {
    padding: 20px;
    border: 0;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-inquiry-item-unread {
    box-shadow:
        inset 4px 0 0 var(--brand),
        var(--app-shadow-card);
}

body.authenticated-app .admin-inquiry-sender {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

body.authenticated-app .admin-inquiry-avatar {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.88rem;
    font-weight: 800;
}

body.authenticated-app .admin-inquiry-sender-details {
    min-width: 0;
}

body.authenticated-app .admin-inquiry-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.authenticated-app .admin-inquiry-name-row h3 {
    margin: 0;
    font-size: 1rem;
}

body.authenticated-app .admin-inquiry-name-row h3 a {
    color: var(--ink);
    text-decoration: none;
}

body.authenticated-app .admin-inquiry-name-row h3 a:hover,
body.authenticated-app .admin-inquiry-name-row h3 a:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.82rem;
}

body.authenticated-app .admin-inquiry-contact a {
    color: inherit;
    text-decoration: none;
}

body.authenticated-app .admin-inquiry-contact a:hover,
body.authenticated-app .admin-inquiry-contact a:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-date {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

body.authenticated-app .admin-inquiry-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

body.authenticated-app .admin-inquiry-status-unread {
    background: var(--brand-soft);
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-status-awaiting {
    background: rgba(180, 124, 36, 0.12);
    color: #a46b13;
}

body.authenticated-app .admin-inquiry-status-responded {
    background: rgba(39, 126, 84, 0.12);
    color: #277e54;
}

body.authenticated-app .admin-inquiry-message {
    margin: 16px 0;
    padding-left: 58px;
}

body.authenticated-app .admin-inquiry-message p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

body.authenticated-app .admin-inquiry-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-left: 58px;
}

body.authenticated-app .admin-inquiry-view {
    flex: 0 0 auto;
}

body.authenticated-app .admin-inquiry-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

body.authenticated-app .admin-inquiry-action-link {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

body.authenticated-app .admin-inquiry-action-link:hover,
body.authenticated-app .admin-inquiry-action-link:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-delete {
    color: #b14d4d;
}

body.authenticated-app .admin-inquiry-delete:hover,
body.authenticated-app .admin-inquiry-delete:focus-visible {
    color: #8d3434;
}

body.authenticated-app .admin-inquiry-empty {
    padding: 48px 24px;
    text-align: center;
}

body.authenticated-app .admin-inquiry-empty-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.3rem;
}

body.authenticated-app .admin-inquiry-empty h3 {
    margin: 0 0 6px;
}

body.authenticated-app .admin-inquiry-empty p {
    margin: 0;
    color: var(--muted);
}

body.authenticated-app .admin-inquiry-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-inquiry-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

body.authenticated-app .admin-inquiry-pagination p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

body.authenticated-app.theme-dark .admin-inquiry-item {
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 1000px) {
    body.authenticated-app .admin-inquiries-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .admin-inquiry-filters {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    body.authenticated-app .admin-inquiry-sender {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.authenticated-app .admin-inquiry-date {
        grid-column: 2;
    }

    body.authenticated-app .admin-inquiry-message,
    body.authenticated-app .admin-inquiry-actions {
        padding-left: 0;
    }

    body.authenticated-app .admin-inquiry-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body.authenticated-app .admin-inquiry-secondary-actions {
        justify-content: flex-start;
    }

    body.authenticated-app .admin-inquiry-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Phase B: Admin inquiries sizing correction. */
body.authenticated-app .admin-inquiries-panel-heading {
    align-items: center;
}

body.authenticated-app .admin-inquiries-panel-heading h2 {
    margin: 4px 0 0;
    font-size: 1.45rem;
    line-height: 1.2;
}

body.authenticated-app .admin-inquiry-message p {
    font-size: 0.98rem;
    line-height: 1.6;
}

body.authenticated-app .admin-inquiry-view {
    min-width: auto;
    padding: 10px 16px;
    font-size: 0.88rem;
}

body.authenticated-app .admin-inquiry-item {
    padding: 18px 20px;
}

body.authenticated-app .admin-inquiry-filters {
    flex-wrap: nowrap;
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-inquiry-filters {
        flex-wrap: wrap;
    }
}

/* Phase B: Admin inquiry detail redesign. */
body.authenticated-app .admin-inquiry-detail-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-inquiry-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-inquiry-detail-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

body.authenticated-app .admin-inquiry-detail-card,
body.authenticated-app .admin-inquiry-message-card {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-inquiry-detail-sender {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

body.authenticated-app .admin-inquiry-detail-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    font-size: 0.95rem;
}

body.authenticated-app .admin-inquiry-detail-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.authenticated-app .admin-inquiry-detail-name-row h2 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
}

body.authenticated-app .admin-inquiry-detail-date {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

body.authenticated-app .admin-inquiry-detail-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-inquiry-detail-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

body.authenticated-app .admin-inquiry-detail-field > span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.authenticated-app .admin-inquiry-detail-field strong,
body.authenticated-app .admin-inquiry-detail-field a {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

body.authenticated-app .admin-inquiry-detail-field a {
    text-decoration: none;
}

body.authenticated-app .admin-inquiry-detail-field a:hover,
body.authenticated-app .admin-inquiry-detail-field a:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-inquiry-detail-address {
    grid-column: 1 / -1;
}

body.authenticated-app .admin-inquiry-map-link {
    width: fit-content;
    margin-top: 2px;
    color: var(--brand) !important;
    font-size: 0.8rem !important;
}

body.authenticated-app .admin-inquiry-message-card h2 {
    margin: 4px 0 0;
    font-size: 1.25rem;
}

body.authenticated-app .admin-inquiry-full-message {
    margin-top: 18px;
    padding: 20px;
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-inquiry-full-message p {
    margin: 0 0 12px;
    line-height: 1.7;
}

body.authenticated-app .admin-inquiry-full-message p:last-child {
    margin-bottom: 0;
}

body.authenticated-app .admin-inquiry-detail-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-inquiry-action-card .admin-inquiry-status,
body.authenticated-app .admin-inquiry-detail-aside .admin-inquiry-status {
    margin-top: 4px;
}

body.authenticated-app .admin-inquiry-detail-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

body.authenticated-app .admin-inquiry-detail-action {
    width: 100%;
    justify-content: center;
    text-align: center;
}

body.authenticated-app .admin-inquiry-danger-card {
    border: 0;
}

body.authenticated-app .admin-inquiry-detail-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    border: 1px solid rgba(177, 77, 77, 0.28);
    border-radius: 10px;
    background: rgba(177, 77, 77, 0.06);
    color: #b14d4d;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

body.authenticated-app .admin-inquiry-detail-delete:hover,
body.authenticated-app .admin-inquiry-detail-delete:focus-visible {
    background: rgba(177, 77, 77, 0.1);
    color: #8d3434;
}

body.authenticated-app.theme-dark .admin-inquiry-full-message {
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-inquiry-detail-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-inquiry-detail-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-inquiry-detail-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    body.authenticated-app .admin-inquiry-detail-contact-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-inquiry-detail-address {
        grid-column: auto;
    }
}
/* Phase B: Admin inquiry detail sizing correction. */
body.authenticated-app .admin-inquiry-detail-action {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 0.86rem;
    line-height: 1.2;
}

body.authenticated-app .admin-inquiry-full-message {
    padding: 18px 20px;
}

body.authenticated-app .admin-inquiry-full-message p {
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Phase B: Admin users redesign. */
body.authenticated-app .admin-users-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-users-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-users-panel .admin-overview-heading {
    margin-bottom: 18px;
}

body.authenticated-app .admin-users-table-wrap {
    width: 100%;
    overflow-x: auto;
}

body.authenticated-app .admin-users-table {
    width: 100%;
    border-collapse: collapse;
}

body.authenticated-app .admin-users-table th,
body.authenticated-app .admin-users-table td {
    padding: 15px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

body.authenticated-app .admin-users-table th {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.authenticated-app .admin-users-table th a {
    color: inherit;
    text-decoration: none;
}

body.authenticated-app .admin-users-table th a:hover,
body.authenticated-app .admin-users-table th a:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-users-table tbody tr:last-child td {
    border-bottom: 0;
}

body.authenticated-app .admin-users-table tbody tr:hover {
    background: var(--brand-soft);
}

body.authenticated-app .admin-user-name {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

body.authenticated-app .admin-user-name:hover,
body.authenticated-app .admin-user-name:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-users-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    min-width: 250px;
}

body.authenticated-app .admin-user-action-link {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

body.authenticated-app .admin-user-action-link:hover,
body.authenticated-app .admin-user-action-link:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-user-delete {
    color: #b14d4d;
}

body.authenticated-app .admin-user-delete:hover,
body.authenticated-app .admin-user-delete:focus-visible {
    color: #8d3434;
}

body.authenticated-app.theme-dark .admin-users-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 950px) {
    body.authenticated-app .admin-users-actions {
        min-width: 210px;
    }
}

@media (max-width: 760px) {
    body.authenticated-app .admin-users-panel {
        padding: 18px;
    }

    body.authenticated-app .admin-users-table th,
    body.authenticated-app .admin-users-table td {
        padding: 12px 10px;
    }
}
/* Phase B: Admin users sizing correction. */
body.authenticated-app .admin-users-page .patient-page-header .dashboard-button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.88rem;
}

body.authenticated-app .admin-users-table td {
    font-size: 0.9rem;
    line-height: 1.35;
}

body.authenticated-app .admin-users-table .admin-user-name {
    font-size: 0.92rem;
    font-weight: 800;
}

body.authenticated-app .admin-users-table td:nth-child(4),
body.authenticated-app .admin-users-table td:nth-child(5) {
    white-space: nowrap;
    font-size: 0.86rem;
}

body.authenticated-app .admin-users-table td:nth-child(3) {
    min-width: 190px;
}

body.authenticated-app .admin-users-table th:last-child,
body.authenticated-app .admin-users-table td:last-child {
    min-width: 285px;
}

body.authenticated-app .admin-users-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
}

body.authenticated-app .admin-user-action-link {
    font-size: 0.76rem;
}

/* Phase B: Admin user detail redesign. */
body.authenticated-app .admin-user-detail-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-user-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-user-detail-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

body.authenticated-app .admin-user-profile-card,
body.authenticated-app .admin-user-related-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-user-profile-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.authenticated-app .admin-user-detail-avatar {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 800;
}

body.authenticated-app .admin-user-detail-avatar-image,
body.authenticated-app .admin-physiotherapist-avatar-image {
    object-fit: cover;
}

body.authenticated-app .admin-user-profile-heading h2 {
    margin: 3px 0 7px;
    font-size: 1.45rem;
    line-height: 1.2;
}

body.authenticated-app .admin-user-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
}

body.authenticated-app .admin-user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-detail-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

body.authenticated-app .admin-user-detail-field-wide {
    grid-column: 1 / -1;
}

body.authenticated-app .admin-user-detail-field > span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.authenticated-app .admin-user-detail-field strong,
body.authenticated-app .admin-user-detail-field a {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

body.authenticated-app .admin-user-detail-field a {
    text-decoration: none;
}

body.authenticated-app .admin-user-detail-field a:hover,
body.authenticated-app .admin-user-detail-field a:focus-visible {
    color: var(--brand);
}

body.authenticated-app .admin-user-related-panel .admin-overview-heading {
    margin-bottom: 18px;
}

body.authenticated-app .admin-user-related-table {
    width: 100%;
}

body.authenticated-app .admin-user-related-table th,
body.authenticated-app .admin-user-related-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

body.authenticated-app .admin-user-related-table th {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.authenticated-app .admin-user-related-table td {
    font-size: 0.86rem;
    line-height: 1.45;
}

body.authenticated-app .admin-user-related-table tbody tr:last-child td {
    border-bottom: 0;
}

body.authenticated-app .admin-user-empty-state {
    padding: 18px;
    border-radius: 12px;
    background: var(--paper);
}

body.authenticated-app .admin-user-empty-state p {
    margin: 0;
    color: var(--muted);
}

body.authenticated-app .admin-user-detail-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-user-detail-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

body.authenticated-app .admin-user-detail-actions .dashboard-button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.86rem;
    text-align: center;
}

body.authenticated-app.theme-dark .admin-user-empty-state {
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-user-detail-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-detail-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.authenticated-app .admin-user-detail-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-detail-field-wide {
        grid-column: auto;
    }

    body.authenticated-app .admin-user-detail-aside {
        grid-template-columns: 1fr;
    }
}

/* Phase B: Admin user detail empty-state correction. */
body.authenticated-app .admin-user-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Phase B: Admin edit user redesign. */
body.authenticated-app .admin-user-edit-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-user-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-user-edit-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-user-edit-form {
    margin: 0;
}

body.authenticated-app .admin-user-edit-form .admin-form-section {
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-edit-form .admin-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body.authenticated-app .admin-form-section-heading {
    margin-bottom: 14px;
}

body.authenticated-app .admin-form-section-heading h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

body.authenticated-app .admin-form-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

body.authenticated-app .admin-user-edit-form .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

body.authenticated-app .admin-user-edit-form .admin-form-field {
    min-width: 0;
}

body.authenticated-app .admin-user-edit-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .admin-user-edit-form input[type="email"],
body.authenticated-app .admin-user-edit-form input[type="text"] {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-user-edit-form input[type="email"]:focus,
body.authenticated-app .admin-user-edit-form input[type="text"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .admin-user-avatar-upload input[type="file"] {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--muted);
}

body.authenticated-app .admin-user-edit-form .admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-edit-form
    .admin-form-actions
    .dashboard-button {
    min-width: 150px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.86rem;
}

body.authenticated-app .admin-user-edit-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-user-edit-aside .admin-user-detail-avatar {
    margin-bottom: 14px;
}

body.authenticated-app .admin-user-edit-aside h3 {
    margin: 0 0 6px;
}

body.authenticated-app .admin-user-edit-aside p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

body.authenticated-app.theme-dark .admin-user-edit-form input[type="email"],
body.authenticated-app.theme-dark .admin-user-edit-form input[type="text"],
body.authenticated-app.theme-dark .admin-user-avatar-upload input[type="file"] {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-user-edit-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-edit-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-user-edit-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-user-edit-form .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-edit-form .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body.authenticated-app .admin-user-edit-form
        .admin-form-actions
        .dashboard-button {
        width: 100%;
    }
}

/* Phase B: Admin add user redesign. */
body.authenticated-app .admin-user-add-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-user-add-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-user-add-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-user-add-form {
    margin: 0;
}

body.authenticated-app .admin-user-add-form .admin-form-section {
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-add-form .admin-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body.authenticated-app .admin-user-add-form .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

body.authenticated-app .admin-user-add-form .admin-form-field {
    min-width: 0;
}

body.authenticated-app .admin-user-add-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .admin-user-add-form input[type="email"],
body.authenticated-app .admin-user-add-form input[type="text"],
body.authenticated-app .admin-user-add-form input[type="password"] {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-user-add-form input[type="email"]:focus,
body.authenticated-app .admin-user-add-form input[type="text"]:focus,
body.authenticated-app .admin-user-add-form input[type="password"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .admin-user-add-form input[type="file"] {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--muted);
}

body.authenticated-app .admin-user-add-form .admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-add-form
    .admin-form-actions
    .dashboard-button {
    min-width: 150px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.86rem;
}

body.authenticated-app .admin-user-add-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-user-add-aside h3 {
    margin: 0 0 6px;
}

body.authenticated-app .admin-user-add-aside p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

body.authenticated-app.theme-dark .admin-user-add-form input[type="email"],
body.authenticated-app.theme-dark .admin-user-add-form input[type="text"],
body.authenticated-app.theme-dark .admin-user-add-form input[type="password"],
body.authenticated-app.theme-dark .admin-user-add-form input[type="file"] {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-user-add-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-add-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-user-add-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-user-add-form .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-add-form .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body.authenticated-app .admin-user-add-form
        .admin-form-actions
        .dashboard-button {
        width: 100%;
    }
}

/* Phase B: Admin change password redesign. */
body.authenticated-app .admin-user-password-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-user-password-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    gap: 20px;
    align-items: start;
}

body.authenticated-app .admin-user-password-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-user-password-form {
    margin: 0;
}

body.authenticated-app .admin-user-password-form .admin-form-section {
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-password-form .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

body.authenticated-app .admin-user-password-form .admin-form-field {
    min-width: 0;
}

body.authenticated-app .admin-user-password-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

body.authenticated-app .admin-user-password-form input[type="password"] {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

body.authenticated-app .admin-user-password-form input[type="password"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

body.authenticated-app .admin-user-password-form .admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.authenticated-app .admin-user-password-form
    .admin-form-actions
    .dashboard-button {
    min-width: 160px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.86rem;
}

body.authenticated-app .admin-user-password-aside {
    display: grid;
    gap: 14px;
}

body.authenticated-app .admin-user-password-aside .admin-user-detail-avatar {
    margin-bottom: 14px;
}

body.authenticated-app .admin-user-password-aside h3 {
    margin: 0 0 6px;
}

body.authenticated-app .admin-user-password-aside p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

body.authenticated-app.theme-dark
    .admin-user-password-form input[type="password"] {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1100px) {
    body.authenticated-app .admin-user-password-layout {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-password-aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    body.authenticated-app .admin-user-password-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body.authenticated-app .admin-user-password-form .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body.authenticated-app .admin-user-password-form .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body.authenticated-app .admin-user-password-form
        .admin-form-actions
        .dashboard-button {
        width: 100%;
    }
}
/* Phase B: Admin physiotherapists redesign. */
body.authenticated-app .admin-physiotherapists-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

body.authenticated-app .admin-physiotherapists-page
    .patient-page-header
    .dashboard-button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.88rem;
}

body.authenticated-app .admin-physiotherapists-panel {
    padding: 24px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body.authenticated-app .admin-physiotherapists-panel .admin-overview-heading {
    margin-bottom: 18px;
}

body.authenticated-app .admin-physiotherapists-table {
    width: 100%;
    border-collapse: collapse;
}

body.authenticated-app .admin-physiotherapists-table th,
body.authenticated-app .admin-physiotherapists-table td {
    padding: 15px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

body.authenticated-app .admin-physiotherapists-table th {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.authenticated-app .admin-physiotherapists-table td {
    font-size: 0.9rem;
}

body.authenticated-app .admin-physiotherapists-table tbody tr:last-child td {
    border-bottom: 0;
}

body.authenticated-app .admin-physiotherapists-table tbody tr:hover {
    background: var(--brand-soft);
}

body.authenticated-app .admin-physiotherapist-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.authenticated-app .admin-physiotherapist-name strong {
    color: var(--ink);
    font-size: 0.92rem;
}

body.authenticated-app .admin-physiotherapist-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
}

body.authenticated-app .admin-physiotherapists-table td:nth-child(2) {
    min-width: 210px;
}

body.authenticated-app .admin-physiotherapists-table td:nth-child(3),
body.authenticated-app .admin-physiotherapists-table td:nth-child(4) {
    white-space: nowrap;
}

body.authenticated-app .admin-physiotherapist-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 100px;
}

body.authenticated-app.theme-dark
    .admin-physiotherapists-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 760px) {
    body.authenticated-app .admin-physiotherapists-panel {
        padding: 18px;
    }

    body.authenticated-app .admin-physiotherapists-table th,
    body.authenticated-app .admin-physiotherapists-table td {
        padding: 12px 10px;
    }
}