* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f6fb;
    color: #18212f;
}

.dashboard-page {
    background: #f6f9fc;
}

.dashboard-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.dashboard-sidebar {
    border-right: 1px solid #e8edf5;
    background: #ffffff;
    padding: 28px 22px;
}

.dashboard-main {
    padding: 22px;
}

.sidebar-brand,
.sidebar-profile {
    display: flex;
    gap: 14px;
}

.sidebar-brand {
    align-items: center;
    margin-bottom: 36px;
}

.sidebar-brand div,
.sidebar-profile {
    display: flex;
    flex-direction: column;
}

.sidebar-brand span:last-child,
.sidebar-profile span {
    color: #7c879b;
    font-size: 0.92rem;
}

.small-brand-icon {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
}

.sidebar-profile {
    align-items: flex-start;
    margin-bottom: 28px;
    padding: 20px;
    border: 1px solid #edf1f7;
    border-radius: 20px;
    background: #fbfdff;
}

.sidebar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0a76d8, #4ea5ff);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
}

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

.sidebar-link {
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    color: #22304a;
    text-decoration: none;
    font-weight: 600;
}

.sidebar-link:hover,
.active-sidebar-link {
    background: #e8f2fc;
    color: #0a76d8;
}

.dashboard-topbar,
.dashboard-section {
    margin-bottom: 22px;
}

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

.dashboard-date-box {
    min-width: 180px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f4f8fd;
    text-align: right;
}

.dashboard-date-box span,
.section-heading-inline span {
    color: #7c879b;
    font-size: 0.92rem;
}

.dashboard-date-box strong {
    display: block;
    margin-top: 8px;
    font-size: 1.15rem;
}

.dashboard-stats-grid {
    margin-bottom: 22px;
}

.left-stat-card {
    text-align: left;
}

.left-stat-card .stat-value {
    color: #0a76d8;
}

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

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

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 8px 0;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.65rem;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid #4c1dff;
    border-radius: 12px;
    color: #4c1dff;
    font-size: 1.8rem;
    line-height: 1;
}

.nav-links,
.nav-actions,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-links a,
.nav-actions a {
    color: #18212f;
    text-decoration: none;
    font-weight: 600;
}

.nav-button,
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
}

.nav-button,
.primary-button {
    background: linear-gradient(135deg, #4c1dff, #6b27ff);
    color: #ffffff;
}

.secondary-button {
    border: 1px solid #d9dded;
    color: #18212f;
    background: #ffffff;
}

.landing-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: center;
    min-height: 690px;
    margin-bottom: 28px;
}

.landing-copy {
    padding: 16px 0 16px 12px;
}

.landing-copy h1 {
    max-width: 620px;
    font-size: clamp(3.3rem, 8vw, 6.2rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
}

.landing-visual {
    position: relative;
    min-height: 690px;
    border-radius: 38px;
    overflow: hidden;
    background: linear-gradient(180deg, #4c1dff 0%, #2d00a5 100%);
}

.visual-stage {
    position: relative;
    height: 100%;
    min-height: 690px;
}

.visual-orb {
    position: absolute;
    border-radius: 999px;
}

.orb-one {
    width: 540px;
    height: 540px;
    right: -90px;
    bottom: -60px;
    background: #19d3d8;
}

.orb-two {
    width: 450px;
    height: 450px;
    right: 18px;
    bottom: -10px;
    background: #1f95d5;
}

.orb-three {
    width: 520px;
    height: 520px;
    right: 78px;
    bottom: -58px;
    background: #3f0ffd;
}

.doctor-showcase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 34px 28px;
}

.doctor-badge,
.doctor-highlight {
    position: absolute;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(16, 33, 63, 0.12);
}

.doctor-badge {
    top: 36px;
    right: 40px;
    padding: 14px 18px;
    color: #4c1dff;
    font-weight: 700;
}

.doctor-highlight {
    left: 26px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
}

.doctor-highlight span {
    color: #607089;
}

.doctor-portrait {
    position: relative;
    z-index: 1;
    width: min(100%, 340px);
    height: 380px;
    overflow: hidden;
    border-radius: 34px;
    box-shadow: 0 28px 50px rgba(16, 33, 63, 0.24);
}

.doctor-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #07111f;
}

.portrait-circle {
    position: absolute;
    top: 70px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8d8c7, #e0b59f);
}

.portrait-circle::before {
    content: "";
    position: absolute;
    inset: -10px 15px auto;
    height: 70px;
    border-radius: 999px 999px 30px 30px;
    background: #432f26;
}

.portrait-body {
    width: 340px;
    height: 430px;
    border-radius: 180px 180px 28px 28px;
    background: linear-gradient(180deg, #ffffff, #edf3ff);
    box-shadow: inset 0 0 0 1px rgba(205, 216, 240, 0.7);
}

.portrait-body::before,
.portrait-body::after {
    content: "";
    position: absolute;
    top: 170px;
    width: 180px;
    height: 260px;
    border-radius: 80px;
    background: rgba(255, 255, 255, 0.98);
}

.portrait-body::before {
    left: 22px;
    transform: rotate(18deg);
}

.portrait-body::after {
    right: 22px;
    transform: rotate(-18deg);
}

.hero-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.hero-mini-stats article {
    min-width: 140px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(16, 33, 63, 0.08);
}

.hero-mini-stats strong {
    display: block;
    font-size: 1.7rem;
    color: #4c1dff;
}

.hero-mini-stats span {
    color: #607089;
}

.feature-strip,
.specialist-grid {
    display: grid;
    gap: 18px;
}

.feature-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 28px;
}

.feature-card,
.specialist-card {
    padding: 22px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(22, 34, 58, 0.08);
}

.feature-card span,
.section-heading p,
.specialist-card span {
    color: #607089;
}

.feature-card strong {
    display: block;
    margin-top: 12px;
    font-size: 1.15rem;
}

.article-preview-card p,
.feature-empty-card p {
    margin: 12px 0 0;
    color: #607089;
    line-height: 1.6;
}

.specialists-section {
    margin-bottom: 28px;
}

.section-heading {
    margin-bottom: 18px;
}

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

.specialist-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.specialist-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4c1dff, #18a3ff);
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
}

.landing-grid {
    align-items: start;
    margin-bottom: 28px;
}

.appointment-summary-card,
.doctor-articles-card {
    min-height: 100%;
}

.doctor-articles-card {
    min-width: 0;
    overflow: hidden;
    padding: 30px;
}

.auth-card {
    width: min(520px, 100%);
}

.hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.hero,
.card {
    background: #ffffff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(22, 34, 58, 0.08);
}

.eyebrow {
    margin: 0 0 12px;
    color: #2463eb;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1,
h2 {
    margin-top: 0;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    margin-bottom: 12px;
}

.hero-copy {
    max-width: 640px;
    color: #4d5b72;
    font-size: 1.05rem;
}

.hero-panel {
    background: linear-gradient(135deg, #10213f, #204a9b);
    color: #ffffff;
    border-radius: 18px;
    padding: 20px;
}

.owner-nav {
    display: grid;
    gap: 10px;
}

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

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

.stat-card {
    text-align: center;
}

.stat-value {
    margin: 8px 0 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #2463eb;
}

.small-stat {
    font-size: 1.5rem;
}

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

.doctor-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
}

.doctor-card span {
    color: #d9e5ff;
}

.content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
}

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

.auth-form {
    grid-template-columns: 1fr;
}

.staff-login-actions {
    display: grid;
    gap: 14px;
    margin: 24px 0 18px;
}

.staff-login-actions .nav-button {
    width: 100%;
}

.secondary-staff-button {
    background: #e8f2fc;
    color: #0a76d8;
}

.doctor-full-width {
    grid-column: 1 / -1;
}

.full-width {
    grid-column: 1 / -1;
}

.helper-text {
    margin: 0;
    color: #607089;
}

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

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    background: #f8fbff;
}

.detail-item span {
    color: #607089;
    font-size: 0.9rem;
}

.detail-item strong {
    font-size: 1.05rem;
}

/* Two across on the doctor's dashboard. Only used there - the public article
   carousel is .article-scroll-row. */
.post-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* cards in the grid share a height, with the buttons pinned to the bottom */
.post-list .post-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post-list .post-card .post-image {
    height: 150px;
    object-fit: cover;
}

.post-list .post-card h3 {
    /* two lines max, so one long headline cannot shove the rest out of line */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-excerpt {
    flex: 1 1 auto;
    margin: 0 0 14px;
    color: #55637a;
    line-height: 1.5;
}

.post-list .post-actions {
    margin-top: auto;
}

.article-scroll-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 18px;
    overflow-x: hidden;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}

.article-scroll-row::-webkit-scrollbar {
    display: none;
}

.post-card {
    padding: 18px;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    background: #f8fbff;
}

.article-preview-card,
.scroll-post-card {
    display: flex;
    flex-direction: column;
}

.post-card h3 {
    margin: 0 0 10px;
}

.post-card p:last-child {
    margin-bottom: 0;
}

.post-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.post-actions form {
    margin: 0;
}

