:root {
    --blue-950: #2563eb;
    --blue-800: #3b82f6;
    --blue-700: #60a5fa;
    --blue-600: #93c5fd;
    --blue-100: #dbeafe;
    --blue-50: #eff6ff;
    --white: #ffffff;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --success: #10b981;
    --shadow: 0 24px 60px rgba(59, 130, 246, 0.1);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --blue-950: #ffffff;
    --blue-800: #f5f5f5;
    --blue-700: #e7e7e7;
    --blue-600: #cfcfcf;
    --blue-100: #1f1f1f;
    --blue-50: #101010;
    --white: #080808;
    --ink: #f5f5f5;
    --muted: #b7b7b7;
    --line: #2b2b2b;
    --success: #ffffff;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

body {
    margin: 0;
    color: var(--ink);
    background: #ffffff !important;
    font-family: "Segoe UI", "Be Vietnam Pro", Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-navigation-shell {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 13rem;
}

.brand-mark {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    font-weight: 800;
}

.brand strong,
.brand small {
    display: block;
}

.brand small,
.site-footer span,
.service-card p,
.notice-box p,
.account-copy p,
.form-note {
    color: var(--muted);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.6rem);
    color: var(--ink);
    font-weight: 650;
}

.nav-links a {
    padding: 0.55rem 0;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    border-color: var(--blue-600);
    color: var(--blue-800);
}

.mega-nav {
    position: relative;
    z-index: 41;
    color: var(--blue-950);
    border-top: 1px solid #dbeafe;
    background: linear-gradient(90deg, #eff6ff 0%, #f8fbff 55%, #ecfeff 100%);
}

.mega-nav-scroll {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.35rem);
    min-height: 4rem;
    padding: 0 clamp(1rem, 4vw, 4rem);
    overflow-x: auto;
    scrollbar-width: thin;
}

.mega-menu-item {
    position: static;
    flex: 0 0 auto;
}

.mega-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 4rem;
    padding: 0;
    border: 0;
    color: #2563eb;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.95rem, 1.45vw, 1.15rem);
    font-weight: 850;
    white-space: nowrap;
}

.mega-menu-trigger span {
    width: 0.48rem;
    height: 0.48rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.12rem);
    transition: transform 0.18s ease;
}

.mega-menu-trigger:hover,
.mega-menu-trigger:focus-visible,
.mega-menu-item.is-open .mega-menu-trigger {
    color: #0f766e;
}

.mega-menu-item.is-open .mega-menu-trigger span,
.mega-menu-item:hover .mega-menu-trigger span {
    transform: rotate(225deg) translate(-0.05rem, -0.08rem);
}

.mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    grid-template-columns: minmax(16rem, 0.75fr) minmax(18rem, 1.35fr);
    gap: clamp(1.5rem, 4vw, 4.25rem);
    max-height: min(30rem, calc(100vh - 9rem));
    padding: clamp(1.4rem, 3.5vw, 3rem) clamp(1rem, 8vw, 7rem);
    border-top: 1px solid #dbeafe;
    color: var(--ink);
    background: #ffffff;
    box-shadow: 0 24px 48px rgba(37, 99, 235, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow-y: auto;
}

.mega-menu-item:hover .mega-panel,
.mega-menu-item.is-open .mega-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-panel-intro {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding-right: clamp(1rem, 3vw, 3rem);
    border-right: 1px solid #dbeafe;
}

.mega-panel-intro strong {
    color: var(--blue-950);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.mega-panel-intro p {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.mega-panel-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    gap: 0.65rem 1.25rem;
    align-content: start;
}

.mega-panel-links a {
    display: flex;
    align-items: center;
    min-height: 3.2rem;
    padding: 0.75rem 1rem;
    border-radius: 0.45rem;
    color: var(--ink);
    font-size: clamp(0.95rem, 1.25vw, 1.12rem);
    font-weight: 850;
}

.mega-panel-links a:hover,
.mega-panel-links a:focus-visible,
.mega-panel-links a.is-active {
    color: var(--blue-800);
    background: #eff6ff;
}

.header-account {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-dashboard,
.header-action,
.header-logout,
.theme-toggle,
.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.75rem 1.1rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 750;
}

.header-action,
.primary-button {
    color: var(--white);
    background: var(--blue-700);
    box-shadow: 0 12px 26px rgba(2, 132, 199, 0.22);
}

.header-dashboard {
    border: 0;
    color: var(--blue-800);
    background: var(--blue-50);
}

.dashboard-cta {
    margin-top: 0.9rem;
}

.header-logout {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    box-shadow: none;
}

.header-logout:hover {
    border-color: var(--blue-600);
    color: var(--blue-800);
}

.header-logout[hidden] {
    display: none;
}

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

.secondary-button {
    color: var(--blue-800);
    background: var(--blue-100);
}

.theme-toggle {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    box-shadow: none;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.65fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: calc(100vh - 4.85rem);
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 5rem) 4rem;
}

.clinic-hero {
    position: relative;
    grid-template-columns: minmax(20rem, 0.78fr) minmax(22rem, 1fr);
    min-height: calc(100vh - 4.85rem);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(247, 250, 249, 0.98) 0%, rgba(247, 250, 249, 0.9) 42%, rgba(247, 250, 249, 0.28) 100%),
        #f7faf9;
}

.clinic-hero .hero-copy {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.clinic-hero h1 {
    max-width: 43rem;
    color: #12344d;
    font-size: clamp(2.45rem, 5.7vw, 5.3rem);
}

.hero-lead {
    max-width: 42rem;
    margin-bottom: 1rem;
    color: #0f766e;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.22;
}

.clinic-hero .hero-text {
    max-width: 39rem;
    color: #496273;
}

.hero-photo-card {
    position: relative;
    min-height: clamp(25rem, 46vw, 39rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(18, 52, 77, 0.12);
    border-radius: 0.75rem;
    background: var(--white);
    box-shadow: 0 2rem 4.5rem rgba(18, 52, 77, 0.16);
}

.hero-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.hero-photo-card figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.15rem;
    width: min(18rem, calc(100% - 2rem));
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1rem 2.5rem rgba(18, 52, 77, 0.14);
    backdrop-filter: blur(14px);
}

.hero-photo-card figcaption strong {
    color: #12344d;
    font-size: 1.35rem;
}

.hero-photo-card figcaption span {
    color: var(--muted);
}

.hero-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.hero-trust-list span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    color: #115e59;
    background: #f0fdfa;
    font-weight: 750;
}

.eyebrow {
    margin: 0 0 0.85rem;
    color: var(--blue-700);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 48rem;
    margin-bottom: 1.25rem;
    color: var(--blue-950);
    font-size: clamp(2.5rem, 7vw, 5.9rem);
    line-height: 1.12;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 0;
    color: var(--blue-950);
    font-size: clamp(1.8rem, 3vw, 3.1rem);
    line-height: 1.18;
}

h3 {
    color: var(--blue-950);
}

.hero-text {
    max-width: 44rem;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.hero-panel,
.auth-card,
.notice-box {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: 1.35rem;
}

.panel-topline,
.doctor-strip,
.schedule-row,
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel-topline {
    color: var(--muted);
}

.queue-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    padding: 1.2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
    color: var(--white);
}

.queue-number {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.14);
    font-size: 2rem;
    font-weight: 900;
}

.queue-card small,
.doctor-strip span {
    display: block;
    opacity: 0.76;
}

.doctor-strip {
    padding: 1rem 0.2rem 0;
}

.doctor-strip a {
    color: var(--blue-700);
    font-weight: 800;
}

.stats-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: -1.5rem clamp(1rem, 5vw, 5rem) 0;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--white);
    box-shadow: 0 1rem 3rem rgba(18, 52, 77, 0.08);
    position: relative;
    z-index: 2;
}

.stats-band div {
    padding: 1.4rem;
    border-right: 1px solid var(--line);
}

.stats-band div:last-child {
    border-right: 0;
}

.stats-band strong,
.stats-band span {
    display: block;
}

.stats-band strong {
    color: #0f766e;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.stats-band span {
    color: var(--muted);
}

.section,
.account-section {
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 5rem);
}

.section-anchor {
    display: block;
    position: relative;
    top: -8rem;
    visibility: hidden;
}

.section-heading {
    max-width: 48rem;
    margin-bottom: 2rem;
}

.doctor-section {
    background: #f1f8f7 !important;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.service-card {
    min-height: 15rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--white);
    box-shadow: 0 0.75rem 2.2rem rgba(15, 23, 42, 0.04);
}

.service-card:hover {
    border-color: rgba(20, 184, 166, 0.36);
    transform: translateY(-2px);
    transition: border-color 180ms ease, transform 180ms ease;
}

.service-card span {
    display: inline-flex;
    margin-bottom: 2rem;
    color: #0f766e;
    font-weight: 900;
}

.service-card p {
    line-height: 1.65;
}

.schedule-section {
    background: var(--white) !important;
}

.schedule-layout,
.account-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.7fr);
    gap: 1.5rem;
    align-items: start;
}

.schedule-list {
    display: grid;
    gap: 0.75rem;
}

.schedule-row {
    min-height: 4.6rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid #99f6e4;
    border-radius: 0.5rem;
    background: var(--white);
}

.schedule-row.active {
    border-left-color: #0f766e;
    background: #f0fdfa;
}

.schedule-row time {
    color: #0f766e;
    font-weight: 900;
}

.schedule-row span {
    color: var(--muted);
}

.notice-box {
    padding: 1.25rem;
}

.clinic-contact-card {
    position: sticky;
    top: 6rem;
    border-color: rgba(20, 184, 166, 0.22);
    background: #f8fffd;
}

.clinic-process .notice-box p {
    margin-bottom: 1.1rem;
}

.is-hidden {
    display: none !important;
}

.clinic-portal-header {
    align-items: stretch;
}

.portal-nav {
    gap: clamp(0.85rem, 2.2vw, 2rem);
}

.portal-nav a {
    display: grid;
    gap: 0.12rem;
    padding: 0.35rem 0;
}

.portal-nav a strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.portal-nav a small {
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 800;
}

.portal-hero {
    position: relative;
    display: grid;
    min-height: clamp(27rem, 52vw, 39rem);
    place-items: center;
    padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 5rem);
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(248, 252, 255, 0.94), rgba(237, 252, 250, 0.78), rgba(248, 252, 255, 0.38)),
        url("/assets/clinic-hero.png") center right / cover no-repeat;
}

.portal-hero-content {
    display: grid;
    justify-items: center;
    max-width: 48rem;
}

.portal-hero h1 {
    max-width: 45rem;
    color: #0f766e;
    font-size: clamp(2.15rem, 4.8vw, 4rem);
}

.portal-hero .hero-text {
    max-width: 41rem;
    color: #385468;
}

.portal-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: min(100%, 35rem);
    min-height: 3.2rem;
    margin-top: 1.25rem;
    padding: 0.35rem 0.55rem 0.35rem 1rem;
    border: 2px solid #facc15;
    border-radius: 999px;
    background: #fde047;
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.14);
}

.portal-search span {
    color: #0f172a;
    font-weight: 900;
}

.portal-search input {
    width: 100%;
    min-height: 2.35rem;
    border: 0;
    outline: 0;
    color: #0f172a;
    background: transparent;
    font: inherit;
}

.home-search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 10;
    display: grid;
    width: 100%;
    max-height: 22rem;
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 0.55rem;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    text-align: left;
}