.edit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #2463eb, #18a3ff);
    color: #ffffff;
    font-weight: 700;
    min-height: 44px;
    padding: 11px 14px;
    text-decoration: none;
}

.edit-button:hover {
    background: linear-gradient(135deg, #1d55cc, #118edc);
}

.danger-button {
    width: auto;
    min-height: 44px;
    background: #d92d20;
    padding: 11px 14px;
}

.post-actions .danger-button {
    width: 100%;
}

.danger-button:hover {
    background: #b42318;
}

/* Quiet secondary action - hiding a doctor is reversible, so it should not
   look as loud as the red delete buttons elsewhere. */
.ghost-button {
    width: auto;
    min-height: 38px;
    padding: 8px 14px;
    background: #ffffff;
    color: #44546c;
    border: 1px solid #cfd8e6;
    font-size: 0.88rem;
    font-weight: 600;
}

.ghost-button:hover {
    background: #f1f5fb;
    border-color: #a8b7cd;
    color: #10233f;
}

/* --- Patient: my appointments --- */
.my-appointments-card {
    max-width: 760px;
    margin: 0 auto 40px;
}

.my-appointments-form {
    max-width: 420px;
}

.my-appointments-heading {
    margin: 26px 0 12px;
    font-size: 1.1rem;
}

.appt-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid #e4e9f2;
    border-radius: 14px;
    background: #f8fafd;
}

.appt-card-past {
    background: #fbfcfe;
}

.appt-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.appt-main span {
    color: #607089;
    font-size: 0.9rem;
}

.appt-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.appt-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.appt-status-scheduled {
    background: #e7f0fe;
    color: #1f5fd0;
}

.appt-status-completed {
    background: #e7f6ee;
    color: #1b7a4b;
}

.appt-status-cancelled {
    background: #fdeceb;
    color: #b42318;
}

.appt-no-cancel {
    font-size: 0.8rem;
    white-space: nowrap;
}

.my-appointments-logout {
    margin-top: 24px;
}

/* --- Doctor working hours --- */
.hours-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #e4e9f2;
    border-radius: 14px;
    background: #f8fafd;
}

.hours-row-closed {
    background: #f3f5f9;
}

/* the label is a flex row here, overriding the stacked default for labels */
.hours-day {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    margin: 0;
}

.hours-day input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
}

.hours-times {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hours-times select {
    width: auto;
    min-width: 104px;
}

.hours-dash {
    color: #7c879b;
    font-size: 0.9rem;
}

.hours-closed-note {
    color: #8b95a8;
    font-size: 0.9rem;
}

.hours-save {
    width: auto;
    min-width: 200px;
}

/* --- Manage doctors --- */
.staff-table {
    min-width: 680px;
}

.staff-table .col-staff-actions {
    width: 32%;
    text-align: right;
}

.staff-table td {
    padding: 14px 12px;
    vertical-align: middle;
}

.staff-table tbody tr:nth-child(even) {
    background: #fafcff;
}

.staff-email {
    word-break: break-all;
}

.staff-hidden-row strong,
.staff-hidden-row .staff-email {
    color: #9aa6b8;
}

.staff-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.staff-badge-live {
    background: #e7f6ee;
    color: #1b7a4b;
}

.staff-badge-hidden {
    background: #eef1f7;
    color: #6b7891;
}

.staff-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.staff-actions form {
    display: inline;
}

/* an <a> styled as a button needs the text centred like a real one */
a.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ghost-danger {
    color: #b42318;
    border-color: #f0c5c0;
}

.ghost-danger:hover {
    background: #fdf2f1;
    border-color: #e0a29b;
    color: #8f1d15;
}

.staff-form-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eef2f8;
}

.staff-form-block h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.staff-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.staff-form-actions button,
.staff-form-actions .ghost-button {
    width: auto;
    min-width: 150px;
}

.doctor-delete-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.doctor-delete-choices button {
    width: auto;
    min-width: 200px;
}

.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vacation-form {
    margin-bottom: 18px;
}

.schedule-filter-form {
    grid-template-columns: minmax(220px, 320px) minmax(160px, 220px);
    align-items: end;
    margin-bottom: 18px;
}

.vacation-conflicts {
    margin-top: 18px;
}

/* Two ways out of the conflict warning, side by side: block and leave the
   bookings alone, or block and cancel them. The safe one comes first. */
.vacation-confirm-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.vacation-confirm-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 0;
    padding: 16px;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    background: #f8fbff;
    align-content: start;
}

.vacation-confirm-form small {
    color: #607089;
    line-height: 1.45;
}

/* Keeps an "optional" hint on the same line as the field name instead of
   letting the column layout push it onto its own row. */
.label-hint-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.label-hint-row small {
    font-weight: 400;
    color: #8593a8;
}

.vacation-hours {
    font-weight: 600;
    color: #1f5fd0 !important;
}

.vacation-list {
    margin-top: 18px;
}

.vacation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    background: #f8fbff;
}

.vacation-card + .vacation-card {
    margin-top: 12px;
}

.vacation-card div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vacation-card span {
    color: #607089;
}

.scroll-post-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    height: 100%;
}

.scroll-post-card h3 {
    min-height: 64px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

.article-preview-card strong {
    min-height: 64px;
    font-size: 1.05rem;
    line-height: 1.4;
}

.post-image,
.article-hero-image {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.post-image {
    height: 190px;
    margin-bottom: 14px;
    background: #eaf1fb;
}

.article-hero-image {
    max-height: 420px;
    margin: 12px 0 20px;
}

.post-meta {
    margin: 0 0 10px;
    color: #607089;
    font-size: 0.9rem;
}

.article-link {
    color: #18212f;
    text-decoration: none;
}

.article-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.article-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(22, 34, 58, 0.12);
}

.article-link:hover {
    color: #0a76d8;
}

.article-heading-row {
    margin-bottom: 22px;
    align-items: flex-end;
}

.article-heading-row h2 {
    margin: 6px 0 0;
}

.article-controls {
    display: flex;
    gap: 10px;
}

.article-nav-button {
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
    background: #edf4fb;
    color: #0a76d8;
    font-size: 1.5rem;
    line-height: 1;
}

.article-nav-button:hover {
    background: #dcecff;
}

.article-shell {
    width: min(980px, calc(100% - 32px));
}

.article-layout,
.related-articles-card {
    margin-bottom: 22px;
}

.article-content {
    color: #374256;
    line-height: 1.8;
    font-size: 1.04rem;
}

.related-post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-post-card h3 {
    margin-bottom: 10px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
}

input,
select,
textarea,
button {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #cfd8e6;
    padding: 12px 14px;
    font: inherit;
}

/* Without this, browsers paint <select> with their default grey field while
   the text inputs beside it stay white - very visible on a phone. */
select {
    background-color: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #93b4ff;
    border-color: #4f86ff;
}

.inline-link {
    color: #2463eb;
    font-weight: 600;
    text-decoration: none;
}

.inline-link:hover {
    text-decoration: underline;
}

.light-link {
    color: #ffffff;
}

body:not(.dashboard-page):not(.auth-page) {
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

body:not(.dashboard-page):not(.auth-page) .page-shell {
    width: min(1200px, calc(100% - 36px));
    padding-top: 22px;
}

body:not(.dashboard-page):not(.auth-page) .landing-nav {
    position: sticky;
    top: 12px;
    z-index: 10;
    margin-bottom: 34px;
    padding: 14px 18px;
    border: 1px solid #e3edf7;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 36px rgba(25, 48, 83, 0.08);
}

body:not(.dashboard-page):not(.auth-page) .brand-icon {
    border-color: #0f6fbf;
    color: #0f6fbf;
}

body:not(.dashboard-page):not(.auth-page) .brand-mark {
    color: #10233f;
    font-size: 1.35rem;
}

body:not(.dashboard-page):not(.auth-page) .nav-links a:hover {
    color: #0f6fbf;
}

body:not(.dashboard-page):not(.auth-page) .landing-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    min-height: auto;
    gap: 34px;
    margin-bottom: 26px;
    padding: 36px;
    border: 1px solid #e3edf7;
    border-radius: 34px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(25, 48, 83, 0.10);
}

body:not(.dashboard-page):not(.auth-page) .landing-copy {
    padding: 0;
}

body:not(.dashboard-page):not(.auth-page) .landing-copy h1 {
    max-width: 660px;
    font-size: clamp(2.6rem, 5.4vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: #10233f;
}

body:not(.dashboard-page):not(.auth-page) .hero-copy {
    color: #52637a;
    font-size: 1.08rem;
    line-height: 1.7;
}

body:not(.dashboard-page):not(.auth-page) .primary-button,
body:not(.dashboard-page):not(.auth-page) .nav-button {
    background: linear-gradient(135deg, #0f6fbf, #12a6b5);
}

body:not(.dashboard-page):not(.auth-page) .secondary-button {
    border-color: #d8e5f2;
    color: #0f355c;
}

body:not(.dashboard-page):not(.auth-page) .hero-mini-stats article {
    border: 1px solid #e3edf7;
    box-shadow: none;
}

body:not(.dashboard-page):not(.auth-page) .hero-mini-stats strong {
    color: #0f6fbf;
}

body:not(.dashboard-page):not(.auth-page) .landing-visual,
body:not(.dashboard-page):not(.auth-page) .visual-stage {
    min-height: 520px;
}

body:not(.dashboard-page):not(.auth-page) .landing-visual {
    border: 1px solid #dbe8f4;
    background: #edf6fb;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.55);
}

body:not(.dashboard-page):not(.auth-page) .visual-orb {
    display: none;
}

body:not(.dashboard-page):not(.auth-page) .doctor-showcase {
    padding: 24px;
}

body:not(.dashboard-page):not(.auth-page) .doctor-portrait {
    width: 100%;
    height: 470px;
    border-radius: 28px;
    box-shadow: 0 24px 48px rgba(16, 35, 63, 0.18);
}

body:not(.dashboard-page):not(.auth-page) .doctor-portrait img {
    object-fit: cover;
    background: #10233f;
}

body:not(.dashboard-page):not(.auth-page) .doctor-badge {
    top: 32px;
    right: 32px;
    color: #0f6fbf;
}

body:not(.dashboard-page):not(.auth-page) .doctor-highlight {
    left: 32px;
    bottom: 32px;
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.trust-card {
    padding: 24px;
    border: 1px solid #e3edf7;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(25, 48, 83, 0.07);
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #e9f7fb;
    color: #0f6fbf;
    font-weight: 800;
}

.trust-card strong {
    display: block;
    color: #10233f;
    font-size: 1.08rem;
}

.trust-card p {
    margin: 10px 0 0;
    color: #607089;
    line-height: 1.6;
}

body:not(.dashboard-page):not(.auth-page) .feature-strip,
body:not(.dashboard-page):not(.auth-page) .specialists-section,
body:not(.dashboard-page):not(.auth-page) .doctor-articles-card,
body:not(.dashboard-page):not(.auth-page) .content-grid > .card {
    border: 1px solid #e3edf7;
}

body:not(.dashboard-page):not(.auth-page) .specialist-avatar {
    background: linear-gradient(135deg, #0f6fbf, #12a6b5);
}

button {
    grid-column: 1 / -1;
    border: 0;
    background: linear-gradient(135deg, #2463eb, #18a3ff);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.alert {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 14px;
}

.success {
    background: #e8fff0;
    color: #0d6a35;
}

.error {
    background: #fff0f0;
    color: #9e1f1f;
}

.warning-alert {
    background: #fff7e6;
    color: #8a4b00;
}

.error p {
    margin: 0;
}

.error p + p {
    margin-top: 8px;
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border-bottom: 1px solid #e4e9f2;
    text-align: left;
    vertical-align: top;
}

th {
    color: #607089;
    font-size: 0.9rem;
}

small {
    color: #607089;
}

@media (max-width: 860px) {
    .dashboard-shell {
        /* minmax(0, ...) rather than a bare 1fr: a bare 1fr track refuses to
           shrink below its content's min-content width, which let wide tables
           and stat grids push the whole dashboard past the phone viewport. */
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-topbar,
    .landing-nav,
    .nav-links,
    .nav-actions,
    .hero-actions,
    .hero-mini-stats {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-hero,
    .trust-strip,
    .feature-strip,
    .specialist-grid,
    .related-post-list,
    .hero,
    .content-grid,
    .appointment-form,
    .stats-grid,
    .details-grid {
        grid-template-columns: 1fr;
    }

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

    .schedule-filter-form {
        grid-template-columns: 1fr;
    }

    .landing-copy {
        padding-left: 0;
    }

    .landing-visual,
    .visual-stage {
        min-height: 540px;
    }

    body:not(.dashboard-page):not(.auth-page) .landing-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    body:not(.dashboard-page):not(.auth-page) .landing-visual,
    body:not(.dashboard-page):not(.auth-page) .visual-stage {
        min-height: 420px;
    }

    body:not(.dashboard-page):not(.auth-page) .doctor-portrait {
        height: 380px;
    }

    .doctor-highlight {
        left: 18px;
        right: 18px;
        bottom: 24px;
    }

    .page-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 20px;
    }

    .article-scroll-row {
        overflow-x: hidden;
    }

    .scroll-post-card {
        flex-basis: 85%;
    }
}

/* Site footer */

.site-footer {
    margin-top: 12px;
    padding: 48px min(6vw, 64px) 24px;
    background: linear-gradient(180deg, #10213f, #0a1730);
    color: #cfd9ef;
    border-radius: 38px 38px 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1.2fr;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-col h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 1rem;
}

.footer-brand {
    margin-bottom: 14px;
    color: #ffffff;
}

.footer-brand .brand-icon {
    border-color: #6b27ff;
    color: #ffffff;
    background: rgba(108, 39, 255, 0.28);
}

.footer-blurb {
    max-width: 320px;
    color: #a9b6d6;
    font-size: 0.95rem;
}

.footer-links {
    display: grid;
    gap: 10px;
}

.footer-links a,
.footer-map-link {
    color: #cfd9ef;
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover,
.footer-map-link:hover,
.footer-contact-list a:hover {
    color: #4ea5ff;
}

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.footer-contact-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-contact-list span {
    color: #7c88ab;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-contact-list a {
    color: #e7ecfb;
    text-decoration: none;
    font-weight: 700;
}

.footer-map {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 10px;
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 180px;
    border: 0;
}

.footer-map-link {
    display: inline-block;
    font-size: 0.9rem;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 20px;
    color: #7c88ab;
    font-size: 0.85rem;
}

@media (max-width: 860px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand-col,
    .footer-map-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Owner dashboard: stat tiles adapt to however many there are */

.dashboard-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-card small {
    display: block;
    margin-top: 6px;
}

/* Owner dashboard: patient visit history
   ------------------------------------------------ */

.patient-filter {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #e4e9f2;
    border-radius: 18px;
    background: #f8fbff;
}

.patient-filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.patient-filter-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.patient-filter-fields label span {
    color: #607089;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patient-filter-fields input {
    min-height: 44px;
    background: #ffffff;
}

.patient-filter-search {
    flex: 1 1 240px;
}

.patient-filter-fields button[type="submit"] {
    width: auto;
    grid-column: auto;
    min-height: 46px;
    padding: 0 30px;
    border-radius: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 14px rgba(36, 99, 235, 0.24);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.patient-filter-fields button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(36, 99, 235, 0.3);
}

.patient-filter-fields button[type="submit"]:active {
    transform: translateY(0);
}

.patient-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e4e9f2;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #cfd8e6;
    border-radius: 12px;
    background: #ffffff;
    color: #33506f;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 35, 63, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.chip:hover {
    border-color: #0f6fbf;
    background: #f2f8fd;
    color: #0f6fbf;
    box-shadow: 0 4px 10px rgba(15, 111, 191, 0.14);
    transform: translateY(-1px);
}

.chip:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 35, 63, 0.12);
}

.chip:focus-visible {
    outline: 2px solid #93b4ff;
    outline-offset: 2px;
}

.chip-active {
    background: linear-gradient(135deg, #0f6fbf, #12a6b5);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 111, 191, 0.28);
}

.chip-active:hover {
    background: linear-gradient(135deg, #0d63ab, #1096a4);
    border-color: transparent;
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .chip {
        transition: none;
    }

    .chip:hover {
        transform: none;
    }
}

.patient-table,
.doctor-table {
    font-variant-numeric: tabular-nums;
    table-layout: fixed;
    min-width: 720px;
}

/* seven columns need room before they start crushing each other */
.doctor-table {
    min-width: 940px;
}

.patient-table .col-patient { width: 38%; }
.patient-table .col-period  { width: 21%; }
.patient-table .col-life    { width: 21%; }
.patient-table .col-next    { width: 20%; }

.doctor-table .col-doctor     { width: 24%; }
.doctor-table .col-week       { width: 13%; }
.doctor-table .col-month      { width: 15%; }
.doctor-table .col-cancel     { width: 13%; }
.doctor-table .col-daysoff    { width: 14%; }
.doctor-table .col-upcoming   { width: 13%; }
.doctor-table .col-visibility { width: 8%; text-align: right; }

/* A doctor with nothing this week should read as quiet, not as a headline.
   Needs the .p-metric prefix to outrank .p-metric's own colour. */
.p-metric.p-zero,
.p-total.p-zero {
    color: #b9c2d0;
}

/* keeps the two number columns from reading as one blur */
.patient-table .lifetime-cell {
    border-left: 1px solid #eef2f8;
}

.patient-table th,
.doctor-table th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}

.patient-table th.num,
.patient-table td.num,
.doctor-table th.num,
.doctor-table td.num {
    text-align: right;
    white-space: nowrap;
}

.patient-table tbody tr:nth-child(even),
.doctor-table tbody tr:nth-child(even) {
    background: #fafcff;
}

.patient-table tbody tr:hover,
.doctor-table tbody tr:hover {
    background: #f1f7ff;
}

.patient-table td,
.doctor-table td {
    padding: 14px 12px;
    vertical-align: middle;
}

.p-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    color: #10233f;
}

.p-meta {
    margin-top: 2px;
    color: #7c879b;
    font-size: 0.86rem;
}

.p-badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.p-badge-new {
    background: #e9f7fb;
    color: #0f6fbf;
}

.p-badge-return {
    background: #eef1f7;
    color: #55637a;
}

.p-metric {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f6fbf;
}

/* "all time" is context, not the headline - quieter than the period figure */
.p-total {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #44546c;
}

.p-sub {
    display: block;
    margin-top: 2px;
    color: #8b95a8;
    font-size: 0.8rem;
    line-height: 1.35;
}

.p-next {
    font-weight: 700;
    color: #10233f;
}

.p-none {
    color: #a6b1c2;
}

.empty-cell {
    padding: 34px 12px;
    text-align: center;
}

.empty-cell strong {
    display: block;
    margin-bottom: 6px;
    color: #10233f;
    font-size: 1.05rem;
}

.empty-cell span {
    color: #7c879b;
}

@media (max-width: 860px) {
    .patient-filter-fields label,
    .patient-filter-search {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .patient-filter-fields button[type="submit"] {
        width: 100%;
    }
}

/* ============================================================
   Phone layout (<= 620px)
   The sheet previously stopped at 860px, so phones inherited the
   tablet layout. Everything below is phone-specific.
   ============================================================ */

@media (max-width: 620px) {

    /* --- public site nav: wrap horizontally instead of a tall column --- */
    body:not(.dashboard-page):not(.auth-page) .landing-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 6px;
        width: 100%;
    }

    .nav-links a {
        padding: 9px 11px;
        border-radius: 10px;
        background: #f2f7fc;
        font-size: 0.9rem;
        line-height: 1;
    }

    .brand-mark {
        font-size: 1.15rem;
        gap: 9px;
    }

    .brand-icon {
        width: 34px;
        height: 34px;
        font-size: 1.4rem;
    }

    /* --- hero: give the words the screen, not the picture --- */
    body:not(.dashboard-page):not(.auth-page) .landing-hero {
        gap: 22px;
        padding: 20px;
        border-radius: 24px;
    }

    body:not(.dashboard-page):not(.auth-page) .landing-copy h1 {
        font-size: clamp(1.9rem, 8.5vw, 2.5rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: 16px;
    }

    body:not(.dashboard-page):not(.auth-page) .hero-copy {
        font-size: 1rem;
        line-height: 1.6;
    }

    body:not(.dashboard-page):not(.auth-page) .landing-visual,
    body:not(.dashboard-page):not(.auth-page) .visual-stage {
        min-height: 260px;
    }

    body:not(.dashboard-page):not(.auth-page) .doctor-portrait {
        height: 230px;
        border-radius: 20px;
    }

    .doctor-showcase {
        padding: 14px;
    }

    .doctor-badge {
        top: 14px;
        right: 14px;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    body:not(.dashboard-page):not(.auth-page) .doctor-highlight {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 10px 12px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-button {
        width: 100%;
        min-height: 50px;
    }

    /* mini stats: two across rather than three stacked blocks */
    .hero-mini-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
    }

    .hero-mini-stats article {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        padding: 12px 14px;
    }

    .hero-mini-stats strong {
        font-size: 1.35rem;
    }

    .hero-mini-stats span {
        font-size: 0.85rem;
    }

    /* --- headings and cards --- */
    .section-heading-inline,
    .dashboard-topbar {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card,
    .trust-card,
    .doctor-articles-card {
        padding: 18px;
        border-radius: 18px;
    }

    h1 {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }

    h2 {
        font-size: 1.25rem;
    }

    .page-shell {
        width: min(100% - 20px, 1200px);
        padding-top: 16px;
    }

    /* --- articles carousel: let it be swiped --- */
    .article-scroll-row {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .scroll-post-card {
        flex: 0 0 88%;
        scroll-snap-align: start;
    }

    .post-image {
        height: 150px;
    }

    /* --- dashboards: sidebar becomes a compact top bar --- */
    .dashboard-sidebar {
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid #e8edf5;
    }

    .sidebar-brand {
        margin-bottom: 16px;
    }

    /* Avatar beside the name instead of stacked above it - the stacked
       version ate about a third of the first screen on a phone. */
    .sidebar-profile {
        margin-bottom: 14px;
        padding: 12px 14px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .sidebar-profile strong {
        line-height: 1.2;
    }

    .sidebar-profile > div:last-child,
    .sidebar-profile span {
        margin: 0;
    }

    .sidebar-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .sidebar-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .sidebar-link {
        padding: 10px 14px;
        white-space: nowrap;
        font-size: 0.92rem;
    }

    .dashboard-main {
        padding: 16px 14px 28px;
    }

    .dashboard-date-box {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    /* Stat tiles two-up: one-per-row wastes a lot of vertical space on a phone. */
    .stats-grid,
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-card h2 {
        font-size: 0.82rem;
    }

    .stat-value {
        font-size: 1.7rem;
    }

    /* Wide reporting tables keep their columns and scroll sideways inside
       their own wrapper, rather than crushing or widening the page. */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
        margin: 0 -4px;
        padding: 0 4px;
    }

    /* The patient and doctor tables have their own stacked-card treatment
       below and must NOT be given a scrolling min-width. */
    .table-wrap table:not(.patient-table):not(.doctor-table):not(.staff-table) {
        min-width: 560px;
        font-size: 0.88rem;
    }

    .table-wrap table:not(.patient-table):not(.doctor-table):not(.staff-table) th,
    .table-wrap table:not(.patient-table):not(.doctor-table):not(.staff-table) td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    .vacation-confirm-choices {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .vacation-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Footer links are tap targets too - the phone numbers especially,
       since tapping one dials the clinic. */
    .footer-links a,
    .footer-contact-list a,
    .footer-map-link {
        display: inline-block;
        padding: 8px 0;
        min-height: 24px;
    }

    /* --- forms: full-width, comfortable tap targets --- */
    .appointment-form input,
    .appointment-form select,
    .appointment-form textarea {
        min-height: 48px;
        font-size: 1rem; /* keeps iOS from zooming on focus */
    }

    .patient-filter {
        padding: 14px;
    }

    .patient-filter-chips {
        gap: 8px;
    }

    .chip {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
        padding: 0 10px;
        font-size: 0.88rem;
    }

    /* --- patient table becomes stacked cards, no sideways scrolling --- */
    .patient-table,
    .doctor-table,
    .staff-table {
        min-width: 0;
        table-layout: auto;
    }

    .patient-table thead,
    .doctor-table thead,
    .staff-table thead {
        display: none;
    }

    .patient-table,
    .patient-table tbody,
    .patient-table tr,
    .patient-table td,
    .doctor-table,
    .doctor-table tbody,
    .doctor-table tr,
    .doctor-table td,
    .staff-table,
    .staff-table tbody,
    .staff-table tr,
    .staff-table td {
        display: block;
        width: 100%;
    }

    .patient-table tbody tr,
    .doctor-table tbody tr,
    .staff-table tbody tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #e4e9f2;
        border-radius: 16px;
        background: #ffffff;
    }

    .patient-table tbody tr:nth-child(even),
    .doctor-table tbody tr:nth-child(even) {
        background: #ffffff;
    }

    .patient-table td,
    .doctor-table td,
    .staff-table td {
        padding: 0;
        border: 0;
    }

    .patient-table td + td,
    .doctor-table td + td,
    .staff-table td + td {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #e8edf5;
    }

    .doctor-table td.col-visibility {
        text-align: left;
        border-top: 1px solid #eef2f8;
        margin-top: 4px;
        padding-top: 12px;
    }

    .appt-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .appt-side {
        justify-content: space-between;
    }

    .my-appointments-logout .ghost-button {
        width: 100%;
        min-height: 46px;
    }

    .post-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .hours-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hours-times {
        width: 100%;
    }

    .hours-times select {
        flex: 1 1 0;
        min-width: 0;
    }

    .hours-save {
        width: 100%;
        min-height: 46px;
    }

    .staff-table td.col-staff-actions {
        text-align: left;
    }

    .staff-actions {
        justify-content: stretch;
    }

    .staff-actions .ghost-button {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
    }

    .staff-form-actions button,
    .staff-form-actions .ghost-button,
    .doctor-delete-choices button {
        width: 100%;
        min-height: 46px;
    }

    .doctor-table td.col-visibility .ghost-button {
        width: 100%;
        min-height: 44px;
    }



    .patient-table td.num,
    .patient-table .lifetime-cell,
    .doctor-table td.num {
        text-align: left;
        border-left: 0;
    }

    /* label each stacked cell, since the header row is hidden */
    .patient-table td[data-label]::before,
    .doctor-table td[data-label]::before,
    .staff-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #8b95a8;
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

    .empty-cell {
        padding: 24px 10px;
    }

    /* --- footer --- */
    .site-footer {
        padding: 32px 18px 20px;
        border-radius: 24px 24px 0 0;
    }

    .footer-map iframe {
        height: 150px;
    }
}

/* very small phones */
@media (max-width: 380px) {
    .hero-mini-stats article {
        flex: 1 1 100%;
    }

    .chip {
        flex: 1 1 100%;
    }
}

/* ===================================================================
   Public site theme
   -------------------------------------------------------------------
   Scoped to body.site-theme:not(.dashboard-page) so only the pages patients see are
   restyled; the owner and doctor dashboards keep the existing blue.

   Rules that have to beat an existing public-site rule are written
   body.site-theme:not(.dashboard-page), which scores the same (0,3,1)
   as the body:not(.dashboard-page):not(.auth-page) rules above and
   wins on source order, since this block is last in the file.
   =================================================================== */

body.site-theme:not(.dashboard-page) {
    --navy: #10294a;
    --navy-deep: #0c2340;
    --teal: #0f7a63;
    --teal-dark: #0b5e4c;
    --teal-soft: #e6f3ef;
    --mint: #e9f3f3;
    --hero-wash: #eef4f6;
    --lavender: #eef2fb;
    --ink: #10294a;
    --ink-soft: #64748b;
    --line: #e3eaf1;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --danger: #c0392b;
    --danger-soft: #fdeeec;

    margin: 0;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
}

body.site-theme:not(.dashboard-page) .shell {
    width: min(100% - 40px, 1200px);
    margin: 0 auto;
}

body.site-theme:not(.dashboard-page) .band {
    padding: 72px 0;
}

body.site-theme:not(.dashboard-page) .band-white {
    background: var(--surface);
}

body.site-theme:not(.dashboard-page) .band-mint {
    background: var(--mint);
}

body.site-theme:not(.dashboard-page) .band-hero {
    padding: 56px 0 72px;
    background: linear-gradient(180deg, var(--hero-wash), #f4f9f9);
}

body.site-theme:not(.dashboard-page) svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
}

/* ------------------------------------------------- top bar + header */
body.site-theme:not(.dashboard-page) .site-topbar {
    background: var(--navy-deep);
    color: #c3d4e6;
    font-size: 0.8rem;
}

body.site-theme:not(.dashboard-page) .topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 26px;
    padding: 9px 0;
}

body.site-theme:not(.dashboard-page) .topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.site-theme:not(.dashboard-page) .topbar-item a {
    color: inherit;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .topbar-item a:hover {
    text-decoration: underline;
}

body.site-theme:not(.dashboard-page) .topbar-urgent,
body.site-theme:not(.dashboard-page) .topbar-urgent a {
    color: #46d6a8;
    font-weight: 700;
}

body.site-theme:not(.dashboard-page) .topbar-place {
    margin-left: auto;
}

body.site-theme:not(.dashboard-page) .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

body.site-theme:not(.dashboard-page) .header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
}

body.site-theme:not(.dashboard-page) .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--navy);
    color: #ffffff;
    font-size: 1.1rem;
}

body.site-theme:not(.dashboard-page) .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

body.site-theme:not(.dashboard-page) .brand-text strong {
    color: var(--ink);
    font-size: 1.15rem;
}

body.site-theme:not(.dashboard-page) .brand-text span {
    color: var(--ink-soft);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.site-theme:not(.dashboard-page) .main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
    margin-left: auto;
}

body.site-theme:not(.dashboard-page) .main-nav a {
    position: relative;
    padding: 4px 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .main-nav a:hover {
    color: var(--teal);
}

body.site-theme:not(.dashboard-page) .main-nav a.is-active {
    color: var(--teal);
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) .main-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
}

body.site-theme:not(.dashboard-page) .header-cta {
    margin-left: 4px;
}

/* ------------------------------------------------------------ buttons */
body.site-theme:not(.dashboard-page) .btn {
    /* the stylesheet's bare `button` rule is width:100%; buttons here size to
       their label unless they explicitly ask for the full row */
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.site-theme:not(.dashboard-page) .btn-primary {
    background: var(--teal-dark);
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .btn-primary:hover {
    background: var(--teal);
}

body.site-theme:not(.dashboard-page) .btn-navy {
    background: var(--navy);
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .btn-navy:hover {
    background: #16365e;
}

body.site-theme:not(.dashboard-page) .btn-ghost {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

body.site-theme:not(.dashboard-page) .btn-ghost:hover {
    border-color: var(--teal);
    color: var(--teal);
}

body.site-theme:not(.dashboard-page) .btn.full-width {
    width: 100%;
}

body.site-theme:not(.dashboard-page) .btn-danger {
    border-color: #f0c4bd;
    background: var(--surface);
    color: var(--danger);
}

body.site-theme:not(.dashboard-page) .btn-danger:hover {
    background: var(--danger-soft);
}

/* -------------------------------------------------------------- hero */
body.site-theme:not(.dashboard-page) .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 48px;
}

body.site-theme:not(.dashboard-page) .eyebrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--lavender);
    color: var(--navy);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.site-theme:not(.dashboard-page) .hero-copy-col h1 {
    max-width: 580px;
    margin: 0 0 18px;
    color: var(--ink);
    font-size: clamp(2.1rem, 3.3vw, 3.1rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
}

body.site-theme:not(.dashboard-page) .lead {
    max-width: 480px;
    margin: 0 0 26px;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.65;
}

body.site-theme:not(.dashboard-page) .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

body.site-theme:not(.dashboard-page) .hero-rule {
    height: 1px;
    margin: 32px 0 22px;
    max-width: 560px;
    background: #d9e4ea;
}

body.site-theme:not(.dashboard-page) .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 480px;
}

body.site-theme:not(.dashboard-page) .stat-box {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
}

body.site-theme:not(.dashboard-page) .stat-box strong {
    display: block;
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1.1;
}

body.site-theme:not(.dashboard-page) .stat-box strong.is-accent {
    color: var(--teal);
}

body.site-theme:not(.dashboard-page) .stat-box span {
    display: block;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.35;
}

body.site-theme:not(.dashboard-page) .hero-visual-card {
    padding: 14px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 26px 60px rgba(16, 41, 74, 0.12);
}

body.site-theme:not(.dashboard-page) .hero-photo {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

body.site-theme:not(.dashboard-page) .hero-photo img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    background: var(--lavender);
}

body.site-theme:not(.dashboard-page) .hero-photo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    justify-items: start;
    gap: 4px;
    padding: 46px 18px 16px;
    /* the photo is a real room shot, so the text needs its own scrim */
    background: linear-gradient(180deg, rgba(10, 25, 44, 0), rgba(10, 25, 44, 0.86));
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .hero-photo-overlay strong {
    font-size: 1.12rem;
}

body.site-theme:not(.dashboard-page) .hero-photo-overlay > span:last-child {
    color: #d3e2ef;
    font-size: 0.8rem;
}

body.site-theme:not(.dashboard-page) .hero-doctor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 15px;
    border-radius: 14px;
    background: var(--lavender);
}

body.site-theme:not(.dashboard-page) .hero-doctor-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--navy);
    color: #ffffff;
    font-weight: 700;
}

body.site-theme:not(.dashboard-page) .hero-doctor-id {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

body.site-theme:not(.dashboard-page) .hero-doctor-id strong {
    color: var(--ink);
    font-size: 0.95rem;
}

body.site-theme:not(.dashboard-page) .hero-doctor-id span {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

body.site-theme:not(.dashboard-page) .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

body.site-theme:not(.dashboard-page) .status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

/* ---------------------------------------------------- section headings */
body.site-theme:not(.dashboard-page) .section-head {
    margin-bottom: 34px;
}

body.site-theme:not(.dashboard-page) .section-head.is-centered {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

body.site-theme:not(.dashboard-page) .section-head.with-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

body.site-theme:not(.dashboard-page) .eyebrow {
    margin: 0 0 8px;
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.site-theme:not(.dashboard-page) .section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    letter-spacing: -0.015em;
}

body.site-theme:not(.dashboard-page) .section-sub {
    max-width: 560px;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

body.site-theme:not(.dashboard-page) .section-head.is-centered .section-sub {
    margin-inline: auto;
}

body.site-theme:not(.dashboard-page) .link-arrow {
    color: var(--teal);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body.site-theme:not(.dashboard-page) .link-arrow:hover {
    text-decoration: underline;
}

body.site-theme:not(.dashboard-page) .empty-note {
    margin: 0;
    color: var(--ink-soft);
}

/* ------------------------------------------------------- trust cards */
body.site-theme:not(.dashboard-page) .trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

body.site-theme:not(.dashboard-page) .trust-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: none;
}

body.site-theme:not(.dashboard-page) .icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--lavender);
    color: var(--teal);
    font-size: 1.15rem;
}

body.site-theme:not(.dashboard-page) .icon-chip.is-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

body.site-theme:not(.dashboard-page) .trust-card h3 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 1.08rem;
}

body.site-theme:not(.dashboard-page) .trust-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

body.site-theme:not(.dashboard-page) .trust-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto !important;
    padding-top: 14px;
    color: var(--teal) !important;
    font-size: 0.8rem !important;
    font-weight: 600;
}

/* ------------------------------------------------------ doctor cards */
body.site-theme:not(.dashboard-page) .doc-grid {
    display: grid;
    /* two across on a desktop, as the design has it - a third column leaves
       the bio too cramped to read */
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 24px;
}

body.site-theme:not(.dashboard-page) .doc-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(16, 41, 74, 0.05);
}

body.site-theme:not(.dashboard-page) .doc-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

body.site-theme:not(.dashboard-page) .doc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--navy);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
}

body.site-theme:not(.dashboard-page) .doc-avatar.is-soft {
    background: var(--lavender);
    color: var(--navy);
}

body.site-theme:not(.dashboard-page) .doc-head-main {
    min-width: 0;
    flex: 1;
}

body.site-theme:not(.dashboard-page) .doc-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

body.site-theme:not(.dashboard-page) .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

body.site-theme:not(.dashboard-page) .tag-specialty {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.site-theme:not(.dashboard-page) .tag-days {
    margin-left: auto;
    background: var(--surface-soft);
    color: var(--ink-soft);
}

body.site-theme:not(.dashboard-page) .tag-accent {
    background: var(--teal);
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .tag-step {
    margin-left: auto;
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.site-theme:not(.dashboard-page) .doc-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

body.site-theme:not(.dashboard-page) .doc-role {
    margin: 2px 0 0;
    color: var(--teal);
    font-size: 0.8rem;
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) .doc-bio {
    margin: 18px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

body.site-theme:not(.dashboard-page) .doc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
}

body.site-theme:not(.dashboard-page) .doc-hours {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
}

body.site-theme:not(.dashboard-page) .doc-hours strong {
    color: var(--ink);
}

/* --------------------------------------------------- article carousel */
body.site-theme:not(.dashboard-page) .article-controls {
    display: flex;
    gap: 10px;
}

body.site-theme:not(.dashboard-page) .article-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
}

body.site-theme:not(.dashboard-page) .article-nav-button:hover:not(:disabled) {
    border-color: var(--teal);
    color: var(--teal);
}

body.site-theme:not(.dashboard-page) .article-nav-button:disabled {
    opacity: 0.35;
    cursor: default;
}

body.site-theme:not(.dashboard-page) .article-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 44px) / 3);
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* room for the card shadow, pulled back so the row still lines up */
    padding-bottom: 6px;
    scrollbar-width: none;
}

body.site-theme:not(.dashboard-page) .article-row::-webkit-scrollbar {
    display: none;
}

body.site-theme:not(.dashboard-page) .article-card {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    padding: 0 0 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    text-decoration: none;
    overflow: hidden;
}

body.site-theme:not(.dashboard-page) .article-card:hover {
    border-color: #cfe0da;
}

body.site-theme:not(.dashboard-page) .article-image {
    position: relative;
    display: block;
    margin: 12px 12px 14px;
    border-radius: 13px;
    overflow: hidden;
}

body.site-theme:not(.dashboard-page) .article-image img {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    background: var(--lavender);
}

body.site-theme:not(.dashboard-page) .tag-category {
    position: absolute;
    top: 11px;
    left: 11px;
    background: var(--navy);
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .article-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 18px;
    color: var(--ink-soft);
    font-size: 0.76rem;
}

body.site-theme:not(.dashboard-page) .article-card h3 {
    margin: 10px 18px 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.4;
    /* two lines, so a long headline cannot unbalance the row */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.site-theme:not(.dashboard-page) .article-excerpt {
    flex: 1 1 auto;
    margin: 8px 18px 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.site-theme:not(.dashboard-page) .article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 18px 0;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
}

body.site-theme:not(.dashboard-page) .article-author {
    color: var(--ink-soft);
}

body.site-theme:not(.dashboard-page) .article-more {
    color: var(--teal);
    font-weight: 600;
}

/* ------------------------------------------------------------ booking */
body.site-theme:not(.dashboard-page) .booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

body.site-theme:not(.dashboard-page) .panel {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(16, 41, 74, 0.05);
}

body.site-theme:not(.dashboard-page) .booking-aside {
    display: grid;
    gap: 24px;
}

body.site-theme:not(.dashboard-page) .panel-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

body.site-theme:not(.dashboard-page) .panel-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
}

body.site-theme:not(.dashboard-page) .panel-head p {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

body.site-theme:not(.dashboard-page) .appointment-form {
    gap: 18px 20px;
}

body.site-theme:not(.dashboard-page) .appointment-form.is-stacked {
    grid-template-columns: minmax(0, 1fr);
}

body.site-theme:not(.dashboard-page) .appointment-form label,
body.site-theme:not(.dashboard-page) .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) .appointment-form label em,
body.site-theme:not(.dashboard-page) .field em {
    color: var(--danger);
    font-style: normal;
}

/* label text and its required marker share a line; the label itself is a
   column flex, so without this wrapper the asterisk drops below. */
body.site-theme:not(.dashboard-page) .field-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

body.site-theme:not(.dashboard-page) .label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.site-theme:not(.dashboard-page) .label-note {
    color: var(--danger);
    font-size: 0.74rem;
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) .appointment-form input,
body.site-theme:not(.dashboard-page) .appointment-form select,
body.site-theme:not(.dashboard-page) .appointment-form textarea {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 400;
}

body.site-theme:not(.dashboard-page) .appointment-form input:focus,
body.site-theme:not(.dashboard-page) .appointment-form select:focus,
body.site-theme:not(.dashboard-page) .appointment-form textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 122, 99, 0.12);
}

body.site-theme:not(.dashboard-page) .appointment-form small {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.5;
}

body.site-theme:not(.dashboard-page) .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.site-theme:not(.dashboard-page) .segment {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

/* The real radio covers the whole segment so the box stays clickable, but
   it is pinned inside it - left to the stylesheet's full-width input rule
   it stretched to the viewport and pushed the page sideways. */
body.site-theme:not(.dashboard-page) .segment input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

body.site-theme:not(.dashboard-page) .segment-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 2px solid #c7d2dd;
    border-radius: 50%;
}

body.site-theme:not(.dashboard-page) .segment:has(input:checked) {
    border-color: var(--teal);
    background: var(--teal-soft);
    color: var(--teal-dark);
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) .segment:has(input:checked) .segment-dot {
    border-color: var(--teal);
}

body.site-theme:not(.dashboard-page) .segment:has(input:checked) .segment-dot::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

body.site-theme:not(.dashboard-page) .form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
}

body.site-theme:not(.dashboard-page) .form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

body.site-theme:not(.dashboard-page) .notice-box {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #f0c4bd;
    border-radius: 11px;
    background: var(--danger-soft);
    color: #8d3226;
    font-size: 0.79rem;
    line-height: 1.55;
}

body.site-theme:not(.dashboard-page) .empty-box {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 34px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    text-align: center;
}

body.site-theme:not(.dashboard-page) .empty-box svg {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    color: #a9b8c6;
}

body.site-theme:not(.dashboard-page) .empty-box strong {
    color: var(--ink);
    font-size: 0.92rem;
}

body.site-theme:not(.dashboard-page) .empty-box span {
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

body.site-theme:not(.dashboard-page) .detail-item {
    border-color: var(--line);
}

body.site-theme:not(.dashboard-page) .helper-text {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

/* ----------------------------------------------------------- location */
body.site-theme:not(.dashboard-page) .location-card {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface-soft);
}

body.site-theme:not(.dashboard-page) .location-copy {
    display: flex;
    flex-direction: column;
    padding: 36px;
}

body.site-theme:not(.dashboard-page) .location-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
}

body.site-theme:not(.dashboard-page) .location-list {
    display: grid;
    gap: 16px;
    margin: 26px 0;
    padding: 0;
    list-style: none;
}

body.site-theme:not(.dashboard-page) .location-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

body.site-theme:not(.dashboard-page) .location-list strong {
    display: block;
    color: var(--ink);
    font-size: 0.82rem;
}

body.site-theme:not(.dashboard-page) .location-copy .link-arrow {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

body.site-theme:not(.dashboard-page) .location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

/* ------------------------------------------------------------- footer */
body.site-theme:not(.dashboard-page) .site-footer {
    margin: 0;
    padding: 56px 0 24px;
    border-top: 3px solid var(--teal);
    border-radius: 0;
    background: var(--navy-deep);
    color: #b9cbdd;
}

body.site-theme:not(.dashboard-page) .footer-top {
    grid-template-columns: 1.3fr 0.8fr 1.1fr;
    gap: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.site-theme:not(.dashboard-page) .footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .footer-brand .brand-badge {
    background: var(--teal);
}

body.site-theme:not(.dashboard-page) .footer-brand strong {
    color: #ffffff;
    font-size: 1.2rem;
}

body.site-theme:not(.dashboard-page) .footer-blurb {
    max-width: 330px;
    margin: 0;
    color: #93a9bf;
    font-size: 0.86rem;
    line-height: 1.7;
}

body.site-theme:not(.dashboard-page) .footer-col h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 0.98rem;
}

body.site-theme:not(.dashboard-page) .footer-links {
    display: grid;
    gap: 10px;
}

body.site-theme:not(.dashboard-page) .footer-links a {
    color: #93a9bf;
    font-size: 0.88rem;
    font-weight: 400;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .footer-links a:hover {
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .footer-contact-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-theme:not(.dashboard-page) .footer-contact-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #93a9bf;
    font-size: 0.86rem;
}

body.site-theme:not(.dashboard-page) .footer-contact-list span {
    color: inherit;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}

body.site-theme:not(.dashboard-page) .footer-contact-list li > svg {
    color: var(--teal);
    font-size: 1rem;
}

body.site-theme:not(.dashboard-page) .footer-contact-list strong {
    color: #ffffff;
    font-weight: 700;
}

body.site-theme:not(.dashboard-page) .footer-contact-list strong.is-accent,
body.site-theme:not(.dashboard-page) .footer-contact-list strong.is-accent a {
    color: #46d6a8;
}

body.site-theme:not(.dashboard-page) .footer-contact-list a {
    color: inherit;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-top: 20px;
    color: #74899f;
    font-size: 0.8rem;
}

body.site-theme:not(.dashboard-page) .footer-top-link {
    color: #93a9bf;
    text-decoration: none;
}

body.site-theme:not(.dashboard-page) .footer-top-link:hover {
    color: #ffffff;
}

/* --- the other public pages (article, my-appointments) ---------------
   They share this theme and the footer, but keep their own simpler
   markup, so these catch the pieces the home page does not use. --- */
body.site-theme:not(.dashboard-page) button:not(.btn):not(.article-nav-button) {
    border: 0;
    border-radius: 11px;
    background: var(--teal-dark);
    color: #ffffff;
    font-weight: 600;
}

body.site-theme:not(.dashboard-page) button:not(.btn):not(.article-nav-button):hover {
    background: var(--teal);
}

body.site-theme:not(.dashboard-page) .brand-icon {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
}

body.site-theme:not(.dashboard-page) .inline-link,
body.site-theme:not(.dashboard-page) a.inline-link,
body.site-theme:not(.dashboard-page) .back-link,
body.site-theme:not(.dashboard-page) main a:not(.btn):not(.article-card):not(.link-arrow):not(.brand) {
    color: var(--teal);
}

body.site-theme:not(.dashboard-page) .landing-nav {
    border-color: var(--line);
    background: var(--surface);
}

/* ------------------------------------------------------- narrower screens */
@media (max-width: 1080px) {
    body.site-theme:not(.dashboard-page) .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    body.site-theme:not(.dashboard-page) .hero-copy-col h1,
    body.site-theme:not(.dashboard-page) .lead,
    body.site-theme:not(.dashboard-page) .hero-stats,
    body.site-theme:not(.dashboard-page) .hero-rule {
        max-width: none;
    }

    body.site-theme:not(.dashboard-page) .booking-grid,
    body.site-theme:not(.dashboard-page) .location-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.site-theme:not(.dashboard-page) .article-row {
        grid-auto-columns: calc((100% - 22px) / 2);
    }

    body.site-theme:not(.dashboard-page) .location-map iframe {
        min-height: 300px;
    }
}

@media (max-width: 900px) {
    body.site-theme:not(.dashboard-page) .band {
        padding: 52px 0;
    }

    body.site-theme:not(.dashboard-page) .trust-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.site-theme:not(.dashboard-page) .doc-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.site-theme:not(.dashboard-page) .footer-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}

@media (max-width: 760px) {
    body.site-theme:not(.dashboard-page) .header-inner {
        flex-wrap: wrap;
        gap: 12px;
    }

    body.site-theme:not(.dashboard-page) .main-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }

    body.site-theme:not(.dashboard-page) .main-nav a {
        padding: 7px 13px;
        border-radius: 999px;
        background: var(--surface-soft);
        font-size: 0.84rem;
    }

    body.site-theme:not(.dashboard-page) .main-nav a.is-active::after {
        display: none;
    }

    body.site-theme:not(.dashboard-page) .header-cta {
        margin-left: auto;
    }

    body.site-theme:not(.dashboard-page) .section-head.with-action {
        flex-direction: column;
        align-items: flex-start;
    }

    body.site-theme:not(.dashboard-page) .article-row {
        grid-auto-columns: 86%;
    }

    body.site-theme:not(.dashboard-page) .doc-foot .btn,
    body.site-theme:not(.dashboard-page) .form-foot .btn {
        width: 100%;
    }

    body.site-theme:not(.dashboard-page) .topbar-place {
        margin-left: 0;
    }

    body.site-theme:not(.dashboard-page) .site-topbar {
        font-size: 0.74rem;
    }

    body.site-theme:not(.dashboard-page) .location-copy {
        padding: 26px;
    }
}

@media (max-width: 560px) {
    body.site-theme:not(.dashboard-page) .shell {
        width: calc(100% - 32px);
    }

    body.site-theme:not(.dashboard-page) .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.site-theme:not(.dashboard-page) .panel,
    body.site-theme:not(.dashboard-page) .doc-card,
    body.site-theme:not(.dashboard-page) .trust-card {
        padding: 20px;
    }

    body.site-theme:not(.dashboard-page) .doc-tags .tag-days {
        margin-left: 0;
    }
}

/* ===================================================================
   Dashboard theme
   -------------------------------------------------------------------
   The doctor and owner panels, brought onto the same navy + teal
   palette and the same card, button and field shapes as the public
   site. Layout is untouched: the sidebar shell stays, because it suits
   a panel with five sections better than the home page's bands would.

   This block is last in the file, so where it ties an older rule on
   specificity it wins on source order.
   =================================================================== */

body.dashboard-page {
    --navy: #10294a;
    --navy-deep: #0c2340;
    --teal: #0f7a63;
    --teal-dark: #0b5e4c;
    --teal-soft: #e6f3ef;
    --lavender: #eef2fb;
    --ink: #10294a;
    --ink-soft: #64748b;
    --line: #e3eaf1;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --danger: #c0392b;
    --danger-soft: #fdeeec;

    background: var(--surface-soft);
    color: var(--ink);
}

/* ------------------------------------------------------------ sidebar */
body.dashboard-page .dashboard-sidebar {
    border-right: 0;
    background: var(--navy-deep);
}

body.dashboard-page .sidebar-brand strong,
body.dashboard-page .sidebar-brand div > span:first-child {
    color: #ffffff;
}

body.dashboard-page .sidebar-brand span:last-child {
    color: #8fa6bd;
    font-size: 0.8rem;
}

body.dashboard-page .brand-icon,
body.dashboard-page .small-brand-icon {
    border: 0;
    border-radius: 11px;
    background: var(--teal);
    color: #ffffff;
}

body.dashboard-page .sidebar-profile {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

body.dashboard-page .sidebar-profile strong {
    color: #ffffff;
}

body.dashboard-page .sidebar-profile span {
    color: #8fa6bd;
    font-size: 0.82rem;
}

body.dashboard-page .sidebar-avatar {
    border-radius: 14px;
    background: var(--teal);
}

body.dashboard-page .sidebar-nav {
    gap: 6px;
}

body.dashboard-page .sidebar-link {
    padding: 11px 14px;
    border-radius: 11px;
    color: #a8bccf;
    font-size: 0.92rem;
    font-weight: 500;
}

body.dashboard-page .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.dashboard-page .active-sidebar-link {
    background: var(--teal);
    color: #ffffff;
    font-weight: 600;
}

/* --------------------------------------------------- cards and headings */
body.dashboard-page .dashboard-main {
    padding: 26px;
}

body.dashboard-page .card,
body.dashboard-page .dashboard-topbar,
body.dashboard-page .dashboard-section,
body.dashboard-page .stat-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(16, 41, 74, 0.05);
}

body.dashboard-page .eyebrow {
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.dashboard-page h1,
body.dashboard-page h2,
body.dashboard-page h3 {
    color: var(--ink);
    letter-spacing: -0.015em;
}

body.dashboard-page .helper-text,
body.dashboard-page .section-heading-inline span,
body.dashboard-page .dashboard-date-box span {
    color: var(--ink-soft);
}

body.dashboard-page .dashboard-date-box {
    border-radius: 13px;
    background: var(--surface-soft);
}

body.dashboard-page .dashboard-date-box strong {
    color: var(--ink);
}

/* Stat tiles follow the home page's: a small quiet label with the number
   under it, left aligned, rather than a centred heading that competes
   with the real section titles. */
body.dashboard-page .stat-card {
    padding: 18px 20px;
    text-align: left;
}

body.dashboard-page .stat-card h2 {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.dashboard-page .stat-value {
    margin: 6px 0 0;
    color: var(--teal);
    font-size: 2rem;
    line-height: 1.1;
}

body.dashboard-page .stat-card small {
    color: var(--ink-soft);
    font-size: 0.74rem;
}

body.dashboard-page .stat-card small {
    color: var(--ink-soft);
}

/* ------------------------------------------------------------ buttons */
body.dashboard-page button,
body.dashboard-page .chip-active {
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--teal-dark);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}

body.dashboard-page button:hover,
body.dashboard-page .chip-active:hover {
    background: var(--teal);
    box-shadow: none;
    transform: none;
}

/* Destructive actions read as outlined rather than solid red: on a page
   with several of them in a row, solid red blocks shout over the actual
   content and make "Remove" look like the primary action. */
body.dashboard-page .danger-button,
body.dashboard-page button.danger-button {
    border-color: #f0c4bd;
    background: var(--surface);
    color: var(--danger);
}

body.dashboard-page .danger-button:hover,
body.dashboard-page button.danger-button:hover {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

body.dashboard-page .ghost-button,
body.dashboard-page button.ghost-button {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

body.dashboard-page .ghost-button:hover,
body.dashboard-page button.ghost-button:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.dashboard-page .chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    font-weight: 500;
    box-shadow: none;
}

body.dashboard-page .chip:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
    transform: none;
    box-shadow: none;
}

/* after .chip, which it also carries - otherwise the plain chip styling
   below would wipe the active colours set above */
body.dashboard-page .chip-active,
body.dashboard-page .chip-active:hover {
    border-color: transparent;
    border-radius: 999px;
    background: var(--teal-dark);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}

body.dashboard-page .chip-active:hover {
    background: var(--teal);
}

/* the patient table's own accents */
body.dashboard-page .p-metric {
    color: var(--teal);
}

body.dashboard-page .p-badge-new {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.dashboard-page .p-name {
    color: var(--ink);
}

/* ------------------------------------------------------------- fields */
body.dashboard-page input,
body.dashboard-page select,
body.dashboard-page textarea {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    /* labels are semibold and fields inherit from them, which made every
       typed value look bold */
    font-weight: 400;
}

body.dashboard-page input:focus,
body.dashboard-page select:focus,
body.dashboard-page textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 122, 99, 0.12);
}

body.dashboard-page label {
    color: var(--ink);
}

/* -------------------------------------------------------------- tables */
body.dashboard-page table th {
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.dashboard-page table td {
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

body.dashboard-page table tbody tr:hover,
body.dashboard-page .staff-table tbody tr:nth-child(even) {
    background: var(--surface-soft);
}

body.dashboard-page .table-wrap {
    border-radius: 14px;
}

/* --------------------------------------------- lists, pills and panels */
body.dashboard-page .vacation-card,
body.dashboard-page .post-list .post-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    box-shadow: none;
}

/* the base rule marks this !important, so matching it is the only way */
body.dashboard-page .vacation-hours {
    color: var(--teal) !important;
}

/* "Edit article" is a link, not a button, so the button rules above miss it */
body.dashboard-page .edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--teal-dark);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
}

body.dashboard-page .edit-button:hover {
    background: var(--teal);
    box-shadow: none;
    transform: none;
}

body.dashboard-page .staff-badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

body.dashboard-page .staff-badge-live {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.dashboard-page .staff-badge-hidden {
    background: var(--surface-soft);
    color: var(--ink-soft);
}

body.dashboard-page .alert.success {
    border: 1px solid #bfe3d6;
    border-radius: 11px;
    background: var(--teal-soft);
    color: var(--teal-dark);
}

body.dashboard-page .alert.error {
    border: 1px solid #f0c4bd;
    border-radius: 11px;
    background: var(--danger-soft);
    color: #8d3226;
}

@media (max-width: 900px) {
    body.dashboard-page .dashboard-main {
        padding: 18px;
    }

    /* The links used to scroll sideways with nothing to say so, which hid
       "My Posts" and "Log out" off the edge. They wrap now. */
    body.dashboard-page .sidebar-nav {
        display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
    }

    body.dashboard-page .sidebar-link {
        padding: 9px 13px;
        font-size: 0.86rem;
    }
}

/* ===================================================================
   Medical reports
   -------------------------------------------------------------------
   report.php (the form, inside the dashboard theme) and
   report-print.php (the A4 sheet, which has to survive being printed).
   =================================================================== */

body.dashboard-page .report-page {
    width: min(100% - 40px, 900px);
    margin: 0 auto;
    padding: 26px 0 40px;
}

body.dashboard-page .report-page .dashboard-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

body.dashboard-page .report-page h1 {
    margin: 4px 0 0;
    font-size: 1.6rem;
}

body.dashboard-page .report-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0;
}

body.dashboard-page .report-facts div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
}