.home-search-result {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
}

.home-search-result:hover {
    background: #f0fdfa;
}

.home-search-result span {
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-search-result strong {
    color: var(--ink);
}

.home-search-result small,
.home-search-empty {
    color: var(--muted);
    line-height: 1.45;
}

.home-search-empty {
    margin: 0;
    padding: 0.8rem;
}

.portal-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.portal-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--line);
    background: var(--white);
}

.portal-shortcuts a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 4.7rem;
    padding: 0.9rem;
    color: var(--muted);
    font-weight: 800;
}

.portal-shortcuts strong {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    color: #0f766e;
    background: #ccfbf1;
}

.section-heading-row {
    display: flex;
    max-width: none;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.specialty-home-grid,
.article-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.specialty-home-card,
.article-home-card {
    display: grid;
    gap: 0.7rem;
    min-height: 14rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.specialty-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid var(--line);
}

.specialty-home-card span,
.article-home-card span {
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.specialty-home-card p,
.article-home-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.specialty-home-card strong {
    color: var(--ink);
}

.article-home-card small {
    color: var(--muted);
    font-weight: 750;
}

.role-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem clamp(1rem, 5vw, 5rem) 0;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #f8fafc;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.role-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--muted);
    background: transparent;
    font-weight: 850;
    white-space: nowrap;
}

.role-menu a:hover,
.role-menu a[aria-current="page"] {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.18);
}

.role-sidebar {
    position: fixed;
    top: 4.8rem;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: grid;
    align-content: start;
    width: 16rem;
    margin: 0;
    padding: 1rem;
    border-width: 0 1px 0 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: 12px 0 34px rgba(15, 23, 42, 0.08);
    overflow-y: auto;
}

.role-sidebar .role-menu-heading {
    display: grid;
    gap: 0.2rem;
    padding: 0.2rem 0.35rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.role-sidebar .role-menu-heading span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.role-sidebar .role-menu-heading strong {
    color: var(--ink);
    font-size: 1.15rem;
}

.role-sidebar a {
    justify-content: flex-start;
    width: 100%;
}

.dashboard-page:has(> .role-sidebar),
.invoice-page:has(> .role-sidebar) {
    padding-left: 16rem;
}

.article-manager-layout {
    display: grid;
    grid-template-columns: minmax(22rem, 0.7fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) 3rem;
}

.article-form textarea {
    resize: vertical;
}

.article-manager-list {
    display: grid;
    gap: 0.75rem;
}

.article-manager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.article-manager-row > div:first-child {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.article-manager-row p,
.article-manager-row small {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.article-detail-page,
.specialty-detail-page,
.doctor-profile-editor-page {
    min-height: calc(100vh - 4.85rem);
    background: #f8fafc !important;
}

.article-detail-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 5rem) 1.5rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.35rem;
    color: var(--muted);
    font-weight: 800;
}

.breadcrumb a {
    color: var(--blue-800);
}

.article-detail-hero h1 {
    max-width: 62rem;
    font-size: clamp(2.15rem, 5vw, 4.5rem);
}

.article-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.article-meta-line span {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--white);
    font-weight: 800;
}

.specialty-hero-image {
    display: block;
    width: min(100%, 42rem);
    aspect-ratio: 16 / 8;
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    object-fit: cover;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.article-detail-layout,
.specialty-detail-layout,
.doctor-detail-layout,
.profile-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.4fr);
    gap: 1.25rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.article-detail-content {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.article-detail-content p,
.doctor-profile-summary p {
    color: var(--ink);
    font-size: 1.04rem;
    line-height: 1.85;
}

.article-detail-sidebar,
.specialty-side-column {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1rem;
}

.article-side-card,
.profile-preview-card {
    padding: 1.15rem;
}

.article-side-card h2,
.profile-preview-card h2 {
    margin-bottom: 0.7rem;
    font-size: 1.35rem;
}

.article-side-card .doctor-avatar,
.profile-preview-card .doctor-avatar {
    margin-bottom: 0.8rem;
}

.related-list,
.specialty-service-list {
    display: grid;
    gap: 0.7rem;
}

.related-item,
.specialty-service-item {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.related-item:hover {
    border-color: var(--blue-700);
}

.related-item span,
.specialty-service-item span,
.specialty-service-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.specialty-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
}

.specialty-main-column {
    min-width: 0;
}

.doctor-detail-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(19rem, 0.36fr);
}

.doctor-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.2rem 0 0;
}

.doctor-info-list div {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.doctor-info-list dt {
    color: var(--muted);
    font-weight: 800;
}

.doctor-info-list dd {
    margin: 0.25rem 0 0;
    color: var(--ink);
    font-weight: 850;
}

.profile-editor-layout {
    grid-template-columns: minmax(20rem, 0.72fr) minmax(18rem, 0.34fr);
}

.profile-preview-card {
    position: sticky;
    top: 6rem;
}

.profile-preview-card h2 {
    margin-top: 0.3rem;
}

.profile-preview-meta {
    display: grid;
}

.image-upload-box {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.image-upload-box input[type="file"] {
    width: 100%;
}

.image-upload-box small {
    color: var(--muted);
    line-height: 1.45;
}

.specialty-upload-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    object-fit: cover;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.admin-specialty-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-specialty-title h3 {
    margin: 0;
}

.specialty-admin-thumb {
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    object-fit: cover;
}

.specialty-upload-label {
    position: relative;
    overflow: hidden;
}

html[data-theme="dark"] body {
    background: #000000 !important;
}

html[data-theme="dark"] .site-header {
    background: rgba(0, 0, 0, 0.92);
}

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .doctor-avatar,
html[data-theme="dark"] .queue-card,
html[data-theme="dark"] .auth-tab.active {
    color: #000000;
    background: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .header-dashboard,
html[data-theme="dark"] .header-logout,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .text-button {
    color: #ffffff;
    background: #111111;
    border: 1px solid #3a3a3a;
    box-shadow: none;
}

html[data-theme="dark"] .danger-button {
    color: #ffffff;
    background: #171717;
    border-color: #555555;
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .header-action {
    color: #ffffff;
    background: #60a5fa;
    box-shadow: 0 12px 26px rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .secondary-button {
    color: #3b82f6;
    background: #dbeafe;
    border: 0;
}

html[data-theme="dark"] .header-dashboard {
    color: #3b82f6;
    background: #eff6ff;
    border-color: #dbeafe;
}

html[data-theme="dark"] .site-navigation-shell,
html[data-theme="dark"] .site-header {
    background: rgba(8, 8, 8, 0.97);
}

html[data-theme="dark"] .mega-nav {
    color: #e5efff;
    border-top-color: #1f2937;
    border-bottom: 1px solid #1f2937;
    background: linear-gradient(90deg, #07111f 0%, #0b1324 55%, #071b1d 100%);
}

html[data-theme="dark"] .mega-menu-trigger {
    color: #bfdbfe;
}

html[data-theme="dark"] .mega-menu-trigger:hover,
html[data-theme="dark"] .mega-menu-trigger:focus-visible,
html[data-theme="dark"] .mega-menu-item.is-open .mega-menu-trigger {
    color: #5eead4;
}

html[data-theme="dark"] .mega-panel {
    color: #e5e7eb;
    border-top-color: #1f2937;
    background: rgba(10, 15, 25, 0.98);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .mega-panel-intro {
    border-right-color: #1f2937;
}

html[data-theme="dark"] .mega-panel-intro strong {
    color: #ffffff;
}

html[data-theme="dark"] .mega-panel-intro p {
    color: #b6c2d4;
}

html[data-theme="dark"] .mega-panel-links a {
    color: #e5efff;
    border: 1px solid transparent;
}

html[data-theme="dark"] .mega-panel-links a:hover,
html[data-theme="dark"] .mega-panel-links a:focus-visible,
html[data-theme="dark"] .mega-panel-links a.is-active {
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(96, 165, 250, 0.14);
}

html[data-theme="dark"] .text-button {
    color: #3b82f6;
    background: transparent;
    border-color: #3b82f6;
}

html[data-theme="dark"] .danger-button {
    color: #b42318;
    background: #fff5f5;
    border-color: #fecaca;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .doctor-strip a {
    color: #ffffff;
    border-color: #ffffff;
}

html[data-theme="dark"] .role-menu {
    border-color: #1e3a8a;
    background: #0f172a;
    box-shadow: none;
}

html[data-theme="dark"] .role-sidebar {
    background: #0f172a;
    box-shadow: 12px 0 34px rgba(15, 23, 42, 0.28);
}

html[data-theme="dark"] .role-sidebar .role-menu-heading strong {
    color: #ffffff;
}

html[data-theme="dark"] .role-menu a:hover,
html[data-theme="dark"] .role-menu a[aria-current="page"] {
    border-color: #93c5fd;
    color: #0f172a;
    background: #bfdbfe;
}

html[data-theme="dark"] .clinic-hero {
    background: #000000;
}

html[data-theme="dark"] .clinic-hero h1,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .reception-time strong,
html[data-theme="dark"] .schedule-row time,
html[data-theme="dark"] .stats-band strong,
html[data-theme="dark"] .service-card span,
html[data-theme="dark"] .doctor-slots,
html[data-theme="dark"] code {
    color: #ffffff;
}

html[data-theme="dark"] .hero-text,
html[data-theme="dark"] .clinic-hero .hero-text,
html[data-theme="dark"] .hero-photo-card figcaption span,
html[data-theme="dark"] .muted-text,
html[data-theme="dark"] .reception-time span,
html[data-theme="dark"] .reception-patient span,
html[data-theme="dark"] .reception-doctor span,
html[data-theme="dark"] .reception-step span,
html[data-theme="dark"] .reception-main span,
html[data-theme="dark"] .reception-request span,
html[data-theme="dark"] .reception-note,
html[data-theme="dark"] .schedule-row span,
html[data-theme="dark"] .stats-band span,
html[data-theme="dark"] .site-footer span,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .notice-box p,
html[data-theme="dark"] .account-copy p,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .doctor-meta,
html[data-theme="dark"] .doctor-specialty {
    color: #b7b7b7;
}

html[data-theme="dark"] .hero-photo-card,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .notice-box,
html[data-theme="dark"] .home-search-results,
html[data-theme="dark"] .doctor-photo,
html[data-theme="dark"] .specialty-card-image,
html[data-theme="dark"] .specialty-hero-image,
html[data-theme="dark"] .specialty-admin-thumb,
html[data-theme="dark"] .specialty-upload-preview,
html[data-theme="dark"] .specialty-home-card,
html[data-theme="dark"] .article-home-card,
html[data-theme="dark"] .role-menu a,
html[data-theme="dark"] .article-manager-row,
html[data-theme="dark"] .related-item,
html[data-theme="dark"] .specialty-service-item,
html[data-theme="dark"] .doctor-info-list div,
html[data-theme="dark"] .stats-band,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .doctor-card,
html[data-theme="dark"] .schedule-row,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-row,
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .admin-row-wide,
html[data-theme="dark"] .booking-panel,
html[data-theme="dark"] .booking-mode-panel,
html[data-theme="dark"] .booking-method,
html[data-theme="dark"] .patient-schedule-row,
html[data-theme="dark"] .reception-row,
html[data-theme="dark"] .reception-request,
html[data-theme="dark"] .invoice-service-card,
html[data-theme="dark"] .doctor-billing-row,
html[data-theme="dark"] .medicine-line,
html[data-theme="dark"] .slot-card,
html[data-theme="dark"] .admin-table,
html[data-theme="dark"] .report-table-row,
html[data-theme="dark"] .report-status-row,
html[data-theme="dark"] .report-health-main,
html[data-theme="dark"] .report-empty-state,
html[data-theme="dark"] .report-readiness-item,
html[data-theme="dark"] .invoice-side {
    border-color: #2b2b2b;
    background: #080808 !important;
    box-shadow: none;
}

html[data-theme="dark"] .hero-photo-card figcaption,
html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] code,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .reception-list-summary span,
html[data-theme="dark"] .doctor-dashboard-calendar,
html[data-theme="dark"] .invoice-total,
html[data-theme="dark"] .booking-warning,
html[data-theme="dark"] .doctor-note-box {
    border-color: #333333;
    color: #ffffff;
    background: #111111;
    box-shadow: none;
}

html[data-theme="dark"] .reception-modal-doctor,
html[data-theme="dark"] .reception-modal-form input[readonly],
html[data-theme="dark"] .reception-slot-board,
html[data-theme="dark"] .slot-shift-empty,
html[data-theme="dark"] .walkin-note,
html[data-theme="dark"] .reception-create-hints span {
    border-color: #333333;
    background: #111111;
}

html[data-theme="dark"] .slot-choice-button {
    border-color: #333333;
    background: #080808;
}

html[data-theme="dark"] .home-search-result:hover {
    background: #111111;
}

html[data-theme="dark"] .modal-close-button:hover {
    background: #111111;
}

html[data-theme="dark"] .hero-trust-list span,
html[data-theme="dark"] .schedule-row.active,
html[data-theme="dark"] .reception-row.is-confirmed,
html[data-theme="dark"] .patient-schedule-row.is-confirmed,
html[data-theme="dark"] .slot-card.is-selected,
html[data-theme="dark"] .booking-method.is-selected {
    color: #ffffff;
    border-color: #ffffff;
    background: #111111 !important;
}

html[data-theme="dark"] .reception-row.is-waiting,
html[data-theme="dark"] .patient-schedule-row.is-waiting,
html[data-theme="dark"] .schedule-row,
html[data-theme="dark"] .reception-row,
html[data-theme="dark"] .patient-schedule-row {
    border-left-color: #ffffff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: #ffffff;
    border-color: #333333;
    background: #000000;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8a8a8a;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #ffffff;
    outline-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .schedule-section,
html[data-theme="dark"] .doctor-section,
html[data-theme="dark"] .booking-page,
html[data-theme="dark"] .dashboard-page,
html[data-theme="dark"] .invoice-page,
html[data-theme="dark"] .account-section {
    background: #000000 !important;
}

html[data-theme="dark"] img {
    filter: grayscale(100%) contrast(1.02) brightness(0.82);
}

code {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.9rem;
    overflow-wrap: anywhere;
    border-radius: 0.5rem;
    color: var(--blue-950);
    background: var(--blue-50);
}

.account-section {
    align-items: center;
}

.account-copy {
    max-width: 35rem;
}

.account-copy p {
    line-height: 1.75;
}

.auth-card {
    padding: 1rem;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 0.5rem;
    background: var(--blue-50);
}

.auth-tab {
    min-height: 2.6rem;
    border: 0;
    border-radius: 0.4rem;
    color: var(--blue-800);
    background: transparent;
    cursor: pointer;
    font-weight: 800;
}

.auth-tab.active {
    color: var(--white);
    background: var(--blue-700);
}

.auth-form {
    display: none;
    gap: 1rem;
    padding: 1.2rem 0.2rem 0.2rem;
}

.auth-form.active {
    display: grid;
}

label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink);
    font-weight: 750;
}

input {
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    background: var(--white);
    font: inherit;
}

.password-check {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: -0.15rem;
    color: var(--ink);
    font-weight: 800;
}

.password-check input {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    accent-color: var(--blue-700);
    cursor: pointer;
}

select {
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    background: var(--white);
    font: inherit;
}

textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    background: var(--white);
    font: inherit;
    line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue-600);
    outline: 3px solid rgba(0, 166, 214, 0.18);
}

.full-width {
    width: 100%;
}

.form-note {
    margin-bottom: 0;
    line-height: 1.6;
}

.auth-message {
    min-height: 1.5rem;
    margin: 0.85rem 0 0;
    color: var(--success);
    font-weight: 800;
    white-space: pre-line;
}

.auth-message.is-error {
    color: #b42318;
}

button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.site-footer {
    padding: 1.6rem clamp(1rem, 5vw, 5rem);
    border-top: 1px solid var(--line);
    background: var(--blue-50);
    color: var(--ink);
}

.site-footer div {
    display: grid;
    gap: 0.25rem;
}

.site-footer span {
    color: var(--muted);
}

.muted-text {
    color: var(--muted);
    line-height: 1.6;
}

.doctor-section {
    background: #f1f8f7 !important;
}

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

.doctor-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--white);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.04);
}

.doctor-avatar {
    display: grid;
    width: 4.4rem;
    height: 4.4rem;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    color: var(--white);
    background: linear-gradient(135deg, #0f766e, var(--blue-700));
    font-weight: 900;
}

.doctor-photo {
    display: block;
    width: 4.4rem;
    height: 4.4rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--white);
}

.doctor-portrait {
    display: block;
    width: 4.4rem;
    height: 4.4rem;
    flex: 0 0 auto;
}

.doctor-portrait .doctor-photo,
.doctor-portrait .doctor-avatar {
    width: 100%;
    height: 100%;
}

.doctor-portrait .doctor-avatar {
    display: none;
}

.doctor-portrait.is-fallback .doctor-photo {
    display: none;
}

.doctor-portrait.is-fallback .doctor-avatar {
    display: grid;
}

.doctor-avatar.large {
    width: clamp(6rem, 12vw, 9.5rem);
    height: clamp(6rem, 12vw, 9.5rem);
    font-size: clamp(1.65rem, 3.6vw, 2.7rem);
}

.doctor-photo.large {
    width: clamp(6rem, 12vw, 9.5rem);
    height: clamp(6rem, 12vw, 9.5rem);
}

.doctor-card-content {
    min-width: 0;
}

.doctor-card h3 {
    margin-bottom: 0.4rem;
}

.doctor-specialty,
.doctor-meta,
.doctor-slots {
    margin-bottom: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
}

.doctor-specialty {
    color: var(--blue-800);
    font-weight: 800;
}

.doctor-slots {
    color: var(--success);
    font-weight: 800;
}

.doctor-page {
    min-height: calc(100vh - 4.85rem);
}

.doctor-profile-band {
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 5rem);
    background: #f8fafc !important;
}

.doctor-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    max-width: 68rem;
}

.doctor-profile h1 {
    margin-bottom: 0.9rem;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
}

.doctor-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.doctor-profile-meta span {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    background: var(--white);
    font-weight: 750;
}

.booking-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.48fr);
    gap: 1.5rem;
    align-items: start;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 5rem);
}

.booking-main {
    min-width: 0;
}

.date-picker {
    max-width: 20rem;
    margin-bottom: 1.25rem;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.slot-button {
    min-height: 3.5rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--blue-800);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.slot-button:hover,
.slot-button.active {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700);
}

.booking-card {
    position: sticky;
    top: 6rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: var(--shadow);
}

.booking-card h2 {
    margin-bottom: 1rem;
    font-size: 1.45rem;
}

.selected-slot {
    min-height: 3rem;
    margin-bottom: 1rem;
    padding: 0.8rem;
    border-radius: 0.5rem;
    color: var(--blue-950);
    background: var(--blue-50);
    font-weight: 850;
}

.booking-card form {
    display: grid;
    gap: 1rem;
}

.booking-page {
    min-height: calc(100vh - 4.85rem);
    background: #f8fafc !important;
}

.booking-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 5rem) 1.5rem;
}

.booking-hero h1 {
    max-width: 56rem;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
}

.booking-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.34fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.booking-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.booking-method {
    min-height: 2.8rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--blue-800);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.booking-method.active {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.booking-method:not(.active):hover {
    border-color: var(--blue-700);
    background: var(--blue-50);
}

.booking-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.booking-steps span {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--muted);
    font-weight: 850;
    text-align: center;
}

.booking-steps span.active {
    border-color: var(--blue-700);
    background: var(--blue-50);
    color: var(--blue-800);
}

.booking-steps span.is-disabled {
    opacity: 0.58;
}

.booking-schedule-step[hidden] {
    display: none;
}

.booking-profile-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid #f59e0b;
    border-radius: 0.5rem;
    background: var(--white);
}

.booking-profile-alert[hidden] {
    display: none;
}

.booking-profile-alert strong,
.booking-profile-alert span {
    grid-column: 1;
}

.booking-profile-alert span {
    color: var(--muted);
}

.booking-profile-alert a {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.booking-profile-actions {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.booking-profile-actions .muted-text {
    margin: 0;
}

.booking-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.booking-mode-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.5fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.booking-mode-panel h2 {
    font-size: 1.45rem;
}

.booking-mode-panel p:last-child {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.6;
}

.booking-request-note {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--success);
    border-radius: 0.5rem;
    background: var(--white);
}

.booking-request-note span {
    color: var(--muted);
    line-height: 1.6;
}

.booking-request-note[hidden] {
    display: none;
}

.patient-wide-field {
    grid-column: 1 / -1;
}

.patient-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.35fr);
    gap: 1.5rem;
    align-items: start;
}

.patient-profile-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.patient-profile-form .panel-heading,
.patient-profile-form .auth-message,
.profile-form-actions {
    grid-column: 1 / -1;
}

.profile-form-actions {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.profile-help-card {
    display: grid;
    gap: 0.75rem;
}

.profile-help-card p {
    color: var(--muted);
    line-height: 1.65;
}

.booking-slot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.booking-doctor-card {
    display: grid;
    gap: 1.05rem;
    width: 100%;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.booking-doctor-head {
    display: flex;
    gap: 0.95rem;
    align-items: center;
    min-width: 0;
    padding-bottom: 0.95rem;
    border-bottom: 1px dashed var(--line);
}

.booking-doctor-head h3 {
    margin: 0;
    color: var(--blue-800);
    font-size: 1.15rem;
    line-height: 1.3;
}

.booking-doctor-head p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-weight: 700;
}

.booking-date-strip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.35rem;
    scroll-snap-type: x proximity;
}

.booking-date-chip {
    flex: 0 0 auto;
    min-width: 6.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f1f5f9;
    color: var(--blue-950);
    cursor: pointer;
    scroll-snap-align: start;
    text-align: center;
    font: inherit;
    font-weight: 850;
}

.booking-date-chip strong,
.booking-date-chip span,
.booking-date-chip small {
    display: block;
}

.booking-date-chip span,
.booking-date-chip small {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.booking-date-chip.active {
    border-color: var(--blue-700);
    background: var(--blue-700);
    color: var(--white);
}

.booking-date-chip.active span,
.booking-date-chip.active small {
    color: inherit;
}

.booking-date-heading {
    padding: 0.25rem 0;
    color: var(--success);
    font-size: 1.05rem;
    font-weight: 850;
}

.booking-session-group {
    display: grid;
    gap: 0.65rem;
}

.booking-session-group h4 {
    margin: 0;
    color: var(--blue-900);
    font-size: 0.95rem;
}

.booking-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: 0.75rem;
}