body.dashboard-page .report-facts dt {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.dashboard-page .report-facts dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 0.92rem;
}

body.dashboard-page .report-reason {
    margin: 16px 0 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

body.dashboard-page .report-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.dashboard-page .report-form textarea {
    min-height: 90px;
    line-height: 1.6;
    resize: vertical;
}

body.dashboard-page .report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

body.dashboard-page .report-actions button,
body.dashboard-page .report-actions .ghost-button {
    width: auto;
    padding: 12px 22px;
}

body.dashboard-page .report-history {
    display: grid;
    gap: 12px;
}

body.dashboard-page .report-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

body.dashboard-page .report-history-item strong {
    display: block;
    color: var(--ink);
}

body.dashboard-page .report-history-item span {
    display: block;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

body.dashboard-page .report-history-item p {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 760px) {
    body.dashboard-page .report-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body.dashboard-page .report-history-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------- the A4 sheet */
body.print-page {
    margin: 0;
    padding: 0 0 48px;
    background: #e9edf2;
    color: #10294a;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.print-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    background: #0c2340;
    color: #b9cbdd;
    font-size: 0.86rem;
}

.print-toolbar a {
    color: #ffffff;
    text-decoration: none;
}

.print-toolbar a:hover {
    text-decoration: underline;
}

.print-toolbar div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.print-toolbar button {
    width: auto;
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: #0b5e4c;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.print-toolbar button:hover {
    background: #0f7a63;
}

.print-missing {
    width: min(100% - 40px, 560px);
    margin: 60px auto;
    padding: 32px;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
}

/* 210mm wide with a 18mm margin is an A4 page; on screen it simply reads as
   a sheet of paper, which is what the doctor is about to produce. */
.sheet {
    display: block;
    width: 210mm;
    max-width: calc(100% - 32px);
    min-height: 297mm;
    margin: 28px auto;
    padding: 18mm;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(16, 41, 74, 0.16);
}

.sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #0b5e4c;
}

.sheet-clinic strong {
    display: block;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.sheet-clinic span {
    display: block;
    margin-top: 2px;
    color: #5b6b7d;
    font-size: 0.8rem;
}

.sheet-title {
    text-align: right;
}

.sheet-title h1 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sheet-title span {
    color: #5b6b7d;
    font-size: 0.82rem;
}

.sheet-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 18px 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d7dfe8;
}

.sheet-facts span {
    display: block;
    color: #5b6b7d;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sheet-facts strong {
    display: block;
    margin-top: 3px;
    font-size: 0.9rem;
    font-weight: 600;
}

.sheet-block {
    margin-bottom: 18px;
}

.sheet-block h2 {
    margin: 0 0 6px;
    color: #0b5e4c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sheet-block p {
    margin: 0 0 6px;
    font-size: 0.92rem;
    line-height: 1.65;
}

.sheet-followup p {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #0b5e4c;
    border-radius: 6px;
    font-weight: 600;
}

.sheet-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #d7dfe8;
    color: #5b6b7d;
    font-size: 0.82rem;
}

.sheet-signature {
    text-align: center;
    color: #10294a;
    font-size: 0.86rem;
}

.sheet-signature-line {
    display: block;
    width: 190px;
    margin-bottom: 6px;
    border-bottom: 1px solid #10294a;
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    /* html as well as body: the canvas takes its colour from whichever one
       declares it, and leaving html grey printed a grey band under the
       sheet on any page the report does not fill. */
    html,
    body.print-page {
        background: #ffffff;
        padding: 0;
    }

    /* Everything that is screen furniture comes off the paper. */
    .print-toolbar {
        display: none;
    }

    .sheet {
        width: auto;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 16mm 18mm;
        box-shadow: none;
    }

    /* A section should not be split across two pages mid-sentence. */
    .sheet-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 680px) {
    .sheet-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sheet {
        padding: 22px;
    }
}

/* The report column keeps its button on one line and never collapses to the
   width of the word inside it. */
body.dashboard-page .col-report {
    width: 1%;
    white-space: nowrap;
}

body.dashboard-page td.col-report .ghost-button,
body.dashboard-page td.col-report .edit-button {
    display: inline-flex;
    width: auto;
    padding: 8px 14px;
    font-size: 0.82rem;
}

/* Native checkboxes and radios follow the brand rather than the browser's
   default blue; the working-hours grid is full of them. */
body.dashboard-page input[type="checkbox"],
body.dashboard-page input[type="radio"],
body.site-theme:not(.dashboard-page) input[type="checkbox"],
body.site-theme:not(.dashboard-page) input[type="radio"] {
    accent-color: #0f7a63;
}

/* The staff chooser's two buttons kept the old purple/blue pair. */
body.site-theme .nav-button {
    border: 1px solid transparent;
    border-radius: 11px;
    background: #0b5e4c;
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}

body.site-theme .nav-button:hover {
    background: #0f7a63;
    box-shadow: none;
}

body.site-theme .nav-button.secondary-staff-button {
    border-color: #e3eaf1;
    background: #ffffff;
    color: #10294a;
}

body.site-theme .nav-button.secondary-staff-button:hover {
    border-color: #0f7a63;
    background: #e6f3ef;
    color: #0b5e4c;
}