.appointment-slot-button {
    display: grid;
    gap: 0.25rem;
    min-height: 5.4rem;
    justify-items: center;
    align-content: center;
    text-align: center;
}

.appointment-slot-button span,
.appointment-slot-button small {
    display: block;
    color: inherit;
    line-height: 1.35;
}

.appointment-slot-button small {
    opacity: 0.78;
}

.appointment-slot-button.date-slot {
    border-left: 0.35rem solid var(--success);
}

.appointment-slot-button.service-slot {
    border-left: 0.35rem solid var(--blue-700);
    background: var(--white);
}

.booking-slot-grid.is-date-wizard {
    display: block;
}

.date-booking-wizard {
    display: grid;
    gap: 1rem;
}

.date-booking-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.55rem;
}

.date-booking-progress span {
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--muted);
    background: var(--white);
    font-weight: 850;
    text-align: center;
}

.date-booking-progress span.active,
.date-booking-progress span.is-complete {
    border-color: var(--blue-700);
    color: var(--blue-800);
    background: var(--blue-50);
}

.date-booking-panel {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.date-booking-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
    gap: 1rem;
    align-items: start;
}

.date-booking-heading h3 {
    margin: 0;
    color: var(--blue-900);
    font-size: 1.25rem;
}

.date-booking-heading p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.booking-date-calendar,
.booking-specialty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
    gap: 0.75rem;
}

.booking-calendar-day,
.booking-specialty-option {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.booking-calendar-day span,
.booking-calendar-day strong,
.booking-calendar-day small,
.booking-specialty-option strong,
.booking-specialty-option span {
    display: block;
}

.booking-calendar-day strong,
.booking-specialty-option strong {
    margin-top: 0.2rem;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 900;
}

.booking-calendar-day small,
.booking-specialty-option span {
    margin-top: 0.35rem;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0.84;
}

.booking-calendar-day.is-available {
    border-color: #86efac;
    color: #14532d;
    background: #dcfce7;
}

.booking-calendar-day.is-empty {
    color: #64748b;
    background: #e2e8f0;
    cursor: not-allowed;
}

.booking-calendar-day.active,
.booking-specialty-option.active {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700);
}

.booking-specialty-option {
    color: var(--blue-900);
    background: var(--blue-50);
}

.booking-specialty-search {
    display: grid;
    gap: 0.45rem;
}

.booking-specialty-search span {
    color: var(--blue-900);
    font-weight: 850;
}

.booking-specialty-search input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    background: var(--white);
    font: inherit;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.booking-specialty-search input:focus {
    border-color: var(--blue-700);
    outline: 3px solid rgba(37, 99, 235, 0.16);
}

.booking-specialty-list {
    display: grid;
    gap: 0.75rem;
}

.booking-specialty-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    width: 100%;
    padding: 1rem 1.05rem;
    border-color: #dbeafe;
    color: var(--blue-950);
    background: var(--white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.booking-specialty-card:hover {
    border-color: var(--blue-700);
    background: #f8fbff;
    transform: translateY(-1px);
}

.booking-specialty-card .booking-specialty-main {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    margin-top: 0;
    opacity: 1;
}

.booking-specialty-card .booking-specialty-title-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: inherit;
    opacity: 1;
}

.booking-specialty-card .booking-specialty-title-row strong {
    margin-top: 0;
    color: inherit;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.booking-specialty-card .booking-specialty-title-row b {
    flex: 0 0 auto;
    color: var(--blue-700);
    font-size: 1.05rem;
    font-weight: 900;
    white-space: nowrap;
}

.booking-specialty-card .booking-specialty-description,
.booking-specialty-card .booking-specialty-services {
    margin-top: 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.5;
    opacity: 1;
}

.booking-specialty-card .booking-specialty-services {
    color: var(--blue-800);
}

.booking-specialty-card .booking-specialty-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.1rem;
    opacity: 1;
}

.booking-specialty-card .booking-specialty-meta small {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-size: 0.78rem;
    font-weight: 850;
}

.booking-specialty-card .booking-specialty-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    margin-top: 0;
    color: #94a3b8;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
}

.booking-specialty-card.active,
.booking-specialty-card.active:hover {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.22);
}

.booking-specialty-card.active .booking-specialty-title-row b,
.booking-specialty-card.active .booking-specialty-description,
.booking-specialty-card.active .booking-specialty-services,
.booking-specialty-card.active .booking-specialty-chevron {
    color: var(--white);
    opacity: 0.96;
}

.booking-specialty-card.active .booking-specialty-meta small {
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--white);
    background: rgba(255, 255, 255, 0.16);
}

.booking-doctor-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.booking-doctor-option {
    display: grid;
    gap: 0.45rem;
}

.booking-doctor-choice-card {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 0.55rem;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.booking-doctor-choice-card.active {
    border-color: var(--blue-700);
    background: #eff6ff;
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.16);
}

.booking-doctor-choice-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.booking-doctor-choice-head > .doctor-avatar,
.booking-doctor-choice-head > .doctor-photo,
.booking-doctor-choice-head > .doctor-portrait {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 0.65rem;
}

.booking-doctor-choice-head h4,
.booking-doctor-choice-head p,
.booking-doctor-choice-desc {
    margin: 0;
}

.booking-doctor-choice-head h4 {
    color: var(--blue-950);
    font-size: 1.08rem;
    line-height: 1.28;
}

.booking-doctor-choice-head p,
.booking-doctor-choice-desc {
    color: var(--muted);
    line-height: 1.5;
}

.booking-doctor-choice-desc {
    min-height: 3rem;
    font-size: 0.92rem;
}

.booking-doctor-status {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.35rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-size: 0.76rem;
    font-weight: 900;
}

.booking-doctor-choice-card.active .booking-doctor-status {
    color: var(--white);
    background: var(--blue-700);
}

.booking-doctor-choice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.booking-doctor-choice-meta small {
    padding: 0.25rem 0.5rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-size: 0.78rem;
    font-weight: 850;
}

.booking-doctor-choice-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.booking-doctor-choice-actions .primary-button,
.booking-doctor-choice-actions .secondary-button {
    width: 100%;
    min-width: 0;
}

.doctor-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(5px);
}

.doctor-preview-modal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
    width: min(54rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.doctor-preview-close {
    position: absolute;
    top: 0.75rem;
    right: 0.8rem;
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 0;
    border-radius: 0.45rem;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.doctor-preview-close:hover {
    color: var(--blue-800);
    background: var(--blue-50);
}

.doctor-preview-side,
.doctor-preview-body {
    padding: 1.35rem;
}

.doctor-preview-side {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    border-right: 1px solid var(--line);
    background: #f8fafc;
}

.doctor-preview-side .doctor-avatar,
.doctor-preview-side .doctor-photo,
.doctor-preview-side .doctor-portrait {
    width: 7rem;
    height: 7rem;
    border-radius: 0.75rem;
}

.doctor-preview-side strong {
    margin-top: 0.35rem;
    color: var(--blue-950);
    font-size: 1.08rem;
    line-height: 1.3;
}

.doctor-preview-side span,
.doctor-preview-side small {
    color: var(--muted);
    line-height: 1.45;
    font-weight: 760;
}

.doctor-preview-side small {
    width: fit-content;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-weight: 900;
}

.doctor-preview-body {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding-top: 3.25rem;
}

.doctor-preview-body h3 {
    margin: 0;
    color: var(--blue-900);
    font-size: 1.45rem;
}

.doctor-preview-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.doctor-preview-list div {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem;
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    background: var(--blue-50);
}

.doctor-preview-list dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.doctor-preview-list dd {
    margin: 0;
    color: var(--blue-950);
    font-weight: 850;
    line-height: 1.35;
}

.doctor-preview-desc {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
}

.doctor-preview-actions {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    padding-top: 0.2rem;
}

.booking-doctor-head > .doctor-avatar,
.booking-doctor-head > .doctor-photo,
.booking-doctor-head > .doctor-portrait {
    width: 4.8rem;
    height: 4.8rem;
}

.booking-doctor-option > .doctor-avatar,
.booking-doctor-option > .doctor-photo,
.booking-doctor-option > .doctor-portrait {
    margin-bottom: 0.15rem;
    width: 4.8rem;
    height: 4.8rem;
}

.booking-doctor-option > .doctor-avatar {
    display: grid;
}

.booking-step-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.25rem;
}

.booking-step-actions span {
    color: var(--muted);
    font-weight: 750;
    line-height: 1.5;
}

.booking-step-actions button {
    flex: 0 0 auto;
}

.date-booking-slot-list {
    display: grid;
    gap: 1rem;
}

.selected-service {
    margin: -0.3rem 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--blue-800);
    background: var(--blue-50);
    font-weight: 800;
}

.dashboard-page {
    min-height: calc(100vh - 4.85rem);
    background: #f8fafc !important;
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 5vw, 5rem) 2rem;
}

.dashboard-hero h1 {
    max-width: 54rem;
    margin-bottom: 0.8rem;
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.dashboard-date {
    width: min(100%, 18rem);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 14px 34px rgba(8, 47, 73, 0.08);
}

.doctor-billing-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    gap: 0.75rem;
    width: min(100%, 37rem);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 clamp(1rem, 5vw, 5rem) 1.5rem;
}

.dashboard-stats article {
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.dashboard-stats span,
.dashboard-row span {
    color: var(--muted);
}

.dashboard-stats strong {
    display: block;
    margin-top: 0.45rem;
    color: var(--blue-800);
    font-size: 2rem;
}

.doctor-flow-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 clamp(1rem, 5vw, 5rem) 1.5rem;
}

.doctor-flow-strip article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.doctor-flow-strip span {
    display: inline-grid;
    place-items: center;
    grid-row: span 2;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    color: var(--white);
    background: var(--blue-700);
    font-weight: 900;
}

.doctor-flow-strip strong {
    color: var(--blue-950);
}

.doctor-flow-strip small {
    color: var(--muted);
    font-weight: 650;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.42fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) 1.5rem;
}

.dashboard-panel {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 14px 34px rgba(8, 47, 73, 0.08);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-heading h2 {
    font-size: 1.45rem;
}

.dashboard-list {
    display: grid;
    gap: 0.7rem;
}

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
    color: var(--muted);
    font-weight: 750;
}

.status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    display: inline-block;
}

.legend-dot.is-confirmed {
    background: #16a34a;
}

.legend-dot.is-active {
    background: #2563eb;
}

.legend-dot.is-done {
    background: #64748b;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 4.2rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--blue-600);
    border-radius: 0.5rem;
    background: var(--white);
}

.dashboard-row.is-booked {
    border-left-color: var(--success);
}

.dashboard-row.is-confirmed {
    border-left-color: #16a34a;
    background: #f8fff9;
}

.dashboard-row.is-active {
    border-left-color: #2563eb;
    background: #f8fbff;
}

.dashboard-row.is-done {
    border-left-color: #64748b;
    background: #f8fafc;
}

.dashboard-row.is-cancelled {
    border-left-color: #dc2626;
    background: #fff7f7;
}

.dashboard-row.is-unavailable {
    opacity: 0.72;
}

.dashboard-time {
    color: var(--blue-800);
    font-weight: 900;
}

.dashboard-person {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-person strong {
    color: var(--blue-950);
}

.status-pill {
    justify-self: end;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-size: 0.9rem;
    font-weight: 850;
}

.status-pill.is-booked,
.status-pill.is-waiting {
    color: var(--blue-950);
    background: var(--blue-100);
}

.dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.text-button,
.danger-button {
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.text-button {
    border: 1px solid var(--line);
    color: var(--blue-800);
    background: var(--white);
}

.danger-button {
    border: 1px solid #fecaca;
    color: #b42318;
    background: #fff5f5;
}

.action-note {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 750;
}

.doctor-panel-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.7rem;
}

.compact-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
    color: var(--blue-950);
    font-size: 0.92rem;
    font-weight: 800;
}

.compact-toggle input {
    width: auto;
    accent-color: var(--blue-700);
}

.compact-action {
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
}

.doctor-compact-note,
.doctor-empty-flow {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px dashed #93c5fd;
    border-radius: 0.5rem;
    color: var(--blue-800);
    background: #eff6ff;
    font-weight: 750;
}

.doctor-empty-flow {
    display: grid;
    gap: 0.25rem;
}

.doctor-empty-flow strong {
    color: var(--blue-950);
}

.doctor-empty-flow span {
    color: var(--muted);
}

.appointment-edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.28fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.slot-edit-form {
    grid-template-columns: minmax(9rem, 0.9fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) minmax(11rem, 0.9fr) auto;
}

.exam-form {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.exam-check-list,
.exam-medicine-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.inline-check input {
    width: auto;
}

.medicine-line {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.3fr) 5rem minmax(10rem, 1fr) minmax(9rem, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
}

.exam-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.exam-section-heading h3 {
    margin: 0 0 0.2rem;
    color: var(--blue-950);
    font-size: 1.05rem;
}

.invoice-row .dashboard-actions {
    align-self: center;
}

.invoice-row {
    border-left: 5px solid #f59e0b;
    background: #fffaf0;
}

.appointment-edit-actions {
    display: flex;
    gap: 0.6rem;
}

.dashboard-form {
    display: grid;
    gap: 1rem;
}

.reception-move-form {
    gap: 0.9rem;
}

.reception-move-form .move-slot-board {
    grid-column: 1 / -1;
}

.dashboard-side-stack {
    display: grid;
    gap: 1rem;
    align-self: start;
}

.doctor-tools-panel {
    padding: 0;
    overflow: hidden;
}

.doctor-tools-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    color: var(--blue-950);
    font-weight: 850;
}

.doctor-tools-panel[open] summary {
    border-bottom: 1px solid var(--line);
}

.doctor-tools-panel .dashboard-form,
.doctor-tools-panel > p,
.doctor-tools-panel > a {
    margin: 1.25rem;
}

.invoice-sent-note {
    padding: 0.45rem 0.7rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #166534;
    background: #f0fdf4;
}

.patient-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.patient-detail-backdrop[hidden] {
    display: none;
}

.patient-detail-modal {
    width: min(58rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--white);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
}

.patient-detail-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.patient-detail-header h2 {
    margin: 0.15rem 0 0;
    color: var(--blue-950);
}

.patient-detail-content {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

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

.patient-detail-card,
.patient-history-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.patient-detail-card-wide {
    grid-column: 1 / -1;
}

.patient-detail-card h3,
.patient-history-block h3 {
    margin: 0 0 0.8rem;
    color: var(--blue-950);
}

.patient-detail-card dl,
.patient-history-card dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.patient-detail-card dl div,
.patient-history-card dl div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.patient-detail-card dt,
.patient-history-card dt {
    color: var(--muted);
    font-weight: 750;
}

.patient-detail-card dd,
.patient-history-card dd {
    margin: 0;
    color: var(--blue-950);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.patient-history-heading,
.patient-history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.patient-history-heading {
    margin-bottom: 0.75rem;
}

.patient-history-heading > span {
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-weight: 850;
}

.patient-history-list {
    display: grid;
    gap: 0.75rem;
}

.patient-history-card {
    background: var(--white);
}

.patient-history-card-head {
    margin-bottom: 0.8rem;
}

.patient-history-card-head div {
    display: grid;
    gap: 0.2rem;
}

.patient-history-card-head span {
    color: var(--muted);
}

.medicine-shortcut-panel {
    display: grid;
    gap: 1rem;
}

.medicine-shortcut-panel .muted-text {
    margin: 0;
}

.dashboard-walkins {
    margin: 0 clamp(1rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.doctor-billing-panel {
    margin: 0 clamp(1rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.doctor-billing-row {
    grid-template-columns: 9rem minmax(0, 1fr) minmax(18rem, auto);
}

.medicine-layout {
    display: grid;
    grid-template-columns: minmax(19rem, 0.42fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.medicine-form {
    position: sticky;
    top: 6rem;
}

.medicine-manager-list {
    display: grid;
    gap: 0.75rem;
}

.medicine-manager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem minmax(8rem, 0.45fr) minmax(10rem, auto);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--success);
    border-radius: 0.5rem;
    background: var(--white);
}

.medicine-manager-row.is-inactive {
    border-left-color: #ef4444;
    opacity: 0.78;
}

.medicine-manager-main,
.medicine-manager-stock,
.medicine-manager-price {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.medicine-manager-stock strong,
.medicine-manager-price strong {
    color: var(--blue-950);
    font-size: 1.2rem;
}

.medicine-manager-main span,
.medicine-manager-stock span,
.medicine-manager-price span {
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.invoice-page {
    min-height: calc(100vh - 4.85rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    background: #f8fafc !important;
}

.invoice-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 5vw, 5rem) 1.5rem;
}

.invoice-hero h1 {
    max-width: 56rem;
    margin-bottom: 0.8rem;
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.invoice-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.36fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem);
}

.invoice-side {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1rem;
}

.invoice-profile,
.invoice-total-list {
    display: grid;
    gap: 0.65rem;
}

.invoice-profile div,
.invoice-total-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.invoice-profile div:last-child,
.invoice-total-list div:last-child {
    border-bottom: 0;
}

.invoice-profile span,
.invoice-total-list span,
.invoice-service-card small {
    color: var(--muted);
    line-height: 1.45;
}

.invoice-profile strong,
.invoice-total-list strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.invoice-main {
    min-width: 0;
}

.invoice-form {
    display: grid;
    gap: 1rem;
}

.invoice-section {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #fbfdff;
}

.invoice-section h3 {
    margin: 0;
    font-size: 1.12rem;
}

.invoice-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-section-title span {
    color: var(--muted);
    font-weight: 800;
}

.invoice-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.invoice-service-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    min-height: 4.5rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.invoice-service-card input {
    width: 1.1rem;
    min-height: 1.1rem;
    margin-top: 0.2rem;
}

.invoice-service-card strong,
.invoice-service-card small {
    display: block;
}

.medicine-create-panel {
    padding: 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background: #eff6ff;
}

.medicine-create-panel summary {
    cursor: pointer;
    font-weight: 800;
    color: #1d4ed8;
}

.medicine-create-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.invoice-medicine-list {
    display: grid;
    gap: 0.75rem;
}

.invoice-medicine-line {
    display: grid;
    grid-template-columns: minmax(13rem, 1.25fr) 5rem 6.5rem minmax(10rem, 1fr) minmax(9rem, 0.9fr) auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.admin-page {
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    font-family: "Segoe UI", Arial, sans-serif;
    font-variant-ligatures: none;
}

.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page strong,
.admin-page button,
.admin-page label,
.admin-page select,
.admin-page input,
.admin-page textarea {
    font-family: "Segoe UI", Arial, sans-serif;
}

.admin-page h1 {
    line-height: 1.16;
}

.admin-page h2,
.admin-page h3,
.admin-row strong,
.admin-row span,
.admin-tabs .auth-tab,
.admin-form label {
    line-height: 1.35;
}

.admin-shell {
    display: grid;
    gap: 1rem;
    padding: 0 clamp(1rem, 5vw, 5rem);
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.admin-tabs .auth-tab {
    padding: 0 1rem;
}

.admin-view {
    display: none;
}

.admin-view.active {
    display: block;
}

.admin-two-column {
    display: grid;
    grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.admin-form {
    display: grid;
    gap: 1rem;
}

.doctor-extra-fields {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.checkbox-line {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 0.6rem;
}

.checkbox-line input {
    width: 1.1rem;
    min-height: 1.1rem;
}

.compact-select {
    width: min(100%, 11rem);
    min-height: 2.6rem;
}

.admin-table {
    display: grid;
    gap: 0.7rem;
}

.admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 1rem;
    align-items: center;
    min-height: 4.4rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.admin-row-wide {
    grid-template-columns: minmax(0, 1fr) auto;
}

.admin-row div:first-child {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.admin-row strong,
.admin-row span {
    overflow-wrap: anywhere;
}

.admin-row div:first-child span {
    color: var(--muted);
    line-height: 1.45;
}

.admin-service-group {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.admin-service-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.5rem;
}

.admin-service-group-heading h3 {
    margin: 0;
    font-size: 1.05rem;
}

.admin-service-group-heading span {
    color: var(--muted);
    font-weight: 800;
}

.admin-service-group-list {
    display: grid;
    gap: 0.55rem;
}

.admin-service-row {
    box-shadow: none;
}

.admin-filter-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.compact-input {
    width: min(100%, 12rem);
    min-height: 2.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: var(--white);
    color: var(--text);
    font: inherit;
}

.admin-ops-list {
    align-content: start;
}

.admin-inline-form {
    margin: -0.25rem 0 0.7rem;
}

.admin-slot-list .admin-row-wide,
.admin-article-list .article-manager-row,
.admin-ops-list .reception-row,
.admin-ops-list .invoice-row {
    box-shadow: none;
}

.admin-invoice-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-detail-modal {
    width: min(74rem, calc(100vw - 2rem));
}

.admin-detail-list {
    display: grid;
    gap: 0.65rem;
}

.admin-detail-list .admin-row,
.admin-detail-list .article-manager-row {
    box-shadow: none;
}

.admin-report-page {
    background: #f6f8fb !important;
}

.admin-report-page .dashboard-hero {
    align-items: flex-start;
    padding: clamp(1.25rem, 3vw, 2.1rem) clamp(1rem, 5vw, 5rem) 0.9rem;
}

.admin-report-page .dashboard-hero h1 {
    margin-bottom: 0.55rem;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
}

.admin-report-page .hero-text {
    max-width: 42rem;
}

.admin-report-page .dashboard-panel {
    border-color: #dbe3ee;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.admin-report-page .panel-heading {
    align-items: flex-start;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.admin-report-page .panel-heading h2 {
    margin: 0;
    font-size: 1.2rem;
}

.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    box-shadow: none;
}

.report-toolbar .compact-select {
    width: 10.5rem;
    min-height: 2.5rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    color: var(--ink);
    background: var(--white);
    font-weight: 750;
}

.report-toolbar .secondary-button {
    min-height: 2.5rem;
    box-shadow: none;
}

.report-kpis {
    padding-bottom: 1rem;
}

.report-kpis article {
    position: relative;
    display: grid;
    gap: 0.3rem;
    min-height: 8rem;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.report-kpis article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.32rem;
    background: var(--blue-700);
}

.report-kpis article:nth-child(2)::before {
    background: #10b981;
}

.report-kpis article:nth-child(3)::before {
    background: #0f766e;
}

.report-kpis article:nth-child(4)::before {
    background: #f59e0b;
}

.report-kpis span {
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-kpis strong {
    margin-top: 0.15rem;
    color: var(--ink);
    font-size: clamp(1.85rem, 2.8vw, 2.45rem);
    line-height: 1;
}

.report-kpis small,
.report-mini-panel small {
    color: var(--muted);
    font-weight: 750;
    line-height: 1.45;
}

.report-revenue-panel {
    display: grid;
    gap: 1rem;
}

.report-revenue-actions {
    display: grid;
    gap: 0.65rem;
    justify-items: end;
}

.report-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.report-filter-chip {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--white);
    cursor: pointer;
    font-weight: 800;
}

.report-filter-chip.is-active,
.report-filter-chip:hover {
    border-color: var(--blue-700);
    color: var(--blue-800);
    background: var(--blue-50);
}

.report-revenue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.report-revenue-card {
    display: grid;
    gap: 0.34rem;
    min-height: 9.5rem;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    color: var(--ink);
    text-align: left;
    background: #f8fbff;
    cursor: pointer;
}

.report-revenue-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-revenue-card strong {
    font-size: 1.45rem;
    line-height: 1.1;
}

.report-revenue-card small,
.report-revenue-card em,
.report-revenue-card b {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.45;
}

.report-revenue-card b {
    color: var(--blue-800);
}

.report-revenue-card.is-active,
.report-revenue-card:hover {
    border-color: var(--blue-700);
    background: var(--blue-50);
}

.report-shell {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 5rem) 3rem;
}

.report-overview,
.report-summary-grid,
.report-grid {
    display: grid;
    gap: 1rem;
}

.report-overview {
    grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1fr);
    align-items: stretch;
}

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

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

.report-grid-compact {
    align-items: start;
}

.report-mini-panel {
    display: grid;
    gap: 0.55rem;
    min-height: 6.5rem;
    padding: 1rem;
}

.report-mini-panel div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.report-mini-panel span {
    color: var(--muted);
    font-weight: 750;
}

.report-mini-panel strong {
    color: var(--ink);
    font-size: 1.55rem;
    line-height: 1;
}

.report-chart-panel,
.report-health-panel {
    min-width: 0;
    overflow: hidden;
}

.report-health-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.report-health-main,
.report-empty-state {
    display: grid;
    gap: 0.6rem;
    padding: 0.95rem;
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    background: #f8fbff;
}

.report-health-main p,
.report-empty-state p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.report-health-actions,
.report-readiness-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-health-actions span,
.report-readiness-item {
    display: inline-grid;
    gap: 0.16rem;
    min-height: 2.2rem;
    padding: 0.45rem 0.68rem;
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 750;
}

.report-readiness-list {
    align-content: start;
}

.report-readiness-item {
    flex: 1 1 9.5rem;
}

.report-readiness-item strong {
    color: var(--ink);
    font-size: 1.25rem;
}

.report-readiness-item.is-missing {
    border-color: #fde68a;
    background: #fffbeb;
}

.report-empty-state {
    min-height: 7rem;
    align-content: center;
}

.report-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(1.05rem, 1fr);
    align-items: end;
    gap: 0.3rem;
    min-height: 12rem;
    padding: 0.85rem 0.55rem 0.35rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.report-bars.is-empty {
    display: block;
    min-height: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.report-bar-item {
    display: grid;
    grid-template-rows: minmax(8rem, 1fr) 1.15rem;
    gap: 0.4rem;
    min-width: 1.05rem;
    align-items: end;
}

.report-bar-item > span {
    display: block;
    width: 100%;
    min-height: 0.45rem;
    border-radius: 0.35rem 0.35rem 0 0;
    background: linear-gradient(180deg, var(--blue-800), #0f766e);
}

.report-bar-item small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-status-list,
.report-table {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.report-status-list > .muted-text,
.report-table > .muted-text {
    margin: 0;
    padding: 0.95rem;
}

.report-status-row,
.report-table-row,
.report-table-head {
    display: grid;
    gap: 0.75rem;
    align-items: center;
    padding: 0.82rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.report-status-row:last-child,
.report-table-row:last-child,
.report-table-head:last-child,
.report-table .report-empty-state:last-child,
.report-status-list .report-empty-state:last-child {
    border-bottom: 0;
}

.report-table .report-empty-state,
.report-status-list .report-empty-state {
    border: 0;
    border-radius: 0;
}

.report-status-row {
    grid-template-columns: minmax(8.5rem, 0.42fr) minmax(0, 1fr) 3rem;
}

.report-status-row div:first-child,
.report-table-row div {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.report-status-row span,
.report-table-row span,
.report-table-head span,
.report-table-row div span {
    color: var(--muted);
    line-height: 1.45;
}

.report-status-row b,
.report-table-row > strong,
.report-table-row > span {
    text-align: right;
}

.report-progress {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--blue-50);
}

.report-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f766e;
}

.report-doctor-row {
    grid-template-columns: minmax(14rem, 1.45fr) repeat(3, minmax(4.5rem, 0.38fr)) minmax(7.5rem, 0.58fr);
}

.report-service-row,
.report-specialty-row {
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(7rem, auto);
}

.report-table-head {
    min-height: auto;
    padding-block: 0.58rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #f8fafc;
}

.report-table-row strong,
.report-table-row span {
    overflow-wrap: anywhere;
}

.report-details {
    display: grid;
    gap: 0.75rem;
}

.report-details summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
    cursor: pointer;
    font-weight: 850;
}

.report-details summary::-webkit-details-marker {
    display: none;
}

.report-details summary small {
    color: var(--muted);
    font-weight: 750;
}

.report-revenue-row {
    grid-template-columns: minmax(14rem, 1.2fr) minmax(10rem, 0.75fr) minmax(9rem, 0.55fr) minmax(8rem, 0.55fr);
}

.report-revenue-row .status-pill {
    justify-self: end;
    white-space: nowrap;
}

.report-revenue-row > strong small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

html[data-theme="dark"] .admin-report-page,
html[data-theme="dark"] .admin-report-page .dashboard-panel,
html[data-theme="dark"] .admin-report-page .report-kpis article,
html[data-theme="dark"] .report-filter-chip,
html[data-theme="dark"] .report-revenue-card,
html[data-theme="dark"] .report-details summary,
html[data-theme="dark"] .report-toolbar,
html[data-theme="dark"] .report-toolbar .compact-select,
html[data-theme="dark"] .report-bars,
html[data-theme="dark"] .report-table,
html[data-theme="dark"] .report-status-list,
html[data-theme="dark"] .admin-report-page .report-table-head,
html[data-theme="dark"] .admin-report-page .report-health-main,
html[data-theme="dark"] .admin-report-page .report-empty-state,
html[data-theme="dark"] .admin-report-page .report-readiness-item,
html[data-theme="dark"] .admin-report-page .report-health-actions span {
    border-color: #2b2b2b;
    background: #080808 !important;
}

html[data-theme="dark"] .admin-report-page .dashboard-panel,
html[data-theme="dark"] .admin-report-page .report-kpis article {
    box-shadow: none;
}

html[data-theme="dark"] .report-filter-chip.is-active,
html[data-theme="dark"] .report-filter-chip:hover,
html[data-theme="dark"] .report-revenue-card.is-active,
html[data-theme="dark"] .report-revenue-card:hover {
    border-color: #60a5fa;
    color: #ffffff;
    background: #111111 !important;
}

.receptionist-page {
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.reception-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 0.48fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 clamp(1rem, 5vw, 5rem) 1.5rem;
}

.reception-left {
    display: grid;
    gap: 1rem;
}

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

.reception-row,
.reception-request {
    display: grid;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.reception-row {
    grid-template-columns: 7.5rem minmax(13rem, 1.3fr) minmax(10rem, 0.85fr) minmax(12rem, 1fr) minmax(9rem, 0.62fr);
    align-items: center;
    border-left: 0.35rem solid var(--blue-600);
    box-shadow: 0 0.45rem 1.4rem rgba(15, 23, 42, 0.05);
}

.reception-row.is-waiting {
    border-left-color: #f59e0b;
}

.reception-row.is-confirmed {
    border-left-color: var(--success);
    background: linear-gradient(90deg, #f0fdf4 0, var(--white) 36%);
}

.reception-row.is-active {
    border-left-color: #2563eb;
}

.reception-row.is-done {
    border-left-color: #64748b;
}

.reception-row.is-cancelled {
    border-left-color: #ef4444;
    opacity: 0.82;
}

.reception-list-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.15rem 0 0.55rem;
}

.reception-list-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 0.86rem;
}

.reception-list-summary strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.reception-list-head {
    display: grid;
    grid-template-columns: 7.5rem minmax(13rem, 1.3fr) minmax(10rem, 0.85fr) minmax(12rem, 1fr) minmax(9rem, 0.62fr);
    gap: 1rem;
    padding: 0.35rem 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.reception-row .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    min-width: 0;
    align-content: center;
}

.reception-row .dashboard-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 0.75rem;
}

.reception-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.45fr) minmax(10rem, 0.45fr);
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.reception-filters input,
.reception-filters select {
    min-height: 2.65rem;
}

.reception-row.is-confirmed [data-confirm] {
    display: none;
}

.reception-time,
.reception-patient,
.reception-doctor,
.reception-step,
.reception-main,
.reception-request > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.reception-time strong {
    color: var(--blue-800);
    font-size: 1.12rem;
    white-space: nowrap;
}

.reception-doctor strong,
.reception-step strong {
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.reception-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.reception-title-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.reception-time span,
.reception-patient span,
.reception-doctor span,
.reception-step span,
.reception-main span,
.reception-request span {
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.reception-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.status-pill.is-waiting {
    color: #92400e;
    background: #fef3c7;
}

.status-pill.is-confirmed {
    color: #166534;
    background: #dcfce7;
}

.status-pill.is-active {
    color: #1d4ed8;
    background: #dbeafe;
}

.status-pill.is-done {
    color: #475569;
    background: #e2e8f0;
}

.status-pill.is-cancelled {
    color: #b42318;
    background: #fee2e2;
}

.patient-schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0 clamp(1rem, 4vw, 4rem) 4rem;
}

.patient-schedule-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--blue-600);
    border-radius: 0.5rem;
    background: var(--white);
}

.patient-schedule-row.is-waiting {
    border-left-color: #f59e0b;
}

.patient-schedule-row.is-confirmed {
    border-left-color: var(--success);
    background: linear-gradient(90deg, #f0fdf4 0, var(--white) 36%);
}

.patient-schedule-row.is-active {
    border-left-color: #2563eb;
}

.patient-schedule-row.is-done {
    border-left-color: #64748b;
}

.patient-schedule-row.is-cancelled {
    border-left-color: #ef4444;
    opacity: 0.84;
}

.patient-schedule-time,
.patient-schedule-main {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.patient-schedule-time strong {
    color: var(--blue-950);
}

.patient-schedule-time span,
.patient-schedule-main span {
    color: var(--muted);
}

.reception-request {
    grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr);
    align-items: start;
    background: #fbfdff;
}

.reception-requests-panel {
    overflow: hidden;
}

.reception-requests-panel .dashboard-list {
    gap: 0.9rem;
}

.reception-requests-panel .reception-request {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1rem;
    border-left: 0.35rem solid #f59e0b;
}

.reception-request-summary {
    padding-right: 0.25rem;
}

.reception-request-summary > span {
    display: none;
}

.request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.request-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-800);
    font-size: 0.9rem;
    font-weight: 750;
}

.reception-inline-form {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(8.5rem, 0.6fr) minmax(7.5rem, 0.45fr);
    gap: 0.75rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
}

.reception-requests-panel .reception-inline-form {
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.72fr);
    gap: 0.85rem;
    padding: 0.9rem;
    background: #f8fafc;
}

.reception-inline-form label {
    min-width: 0;
}

.form-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.request-reason-field {
    grid-column: 1 / -1;
}

.reception-requests-panel .request-reason-field {
    grid-column: 1 / -1;
}

.reception-inline-form .dashboard-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.reception-requests-panel .dashboard-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.reception-requests-panel .dashboard-actions .primary-button,
.reception-requests-panel .dashboard-actions .danger-button {
    width: 100%;
    min-width: 0;
}

.reception-request-compact {
    gap: 0.75rem;
}

.reception-request-compact .reception-note {
    display: -webkit-box;
    max-height: 4.4rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.reception-request-actions {
    align-items: stretch;
}

body.has-open-modal {
    overflow: hidden;
}

.reception-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
}

.reception-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(60rem, calc(100vw - 2rem));
    max-height: min(46rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--white);
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.22);
}

.reception-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.reception-modal-header h2 {
    margin: 0;
    font-size: 1.18rem;
}

.modal-close-button {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 0;
    border-radius: 0.45rem;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
}

.modal-close-button:hover {
    color: var(--ink);
    background: var(--blue-50);
}

.reception-modal-body {
    display: grid;
    grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.25fr);
    min-height: 0;
    overflow: auto;
}

.reception-modal-doctor,
.reception-modal-form {
    padding: 1.25rem;
}

.reception-modal-doctor {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    border-right: 1px solid var(--line);
    background: #f8fafc;
}

.modal-doctor-profile {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.modal-doctor-avatar {
    display: grid;
    width: 5.25rem;
    height: 5.25rem;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    font-size: 1.25rem;
    font-weight: 900;
}

.modal-doctor-profile strong,
.reception-modal-form h3 {
    display: block;
    margin: 0;
    color: var(--blue-950);
    line-height: 1.25;
}

.modal-doctor-profile span {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    line-height: 1.45;
}

.modal-detail-list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.modal-detail-list div {
    display: grid;
    gap: 0.2rem;
}

.modal-detail-list dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.modal-detail-list dd {
    margin: 0;
    color: var(--ink);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.reception-modal-form {
    display: grid;
    gap: 0.95rem;
}

.form-section-title {
    display: grid;
    gap: 0.15rem;
}

.form-section-title .eyebrow {
    margin: 0;
}

.reception-modal-form input[readonly] {
    color: var(--muted);
    background: #f8fafc;
}

.reception-slot-board {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.direct-slot-board {
    padding: 0.85rem;
}

.direct-slot-board .slot-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(6.35rem, 1fr));
}

.walkin-note {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid #bfdbfe;
    border-left: 0.25rem solid var(--blue-800);
    border-radius: 0.5rem;
    color: var(--muted);
    background: var(--blue-50);
    line-height: 1.45;
}

.walkin-note strong {
    color: var(--blue-950);
}

.slot-board-head,
.slot-shift-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.slot-board-head strong {
    color: var(--blue-950);
}

.slot-board-head span,
.slot-shift-heading span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.slot-shift-group {
    display: grid;
    gap: 0.55rem;
}

.slot-shift-heading strong {
    color: var(--ink);
}

.slot-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr));
    gap: 0.55rem;
}

.slot-choice-button {
    display: grid;
    gap: 0.15rem;
    min-height: 3.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--blue-950);
    background: var(--white);
    cursor: pointer;
    text-align: left;
}

.slot-choice-button strong {
    font-size: 1rem;
}

.slot-choice-button span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.slot-choice-button:hover,
.slot-choice-button.is-selected {
    border-color: var(--blue-800);
    color: var(--white);
    background: var(--blue-800);
}

.slot-choice-button:hover span,
.slot-choice-button.is-selected span {
    color: rgba(255, 255, 255, 0.88);
}

.slot-shift-empty {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: 0.5rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.65);
    font-weight: 650;
}

.reception-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.reception-modal-actions .primary-button,
.reception-modal-actions .secondary-button {
    min-width: 9rem;
}

.reception-create-card {
    display: grid;
    gap: 1rem;
}

.reception-create-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.reception-create-actions {
    display: grid;
    gap: 0.65rem;
}

.reception-create-hints {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.reception-create-hints span {
    display: block;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--muted);
    background: #f8fafc;
    font-weight: 650;
    line-height: 1.4;
}

.reception-direct-modal {
    width: min(68rem, calc(100vw - 2rem));
}

.reception-direct-modal-body {
    grid-template-columns: minmax(16rem, 0.62fr) minmax(0, 1.38fr);
}

.reception-direct-form {
    align-content: start;
}

.reception-direct-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #f8fafc;
}

.reception-direct-progress button {
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.reception-direct-progress button.active,
.reception-direct-progress button.is-complete {
    border-color: var(--blue-700);
    color: var(--blue-800);
    background: var(--blue-50);
}

.reception-direct-progress button.active {
    color: var(--white);
    background: var(--blue-700);
}

.reception-direct-step {
    display: grid;
    gap: 0.95rem;
}

.reception-direct-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.reception-direct-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    background: var(--blue-50);
}

.reception-direct-summary span,
.reception-direct-summary small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.reception-direct-summary strong {
    color: var(--blue-950);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.reception-message {
    padding: 0 clamp(1rem, 5vw, 5rem);
}

.reception-ops-layout {
    grid-template-columns: minmax(15rem, 0.44fr) minmax(0, 1.35fr) minmax(18.5rem, 0.68fr);
    gap: 1rem;
    min-height: calc(100vh - 18rem);
}

.reception-ops-layout .dashboard-panel {
    padding: 1rem;
}

.reception-ops-layout .reception-list-head {
    display: none;
}

.reception-ops-layout .reception-row {
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
}

.reception-ops-layout .reception-doctor,
.reception-ops-layout .reception-step,
.reception-ops-layout .reception-row .dashboard-actions {
    grid-column: 2;
}

.reception-ops-layout .reception-doctor,
.reception-ops-layout .reception-step {
    grid-template-columns: minmax(0, 1fr);
}

.reception-ops-layout .reception-row .dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-start;
}

.reception-ops-layout .reception-row .dashboard-actions button,
.reception-ops-layout .reception-row .dashboard-actions a {
    width: auto;
    min-width: 5.5rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
}

.reception-ops-layout .reception-title-line {
    align-items: flex-start;
}

.reception-ops-layout .reception-title-line .status-pill {
    flex: 0 0 auto;
}

.reception-ops-layout .reception-note {
    max-width: 100%;
}

.reception-ops-layout .reception-time strong {
    font-size: 1rem;
}

.reception-ops-layout .reception-scroll-list {
    overflow-x: hidden;
}

.reception-create-panel,
.reception-appointments-panel,
.reception-workqueue {
    position: sticky;
    top: 5.8rem;
    align-self: start;
}

.reception-workqueue {
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 7rem);
}

.reception-task-panel {
    min-height: 0;
}

.reception-task-panel:first-child {
    max-height: min(44vh, 34rem);
}

.reception-task-panel:last-child {
    max-height: min(32vh, 24rem);
}

.reception-appointments-panel {
    max-height: calc(100vh - 7rem);
}

.reception-scroll-list {
    overflow: auto;
    padding-right: 0.25rem;
    scrollbar-gutter: stable;
}

.reception-appointments-panel .reception-scroll-list {
    max-height: calc(100vh - 17rem);
}

.reception-task-panel .reception-scroll-list {
    max-height: calc(100% - 4.5rem);
}

.reception-invoices-panel .invoice-row {
    grid-template-columns: 1fr;
}

.reception-invoices-panel .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.reception-invoices-panel .primary-button,
.reception-invoices-panel .secondary-button {
    width: 100%;
    min-width: 0;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .clinic-hero,
html:not([data-theme="dark"]) .schedule-section,
html:not([data-theme="dark"]) .doctor-section,
html:not([data-theme="dark"]) .booking-page,
html:not([data-theme="dark"]) .dashboard-page,
html:not([data-theme="dark"]) .invoice-page,
html:not([data-theme="dark"]) .account-section,
html:not([data-theme="dark"]) .doctor-profile-band,
html:not([data-theme="dark"]) .site-footer {
    background: #ffffff !important;
}

html:not([data-theme="dark"]) .hero-panel,
html:not([data-theme="dark"]) .auth-card,
html:not([data-theme="dark"]) .notice-box,
html:not([data-theme="dark"]) .home-search-results,
html:not([data-theme="dark"]) .doctor-photo,
html:not([data-theme="dark"]) .specialty-card-image,
html:not([data-theme="dark"]) .specialty-hero-image,
html:not([data-theme="dark"]) .specialty-admin-thumb,
html:not([data-theme="dark"]) .specialty-upload-preview,
html:not([data-theme="dark"]) .specialty-home-card,
html:not([data-theme="dark"]) .article-home-card,
html:not([data-theme="dark"]) .role-menu a,
html:not([data-theme="dark"]) .article-manager-row,
html:not([data-theme="dark"]) .related-item,
html:not([data-theme="dark"]) .specialty-service-item,
html:not([data-theme="dark"]) .doctor-info-list div,
html:not([data-theme="dark"]) .stats-band,
html:not([data-theme="dark"]) .service-card,
html:not([data-theme="dark"]) .doctor-card,
html:not([data-theme="dark"]) .schedule-row,
html:not([data-theme="dark"]) .dashboard-panel,
html:not([data-theme="dark"]) .dashboard-row,
html:not([data-theme="dark"]) .admin-row,
html:not([data-theme="dark"]) .admin-row-wide,
html:not([data-theme="dark"]) .booking-panel,
html:not([data-theme="dark"]) .booking-mode-panel,
html:not([data-theme="dark"]) .booking-method,
html:not([data-theme="dark"]) .booking-card,
html:not([data-theme="dark"]) .patient-schedule-row,
html:not([data-theme="dark"]) .reception-row,
html:not([data-theme="dark"]) .reception-request,
html:not([data-theme="dark"]) .invoice-section,
html:not([data-theme="dark"]) .invoice-service-card,
html:not([data-theme="dark"]) .doctor-billing-row,
html:not([data-theme="dark"]) .medicine-line,
html:not([data-theme="dark"]) .slot-card,
html:not([data-theme="dark"]) .admin-table,
html:not([data-theme="dark"]) .report-table-row,
html:not([data-theme="dark"]) .report-status-row,
html:not([data-theme="dark"]) .invoice-side,
html:not([data-theme="dark"]) .clinic-contact-card {
    background: #ffffff !important;
}

html:not([data-theme="dark"]) .auth-tabs,
html:not([data-theme="dark"]) code,
html:not([data-theme="dark"]) .selected-slot,
html:not([data-theme="dark"]) .reception-list-summary span,
html:not([data-theme="dark"]) .doctor-dashboard-calendar,
html:not([data-theme="dark"]) .invoice-total,
html:not([data-theme="dark"]) .booking-warning,
html:not([data-theme="dark"]) .doctor-note-box,
html:not([data-theme="dark"]) .medicine-create-panel {
    background: #fafafa !important;
}

html:not([data-theme="dark"]) .schedule-row.active,
html:not([data-theme="dark"]) .reception-row.is-confirmed,
html:not([data-theme="dark"]) .patient-schedule-row.is-confirmed,
html:not([data-theme="dark"]) .slot-card.is-selected,
html:not([data-theme="dark"]) .booking-method.is-selected {
    background: #ffffff !important;
}

html:not([data-theme="dark"]) .booking-method.active,
html:not([data-theme="dark"]) .booking-method.active:hover {
    border-color: var(--blue-700);
    color: var(--white);
    background: var(--blue-700) !important;
}

html:not([data-theme="dark"]) .booking-method:not(.active):hover {
    border-color: var(--blue-700);
    color: var(--blue-800);
    background: var(--blue-50) !important;
}

html:not([data-theme="dark"]) .role-menu {
    background: #f8fafc !important;
}

html:not([data-theme="dark"]) .role-sidebar {
    background: #ffffff !important;
}

html:not([data-theme="dark"]) .role-menu a {
    background: transparent !important;
}

html:not([data-theme="dark"]) .role-menu a:hover,
html:not([data-theme="dark"]) .role-menu a[aria-current="page"] {
    color: var(--white);
    background: var(--blue-700) !important;
}

html:not([data-theme="dark"]) .admin-report-page {
    background: #f6f8fb !important;
}

@media (max-width: 980px) {
    .site-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .mega-nav-scroll {
        min-height: 3.55rem;
        padding-inline: 1rem;
    }

    .mega-menu-trigger {
        min-height: 3.55rem;
        font-size: 1rem;
    }

    .mega-panel {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-height: min(31rem, calc(100vh - 8rem));
        padding: 1.25rem;
    }

    .mega-panel-intro {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .dashboard-page:has(> .role-sidebar),
    .invoice-page:has(> .role-sidebar) {
        padding-left: 0;
    }

    .role-sidebar {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        height: auto;
        margin: 1rem clamp(1rem, 5vw, 5rem) 0;
        padding: 0.45rem;
        border: 1px solid var(--line);
        border-radius: 0.75rem;
        overflow-x: auto;
    }

    .role-sidebar .role-menu-heading {
        display: none;
    }

    .role-sidebar a {
        justify-content: center;
        width: auto;
    }

    .hero,
    .schedule-layout,
    .medicine-layout,
    .account-section,
    .booking-shell,
    .booking-workspace,
    .booking-mode-panel,
    .dashboard-grid,
    .admin-two-column,
    .reception-layout,
    .invoice-layout,
    .article-detail-layout,
    .specialty-detail-layout,
    .doctor-detail-layout,
    .profile-editor-layout {
        grid-template-columns: 1fr;
    }

    .doctor-flow-strip,
    .patient-detail-grid {
        grid-template-columns: 1fr;
    }

    .patient-detail-card-wide {
        grid-column: auto;
    }

    .portal-nav {
        width: 100%;
    }

    .specialty-home-grid,
    .article-home-grid,
    .article-manager-layout {
        grid-template-columns: 1fr 1fr;
    }

    .invoice-side {
        position: static;
    }

    .reception-request,
    .reception-inline-form {
        grid-template-columns: 1fr 1fr;
    }

    .reception-modal {
        width: min(44rem, calc(100vw - 2rem));
    }

    .reception-modal-body {
        grid-template-columns: 1fr;
    }

    .reception-modal-doctor {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .reception-row {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .reception-list-head {
        display: none;
    }

    .reception-doctor,
    .reception-step,
    .reception-row .dashboard-actions {
        grid-column: 2;
    }

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

    .reception-requests-panel .reception-inline-form {
        grid-template-columns: 1fr;
    }

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

    .report-overview {
        grid-template-columns: 1fr;
    }

    .report-summary-grid,
    .report-grid,
    .report-revenue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-health-grid {
        grid-template-columns: 1fr;
    }

    .booking-card,
    .article-detail-sidebar,
    .specialty-side-column,
    .profile-preview-card {
        position: static;
    }

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

    .stats-band div:nth-child(2) {
        border-right: 0;
    }

    .stats-band div:nth-child(1),
    .stats-band div:nth-child(2) {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 0.85rem;
    }

    .brand {
        min-width: 0;
    }

    .header-account {
        order: 2;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .header-account a,
    .header-account button {
        flex: 1 1 9rem;
    }

    .mega-nav-scroll {
        gap: 1rem;
    }

    .mega-panel {
        max-height: min(32rem, calc(100vh - 7.5rem));
        padding: 1rem;
    }

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

    .role-menu {
        flex-wrap: nowrap;
        margin-inline: 0.85rem;
        overflow-x: auto;
    }

    .hero {
        min-height: auto;
        padding-top: 2.5rem;
    }

    .dashboard-hero,
    .invoice-hero,
    .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .doctor-panel-tools,
    .patient-history-heading,
    .patient-history-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .patient-detail-modal {
        max-height: calc(100vh - 1rem);
    }

    .patient-detail-card dl div,
    .patient-history-card dl div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .doctor-billing-filters {
        grid-template-columns: 1fr;
        width: 100%;
    }

    h1 {
        font-size: 2.55rem;
    }

    .stats-band,
    .service-grid,
    .auth-tabs,
    .booking-methods,
    .booking-steps,
    .booking-filters,
    .portal-shortcuts,
    .specialty-home-grid,
    .article-home-grid,
    .article-manager-layout,
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .portal-hero {
        min-height: auto;
        padding-block: 2.5rem;
        text-align: left;
        background:
            linear-gradient(90deg, rgba(248, 252, 255, 0.98), rgba(237, 252, 250, 0.9)),
            url("/assets/clinic-hero.png") center / cover no-repeat;
    }

    .portal-hero-content {
        justify-items: start;
    }

    .portal-hero-actions {
        justify-content: flex-start;
    }

    .portal-search {
        border-radius: 0.65rem;
        align-items: stretch;
        flex-direction: column;
    }

    .home-search-results {
        position: static;
        width: 100%;
        margin-top: 0.25rem;
    }

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .booking-hero {
        padding-top: 1.4rem;
    }

    .booking-hero h1 {
        font-size: 2.15rem;
    }

    .booking-mode-panel {
        gap: 0.45rem;
        padding: 0.9rem;
    }

    .date-booking-heading,
    .date-booking-progress {
        grid-template-columns: 1fr;
    }

    .booking-date-calendar,
    .booking-specialty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-doctor-choice-grid {
        grid-template-columns: 1fr;
    }

    .booking-doctor-choice-actions {
        grid-template-columns: 1fr;
    }

    .doctor-preview-modal {
        grid-template-columns: 1fr;
    }

    .doctor-preview-side {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .doctor-preview-body {
        padding-top: 1.2rem;
    }

    .doctor-preview-list {
        grid-template-columns: 1fr;
    }

    .doctor-preview-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-specialty-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-specialty-card .booking-specialty-title-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .booking-specialty-card .booking-specialty-chevron {
        display: none;
    }

    .booking-step-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-step-actions button {
        width: 100%;
    }

    .booking-doctor-card {
        padding: 0.9rem;
    }

    .booking-doctor-head {
        align-items: flex-start;
    }

    .booking-date-chip {
        min-width: 5.9rem;
    }

    .booking-time-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .appointment-slot-button {
        min-height: 4.8rem;
        padding: 0.65rem 0.45rem;
    }

    .patient-profile-layout,
    .patient-profile-form {
        grid-template-columns: 1fr;
    }

    .booking-profile-actions,
    .profile-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

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

    .booking-profile-alert strong,
    .booking-profile-alert span,
    .booking-profile-alert a {
        grid-column: 1;
        grid-row: auto;
    }

    .report-overview,
    .report-summary-grid,
    .report-grid,
    .report-revenue-grid,
    .report-health-grid,
    .report-revenue-row,
    .report-doctor-row,
    .report-service-row,
    .report-specialty-row,
    .report-status-row {
        grid-template-columns: 1fr;
    }

    .report-table-head {
        display: none;
    }

    .report-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .report-revenue-actions,
    .report-detail-actions {
        width: 100%;
        justify-items: stretch;
    }

    .report-toolbar .compact-select,
    .report-toolbar .secondary-button {
        flex: 1 1 9rem;
    }

    .report-detail-actions {
        justify-content: flex-start;
    }

    .report-filter-chip {
        flex: 1 1 8rem;
    }

    .report-status-row b,
    .report-table-row > strong,
    .report-table-row > span {
        text-align: left;
    }

    .report-revenue-row .status-pill {
        justify-self: start;
        white-space: normal;
    }

    .report-bars {
        min-height: 10.5rem;
    }

    .stats-band div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stats-band div:last-child {
        border-bottom: 0;
    }

    .schedule-row,
    .site-footer,
    .panel-topline,
    .doctor-strip,
    .doctor-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .doctor-grid,
    .slot-grid {
        grid-template-columns: 1fr;
    }

    .doctor-card,
    .doctor-profile {
        grid-template-columns: 1fr;
    }

    .dashboard-row,
    .doctor-billing-row,
    .medicine-manager-row,
    .invoice-service-grid {
        grid-template-columns: 1fr;
    }

    .admin-row,
    .admin-row-wide,
    .admin-invoice-detail-grid,
    .article-manager-row,
    .reception-row,
    .reception-request,
    .patient-schedule-row,
    .reception-inline-form,
    .form-grid-2,
    .medicine-line,
    .medicine-create-grid,
    .invoice-medicine-line {
        grid-template-columns: 1fr;
    }

    .reception-doctor,
    .reception-step,
    .reception-row .dashboard-actions {
        grid-column: auto;
    }

    .reception-row .dashboard-actions {
        grid-template-columns: 1fr;
    }

    .reception-list-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reception-list-summary span {
        justify-content: center;
    }

    .reception-title-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .reception-modal-backdrop {
        padding: 0.5rem;
    }

    .reception-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .reception-modal-header,
    .reception-modal-doctor,
    .reception-modal-form {
        padding: 1rem;
    }

    .modal-doctor-profile {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .modal-doctor-avatar {
        width: 4rem;
        height: 4rem;
    }

    .reception-modal-actions {
        flex-direction: column-reverse;
    }

    .reception-modal-actions .primary-button,
    .reception-modal-actions .secondary-button {
        width: 100%;
    }

    .reception-direct-progress,
    .reception-direct-summary {
        grid-template-columns: 1fr;
    }

    .slot-board-head,
    .slot-shift-heading {
        flex-direction: column;
        gap: 0.25rem;
    }

    .reception-requests-panel .dashboard-actions {
        grid-template-columns: 1fr;
    }

    .reception-filters {
        grid-template-columns: 1fr;
    }

    .dashboard-actions,
    .appointment-edit-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .appointment-edit-form,
    .slot-edit-form {
        grid-template-columns: 1fr;
    }

    .status-pill {
        justify-self: start;
    }

    .patient-schedule-layout {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
    }

    .booking-card {
        position: static;
    }
}

@media (max-width: 1180px) {
    .reception-ops-layout {
        grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1fr);
    }

    .reception-workqueue {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .reception-create-panel,
    .reception-appointments-panel,
    .reception-workqueue {
        position: static;
    }

    .reception-task-panel:first-child,
    .reception-task-panel:last-child {
        max-height: 34rem;
    }
}

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

    .reception-appointments-panel,
    .reception-task-panel:first-child,
    .reception-task-panel:last-child {
        max-height: none;
    }

    .reception-scroll-list,
    .reception-appointments-panel .reception-scroll-list,
    .reception-task-panel .reception-scroll-list {
        max-height: none;
        overflow: visible;
    }
}