/* ============================================
   FIGO - Account Page Styles
   ============================================ */

/* Hide nav and footer on focused account pages */
body:has(.ea-page) .nav-header,
body:has(.facility-shell) .nav-header,
body:has(.ea-page) .footer {
    display: none;
}

body:has(.facility-shell) .footer {
    display: none;
}

body:has(.ea-page) main,
body:has(.facility-shell) main {
    padding-top: 0;
}

/* Page Layout */
.ea-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef1fa 50%, #f5f3ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.ea-wrapper {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Logo */
.ea-logo-bar {
    margin-bottom: 4px;
}

.ea-logo-img {
    height: 44px;
    width: auto;
}

/* Card */
.ea-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 32px 36px;
    width: 100%;
}

/* Top bar (Back link) */
.ea-card-top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.ea-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-primary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ea-back-link:hover {
    background-color: rgba(51, 79, 224, 0.06);
}

.ea-back-link i {
    font-size: 0.75rem;
}

/* Headings */
.ea-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.ea-heading-center {
    text-align: center;
}

.ea-intro,
.ea-success-intro {
    font-size: 0.875rem;
    font-weight: 400;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

.ea-success-intro {
    text-align: center;
}

/* Success Icon */
.ea-success-icon {
    text-align: center;
    margin-bottom: 16px;
}

.ea-success-icon i {
    font-size: 3rem;
    color: #22c55e;
}

/* Signup Choices */
.ea-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ea-choice-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
    padding: 22px;
    border: 1px solid #D4D4DE;
    border-radius: 12px;
    background: #ffffff;
    color: var(--color-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ea-choice-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(51, 79, 224, 0.12);
    transform: translateY(-2px);
}

.ea-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(51, 79, 224, 0.08);
    color: var(--color-primary);
    font-size: 1.1rem;
}

.ea-choice-title {
    font-size: 1rem;
    font-weight: 700;
}

.ea-choice-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
}

.ea-auth-switch {
    margin-top: 22px;
    text-align: center;
    font-size: 0.875rem;
    color: #555;
}

.ea-auth-switch a {
    color: var(--color-primary);
    font-weight: 700;
}

.ea-alert {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.ea-alert p {
    margin: 0;
    font-size: 0.85rem;
}

.ea-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #ef4444;
}

/* Collapsible Sections */
.ea-collapse-group {
    border: 1px solid #EDEDF2;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.ea-collapse-group:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.ea-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #FAFAFD;
    border: none;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.ea-collapse-toggle:hover {
    background-color: #F2F2FA;
}

.ea-collapse-icon {
    font-size: 0.7rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.ea-collapse-group.is-open .ea-collapse-icon {
    transform: rotate(180deg);
}

.ea-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.ea-collapse-group.is-open .ea-collapse-body {
    max-height: 500px;
}

.ea-collapse-body p,
.ea-collapse-body ul {
    padding: 0 18px;
    font-size: 0.835rem;
    color: #555;
    line-height: 1.7;
}

.ea-collapse-body p {
    margin-bottom: 8px;
}

.ea-collapse-body p:first-child,
.ea-collapse-body ul:first-child {
    padding-top: 12px;
    border-top: 1px solid #EDEDF2;
}

.ea-collapse-body p:last-child,
.ea-collapse-body ul:last-child {
    margin-bottom: 0;
    padding-bottom: 14px;
}

.ea-collapse-body ul {
    list-style-type: disc;
    padding-left: 36px;
    padding-right: 18px;
}

.ea-collapse-body ul li {
    margin-bottom: 4px;
}

/* CTA Buttons */
.ea-cta-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ea-select-btn {
    flex: 1;
    min-width: 200px;
    height: 46px;
    font-size: 0.9rem;
    border-radius: 10px;
    gap: 8px;
}

.btn-primary-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

.btn-primary-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Form Styles */
.ea-form-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary) !important;
    margin-bottom: 20px;
}

.ea-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ea-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ea-label {
    flex: 0 0 160px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    text-align: left;
}

.ea-field-wrapper {
    flex: 1;
    position: relative;
}

.ea-field-wrapper input,
.ea-field-wrapper select,
.ea-field-wrapper textarea {
    width: 100%;
    height: 42px;
    padding: 8px 16px;
    border: 1px solid #D4D4DE;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ea-field-wrapper input::placeholder {
    color: #A8A8B5;
    font-weight: 400;
}

.ea-field-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 79, 224, 0.1);
}

.ea-field-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--color-primary);
}

.ea-help-text {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 0.75rem;
    line-height: 1.5;
}

.ea-field-error {
    display: block;
    font-size: 0.75rem;
    color: var(--color-secondary);
    margin-top: 4px;
}

.ea-form-submit {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.ea-submit-btn {
    min-width: 180px;
    height: 44px;
    border-radius: 10px;
}

/* Step Indicator */
.ea-step-indicator {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.ea-indicator {
    width: 28px;
    height: 5px;
    border-radius: 3px;
    background-color: rgba(51, 79, 224, 0.15);
    transition: background-color 0.3s ease, width 0.3s ease;
}

.ea-indicator-active {
    background-color: var(--color-primary);
    width: 36px;
}

/* Steps */
.ea-step {
    display: none;
    width: 100%;
    animation: fadeInStep 0.35s ease;
}

.ea-step-active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ── Responsive ── */
@media (max-width: 680px) {
    .ea-page {
        padding: 20px 12px;
        align-items: flex-start;
    }

    .ea-card {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .ea-heading {
        font-size: 1.25rem;
    }

    .ea-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ea-label {
        flex: none;
    }

    .ea-field-wrapper {
        width: 100%;
    }

    .ea-cta-buttons {
        flex-direction: column;
    }

    .ea-choice-grid {
        grid-template-columns: 1fr;
    }

    .ea-select-btn {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 400px) {
    .ea-card {
        padding: 20px 16px;
    }

    .ea-logo-img {
        height: 36px;
    }

    .ea-heading {
        font-size: 1.15rem;
    }

    .ea-collapse-toggle {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
}

/* Facility dashboard shell */
.facility-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    background: #f7f8fd;
    color: var(--color-dark);
}

.facility-sidebar {
    min-height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e8eaf4;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.facility-brand img {
    height: 42px;
    width: auto;
}

.facility-nav,
.facility-logout-form,
.facility-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.facility-sidebar-footer {
    margin-top: auto;
}

.facility-logout-form {
    margin: 0;
}

.facility-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #444756;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
}

.facility-nav-item i {
    width: 20px;
    color: var(--color-primary);
}

.facility-nav-item.is-active {
    background: rgba(51, 79, 224, 0.1);
    color: var(--color-primary);
}

.facility-nav-item.is-locked {
    color: #a0a4b6;
    cursor: not-allowed;
}

.facility-nav-item.is-locked i {
    color: #b9bdcc;
}

.facility-logout {
    width: 100%;
    cursor: pointer;
    color: #ef4444;
}

.facility-logout i {
    color: #ef4444;
}

.facility-main {
    padding: 32px;
}

.facility-topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px;
}

.facility-topbar h1,
.verification-hero h2,
.facility-panel h3 {
    margin: 0;
}

.facility-topbar h1 {
    font-size: 2rem;
}

.facility-eyebrow {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.facility-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    padding: 10px 14px;
    font-weight: 800;
    white-space: nowrap;
}

.facility-status-approved {
    background: #dcfce7;
    color: #166534;
}

.verification-hero,
.facility-panel {
    background: #ffffff;
    border: 1px solid #e8eaf4;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(31, 32, 38, 0.04);
}

.verification-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    gap: 28px;
    padding: 28px;
    margin-bottom: 24px;
}

.verification-hero h2 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.verification-hero p,
.facility-muted {
    color: #5f6373;
    line-height: 1.7;
}

.verification-progress {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.verification-step {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7b8092;
    font-weight: 700;
}

.verification-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf0fa;
    color: #7b8092;
}

.verification-step.is-complete span {
    background: #dcfce7;
    color: #15803d;
}

.verification-step.is-active span {
    background: rgba(51, 79, 224, 0.12);
    color: var(--color-primary);
}

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

.facility-panel {
    padding: 24px;
}

.facility-panel h3 {
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.facility-details {
    display: grid;
    gap: 14px;
    margin: 0;
}

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

.facility-details dt {
    color: #7b8092;
    font-weight: 700;
}

.facility-details dd {
    margin: 0;
    color: #27282f;
}

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

.verification-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    color: #4a4e5d;
}

.verification-list strong {
    grid-column: 2;
    color: #27282f;
}

.verification-list i {
    color: var(--color-primary);
    margin-top: 2px;
}

.locked-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.locked-modules span {
    border-radius: 999px;
    background: #f1f3fa;
    color: #7b8092;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.82rem;
}

.facility-messages {
    margin: 0 0 20px;
}

.facility-message {
    margin: 0;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
}

.facility-message-success {
    background: #dcfce7;
    color: #166534;
}

.facility-message-warning {
    background: #fef3c7;
    color: #92400e;
}

.verification-upload-form {
    display: grid;
    gap: 14px;
}

.verification-upload-row {
    display: grid;
    gap: 6px;
}

.verification-upload-row label {
    color: #4a4e5d;
    font-weight: 800;
    font-size: 0.85rem;
}

.verification-upload-row select,
.verification-upload-row input[type="file"] {
    width: 100%;
    border: 1px solid #d8dbea;
    border-radius: 8px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    padding: 10px 12px;
}

.verification-upload-row span {
    color: var(--color-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.staff-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.staff-form-panel h2,
.staff-list-panel h2 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.staff-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.staff-field {
    display: grid;
    gap: 6px;
}

.staff-field label {
    color: #4a4e5d;
    font-size: 0.84rem;
    font-weight: 800;
}

.staff-field input,
.staff-field select,
.staff-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8dbea;
    border-radius: 8px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    padding: 10px 12px;
}

.staff-field textarea {
    min-height: 96px;
    resize: vertical;
}

.staff-field span {
    color: var(--color-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.staff-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.staff-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.staff-table th,
.staff-table td {
    border-bottom: 1px solid #edf0f7;
    padding: 13px 12px;
    text-align: left;
    vertical-align: top;
}

.staff-table th {
    color: #6b7083;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.staff-table td {
    color: #30323b;
    font-size: 0.9rem;
}

.staff-table td strong,
.staff-table td span {
    display: block;
}

.staff-table td span {
    color: #707587;
    font-size: 0.82rem;
    margin-top: 4px;
}

.staff-badge {
    display: inline-flex !important;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.75rem !important;
    font-weight: 800;
}

.staff-badge-active {
    background: #dcfce7;
    color: #166534 !important;
}

.staff-badge-invited {
    background: #e0e7ff;
    color: #3730a3 !important;
}

.staff-badge-suspended {
    background: #fee2e2;
    color: #991b1b !important;
}

.staff-badge-inactive {
    background: #f1f5f9;
    color: #475569 !important;
}

.appointment-badge-scheduled {
    background: #e0e7ff;
    color: #3730a3 !important;
}

.appointment-badge-checked_in {
    background: #dcfce7;
    color: #166534 !important;
}

.appointment-badge-in_consultation {
    background: #fef3c7;
    color: #92400e !important;
}

.appointment-badge-completed {
    background: #dbeafe;
    color: #1d4ed8 !important;
}

.appointment-badge-cancelled,
.appointment-badge-no_show {
    background: #fee2e2;
    color: #991b1b !important;
}

.staff-permission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.staff-permission-tags span {
    display: inline-flex;
    border-radius: 999px;
    background: #f1f3fa;
    color: #5f6373;
    padding: 5px 8px;
    font-size: 0.74rem;
    font-weight: 800;
}

.staff-action-btn {
    border: 1px solid #d8dbea;
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 800;
    padding: 8px 12px;
}

.staff-action-danger {
    color: #ef4444;
}

.staff-static-action {
    color: #7b8092;
    font-weight: 800;
}

.clinical-note-card {
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fafbff;
}

.clinical-note-card p {
    color: #4a4e5d;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 8px;
}

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

@media (max-width: 980px) {
    .facility-shell {
        grid-template-columns: 1fr;
    }

    .facility-sidebar {
        min-height: auto;
    }

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

    .verification-hero,
    .facility-grid,
    .staff-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .facility-main {
        padding: 20px 14px;
    }

    .facility-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .facility-nav {
        grid-template-columns: 1fr;
    }

    .facility-details div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

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

.facility-dashboard-shell {
    grid-template-columns: 158px minmax(0, 1fr);
    background: #efeff7;
}

.facility-dashboard-shell .facility-sidebar {
    padding: 20px 11px;
    border-right: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    gap: 18px;
}

.facility-dashboard-shell .facility-brand {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    min-height: 22px;
    border: 1px solid #ececf7;
    border-radius: 5px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    padding: 2px 6px 2px 4px;
}

.facility-dashboard-shell .facility-brand::after {
    content: "FIGO";
}

.facility-dashboard-shell .facility-brand img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.facility-dashboard-shell .facility-nav {
    gap: 8px;
}

.facility-dashboard-shell .facility-sidebar-footer {
    gap: 8px;
}

.facility-dashboard-shell .facility-nav-item {
    min-height: 32px;
    border: 1px solid #e2e4ee;
    border-radius: 4px;
    color: #27282f;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 7px;
    padding: 6px 6px;
    white-space: nowrap;
}

.facility-dashboard-shell .facility-logout-form .facility-nav-item {
    width: 100%;
}

.facility-dashboard-shell .facility-nav-item i {
    color: #27282f;
    width: 13px;
    font-size: 0.76rem;
}

.facility-dashboard-shell .facility-nav-item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.facility-dashboard-shell .facility-nav-item.is-active i {
    color: #ffffff;
}

.facility-dashboard-shell .facility-logout {
    color: #ef4444;
}

.facility-dashboard-shell .facility-logout i {
    color: #ef4444;
}

.facility-dashboard-main {
    padding: 18px 26px 0;
    background: #efeff7;
}

.appointments-shell .facility-dashboard-main {
    padding: 14px 64px 38px 10px;
}

.dashboard-topbar,
.dashboard-page-heading,
.dashboard-card-header,
.dashboard-top-actions,
.dashboard-profile,
.dashboard-footer {
    display: flex;
    align-items: center;
}

.dashboard-topbar {
    min-height: 58px;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.appointments-shell .dashboard-topbar {
    min-height: 44px;
    gap: 14px;
    margin-bottom: 0;
}

.dashboard-search {
    position: relative;
    width: min(540px, 100%);
}

.appointments-shell .dashboard-search {
    width: min(320px, 100%);
    margin-left: clamp(0px, 5vw, 46px);
}

.dashboard-search input {
    width: 100%;
    height: 46px;
    border: 1px solid #e6e7f0;
    border-radius: 6px;
    background: #fafafa;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    padding: 0 44px 0 22px;
}

.appointments-shell .dashboard-search input {
    height: 32px;
    border-color: #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    font-size: 0.78rem;
    padding: 0 34px 0 14px;
}

.dashboard-search input::placeholder {
    color: #a9acb8;
}

.dashboard-search i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca0ae;
}

.appointments-shell .dashboard-search i {
    right: 14px;
    font-size: 0.72rem;
}

.dashboard-top-actions {
    justify-content: flex-end;
    gap: 18px;
}

.dashboard-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #dedfea;
    color: #7e818f;
    cursor: pointer;
}

.appointments-shell .dashboard-icon-btn {
    width: 32px;
    height: 28px;
    border: 1px solid #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.82rem;
}

.dashboard-icon-btn span {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #ef4444;
}

.notification-bell {
    position: relative;
}

.notification-bell summary {
    list-style: none;
}

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

.notification-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: min(340px, 88vw);
    padding: 12px;
    border: 1px solid rgba(16, 24, 40, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}

.notification-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 10px;
}

.notification-menu-header strong {
    font-size: 0.9rem;
    color: #111827;
}

.notification-menu-header small,
.notification-menu-header a {
    color: #667085;
    font-size: 0.75rem;
}

.notification-menu-header a {
    color: #3053e6;
    font-weight: 700;
    text-decoration: none;
}

.notification-menu-list {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
}

.notification-menu-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    background: #f8f9ff;
}

.notification-menu-item:hover {
    background: #eef2ff;
}

.notification-menu-item.is-unread {
    background: #eef2ff;
}

.notification-menu-item strong,
.notification-menu-item small,
.notification-menu-item em {
    display: block;
}

.notification-menu-item strong {
    color: #111827;
    font-size: 0.82rem;
}

.notification-menu-item small {
    margin-top: 3px;
    color: #475467;
    font-size: 0.76rem;
    line-height: 1.35;
}

.notification-menu-item em {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 0.7rem;
    font-style: normal;
}

.notification-priority {
    width: 8px;
    min-height: 100%;
    border-radius: 999px;
    background: #3053e6;
}

.notification-priority.is-high {
    background: #f59e0b;
}

.notification-priority.is-critical {
    background: #ef4444;
}

.notification-empty {
    margin: 0;
    padding: 12px 4px;
    color: #667085;
    font-size: 0.82rem;
}

.role-work-row-action {
    margin-top: 8px;
}

.role-work-row-open {
    display: inline-block;
    margin-top: 8px;
    margin-right: 8px;
    color: #3053e6;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.role-work-row-action button {
    border: 0;
    border-radius: 6px;
    background: #3053e6;
    color: #fff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 7px 10px;
}

.role-work-row-action button:hover {
    background: #2444c2;
}

.notification-center-page {
    width: min(1040px, calc(100% - 32px));
    margin: 110px auto 64px;
}

.notification-center-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.notification-center-header h1 {
    margin: 4px 0 6px;
    color: #111827;
    font-size: 2rem;
}

.notification-center-header p {
    margin: 0;
    color: #667085;
}

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

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

.notification-center-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.notification-center-item.is-unread {
    border-color: #3053e6;
    background: #f8f9ff;
}

.notification-center-item-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.notification-center-item-title strong {
    color: #111827;
}

.notification-center-item-title small,
.notification-center-meta {
    color: #667085;
    font-size: 0.82rem;
}

.notification-center-item p {
    margin: 8px 0;
    color: #344054;
}

.notification-center-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.notification-center-meta span + span::before {
    content: "/";
    margin-right: 8px;
    color: #98a2b3;
}

.notification-center-item a {
    display: inline-block;
    margin-top: 10px;
    color: #3053e6;
    font-weight: 700;
    text-decoration: none;
}

.notification-center-empty {
    padding: 28px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.notification-center-empty h2 {
    margin: 0 0 6px;
}

@media (max-width: 720px) {
    .notification-menu {
        position: fixed;
        top: 76px;
        right: 16px;
        left: 16px;
        width: auto;
    }

    .notification-center-page {
        width: min(100% - 20px, 1040px);
        margin-top: 92px;
    }

    .notification-center-header,
    .notification-center-item-title {
        display: grid;
    }

    .notification-center-actions,
    .notification-center-actions .btn,
    .notification-center-actions form,
    .notification-center-actions button {
        width: 100%;
    }

    .role-work-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .role-work-row > span:last-child {
        grid-column: 2;
    }
}

.dashboard-profile {
    min-width: 200px;
    height: 42px;
    gap: 10px;
    border-radius: 20px;
    background: #dedfea;
    padding: 4px 12px 4px 4px;
}

.appointments-shell .dashboard-profile {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.appointments-shell .dashboard-profile div,
.appointments-shell .dashboard-profile > i {
    display: none;
}

.dashboard-profile-avatar,
.doctor-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #334fe0;
    color: #ffffff;
    font-weight: 800;
}

.dashboard-profile-avatar {
    width: 34px;
    height: 34px;
}

.appointments-shell .dashboard-profile-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #1f2937, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.dashboard-profile div {
    min-width: 0;
    display: grid;
    line-height: 1.1;
}

.dashboard-profile strong,
.dashboard-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-profile strong {
    color: #27282f;
    font-size: 0.9rem;
}

.dashboard-profile small {
    color: #7e818f;
    font-size: 0.72rem;
}

.dashboard-profile > i {
    margin-left: auto;
    color: #010724;
    font-size: 0.8rem;
}

.dashboard-page-heading {
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 6px;
}

.dashboard-page-heading h1 {
    margin: 0;
    color: #010724;
    font-size: 1.45rem;
    font-weight: 800;
}

.dashboard-page-heading p {
    margin: 2px 0 0;
    color: #7e818f;
    font-size: 0.86rem;
}

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

.subscription-usage-panel {
    display: grid;
    gap: 14px;
    border: 1px solid #e6e8f3;
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.subscription-usage-panel.has-warning {
    border-color: #fed7aa;
    background: #fffaf4;
}

.subscription-usage-header,
.subscription-usage-card header,
.subscription-usage-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.subscription-usage-header > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.subscription-usage-header span,
.subscription-usage-card small,
.subscription-usage-value small {
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 800;
}

.subscription-usage-header h2 {
    margin: 0;
    color: #010724;
    font-size: 1.05rem;
    font-weight: 900;
}

.subscription-usage-header p {
    margin: 0;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 800;
}

.subscription-usage-header > strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--color-primary);
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
    padding: 7px 10px;
}

.subscription-usage-panel.has-warning .subscription-usage-header > strong {
    background: #ffedd5;
    color: #c2410c;
}

.subscription-warning-list {
    display: grid;
    gap: 8px;
}

.subscription-warning-list p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    border-radius: 7px;
    color: #7c2d12;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;
    padding: 9px 10px;
}

.subscription-warning-list p.is-orange {
    background: #ffedd5;
}

.subscription-warning-list p.is-red {
    background: #fee2e2;
    color: #991b1b;
}

.subscription-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.subscription-usage-card {
    display: grid;
    gap: 12px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #ffffff;
    padding: 13px;
}

.subscription-usage-card header {
    justify-content: flex-start;
}

.subscription-usage-card header > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
    flex: 0 0 auto;
}

.subscription-usage-card header div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.subscription-usage-card strong,
.subscription-usage-value b {
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
}

.subscription-usage-value {
    align-items: baseline;
}

.subscription-usage-card.is-green header > span {
    background: #dcfce7;
    color: #15803d;
}

.subscription-usage-card.is-orange header > span {
    background: #ffedd5;
    color: #c2410c;
}

.subscription-usage-card.is-red header > span {
    background: #fee2e2;
    color: #dc2626;
}

.subscription-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f7;
}

.subscription-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.subscription-usage-card.is-green .subscription-progress span {
    background: #16a34a;
}

.subscription-usage-card.is-orange .subscription-progress span {
    background: #f97316;
}

.subscription-usage-card.is-red .subscription-progress span {
    background: #dc2626;
}

.subscription-status-main {
    gap: 20px;
}

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

.subscription-detail-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.subscription-plan-list {
    display: grid;
    gap: 11px;
    margin: 0;
}

.subscription-plan-list div,
.subscription-compact-list div {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #eceef7;
    padding-bottom: 10px;
}

.subscription-plan-list div:last-child,
.subscription-compact-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.subscription-plan-list dt,
.subscription-compact-list span,
.subscription-compact-list small,
.subscription-timeline small,
.subscription-timeline p {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
}

.subscription-plan-list dd {
    margin: 0;
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
}

.subscription-compact-list,
.subscription-timeline {
    display: grid;
    gap: 11px;
}

.subscription-compact-list strong,
.subscription-timeline strong {
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
}

.subscription-timeline > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
}

.subscription-timeline > div > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--color-primary);
}

.subscription-timeline p {
    margin: 3px 0;
}

.subscription-upgrade-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

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

.subscription-upgrade-list article {
    align-items: center;
    border: 1px solid #eceef7;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px;
}

.subscription-upgrade-list article > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.subscription-upgrade-list strong {
    color: #010724;
    font-size: 0.94rem;
    font-weight: 900;
}

.subscription-upgrade-list small,
.subscription-upgrade-list span {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;
}

.subscription-upgrade-list form {
    flex: 0 0 auto;
}

.subscription-billing-panel {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.subscription-billing-panel .dashboard-card-header {
    align-items: center;
    gap: 14px;
}

.subscription-billing-panel .dashboard-card-header form {
    flex: 0 0 auto;
}

.subscription-billing-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.subscription-billing-summary > div,
.subscription-open-invoice,
.subscription-billing-history article {
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #ffffff;
}

.subscription-billing-summary > div {
    display: grid;
    gap: 6px;
    min-height: 98px;
    padding: 14px;
}

.subscription-billing-summary span,
.subscription-open-invoice p,
.subscription-open-invoice small,
.subscription-table-list span,
.subscription-table-list small,
.subscription-payment-form label > span {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
}

.subscription-billing-summary strong,
.subscription-open-invoice strong,
.subscription-table-list strong {
    color: #010724;
    font-size: 0.94rem;
    font-weight: 900;
}

.subscription-billing-summary small {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.subscription-open-invoice {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(260px, 360px);
    gap: 16px;
    padding: 14px;
}

.subscription-open-invoice h3,
.subscription-billing-history h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    font-weight: 900;
}

.subscription-open-invoice p {
    margin: 4px 0 0;
}

.subscription-open-invoice-meta {
    align-items: end;
    display: grid;
    gap: 5px;
    justify-items: end;
}

.subscription-payment-form {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.subscription-payment-form label {
    display: grid;
    gap: 6px;
}

.subscription-inline-submit {
    grid-column: auto;
    justify-self: end;
    min-width: 128px;
    white-space: nowrap;
}

.subscription-billing-history {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.subscription-billing-history article {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
}

.subscription-table-list {
    display: grid;
    gap: 8px;
}

.subscription-table-list > div {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(120px, 1.2fr) minmax(88px, 0.8fr) minmax(100px, 0.8fr) auto minmax(86px, 0.7fr);
    gap: 10px;
    min-width: 0;
    border-bottom: 1px solid #eceef7;
    padding-bottom: 8px;
}

.subscription-table-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.subscription-table-list strong,
.subscription-table-list span,
.subscription-table-list small {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.subscription-request-form label,
.subscription-request-reason,
.subscription-form-errors {
    display: grid;
    gap: 6px;
}

.subscription-request-form label > span {
    color: #010724;
    font-size: 0.78rem;
    font-weight: 900;
}

.subscription-form-control {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d9dce8;
    border-radius: 7px;
    background: #ffffff;
    color: #010724;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    padding: 10px 12px;
}

textarea.subscription-form-control {
    resize: vertical;
}

.subscription-request-reason,
.subscription-form-errors,
.subscription-request-submit {
    grid-column: 1 / -1;
}

.subscription-request-submit {
    justify-self: end;
    min-width: 160px;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    padding: 10px 16px;
}

.subscription-form-errors,
.subscription-request-form .errorlist {
    margin: 0;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 900;
    list-style: none;
    padding: 0;
}

.subscription-status-badge {
    justify-self: start;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 4px 10px;
    text-transform: capitalize;
}

.subscription-status-badge.is-pending {
    background: #f59e0b;
}

.subscription-status-badge.is-approved {
    background: #16a34a;
}

.subscription-status-badge.is-paid,
.subscription-status-badge.is-succeeded {
    background: #16a34a;
}

.subscription-status-badge.is-issued,
.subscription-status-badge.is-draft {
    background: var(--color-primary);
}

.subscription-status-badge.is-overdue,
.subscription-status-badge.is-failed,
.subscription-status-badge.is-rejected,
.subscription-status-badge.is-cancelled {
    background: #dc2626;
}

.subscription-status-badge.is-void,
.subscription-status-badge.is-refunded {
    background: #6b7280;
}

.dashboard-primary {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.dashboard-right-rail {
    display: grid;
    gap: 20px;
    min-width: 0;
}

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

.dashboard-card,
.dashboard-stat-card {
    background: #fafafa;
    border: 1px solid #eceef6;
    border-radius: 8px;
    box-shadow: none;
}

.dashboard-stat-card {
    min-height: 116px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.dashboard-stat-copy,
.dashboard-stat-side,
.doctor-row > div,
.activity-row div,
.dashboard-report-row div {
    min-width: 0;
}

.dashboard-stat-copy {
    display: grid;
    gap: 4px;
}

.dashboard-stat-copy span,
.dashboard-stat-copy small,
.dashboard-stat-side em,
.dashboard-card-header p,
.dashboard-empty,
.doctor-row small,
.doctor-status small,
.dashboard-report-row small,
.activity-row small {
    color: #7e818f;
}

.dashboard-stat-copy span {
    font-size: 0.78rem;
    font-weight: 700;
}

.dashboard-stat-copy strong {
    color: #010724;
    font-size: 1.95rem;
    line-height: 1;
}

.dashboard-stat-copy small,
.dashboard-stat-side em {
    font-size: 0.75rem;
}

.dashboard-stat-side {
    display: grid;
    justify-items: end;
    align-content: space-between;
    gap: 12px;
}

.dashboard-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #edf0ff;
}

.dashboard-stat-icon.is-green,
.dashboard-stat-side em.is-green {
    color: #05c168;
}

.dashboard-stat-icon.is-blue,
.dashboard-stat-side em.is-blue {
    color: var(--color-primary);
}

.dashboard-stat-icon.is-red,
.dashboard-stat-side em.is-red {
    color: #ef4444;
}

.dashboard-stat-icon.is-orange,
.dashboard-stat-side em.is-orange {
    color: #f59e0b;
}

.dashboard-mid-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.25fr) minmax(220px, 0.9fr);
    gap: 24px;
}

.dashboard-card {
    padding: 20px;
}

.dashboard-card-header {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-card-header h2,
.dashboard-card-header h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    font-weight: 800;
}

.dashboard-card-header p {
    margin: 2px 0 0;
    font-size: 0.72rem;
    font-style: italic;
}

.dashboard-card-header a {
    color: #27282f;
    font-size: 0.8rem;
    font-weight: 800;
}

.patient-mix-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #27282f;
    font-size: 0.76rem;
    font-weight: 700;
}

.patient-mix-list i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-flex;
}

.patient-mix-list .is-blue {
    background: var(--color-primary);
}

.patient-mix-list .is-dark {
    background: #27282f;
}

.patient-mix-list .is-muted {
    background: #cfd2df;
}

.patient-mix-list .is-soft {
    background: #e2e5f0;
}

.patient-mix-card {
    display: grid;
}

.patient-donut {
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    justify-self: center;
    margin: 8px 0 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fafafa 0 47%, transparent 48%),
        conic-gradient(#27282f 0 35%, #334fe0 35% 62%, #cfd2df 62% 83%, #e6e8f0 83% 100%);
}

.patient-donut div {
    display: grid;
    place-items: center;
    line-height: 1.1;
}

.patient-donut span,
.patient-donut small {
    color: #7e818f;
    font-size: 0.68rem;
}

.patient-donut strong {
    color: #010724;
    font-size: 1rem;
}

.patient-mix-list {
    display: grid;
    gap: 10px;
}

.patient-mix-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.patient-mix-list strong {
    color: #27282f;
    font-size: 0.78rem;
}

.doctor-schedule-list,
.dashboard-report-list,
.activity-list {
    display: grid;
    gap: 13px;
}

.doctor-row,
.dashboard-report-row,
.activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doctor-row {
    border-bottom: 1px solid #e2e4ee;
    padding-bottom: 12px;
}

.doctor-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.doctor-avatar {
    width: 34px;
    height: 34px;
    background: #e7e9f6;
    color: #334fe0;
}

.doctor-row strong,
.dashboard-report-row strong,
.activity-row strong {
    display: block;
    color: #27282f;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.doctor-row small,
.dashboard-report-row small,
.activity-row small {
    display: block;
    font-size: 0.68rem;
}

.doctor-status {
    margin-left: auto;
    text-align: right;
}

.doctor-status em {
    display: inline-flex;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
}

.doctor-status em.is-green {
    background: #dffbea;
    color: #05a457;
}

.doctor-status em.is-red {
    background: #fee2e2;
    color: #ef4444;
}

.dashboard-report-row {
    min-height: 48px;
    border: 1px solid #eef0f7;
    border-radius: 6px;
    padding: 8px 10px;
    color: inherit;
}

.dashboard-report-row > span,
.activity-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
}

.dashboard-report-row > i {
    margin-left: auto;
    color: #b3b7c5;
    font-size: 0.72rem;
}

.dashboard-review-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid #eef0f7;
    padding-top: 12px;
}

.dashboard-review-list a {
    display: grid;
    gap: 2px;
    border-radius: 6px;
    background: #f6f7fc;
    padding: 9px 10px;
}

.dashboard-review-list strong {
    color: #27282f;
    font-size: 0.8rem;
}

.dashboard-review-list small {
    color: #7e818f;
    font-size: 0.7rem;
}

.dashboard-table-card {
    padding-bottom: 16px;
}

.dashboard-date-strip {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 56px;
    overflow-x: auto;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.dashboard-date-strip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 8px;
    color: #27282f;
    line-height: 1.05;
    font-weight: 800;
}

.dashboard-date-strip span small {
    color: #7e818f;
    font-size: 0.58rem;
    font-weight: 700;
}

.dashboard-date-strip span.is-active {
    background: #27282f;
    color: #ffffff;
}

.dashboard-date-strip span.is-active small {
    color: #ffffff;
}

.dashboard-date-strip span.has-event:not(.is-active)::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: 2px;
}

.dashboard-table {
    min-width: 820px;
}

.dashboard-table th {
    text-transform: none;
}

.dashboard-activity-card {
    min-height: 280px;
}

.activity-row {
    align-items: flex-start;
}

.activity-row > span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.activity-row a {
    color: inherit;
}

.activity-row p {
    margin: 2px 0 0;
    color: #27282f;
    font-size: 0.78rem;
    line-height: 1.25;
}

.dashboard-empty {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-footer {
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    color: #7e818f;
    font-size: 0.78rem;
    padding: 28px 2px 14px;
}

.dashboard-footer p {
    margin: 0;
    color: #27282f;
}

.dashboard-footer div,
.dashboard-footer span {
    display: flex;
    align-items: center;
    gap: 28px;
}

.dashboard-footer span {
    gap: 10px;
}

.dashboard-footer span i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7e818f;
    color: #ffffff;
    font-size: 0.72rem;
}

.facility-message-error {
    background: #fee2e2;
    color: #991b1b;
}

.appointment-page-main {
    display: grid;
    align-content: start;
    gap: 15px;
}

.appointment-heading {
    margin-top: 0;
}

.appointment-heading h1 {
    margin: 0;
    color: #010724;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0;
}

.appointment-heading .facility-muted {
    margin: 4px 0 0;
    font-size: 0.78rem;
}

.appointment-toolbar,
.appointment-toolbar-actions,
.appointment-search-form,
.appointment-status-tabs,
.appointment-date-filter,
.appointment-pagination,
.appointment-page-size,
.appointment-pages,
.appointment-row-actions,
.appointment-panel-heading,
.appointment-inline-form {
    display: flex;
    align-items: center;
}

.appointment-toolbar {
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.appointment-status-tabs {
    gap: 16px;
    flex-wrap: wrap;
}

.appointment-status-tabs a {
    border-radius: 6px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    min-height: 24px;
    padding: 6px 10px;
}

.appointment-status-tabs a.is-active {
    background: var(--color-primary);
    color: #ffffff;
}

.appointment-toolbar-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.appointment-search-form {
    gap: 9px;
    flex-wrap: wrap;
}

.appointment-search-form label:first-of-type {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.appointment-search-form input[type="search"] {
    width: 136px;
    height: 24px;
    border: 1px solid #ececf4;
    border-radius: 4px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.73rem;
    padding: 4px 25px 4px 10px;
}

.appointment-search-form label:first-of-type i {
    position: absolute;
    right: 9px;
    color: rgba(39, 40, 47, 0.45);
    font-size: 0.64rem;
}

.appointment-date-filter {
    gap: 5px;
    color: #010724;
}

.appointment-date-filter i {
    color: #27282f;
    font-size: 0.82rem;
}

.appointment-date-filter select,
.appointment-page-size select {
    border: 0;
    background: transparent;
    color: #010724;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.appointment-filter-submit,
.appointment-page-size button {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.appointment-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 27px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 14px;
}

.appointment-form-panel,
.appointment-table-card {
    border: 1px solid #e3e4ee;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
}

.appointment-form-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.appointment-panel-heading {
    justify-content: space-between;
    gap: 16px;
}

.appointment-panel-heading h2 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
}

.appointment-panel-heading p {
    margin: 3px 0 0;
    color: #7e818f;
    font-size: 0.82rem;
}

.appointment-panel-heading a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
}

.appointment-create-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}

.appointment-create-form .ea-alert,
.appointment-create-form .staff-field:nth-last-child(-n + 3),
.appointment-create-form .appointment-primary-action {
    grid-column: 1 / -1;
}

.referral-create-form .staff-field {
    align-self: start;
}

.referral-create-form .staff-field input,
.referral-create-form .staff-field select {
    height: 42px;
}

.referral-create-form .staff-field textarea {
    min-height: 108px;
}

.referral-batch-form .referral-patient-picker,
.referral-create-form .referral-patient-picker,
.referral-create-form .referral-scope-field {
    grid-column: 1 / -1;
}

.appointment-panel-heading .appointment-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 286px;
}

.appointment-panel-heading .appointment-row-actions a.appointment-action-btn {
    width: auto;
    min-width: 82px;
    height: 32px;
    border: 1px solid #dfe3f2;
    background: #ffffff;
    color: #27282f;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0 12px;
}

.appointment-panel-heading .appointment-row-actions a.appointment-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.referral-patient-picker {
    border: 1px solid #e3e4ee;
    border-radius: 8px;
    background: #ffffff;
    display: grid;
    gap: 12px;
    padding: 16px;
}

.referral-picker-header,
.referral-picker-tools,
.referral-patient-option,
.referral-selected-chip {
    align-items: center;
    display: flex;
}

.referral-picker-header {
    justify-content: space-between;
    gap: 14px;
}

.referral-picker-header strong {
    color: #010724;
    font-size: 0.94rem;
    font-weight: 900;
}

.referral-picker-header small {
    display: block;
    margin-top: 3px;
    color: #62677b;
    font-size: 0.76rem;
    font-weight: 800;
}

.referral-picker-header [data-selected-count] {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--color-primary);
    font-size: 0.74rem;
    font-weight: 900;
    padding: 6px 10px;
}

.referral-picker-tools {
    gap: 8px;
}

.referral-picker-tools label {
    flex: 1 1 auto;
}

.referral-picker-tools input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d9dce8;
    border-radius: 7px;
    background: #ffffff;
    color: #010724;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 9px 12px;
}

.referral-picker-tools button {
    flex: 0 0 auto;
    min-height: 38px;
    border: 1px solid #d9dce8;
    border-radius: 7px;
    background: #ffffff;
    color: #010724;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 8px 11px;
}

.referral-picker-tools button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.referral-selected-tray {
    display: grid;
    gap: 8px;
    border: 1px solid #eef0f7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 12px;
}

.referral-selected-tray > div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.referral-selected-tray strong {
    color: #010724;
    font-size: 0.82rem;
    font-weight: 900;
}

.referral-selected-tray small,
.referral-patient-search-status {
    color: #62677b;
    font-size: 0.76rem;
    font-weight: 800;
}

.referral-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.referral-selected-chip {
    gap: 8px;
    max-width: 280px;
    border: 1px solid #cbd4ff;
    border-radius: 8px;
    background: #eef2ff;
    color: #010724;
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
    text-align: left;
}

.referral-selected-chip span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.referral-selected-chip strong,
.referral-selected-chip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-selected-chip i {
    color: var(--color-primary);
    font-size: 0.74rem;
}

.referral-patient-search-status {
    min-height: 18px;
}

.referral-patient-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.referral-patient-option {
    position: relative;
    gap: 10px;
    min-height: 62px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 12px;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.referral-patient-option:hover {
    border-color: #b9c2ff;
    background: #f7f8ff;
}

.referral-patient-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.referral-patient-check {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1px solid #b8bfd1;
    border-radius: 6px;
    background: #ffffff;
    color: #ffffff;
    font-size: 0.68rem;
}

.referral-patient-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.referral-patient-copy strong {
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
}

.referral-patient-copy small {
    color: #62677b;
    font-size: 0.76rem;
    font-weight: 800;
}

.referral-patient-status {
    margin-left: auto;
    border-radius: 999px;
    background: #e8ecff;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
    padding: 4px 9px;
    white-space: nowrap;
}

.referral-patient-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.referral-patient-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #eef2ff;
    box-shadow: 0 10px 20px rgba(49, 76, 224, 0.08);
}

.referral-patient-option.is-selected {
    border-color: var(--color-primary);
    background: #eef2ff;
    box-shadow: 0 10px 20px rgba(49, 76, 224, 0.08);
}

.referral-patient-option:has(input:checked) .referral-patient-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.referral-patient-option.is-selected .referral-patient-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.referral-load-more {
    justify-self: center;
    min-height: 38px;
    border: 1px solid #d9dce8;
    border-radius: 7px;
    background: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 8px 16px;
}

.referral-load-more:hover {
    border-color: var(--color-primary);
    background: #eef2ff;
}

.referral-picker-error {
    margin: 0;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 900;
}

.referral-scope-field {
    border: 1px solid #e3e4ee;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
}

.referral-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.referral-scope-option {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 46px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    color: #010724;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 10px 12px;
}

.referral-scope-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #eef2ff;
    box-shadow: 0 10px 20px rgba(49, 76, 224, 0.08);
}

.referral-scope-option input {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.appointment-inline-form {
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.appointment-request-review-list {
    display: grid;
    gap: 14px;
}

.appointment-scheduling-defaults-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 12px;
}

.appointment-scheduling-defaults-form label {
    display: grid;
    min-width: 190px;
    gap: 5px;
}

.appointment-scheduling-defaults-form label span,
.appointment-blocked-time-form label span,
.appointment-availability-edit-form label span {
    color: #4a4e5d;
    font-size: 0.72rem;
    font-weight: 900;
}

.appointment-scheduling-defaults-form input,
.appointment-blocked-time-form input,
.appointment-blocked-time-form select,
.appointment-availability-edit-form input,
.appointment-availability-edit-form select {
    width: 100%;
    min-height: 36px;
    border: 1px solid #d8dbea;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    padding: 8px 10px;
}

.appointment-availability-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(120px, 0.8fr)) minmax(90px, 0.45fr);
    gap: 12px;
    align-items: end;
}

.appointment-availability-form label,
.appointment-availability-row div {
    display: grid;
    gap: 5px;
}

.appointment-availability-form label span {
    color: #4a4e5d;
    font-size: 0.72rem;
    font-weight: 900;
}

.appointment-availability-form input,
.appointment-availability-form select {
    width: 100%;
    min-height: 36px;
    border: 1px solid #d8dbea;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    padding: 8px 10px;
}

.appointment-availability-form input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    accent-color: var(--color-primary);
}

.appointment-availability-form small {
    color: #7e818f;
    font-size: 0.68rem;
    line-height: 1.35;
}

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

.appointment-availability-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: start;
    gap: 12px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #ffffff;
    padding: 11px 12px;
}

.appointment-availability-row strong {
    color: #010724;
    font-size: 0.86rem;
}

.appointment-availability-row span {
    color: #62677b;
    font-size: 0.76rem;
    line-height: 1.45;
}

.appointment-availability-row form {
    margin: 0;
}

.appointment-availability-edit {
    min-width: 0;
}

.appointment-availability-edit summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid #dfe5ff;
    border-radius: 6px;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 6px 10px;
}

.appointment-availability-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
    width: min(560px, 78vw);
    margin-top: 10px !important;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 10px;
}

.appointment-availability-edit-form label {
    display: grid;
    gap: 5px;
}

.appointment-availability-edit-form input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    accent-color: var(--color-primary);
}

.appointment-blocked-time-panel {
    display: grid;
    gap: 12px;
    border-top: 1px solid #eceef7;
    padding-top: 14px;
}

.appointment-panel-heading.is-compact h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
}

.appointment-blocked-time-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(120px, 0.8fr)) minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.appointment-blocked-time-form label,
.appointment-blocked-time-row div {
    display: grid;
    gap: 5px;
}

.appointment-blocked-time-list {
    display: grid;
    gap: 9px;
}

.appointment-blocked-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #f5d5d5;
    border-radius: 8px;
    background: #fffafa;
    padding: 11px 12px;
}

.appointment-blocked-time-row strong {
    color: #010724;
    font-size: 0.86rem;
}

.appointment-blocked-time-row span {
    color: #62677b;
    font-size: 0.76rem;
    line-height: 1.45;
}

.appointment-request-review-card {
    display: grid;
    gap: 12px;
    border: 1px solid #e3e4ee;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
}

.appointment-request-review-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.appointment-request-review-card header div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.appointment-request-review-card header strong {
    color: #010724;
    font-size: 0.92rem;
}

.appointment-request-review-card header span,
.appointment-request-review-card p,
.appointment-request-note {
    color: #62677b;
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.appointment-request-note {
    border-left: 3px solid #dfe5ff;
    padding-left: 10px;
}

.appointment-request-review-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.appointment-request-review-card dl div {
    display: grid;
    gap: 4px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #fbfcff;
    padding: 8px;
}

.appointment-request-review-card dt {
    color: #62677b;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.appointment-request-review-card dd {
    margin: 0;
    color: #010724;
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.appointment-request-review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    gap: 12px;
    align-items: start;
}

.appointment-request-approve-form,
.appointment-request-deny-form,
.appointment-request-form-grid {
    display: grid;
    gap: 10px;
}

.appointment-request-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.appointment-request-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.appointment-request-approve-form label,
.appointment-request-deny-form label {
    display: grid;
    gap: 5px;
}

.appointment-request-approve-form label span,
.appointment-request-deny-form label span {
    color: #4a4e5d;
    font-size: 0.72rem;
    font-weight: 900;
}

.appointment-request-approve-form input,
.appointment-request-approve-form select,
.appointment-request-approve-form textarea,
.appointment-request-deny-form textarea {
    width: 100%;
    min-height: 36px;
    border: 1px solid #d8dbea;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    padding: 8px 10px;
}

.appointment-request-approve-form textarea,
.appointment-request-deny-form textarea {
    resize: vertical;
}

.appointment-table-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.appointment-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.appointments-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.appointments-table th,
.appointments-table td {
    border-bottom: 1px solid #c2c3cb;
    color: #010724;
    font-size: 0.76rem;
    padding: 8px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.appointments-table th {
    background: #b3b3b3;
    font-size: 0.74rem;
    font-weight: 800;
}

.appointments-table th:first-child {
    border-top-left-radius: 6px;
}

.appointments-table th:last-child {
    border-top-right-radius: 6px;
}

.appointments-table th i {
    color: rgba(1, 7, 36, 0.62);
    font-size: 0.58rem;
    margin-left: 3px;
}

.appointment-check-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.appointment-check-cell input,
.appointment-check-cell > span {
    width: 17px;
    height: 17px;
    border: 1px solid #010724;
    border-radius: 3px;
    background: transparent;
    flex: 0 0 auto;
}

.appointment-check-cell input {
    appearance: none;
}

.appointments-table td strong {
    color: #010724;
    font-size: 0.76rem;
    font-weight: 700;
}

.appointment-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: auto;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: #010724;
    font-size: 0.76rem;
    font-weight: 700;
}

.appointment-status-scheduled {
    background: transparent;
    color: #010724;
}

.appointment-status-checked_in,
.appointment-status-in_consultation {
    background: transparent;
    color: #010724;
}

.appointment-status-completed {
    background: transparent;
    color: #010724;
}

.appointment-status-cancelled,
.appointment-status-no_show {
    background: transparent;
    color: #010724;
}

.appointment-status-pending_patient_consent,
.appointment-status-pending_receiving_facility,
.appointment-status-accepted,
.appointment-status-declined,
.appointment-status-consent_denied,
.appointment-status-expired,
.appointment-status-submitted {
    background: transparent;
    color: #010724;
}

.referral-status-toolbar {
    margin-top: -12px;
}

.appointment-table-subtext {
    color: #6b7280;
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    margin-top: 3px;
}

.referral-batch-table-card .appointments-table td {
    vertical-align: middle;
}

.referral-detail-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.referral-detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    align-items: start;
}

.referral-detail-main,
.referral-detail-side {
    display: grid;
    gap: 14px;
}

.referral-detail-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.referral-detail-note {
    display: grid;
    gap: 8px;
}

.referral-detail-note strong {
    color: #010724;
    font-size: 0.78rem;
}

.referral-detail-note p {
    margin: 0;
}

.referral-cancel-form {
    margin-top: 4px;
}

.referral-batch-cancel-form {
    align-items: end;
    border: 1px solid rgba(1, 7, 36, 0.08);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 14px;
    padding: 12px;
}

.referral-batch-cancel-form label {
    display: grid;
    gap: 6px;
}

.referral-batch-cancel-form span {
    color: #010724;
    font-size: 0.68rem;
    font-weight: 800;
}

.referral-batch-cancel-form input {
    border: 1px solid rgba(1, 7, 36, 0.14);
    border-radius: 6px;
    color: #010724;
    font-family: var(--font-primary);
    font-size: 0.74rem;
    min-height: 34px;
    padding: 8px 10px;
}

.referral-batch-item-list {
    gap: 12px;
}

.appointment-row-actions {
    gap: 4px;
    flex-wrap: wrap;
}

.appointment-row-actions form {
    margin: 0;
}

.appointment-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.58rem;
    font-weight: 800;
    padding: 3px 5px;
}

.appointment-action-btn.is-primary {
    background: var(--color-primary);
}

.appointment-action-btn.is-danger {
    background: #e41c1e;
}

.appointment-action-btn.is-neutral {
    background: #6f737d;
}

.appointment-action-static,
.appointment-empty {
    color: #7e818f;
    font-weight: 800;
}

.appointment-empty {
    text-align: center !important;
    padding: 24px !important;
}

.appointment-pagination {
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.appointment-page-size {
    gap: 8px;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 800;
}

.appointment-page-size select {
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    padding: 3px 6px;
}

.appointment-pages {
    gap: 6px;
}

.appointment-pages a,
.appointment-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0 6px;
}

.appointment-pages span {
    background: #b3b3b3;
}

.appointment-pages .is-current {
    box-shadow: 0 0 0 2px rgba(51, 79, 224, 0.2);
}

/* Figma-derived patients workspace */
.patients-shell .facility-dashboard-main {
    padding: 14px 64px 38px 10px;
}

.patients-shell .dashboard-topbar {
    min-height: 44px;
    gap: 14px;
    margin-bottom: 0;
}

.patients-shell .dashboard-search {
    width: min(320px, 100%);
    margin-left: clamp(0px, 5vw, 46px);
}

.patients-shell .dashboard-search input {
    height: 32px;
    border-color: #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    font-size: 0.78rem;
    padding: 0 34px 0 14px;
}

.patients-shell .dashboard-search i {
    right: 14px;
    font-size: 0.72rem;
}

.patients-shell .dashboard-icon-btn {
    width: 32px;
    height: 28px;
    border: 1px solid #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.82rem;
}

.patients-shell .dashboard-profile {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.patients-shell .dashboard-profile div,
.patients-shell .dashboard-profile > i {
    display: none;
}

.patients-shell .dashboard-profile-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #1f2937, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.patient-page-main {
    display: grid;
    align-content: start;
    gap: 15px;
}

.patient-heading h1 {
    margin: 0;
    color: #010724;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0;
}

.patient-heading .facility-muted {
    margin: 4px 0 0;
    font-size: 0.78rem;
}

.patient-toolbar,
.patient-toolbar-filters,
.patient-toolbar-actions,
.patient-search,
.patient-date-filter,
.patient-pagination,
.patient-page-size,
.patient-pages,
.patient-check-cell,
.patient-modal-header,
.patient-modal-actions {
    display: flex;
    align-items: center;
}

.patient-toolbar {
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.patient-toolbar-filters,
.patient-toolbar-actions {
    gap: 16px;
    flex-wrap: wrap;
}

.patient-treatment-filter,
.patient-status-filter,
.patient-search {
    position: relative;
}

.patient-treatment-filter select {
    min-width: 76px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 24px 4px 9px;
}

.patient-status-filter {
    gap: 8px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 800;
}

.patient-status-filter select,
.patient-date-filter select,
.patient-page-size select {
    border: 0;
    background: transparent;
    color: #010724;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.patient-search input {
    width: 158px;
    height: 24px;
    border: 1px solid #ececf4;
    border-radius: 4px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.73rem;
    padding: 4px 25px 4px 10px;
}

.patient-search i {
    position: absolute;
    right: 9px;
    color: rgba(39, 40, 47, 0.45);
    font-size: 0.64rem;
}

.patient-date-filter {
    gap: 5px;
    color: #010724;
}

.patient-date-filter i {
    color: #27282f;
    font-size: 0.82rem;
}

.patient-filter-submit,
.patient-page-size button {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.patient-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 16px;
}

.patient-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    border: 1px solid #d7d9e5;
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 14px;
}

.patient-table-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.global-patient-state-card {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.global-patient-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.global-patient-section-head h2 {
    margin: 0;
    color: #010724;
    font-size: 0.9rem;
    font-weight: 800;
}

.global-patient-section-head p {
    margin: 0;
    color: #6d7280;
    font-size: 0.72rem;
    font-weight: 700;
}

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

.patients-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.patients-table th,
.patients-table td {
    border-bottom: 1px solid #c2c3cb;
    color: #010724;
    font-size: 0.76rem;
    padding: 8px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.patients-table th {
    background: #b3b3b3;
    font-size: 0.74rem;
    font-weight: 800;
}

.patients-table th:first-child {
    border-top-left-radius: 6px;
}

.patients-table th:last-child {
    border-top-right-radius: 6px;
}

.patients-table th i {
    color: rgba(1, 7, 36, 0.62);
    font-size: 0.58rem;
    margin-left: 3px;
}

.patient-check-cell {
    gap: 6px;
}

.patient-check-cell input,
.patient-check-cell > span:first-child {
    width: 17px;
    height: 17px;
    border: 1px solid #010724;
    border-radius: 3px;
    background: transparent;
    flex: 0 0 auto;
}

.patient-check-cell input {
    appearance: none;
}

.patient-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid #9aa0b3;
    border-radius: 4px;
    background: #f7f8ff;
    color: var(--color-primary);
    font-size: 0.58rem;
    font-weight: 900;
}

.patients-table td strong {
    color: #010724;
    font-size: 0.76rem;
    font-weight: 800;
}

.patient-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 22px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 4px 9px;
}

.patient-status-active {
    background: var(--color-primary);
}

.patient-status-discharged {
    background: #0ba83c;
}

.patient-status-inactive {
    background: #e41c1e;
}

.patient-inline-state,
.patient-inline-form button,
.patient-inline-action {
    display: inline-flex;
    margin-left: 0;
    border: 0;
    background: transparent;
    color: #7e818f;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.62rem;
    font-weight: 800;
    text-decoration: none;
}

.patient-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 106px;
}

.patient-status-stack small {
    color: #7e818f;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
}

.patient-portal-state {
    border-radius: 6px;
    padding: 3px 7px;
    cursor: default;
}

.patient-portal-state-claimed {
    background: #e7f8ec;
    color: #0b7d2c;
}

.patient-portal-state-pending {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-portal-state-expired {
    background: #fff3d7;
    color: #9a5a00;
}

.patient-portal-state-not-sent,
.patient-portal-state-no-email {
    background: #f2f3f8;
    color: #6d7280;
}

.patient-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.patient-inline-form input,
.patient-inline-form select {
    min-height: 27px;
    border: 1px solid #d7d9e5;
    border-radius: 5px;
    background: #ffffff;
    color: #010724;
    font-size: 0.68rem;
    padding: 4px 7px;
}

.patient-inline-form button {
    color: var(--color-primary);
    padding: 0;
}

.patient-consent-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    border-radius: 6px;
    font-size: 0.64rem;
    font-weight: 900;
    padding: 4px 8px;
}

.patient-consent-state-approved {
    background: #dcfce7;
    color: #166534;
}

.patient-consent-state-granted {
    background: #dcfce7;
    color: #166534;
}

.patient-consent-state-pending {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-consent-state-denied {
    background: #fee2e2;
    color: #991b1b;
}

.patient-consent-state-expired {
    background: #fff3d7;
    color: #9a5a00;
}

.patient-consent-state-revoked {
    background: #f2f3f8;
    color: #6d7280;
}

.patient-consent-state-no-email,
.patient-consent-state-not-requested {
    background: #f2f3f8;
    color: #6d7280;
}

.patient-consent-help {
    display: block;
    margin-top: 4px;
    color: #7e818f;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: normal;
}

.patient-consent-request-form input {
    width: 160px;
}

.access-history-card {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.access-history-table {
    min-width: 1060px;
}

.access-history-reason {
    max-width: 220px;
    white-space: normal;
}

/* Patient portal dashboard */
.patient-portal-shell {
    grid-template-columns: 158px minmax(0, 1fr);
    background: #efeff7;
    color: #010724;
    font-family: var(--font-primary);
}

.patient-portal-shell .patient-portal-sidebar {
    padding: 20px 11px;
    overflow-y: auto;
}

.patient-portal-shell .patient-portal-brand img {
    width: 16px;
    height: 16px;
}

.patient-portal-shell .patient-portal-nav,
.patient-portal-shell .patient-portal-sidebar-footer {
    gap: 8px;
}

.patient-portal-shell .facility-nav-item {
    min-height: 32px;
    border: 1px solid #e2e4ee;
    border-radius: 4px;
    color: #27282f;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 7px;
    padding: 6px;
    white-space: nowrap;
}

.patient-portal-shell .facility-nav-item i {
    color: #27282f;
    width: 13px;
    font-size: 0.76rem;
}

.patient-portal-shell .facility-nav-item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.patient-portal-shell .facility-nav-item.is-active i {
    color: #ffffff;
}

.patient-portal-shell .facility-logout-form .facility-nav-item {
    width: 100%;
}

.patient-portal-shell .facility-logout {
    color: #ef2323;
}

.patient-portal-shell .facility-logout i {
    color: #ef2323;
}

.patient-portal-main {
    display: grid;
    gap: 18px;
    padding: 18px 26px 32px;
}

.patient-portal-desktop-sections {
    display: grid;
    gap: 18px;
}

.patient-mobile-home,
.patient-mobile-appointment-shell,
.patient-mobile-health-shell,
.patient-mobile-bottom-nav {
    display: none;
}

.patient-portal-hero,
.patient-portal-panel {
    background: #ffffff;
    border: 1px solid #e6e8f3;
    border-radius: 8px;
}

.patient-portal-topbar {
    min-height: 58px;
    margin-bottom: 0;
}

.patient-portal-search {
    width: min(540px, 100%);
}

.patient-portal-eyebrow,
.patient-portal-panel-head p {
    margin: 0 0 5px;
    color: #74788d;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-portal-hero h2,
.patient-portal-panel-head h2 {
    margin: 0;
    color: #010724;
    font-size: 1.45rem;
    line-height: 1.2;
}

.patient-portal-account {
    min-width: 210px;
}

.patient-portal-account strong,
.patient-portal-account small {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 22px;
    padding: 24px;
}

.patient-portal-hero > div > p:last-child {
    max-width: 680px;
    margin: 12px 0 0;
    color: #5f6378;
    line-height: 1.55;
}

.patient-portal-hero dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.patient-portal-hero dl div {
    border: 1px solid #e9ecf6;
    border-radius: 8px;
    background: #f8f9fd;
    padding: 14px;
}

.patient-portal-hero dt {
    color: #717589;
    font-size: 0.72rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.patient-portal-hero dd {
    margin: 0;
    color: #010724;
    font-size: 1.35rem;
    font-weight: 900;
}

.patient-portal-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 18px;
}

.patient-portal-panel {
    padding: 20px;
}

.patient-portal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.patient-portal-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.patient-portal-badge,
.patient-portal-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef2ff;
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 5px 9px;
    white-space: nowrap;
}

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

.patient-portal-info-grid div {
    display: grid;
    gap: 5px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 12px;
}

.patient-portal-info-grid .is-wide {
    grid-column: 1 / -1;
}

.patient-portal-info-grid span,
.patient-portal-list-row span,
.patient-portal-list-row small,
.patient-portal-result p,
.patient-portal-result span,
.patient-portal-medication p,
.patient-portal-medication span,
.patient-portal-medication small {
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.patient-portal-info-grid strong {
    color: #010724;
    font-size: 0.9rem;
}

.patient-portal-list {
    display: grid;
    gap: 10px;
}

.patient-portal-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 13px 14px;
}

.patient-portal-list-row div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.patient-portal-list-row strong {
    color: #010724;
    font-size: 0.92rem;
}

.patient-portal-list-row a,
.patient-portal-result a,
.patient-portal-panel-action {
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
}

.patient-portal-panel-action {
    border: 1px solid #dfe5ff;
    border-radius: 6px;
    padding: 7px 10px;
}

.patient-portal-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0 2px;
}

.patient-portal-profile-head h1 {
    margin: 0;
    color: #010724;
    font-size: 1.45rem;
    line-height: 1.2;
}

.patient-portal-profile-head span {
    display: block;
    margin-top: 4px;
    color: #62677b;
    font-size: 0.86rem;
}

.patient-portal-profile-head a,
.patient-portal-form-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #e2e4ee;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    padding: 7px 11px;
    white-space: nowrap;
}

.patient-portal-profile-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: start;
}

.patient-portal-boundary {
    margin: 16px 0 0;
    border: 1px dashed #dfe3f2;
    border-radius: 8px;
    background: #fbfcff;
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 13px;
}

.patient-portal-profile-form {
    display: grid;
    gap: 16px;
}

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

.patient-portal-form-grid label {
    display: grid;
    gap: 7px;
    color: #27282f;
    font-size: 0.78rem;
    font-weight: 800;
}

.patient-portal-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.patient-portal-form-grid input,
.patient-portal-form-grid select,
.patient-portal-form-grid textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #e2e4ee;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.86rem;
    padding: 9px 11px;
}

.patient-portal-form-grid textarea {
    resize: vertical;
}

.patient-portal-form-grid input:focus,
.patient-portal-form-grid select:focus,
.patient-portal-form-grid textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(48, 83, 230, 0.12);
    outline: none;
}

.patient-portal-form-grid small {
    color: #b91c1c;
    font-size: 0.72rem;
}

.patient-portal-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.patient-portal-form-actions button {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 900;
    padding: 8px 14px;
}

.patient-portal-two-col,
.patient-portal-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.patient-portal-two-col h3,
.patient-portal-subhead {
    margin: 0 0 10px;
    color: #010724;
    font-size: 0.96rem;
}

.patient-portal-empty {
    border: 1px dashed #dfe3f2;
    border-radius: 8px;
    background: #fbfcff;
    color: #717589;
    font-size: 0.9rem;
    font-weight: 800;
    margin: 0;
    padding: 16px;
}

.patient-portal-consent-block {
    display: grid;
    gap: 10px;
}

.patient-portal-consent-block + .patient-portal-two-col,
.patient-portal-consent-block + .patient-portal-consent-block {
    margin-top: 16px;
}

.patient-portal-consent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.patient-portal-consent-card {
    display: grid;
    gap: 10px;
    border: 1px solid #dfe5ff;
    border-radius: 8px;
    background: #f8faff;
    padding: 15px;
}

.patient-portal-consent-card.is-pending {
    border-color: #cfd8ff;
    background: #f5f7ff;
}

.patient-portal-consent-card strong {
    color: #010724;
    font-size: 0.95rem;
}

.patient-portal-consent-card span,
.patient-portal-consent-card p,
.patient-portal-consent-card small {
    margin: 0;
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.patient-portal-consent-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.patient-portal-consent-actions form {
    margin: 0;
}

.patient-portal-consent-actions button {
    min-height: 31px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 900;
    padding: 7px 13px;
}

.patient-portal-consent-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.patient-portal-consent-row-actions form {
    margin: 0;
}

.patient-portal-consent-row-actions button {
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    background: #fee2e2;
    color: #991b1b;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 6px 10px;
}

.patient-portal-consent-actions form:last-child button {
    background: #fee2e2;
    color: #991b1b;
}

.patient-portal-consent-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 5px 8px;
}

.patient-portal-consent-granted {
    background: #dcfce7;
    color: #166534;
}

.patient-portal-consent-pending {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-portal-consent-denied {
    background: #fee2e2;
    color: #991b1b;
}

.patient-portal-consent-expired {
    background: #fff3d7;
    color: #9a5a00;
}

.patient-portal-consent-revoked {
    background: #f2f3f8;
    color: #6d7280;
}

.patient-portal-result,
.patient-portal-medication {
    display: grid;
    gap: 9px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 15px;
}

.patient-portal-result > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.patient-portal-result-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-portal-result h3,
.patient-portal-medication h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
}

.patient-portal-result h3 a {
    color: inherit;
    text-decoration: none;
}

.patient-portal-result p,
.patient-portal-medication p {
    margin: 0;
}

.patient-portal-result-actions,
.patient-results-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.patient-portal-result-actions a,
.patient-results-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.patient-portal-alert {
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 4px 7px;
}

.patient-portal-alert.is-critical {
    background: #fee2e2;
    color: #b91c1c;
}

.patient-portal-alert.is-abnormal {
    background: #fff3d7;
    color: #9a5a00;
}

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

.patient-portal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.patient-portal-table th,
.patient-portal-table td {
    border-bottom: 1px solid #eceef7;
    color: #303243;
    font-size: 0.82rem;
    text-align: left;
    padding: 11px 10px;
}

.patient-portal-table th {
    color: #717589;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-results-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.patient-results-summary .patient-portal-panel {
    display: grid;
    gap: 5px;
    padding: 16px;
}

.patient-results-summary span,
.patient-results-summary small {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
}

.patient-results-summary strong {
    color: #010724;
    font-size: 1.55rem;
    line-height: 1;
}

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

.patient-summary-compact .patient-portal-panel {
    min-height: 92px;
    align-content: center;
}

.patient-results-table td:first-child {
    display: grid;
    gap: 4px;
}

.patient-results-table td:first-child span {
    color: #62677b;
    font-size: 0.76rem;
}

.patient-results-actions a {
    border: 1px solid #dfe5ff;
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 6px 9px;
    text-decoration: none;
}

.patient-result-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.patient-result-main-card {
    display: grid;
    gap: 16px;
}

.patient-result-copy {
    display: grid;
    gap: 12px;
}

.patient-result-copy h3 {
    margin: 0;
    color: #010724;
    font-size: 0.98rem;
}

.patient-result-copy p {
    margin: 0;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    color: #303243;
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 14px;
}

.patient-result-meta {
    display: grid;
    gap: 10px;
    margin: 0;
}

.patient-result-meta div {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #eceef7;
    padding-bottom: 10px;
}

.patient-result-meta div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.patient-result-meta dt {
    color: #717589;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-result-meta dd {
    margin: 0;
    color: #010724;
    font-size: 0.86rem;
    font-weight: 800;
}

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

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

.patient-profile-card-grid strong {
    overflow-wrap: anywhere;
}

.patient-visits-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: start;
}

.patient-visits-main,
.patient-visits-side {
    display: grid;
    gap: 16px;
}

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

.patient-visit-card {
    display: grid;
    gap: 14px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 16px;
}

.patient-visit-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.patient-visit-card header div {
    display: grid;
    gap: 4px;
}

.patient-visit-card header strong {
    color: #010724;
    font-size: 0.98rem;
    line-height: 1.25;
}

.patient-visit-card header span,
.patient-visit-meta dt,
.patient-visit-milestones p,
.patient-visit-milestones small {
    color: #62677b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.patient-visit-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.patient-visit-meta div {
    display: grid;
    gap: 4px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 9px;
}

.patient-visit-meta dt {
    font-weight: 900;
    text-transform: uppercase;
}

.patient-visit-meta dd {
    margin: 0;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.patient-visit-milestones {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.patient-visit-milestones li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    position: relative;
    padding: 0 0 14px;
}

.patient-visit-milestones li::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: -3px;
    left: 5px;
    width: 2px;
    background: #e1e5f2;
}

.patient-visit-milestones li:last-child {
    padding-bottom: 0;
}

.patient-visit-milestones li:last-child::before {
    display: none;
}

.patient-visit-milestones li > span {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #8b90a3;
    box-shadow: 0 0 0 2px #e1e5f2;
    margin-top: 3px;
}

.patient-visit-milestones li.is-blue > span {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px #dfe5ff;
}

.patient-visit-milestones li.is-green > span {
    background: #16a34a;
    box-shadow: 0 0 0 2px #dcfce7;
}

.patient-visit-milestones li.is-amber > span {
    background: #d97706;
    box-shadow: 0 0 0 2px #fff3d7;
}

.patient-visit-milestones div {
    display: grid;
    gap: 3px;
}

.patient-visit-milestones strong {
    color: #010724;
    font-size: 0.86rem;
    line-height: 1.35;
}

.patient-visit-milestones strong a {
    color: var(--color-primary);
    text-decoration: none;
}

.patient-visit-milestones p {
    margin: 0;
}

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

.patient-billing-summary strong {
    font-size: clamp(1.05rem, 1.8vw, 1.38rem);
    overflow-wrap: anywhere;
}

.patient-billing-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: start;
}

.patient-billing-main,
.patient-billing-side {
    display: grid;
    gap: 16px;
}

.patient-billing-table td:first-child,
.patient-invoice-lines td:first-child {
    display: grid;
    gap: 4px;
}

.patient-billing-table td:first-child span {
    color: #62677b;
    font-size: 0.76rem;
}

.patient-billing-table a,
.patient-portal-table td a {
    color: var(--color-primary);
    font-weight: 900;
    text-decoration: none;
}

.patient-billing-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid #dfe5ff;
    border-radius: 6px;
    padding: 5px 10px;
}

.patient-billing-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.patient-billing-status.is-issued {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-billing-status.is-partially_paid {
    background: #fff3d7;
    color: #9a5a00;
}

.patient-billing-status.is-paid {
    background: #dcfce7;
    color: #166534;
}

.patient-invoice-layout {
    align-items: start;
}

.patient-invoice-lines {
    min-width: 820px;
}

.patient-invoice-receipts {
    display: grid;
    gap: 10px;
}

.patient-invoice-receipts h3 {
    margin: 0;
    color: #010724;
    font-size: 0.98rem;
}

.patient-invoice-meta dd {
    overflow-wrap: anywhere;
}

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

.patient-medication-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: start;
}

.patient-medication-main,
.patient-medication-side {
    display: grid;
    gap: 16px;
}

.patient-medication-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.patient-medication-card {
    display: grid;
    gap: 12px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 15px;
}

.patient-medication-card header,
.patient-medication-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.patient-medication-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-medication-card h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    line-height: 1.3;
}

.patient-medication-card h3 a,
.patient-portal-medication h3 a {
    color: inherit;
    text-decoration: none;
}

.patient-medication-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.patient-medication-card dl div {
    display: grid;
    gap: 3px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px;
}

.patient-medication-card dt,
.patient-medication-card p,
.patient-medication-card footer span,
.patient-medication-side small {
    color: #62677b;
    font-size: 0.78rem;
    line-height: 1.45;
}

.patient-medication-card dt {
    font-weight: 900;
    text-transform: uppercase;
}

.patient-medication-card dd {
    margin: 0;
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.patient-medication-card p {
    margin: 0;
}

.patient-medication-card footer a,
.patient-medication-side a {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.patient-medication-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.patient-medication-status.is-active {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-medication-status.is-external {
    background: #fff3d7;
    color: #9a5a00;
}

.patient-medication-status.is-dispensed {
    background: #dcfce7;
    color: #166534;
}

.patient-medication-detail-layout {
    align-items: start;
}

.patient-medication-instruction-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.patient-medication-instruction-grid article {
    display: grid;
    gap: 5px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 12px;
}

.patient-medication-instruction-grid span {
    color: #62677b;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-medication-instruction-grid strong {
    color: #010724;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.patient-medication-billing-note {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #dfe5ff;
    border-radius: 8px;
    background: #f6f8ff;
    padding: 13px;
}

.patient-medication-billing-note i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-medication-billing-note div {
    display: grid;
    gap: 4px;
}

.patient-medication-billing-note strong {
    color: #010724;
    font-size: 0.88rem;
}

.patient-medication-billing-note span,
.patient-medication-billing-note a {
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.patient-medication-billing-note a {
    color: var(--color-primary);
    font-weight: 900;
    text-decoration: none;
}

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

.patient-facility-summary strong {
    font-size: clamp(1.05rem, 1.8vw, 1.38rem);
    overflow-wrap: anywhere;
}

.patient-facility-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.patient-facility-card {
    display: grid;
    gap: 12px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 15px;
}

.patient-facility-card header,
.patient-facility-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.patient-facility-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-facility-card h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    line-height: 1.3;
}

.patient-facility-card h3 a,
.patient-portal-list-row strong a {
    color: inherit;
    text-decoration: none;
}

.patient-facility-card p,
.patient-facility-card footer span {
    color: #62677b;
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.patient-facility-card dl,
.patient-facility-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.patient-facility-card dl div,
.patient-facility-metrics div {
    display: grid;
    gap: 3px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px;
}

.patient-facility-card dt,
.patient-facility-metrics dt {
    color: #62677b;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-facility-card dd,
.patient-facility-metrics dd {
    margin: 0;
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.patient-facility-card footer a {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.patient-facility-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
}

.patient-facility-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.patient-facility-meta dd {
    overflow-wrap: anywhere;
}

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

.patient-consent-identity p {
    margin: 0;
    color: #62677b;
    font-size: 0.88rem;
    line-height: 1.55;
}

.patient-consent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.patient-consent-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.patient-consent-card {
    display: grid;
    gap: 12px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 15px;
}

.patient-consent-card.is-pending {
    border-color: #dfe5ff;
    background: #f7f9ff;
}

.patient-consent-card.is-active {
    border-color: #ccefd8;
    background: #f7fff9;
}

.patient-consent-card header,
.patient-consent-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.patient-consent-card header div {
    display: grid;
    gap: 4px;
}

.patient-consent-card strong {
    color: #010724;
    font-size: 0.95rem;
}

.patient-consent-card span,
.patient-consent-card p,
.patient-consent-card dd {
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.patient-consent-card p {
    margin: 0;
}

.patient-consent-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.patient-consent-card dl div {
    display: grid;
    gap: 3px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px;
}

.patient-consent-card dt {
    color: #62677b;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-consent-card dd {
    margin: 0;
    color: #010724;
    font-weight: 900;
}

.patient-consent-card footer {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.patient-consent-card form {
    margin: 0;
}

.patient-consent-card button {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 7px 13px;
}

.patient-consent-card footer form:last-child button,
.patient-consent-card.is-active button {
    background: #fee2e2;
    color: #991b1b;
}

.patient-consent-referral-context {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(49, 85, 231, 0.14);
    border-radius: 8px;
    background: #f8faff;
    color: #17213f;
}

.patient-consent-referral-context strong {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #3155e7;
}

.patient-consent-referral-context span,
.patient-consent-referral-context small {
    font-size: 0.85rem;
    line-height: 1.45;
}

.patient-consent-referral-context small {
    color: #6b7280;
}

.patient-consent-table td {
    vertical-align: top;
}

.patient-notification-inbox {
    padding: 0;
    overflow: hidden;
}

.patient-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e6e8f3;
    padding: 14px 16px;
}

.patient-notification-toolbar h2 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    line-height: 1.2;
}

.patient-notification-read-form {
    margin: 0;
}

.patient-notification-read-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    border: 1px solid #dfe5ff;
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 7px 12px;
}

.patient-notification-list {
    display: grid;
}

.patient-notification-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid #eceef7;
    background: #f8f9fd;
    min-height: 58px;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.patient-notification-row:last-child {
    border-bottom: 0;
}

.patient-notification-row:hover {
    background: #ffffff;
    box-shadow: inset 3px 0 0 rgba(49, 85, 231, 0.18);
}

.patient-notification-row.is-unread {
    background: #ffffff;
}

.patient-notification-row.is-unread .patient-notification-source,
.patient-notification-row.is-unread .patient-notification-message strong,
.patient-notification-row.is-unread .patient-notification-date {
    color: #010724;
    font-weight: 900;
}

.patient-notification-row.is-read .patient-notification-source,
.patient-notification-row.is-read .patient-notification-message strong,
.patient-notification-row.is-read .patient-notification-message span,
.patient-notification-row.is-read .patient-notification-date {
    color: #6f7282;
    font-weight: 700;
}

.patient-notification-star-form {
    margin: 0;
    justify-self: center;
}

.patient-notification-star {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #a0a4b2;
    cursor: pointer;
    font-size: 1rem;
}

.patient-notification-star:hover,
.patient-notification-row.is-starred .patient-notification-star {
    color: #f4b400;
}

.patient-notification-open-link {
    display: grid;
    grid-template-columns: 18px minmax(150px, 0.32fr) minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    color: inherit;
    text-decoration: none;
    padding: 0 12px 0 0;
}

.patient-notification-unread-dot {
    justify-self: center;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
}

.patient-notification-row.is-unread .patient-notification-unread-dot {
    background: var(--color-primary);
}

.patient-notification-source,
.patient-notification-message,
.patient-notification-date {
    min-width: 0;
}

.patient-notification-source,
.patient-notification-message strong,
.patient-notification-message span,
.patient-notification-date {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-notification-source {
    color: #010724;
    font-size: 0.84rem;
}

.patient-notification-message {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.patient-notification-message strong {
    flex: 0 1 auto;
    color: #010724;
    font-size: 0.86rem;
    line-height: 1.35;
}

.patient-notification-message span {
    flex: 1 1 auto;
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.patient-notification-message span::before {
    content: "-";
    margin-right: 6px;
    color: #9aa0ad;
}

.patient-notification-date {
    color: #62677b;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: right;
}

.patient-notification-row-action {
    display: flex;
    justify-content: flex-end;
    padding-right: 14px;
}

.patient-notification-row-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 0.74rem;
    font-weight: 900;
    padding: 5px 8px;
    text-decoration: none;
    white-space: nowrap;
}

.patient-notification-row:hover .patient-notification-row-action a {
    border-color: #dfe5ff;
    background: #f7f9ff;
}

.patient-notification-mobile-meta {
    display: none;
}

.patient-notification-empty {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 22px;
}

.patient-notification-empty i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-notification-empty div {
    display: grid;
    gap: 4px;
}

.patient-notification-empty strong {
    color: #010724;
    font-size: 0.95rem;
}

.patient-notification-empty span {
    color: #62677b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.patient-notification-detail-card {
    display: grid;
    gap: 20px;
    max-width: 820px;
}

.patient-notification-detail-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.patient-notification-detail-card header > div {
    display: grid;
    gap: 6px;
}

.patient-notification-detail-source {
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 900;
}

.patient-notification-detail-card h2 {
    margin: 0;
    color: #010724;
    font-size: 1.18rem;
    line-height: 1.3;
}

.patient-notification-detail-card small {
    color: #717589;
    font-size: 0.78rem;
    font-weight: 800;
}

.patient-notification-detail-body {
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 16px;
}

.patient-notification-detail-body p {
    margin: 0;
    color: #303243;
    font-size: 0.92rem;
    line-height: 1.65;
}

.patient-notification-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.patient-notification-detail-meta div {
    display: grid;
    gap: 4px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
}

.patient-notification-detail-meta dt {
    color: #717589;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-notification-detail-meta dd {
    margin: 0;
    color: #010724;
    font-size: 0.84rem;
    font-weight: 900;
}

.patient-notification-detail-card footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

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

.patient-appointment-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    align-items: start;
}

.patient-appointment-form,
.patient-appointment-side,
.patient-appointment-request-list,
.patient-appointment-guidance {
    display: grid;
    gap: 14px;
}

.patient-appointment-guidance p {
    margin: 0;
    color: #62677b;
    font-size: 0.84rem;
    line-height: 1.55;
}

.patient-appointment-request-card {
    display: grid;
    gap: 13px;
    border: 1px solid #eceef7;
    border-radius: 8px;
    background: #fbfcff;
    padding: 15px;
}

.patient-appointment-request-card.is-approved {
    border-color: #ccefd8;
    background: #f7fff9;
}

.patient-appointment-request-card.is-pending {
    border-color: #dfe5ff;
    background: #f7f9ff;
}

.patient-appointment-request-card.is-denied,
.patient-appointment-request-card.is-cancelled {
    border-color: #fee2e2;
    background: #fffafa;
}

.patient-appointment-request-card header,
.patient-appointment-request-card footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.patient-appointment-request-card header div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.patient-appointment-request-card strong {
    color: #010724;
    font-size: 0.96rem;
    line-height: 1.35;
}

.patient-appointment-request-card span,
.patient-appointment-request-card p {
    color: #62677b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.patient-appointment-request-card dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.patient-appointment-request-card dl div {
    display: grid;
    gap: 4px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 9px;
}

.patient-appointment-request-card dt {
    color: #62677b;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.patient-appointment-request-card dd {
    margin: 0;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.patient-appointment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    border-radius: 6px;
    font-size: 0.68rem !important;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.patient-appointment-status.is-pending {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-appointment-status.is-pending_patient_consent,
.patient-appointment-status.is-pending_receiving_facility {
    background: #eef2ff;
    color: var(--color-primary);
}

.patient-appointment-status.is-approved {
    background: #dcfce7;
    color: #166534;
}

.patient-appointment-status.is-accepted,
.patient-appointment-status.is-completed {
    background: #dcfce7;
    color: #166534;
}

.patient-appointment-status.is-denied,
.patient-appointment-status.is-cancelled,
.patient-appointment-status.is-declined,
.patient-appointment-status.is-consent_denied,
.patient-appointment-status.is-expired {
    background: #fee2e2;
    color: #991b1b;
}

.patient-appointment-notes {
    display: grid;
    gap: 8px;
    border: 1px solid #eceef7;
    border-radius: 7px;
    background: #ffffff;
    padding: 10px;
}

.patient-appointment-notes p {
    margin: 0;
}

.patient-appointment-notes strong {
    font-size: inherit;
}

.patient-appointment-request-card footer {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.patient-appointment-request-card footer a,
.patient-appointment-request-card footer button,
.patient-portal-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 7px 12px;
    text-decoration: none;
}

.patient-appointment-request-card footer form {
    margin: 0;
}

.patient-appointment-request-card footer button {
    background: #fee2e2;
    color: #991b1b;
}

.patient-appointment-collapsible {
    padding: 0;
}

.patient-appointment-collapsible details {
    display: grid;
}

.patient-appointment-collapsible summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
}

.patient-appointment-collapsible summary::-webkit-details-marker {
    display: none;
}

.patient-request-summary-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.patient-request-summary-copy strong,
.patient-request-summary-copy span,
.patient-request-summary-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-request-summary-copy strong {
    color: #010724;
    font-size: 0.94rem;
    line-height: 1.3;
}

.patient-request-summary-copy span,
.patient-request-summary-copy small {
    color: #62677b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.patient-request-summary-side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.patient-request-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}

.patient-request-more i {
    font-size: 0.68rem;
    transition: transform 160ms ease;
}

.patient-appointment-collapsible details[open] .patient-request-more i {
    transform: rotate(180deg);
}

.patient-appointment-collapsible details[open] .patient-request-more span {
    font-size: 0;
}

.patient-appointment-collapsible details[open] .patient-request-more span::before {
    content: "Less";
    font-size: 0.74rem;
}

.patient-request-expanded {
    display: grid;
    gap: 13px;
    border-top: 1px solid #eceef7;
    padding: 14px 16px 16px;
}

.patient-request-expanded dl {
    margin: 0;
}

.patient-appointment-request-pagination {
    border-top: 1px solid #eceef7;
    padding-top: 14px;
}

.patient-mobile-action-list,
.patient-mobile-health-menu {
    display: grid;
    gap: 10px;
}

.patient-mobile-action-list a,
.patient-mobile-action-list button,
.patient-mobile-health-menu a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid #d5d8e3;
    border-radius: 5px;
    background: #ffffff;
    color: #05070f;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    padding: 8px 12px;
}

.patient-mobile-action-list button {
    width: 100%;
    cursor: pointer;
}

.patient-mobile-action-list form {
    margin: 0;
}

.patient-mobile-action-list > a > i,
.patient-mobile-action-list button > i,
.patient-mobile-health-menu > a > i {
    color: var(--color-primary);
    font-size: 1.1rem;
    text-align: center;
}

.patient-mobile-action-list b,
.patient-mobile-health-menu b {
    display: grid;
    place-items: center;
    color: #05070f;
    font-size: 1.1rem;
}

.patient-mobile-action-list button {
    color: #ef4444;
}

.patient-mobile-action-list button > i,
.patient-mobile-action-list button b {
    color: #ef4444;
}

.patient-appointment-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
    align-items: start;
}

.patient-appointment-desktop-actions {
    margin-bottom: 12px;
}

.patient-appointment-desktop-note {
    margin-top: 12px;
}

.patient-health-desktop-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.patient-vitals-record-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.patient-vitals-record-card {
    display: grid;
    gap: 14px;
    border: 1px solid #e6e8f3;
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.patient-vitals-record-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.patient-vitals-record-card header div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.patient-vitals-record-card strong {
    color: #010724;
    font-size: 0.92rem;
    font-weight: 900;
}

.patient-vitals-record-card span,
.patient-vitals-record-card p,
.patient-vitals-record-card dt,
.patient-vitals-record-card small {
    color: #62677b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
}

.patient-vitals-record-card p,
.patient-vitals-record-card dl {
    margin: 0;
}

.patient-vitals-record-card a {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.patient-vitals-record-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.patient-vitals-record-card dd {
    margin: 2px 0 0;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 900;
}

@media (max-width: 980px) {
    .patient-portal-shell {
        grid-template-columns: 1fr;
    }

    .patient-portal-shell .patient-portal-sidebar {
        position: static;
        height: auto;
        z-index: 10;
        gap: 12px;
        padding: 14px;
    }

    .patient-portal-shell .patient-portal-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .patient-portal-shell .patient-portal-sidebar-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patient-portal-main {
        padding: 16px;
    }

    .patient-portal-hero,
    .patient-portal-grid,
    .patient-portal-profile-layout,
    .patient-results-summary,
    .patient-visits-summary,
    .patient-visits-grid,
    .patient-billing-summary,
    .patient-billing-grid,
    .patient-medication-summary,
    .patient-medication-grid,
    .patient-facility-summary,
    .patient-facility-card-grid,
    .patient-facility-detail-hero,
    .patient-facility-detail-grid,
    .patient-consent-summary,
    .patient-consent-grid,
    .patient-notification-summary,
    .patient-appointment-summary,
    .patient-appointment-grid,
    .patient-result-detail-layout,
    .patient-portal-two-col,
    .patient-portal-card-grid,
    .patient-portal-consent-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .patient-portal-topbar,
    .patient-portal-list-row,
    .patient-portal-panel-head,
    .patient-portal-panel-actions,
    .patient-portal-profile-head,
    .patient-portal-form-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-portal-shell .patient-portal-nav,
    .patient-portal-shell .patient-portal-sidebar-footer {
        grid-template-columns: 1fr 1fr;
    }

    .patient-portal-shell .facility-nav-item {
        font-size: 0.78rem;
    }

    .patient-portal-hero dl,
    .patient-portal-info-grid,
    .patient-visit-meta,
    .patient-medication-card-grid,
    .patient-medication-instruction-grid,
    .patient-facility-card dl,
    .patient-facility-metrics,
    .patient-consent-card dl,
    .patient-appointment-request-card dl,
    .patient-portal-form-grid {
        grid-template-columns: 1fr;
    }

    .patient-portal-form-grid label.is-wide {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .patient-portal-shell {
        display: block;
        min-height: 100dvh;
        background: #ffffff;
    }

    .patient-portal-shell .patient-portal-sidebar {
        position: fixed;
        inset: auto 0 0;
        z-index: 80;
        height: 76px;
        border-top: 1px solid #eceef7;
        background: #ffffff;
        box-shadow: 0 -8px 22px rgba(10, 15, 35, 0.05);
        overflow: visible;
        padding: 0;
    }

    .patient-portal-shell .patient-portal-brand,
    .patient-portal-shell .patient-portal-nav,
    .patient-portal-shell .patient-portal-sidebar-footer,
    .patient-portal-topbar,
    .patient-portal-desktop-sections {
        display: none;
    }

    .patient-mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        height: 100%;
        padding: 6px 14px 8px;
    }

    .patient-mobile-bottom-nav a {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 58px;
        color: #080b16;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    .patient-mobile-bottom-nav a i {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        color: #05070f;
        font-size: 1.1rem;
    }

    .patient-mobile-bottom-nav a.is-active,
    .patient-mobile-bottom-nav a.is-active i {
        color: var(--color-primary);
    }

    .patient-portal-main {
        display: block;
        min-height: 100dvh;
        background: #ffffff;
        padding: 20px 20px 98px;
    }

    .facility-messages {
        margin-bottom: 14px;
    }

    .patient-mobile-home {
        display: grid;
        gap: 21px;
        max-width: 430px;
        margin: 0 auto;
        color: #05070f;
    }

    .patient-mobile-appointment-shell {
        display: grid;
        gap: 18px;
        max-width: 430px;
        margin: 0 auto;
        color: #05070f;
    }

    .patient-mobile-health-shell {
        display: grid;
        gap: 24px;
        max-width: 430px;
        margin: 0 auto;
        color: #05070f;
    }

    .patient-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 40px;
    }

    .patient-mobile-menu {
        position: relative;
    }

    .patient-mobile-menu summary {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        color: #05070f;
        cursor: pointer;
        list-style: none;
    }

    .patient-mobile-menu summary::-webkit-details-marker {
        display: none;
    }

    .patient-mobile-menu summary i {
        font-size: 1rem;
    }

    .patient-mobile-menu nav {
        position: absolute;
        top: 42px;
        left: 0;
        z-index: 90;
        display: grid;
        gap: 4px;
        width: min(250px, calc(100vw - 40px));
        border: 1px solid #e4e7f2;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
        padding: 8px;
    }

    .patient-mobile-menu a,
    .patient-mobile-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 38px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #111827;
        cursor: pointer;
        font-family: var(--font-primary);
        font-size: 0.84rem;
        font-weight: 800;
        padding: 8px 10px;
        text-align: left;
        text-decoration: none;
    }

    .patient-mobile-menu a:hover,
    .patient-mobile-menu button:hover {
        background: #f5f6fb;
    }

    .patient-mobile-menu i {
        width: 16px;
        color: var(--color-primary);
        text-align: center;
    }

    .patient-mobile-menu form {
        margin: 0;
    }

    .patient-mobile-menu button {
        color: #dc2626;
    }

    .patient-mobile-menu button i {
        color: #dc2626;
    }

    .patient-mobile-bell {
        position: relative;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        color: var(--color-primary);
        text-decoration: none;
    }

    .patient-mobile-bell i {
        font-size: 1.2rem;
    }

    .patient-mobile-bell span {
        position: absolute;
        top: 4px;
        right: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        border: 2px solid #ffffff;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 0.58rem;
        font-weight: 900;
        line-height: 1;
        padding: 0 4px;
    }

    .patient-mobile-greeting {
        display: grid;
        gap: 5px;
    }

    .patient-mobile-greeting h1 {
        margin: 0;
        color: #05070f;
        font-size: 1.32rem;
        line-height: 1.15;
        font-weight: 900;
    }

    .patient-mobile-greeting p {
        margin: 0;
        color: #05070f;
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .patient-mobile-appointment-card {
        display: grid;
        gap: 16px;
        border: 1px solid #bfc3cf;
        border-radius: 8px;
        background: #ffffff;
        padding: 11px 12px 10px;
    }

    .patient-mobile-appointment-card header,
    .patient-mobile-section > h2 {
        margin: 0;
    }

    .patient-mobile-appointment-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .patient-mobile-appointment-card h2,
    .patient-mobile-section h2 {
        color: #05070f;
        font-size: 0.86rem;
        font-weight: 900;
        line-height: 1.25;
    }

    .patient-mobile-appointment-card header a {
        color: var(--color-primary);
        font-size: 0.78rem;
        font-weight: 900;
        text-decoration: none;
        white-space: nowrap;
    }

    .patient-mobile-appointment-detail {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        width: min(210px, 100%);
        margin: 0 auto;
    }

    .patient-mobile-appointment-detail > i {
        color: #05070f;
        font-size: 1.15rem;
        text-align: center;
    }

    .patient-mobile-appointment-detail div {
        display: grid;
        gap: 7px;
        min-width: 0;
    }

    .patient-mobile-appointment-detail span,
    .patient-mobile-appointment-detail p,
    .patient-mobile-appointment-detail p a {
        margin: 0;
        color: #05070f;
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .patient-mobile-appointment-detail p a {
        text-decoration: none;
    }

    .patient-mobile-appointment-detail strong {
        color: #05070f;
        font-size: 0.86rem;
        font-weight: 900;
        line-height: 1.25;
    }

    .patient-mobile-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 19px;
        border-radius: 6px;
        background: var(--color-primary);
        color: #ffffff !important;
        font-size: 0.62rem !important;
        font-weight: 900;
        margin-left: 5px;
        padding: 3px 7px;
        vertical-align: middle;
    }

    .patient-mobile-empty-state {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        border-radius: 8px;
        background: #f7f8fc;
        padding: 14px;
    }

    .patient-mobile-empty-state i {
        color: var(--color-primary);
        font-size: 1.25rem;
        text-align: center;
    }

    .patient-mobile-empty-state div {
        display: grid;
        gap: 4px;
    }

    .patient-mobile-empty-state strong {
        color: #05070f;
        font-size: 0.84rem;
    }

    .patient-mobile-empty-state a {
        color: var(--color-primary);
        font-size: 0.78rem;
        font-weight: 900;
        text-decoration: none;
    }

    .patient-mobile-section {
        display: grid;
        gap: 14px;
    }

    .patient-mobile-quick-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }

    .patient-mobile-quick-actions a {
        display: grid;
        justify-items: center;
        gap: 8px;
        min-width: 0;
        color: #05070f;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    .patient-mobile-quick-actions i {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        color: #05070f;
        font-size: 1.3rem;
    }

    .patient-mobile-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 23px;
        padding: 0 23px;
    }

    .patient-mobile-summary-grid a {
        display: grid;
        justify-items: center;
        align-content: center;
        min-height: 75px;
        border-radius: 8px;
        background: #eeeef8;
        color: #05070f;
        text-align: center;
        text-decoration: none;
        padding: 8px 6px;
    }

    .patient-mobile-summary-grid strong {
        font-size: 0.86rem;
        font-weight: 900;
        line-height: 1.15;
    }

    .patient-mobile-summary-grid span {
        color: #05070f;
        font-size: 1.72rem;
        font-weight: 900;
        line-height: 1.05;
        margin-top: 4px;
    }

    .patient-mobile-summary-grid small {
        color: #05070f;
        font-size: 0.78rem;
        line-height: 1.2;
    }

    .patient-mobile-care-tools div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .patient-mobile-care-tools a {
        position: relative;
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        min-height: 46px;
        border: 1px solid #eceef7;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1.25;
        text-decoration: none;
        padding: 9px 11px;
    }

    .patient-mobile-care-tools a i {
        color: var(--color-primary);
        font-size: 1rem;
        text-align: center;
    }

    .patient-mobile-care-tools em {
        position: absolute;
        top: 6px;
        right: 7px;
        min-width: 17px;
        height: 17px;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 0.62rem;
        font-style: normal;
        font-weight: 900;
        line-height: 17px;
        text-align: center;
    }

    .patient-mobile-flow-header {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        align-items: center;
        min-height: 40px;
    }

    .patient-mobile-flow-header h1 {
        margin: 0;
        color: #05070f;
        font-size: 0.92rem;
        font-weight: 900;
        line-height: 1.2;
        text-align: center;
    }

    .patient-mobile-flow-header a {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        color: var(--color-primary);
        text-decoration: none;
    }

    .patient-mobile-flow-header a:last-child {
        justify-self: end;
    }

    .patient-mobile-appointment-tabs {
        display: grid;
        gap: 14px;
    }

    .patient-mobile-appointment-tabs > input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .patient-mobile-tab-labels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-bottom: 1px solid #bfc3cf;
    }

    .patient-mobile-tab-labels label {
        min-height: 34px;
        border-bottom: 2px solid transparent;
        color: #05070f;
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 34px;
        text-align: center;
    }

    #mobile-upcoming-tab:checked ~ .patient-mobile-tab-labels label[for="mobile-upcoming-tab"],
    #mobile-past-tab:checked ~ .patient-mobile-tab-labels label[for="mobile-past-tab"] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .patient-mobile-tab-panel {
        display: none;
    }

    #mobile-upcoming-tab:checked ~ .patient-mobile-upcoming-panel,
    #mobile-past-tab:checked ~ .patient-mobile-past-panel {
        display: block;
    }

    .patient-mobile-appointment-list {
        display: grid;
        gap: 7px;
    }

    .patient-mobile-appointment-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 19px;
        min-height: 94px;
        border: 1px solid #bfc3cf;
        border-radius: 6px;
        background: #ffffff;
        padding: 13px 15px;
    }

    .patient-mobile-appointment-row time {
        display: grid;
        place-items: center;
        align-self: center;
        width: 56px;
        height: 63px;
        border-radius: 6px;
        background: #eeeef8;
        color: var(--color-primary);
        text-align: center;
    }

    .patient-mobile-appointment-row time strong {
        font-size: 1.46rem;
        font-weight: 500;
        line-height: 1;
    }

    .patient-mobile-appointment-row time span {
        color: #05070f;
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1;
    }

    .patient-mobile-appointment-row > div {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

    .patient-mobile-appointment-row header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .patient-mobile-appointment-row header strong,
    .patient-mobile-appointment-row b {
        color: #05070f;
        font-size: 0.82rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .patient-mobile-appointment-row a,
    .patient-mobile-appointment-row small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .patient-mobile-appointment-row a {
        color: var(--color-primary);
        font-size: 0.72rem;
        line-height: 1.2;
        text-decoration: none;
    }

    .patient-mobile-appointment-row small {
        color: #05070f;
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .patient-mobile-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 18px;
        border-radius: 999px;
        background: #a9a9a9;
        color: #ffffff;
        font-size: 0.58rem;
        font-weight: 900;
        line-height: 1;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .patient-mobile-pill.is-approved,
    .patient-mobile-pill.is-completed {
        background: var(--color-primary);
    }

    .patient-mobile-pill.is-pending {
        background: #a9a9a9;
    }

    .patient-mobile-pill.is-cancelled,
    .patient-mobile-pill.is-denied {
        background: #ef4444;
    }

    .patient-mobile-primary-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        width: min(252px, 100%);
        min-height: 33px;
        border-radius: 8px;
        background: var(--color-primary);
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 900;
        text-decoration: none;
        padding: 8px 14px;
    }

    .patient-mobile-booking-steps {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: start;
        gap: 8px;
        width: min(230px, 100%);
        margin: 0 auto 6px;
    }

    .patient-mobile-booking-steps span {
        display: grid;
        justify-items: center;
        gap: 4px;
        color: #05070f;
    }

    .patient-mobile-booking-steps b {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #a9a9a9;
        color: #05070f;
        font-size: 0.72rem;
        font-weight: 900;
    }

    .patient-mobile-booking-steps .is-active b,
    .patient-mobile-booking-steps .is-complete b {
        background: var(--color-primary);
        color: #ffffff;
    }

    .patient-mobile-booking-steps small {
        color: #05070f;
        font-size: 0.58rem;
        font-weight: 900;
    }

    .patient-mobile-booking-steps i {
        display: block;
        height: 2px;
        background: var(--color-primary);
        margin-top: 10px;
    }

    .patient-mobile-booking-form {
        display: grid;
        gap: 14px;
        width: min(275px, 100%);
        margin: 0 auto;
    }

    .patient-mobile-booking-form label {
        display: grid;
        gap: 8px;
        color: #05070f;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .patient-mobile-booking-form select,
    .patient-mobile-booking-form input,
    .patient-mobile-booking-form textarea {
        width: 100%;
        min-height: 36px;
        border: 1px solid #bfc3cf;
        border-radius: 5px;
        background: #ffffff;
        color: #05070f;
        font-family: var(--font-primary);
        font-size: 0.76rem;
        padding: 8px 13px;
    }

    .patient-mobile-booking-form textarea {
        min-height: 72px;
        resize: vertical;
    }

    .patient-mobile-booking-form small {
        color: #dc2626;
        font-size: 0.68rem;
        font-weight: 800;
    }

    .patient-mobile-booking-form button {
        justify-self: center;
        width: min(190px, 100%);
        min-height: 34px;
        border: 0;
        border-radius: 8px;
        background: var(--color-primary);
        color: #ffffff;
        cursor: pointer;
        font-family: var(--font-primary);
        font-size: 0.74rem;
        font-weight: 900;
        padding: 8px 13px;
    }

    .patient-mobile-request-receipt {
        display: grid;
        justify-items: center;
        gap: 18px;
    }

    .patient-mobile-receipt-icon {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 999px;
        background: #b7b7b7;
        color: var(--color-primary);
        font-size: 1rem;
    }

    .patient-mobile-request-receipt h2,
    .patient-mobile-request-receipt p {
        margin: 0;
        color: #05070f;
        text-align: center;
    }

    .patient-mobile-request-receipt h2 {
        font-size: 0.88rem;
        font-weight: 900;
    }

    .patient-mobile-request-receipt p {
        max-width: 250px;
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1.55;
    }

    .patient-mobile-review-card {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        width: 100%;
        border: 1px solid #bfc3cf;
        border-radius: 6px;
        background: #ffffff;
        padding: 27px 30px 14px;
    }

    .patient-mobile-review-card > i {
        align-self: center;
        color: var(--color-primary);
        font-size: 2.2rem;
        text-align: center;
    }

    .patient-mobile-review-card > div {
        display: grid;
        gap: 7px;
        min-width: 0;
    }

    .patient-mobile-review-card strong,
    .patient-mobile-review-card span,
    .patient-mobile-review-card b,
    .patient-mobile-review-card a,
    .patient-mobile-review-card small {
        color: #05070f;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .patient-mobile-review-card strong,
    .patient-mobile-review-card b {
        font-weight: 900;
    }

    .patient-mobile-review-card a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .patient-mobile-review-card dl {
        grid-column: 1 / -1;
        display: grid;
        gap: 8px;
        margin: 16px 0 0;
    }

    .patient-mobile-review-card dl div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .patient-mobile-review-card dt,
    .patient-mobile-review-card dd {
        margin: 0;
        color: #05070f;
        font-size: 0.76rem;
        font-weight: 900;
    }

    .patient-mobile-detail-card {
        display: grid;
        gap: 24px;
        border: 1px solid #bfc3cf;
        border-radius: 5px;
        background: #ffffff;
        padding: 15px 26px 14px;
    }

    .patient-mobile-detail-card > header,
    .patient-mobile-detail-card dl div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .patient-mobile-detail-card > header span,
    .patient-mobile-detail-card dt,
    .patient-mobile-detail-card dd {
        color: #05070f;
        font-size: 0.76rem;
        font-weight: 800;
    }

    .patient-mobile-detail-card dl {
        margin: 0;
    }

    .patient-mobile-detail-card dd {
        margin: 0;
        font-weight: 900;
    }

    .patient-mobile-detail-summary {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
    }

    .patient-mobile-detail-summary > i {
        color: var(--color-primary);
        font-size: 2.35rem;
        text-align: center;
    }

    .patient-mobile-detail-summary > div {
        display: grid;
        gap: 7px;
        min-width: 0;
    }

    .patient-mobile-detail-summary strong,
    .patient-mobile-detail-summary span,
    .patient-mobile-detail-summary b,
    .patient-mobile-detail-summary a,
    .patient-mobile-detail-summary small {
        color: #05070f;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .patient-mobile-detail-summary strong,
    .patient-mobile-detail-summary b {
        font-weight: 900;
    }

    .patient-mobile-detail-summary a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .patient-mobile-action-list a,
    .patient-mobile-action-list button {
        min-height: 37px;
        padding: 7px 12px;
    }

    .patient-mobile-reminder-note {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: min(220px, 100%);
        justify-self: center;
        border: 1px solid #c8ccd8;
        border-radius: 5px;
        background: #ffffff;
        color: #05070f;
        font-size: 0.7rem;
        font-weight: 800;
        line-height: 1.35;
        padding: 9px 10px;
    }

    .patient-mobile-reminder-note i {
        color: #8a8d98;
        font-size: 1rem;
        text-align: center;
    }

    .patient-mobile-health-menu {
        gap: 5px;
        padding: 0 14px;
    }

    .patient-mobile-health-menu a {
        min-height: 54px;
        border-color: #eceef7;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        padding: 10px 14px;
    }

    .patient-mobile-health-menu > a > i {
        color: #767983;
        font-size: 1.25rem;
    }

    .patient-mobile-health-menu span {
        color: #05070f;
        font-size: 0.82rem;
        font-weight: 900;
    }

    .patient-mobile-vitals-shell {
        gap: 20px;
    }

    .patient-mobile-vitals-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 22px;
        padding: 0 31px;
    }

    .patient-mobile-vitals-summary article {
        display: grid;
        place-items: center;
        min-height: 76px;
        border-radius: 8px;
        background: #ececf8;
        color: #05070f;
        text-align: center;
        padding: 10px 8px;
    }

    .patient-mobile-vitals-summary i {
        color: var(--color-primary);
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .patient-mobile-vitals-summary span {
        color: #05070f;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .patient-mobile-vitals-summary strong {
        color: #05070f;
        font-size: 0.82rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .patient-mobile-vitals-list {
        display: grid;
        gap: 8px;
        padding: 0 10px 20px;
    }

    .patient-mobile-vital-record {
        display: grid;
        gap: 9px;
        border: 1px solid #c8ccd8;
        border-radius: 5px;
        background: #ffffff;
        padding: 12px 14px;
    }

    .patient-mobile-vital-record header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .patient-mobile-vital-record header div {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .patient-mobile-vital-record strong,
    .patient-mobile-vital-record p,
    .patient-mobile-vital-record dt,
    .patient-mobile-vital-record dd,
    .patient-mobile-vital-record span,
    .patient-mobile-vital-record small {
        color: #05070f;
        font-size: 0.74rem;
        line-height: 1.35;
    }

    .patient-mobile-vital-record strong,
    .patient-mobile-vital-record dd {
        font-weight: 900;
    }

    .patient-mobile-vital-record span,
    .patient-mobile-vital-record dt,
    .patient-mobile-vital-record small {
        color: #62677b;
        font-weight: 800;
    }

    .patient-mobile-vital-record a {
        color: var(--color-primary);
        font-size: 0.74rem;
        font-weight: 900;
        text-decoration: none;
    }

    .patient-mobile-vital-record p,
    .patient-mobile-vital-record dl {
        margin: 0;
    }

    .patient-mobile-vital-record dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    .patient-mobile-vital-record dd {
        margin: 2px 0 0;
    }
}

@media (max-width: 360px) {
    .patient-portal-main {
        padding-inline: 16px;
    }

    .patient-mobile-summary-grid {
        gap: 12px;
        padding: 0 10px;
    }

    .patient-mobile-quick-actions {
        gap: 7px;
    }

    .patient-mobile-care-tools div {
        grid-template-columns: 1fr;
    }

    .patient-mobile-vitals-summary,
    .patient-mobile-vital-record dl {
        grid-template-columns: 1fr;
    }
}

.patient-empty {
    color: #7e818f !important;
    font-weight: 800;
    text-align: center !important;
    padding: 24px !important;
}

.patient-pagination {
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.patient-page-size {
    gap: 8px;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 800;
}

.patient-page-size select {
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    padding: 3px 6px;
}

.patient-pages {
    gap: 6px;
}

.patient-pages a,
.patient-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0 6px;
}

.patient-pages span {
    background: #b3b3b3;
}

.patient-pages .is-current {
    box-shadow: 0 0 0 2px rgba(51, 79, 224, 0.2);
}

.patient-modal-layer {
    position: fixed;
    inset: 0 0 0 158px;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    background: rgba(239, 239, 247, 0.45);
    padding: 84px 24px 48px;
}

.patient-modal {
    width: min(665px, 100%);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(1, 7, 36, 0.16);
    padding: 28px 30px 24px;
}

.patient-modal-header {
    gap: 12px;
    margin-bottom: 24px;
}

.patient-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f3f5ff;
    color: var(--color-primary);
    font-size: 1.25rem;
}

.patient-modal-header h2 {
    margin: 0;
    color: #010724;
    font-size: 0.95rem;
    font-weight: 900;
}

.patient-modal-header p {
    margin: 2px 0 0;
    color: #010724;
    font-size: 0.58rem;
    font-weight: 700;
}

.patient-modal-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-left: auto;
    color: #010724;
    font-size: 1.05rem;
}

.patient-create-form {
    display: grid;
    gap: 12px;
}

.patient-form-section {
    display: grid;
    gap: 10px;
    border: 0;
    padding: 0;
}

.patient-form-section h3 {
    margin: 0;
    color: #010724;
    font-size: 1rem;
    font-weight: 800;
}

.patient-form-section:first-of-type {
    margin-top: 0;
}

.patient-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
    border: 1px solid #e7e8f0;
    border-radius: 7px;
    padding: 14px 8px 8px;
}

.patient-form-grid .staff-field {
    gap: 6px;
}

.patient-form-grid .staff-field label {
    color: #010724;
    font-size: 0.58rem;
    font-weight: 800;
}

.patient-form-grid .staff-field label span {
    color: #ef4444;
}

.patient-form-grid .staff-field input,
.patient-form-grid .staff-field select,
.patient-form-grid .staff-field textarea {
    height: 31px;
    border: 1px solid #d9dbe6;
    border-radius: 4px;
    background: #ffffff;
    color: #010724;
    font-size: 0.62rem;
    padding: 7px 10px;
}

.patient-form-grid .staff-field textarea {
    height: auto;
    line-height: 1.5;
}

.patient-form-grid .staff-field input::placeholder,
.patient-form-grid .staff-field textarea::placeholder {
    color: #010724;
}

.patient-wide-field {
    grid-column: span 2;
}

.patient-additional-grid {
    grid-template-columns: 180px minmax(0, 1fr);
}

.patient-modal-actions {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.patient-modal-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 28px;
    border: 1px solid #e7e8f0;
    border-radius: 6px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 700;
}

.patient-modal-actions small {
    flex-basis: 100%;
    color: #010724;
    font-size: 0.5rem;
    font-weight: 800;
    text-align: right;
}

.patient-name-link {
    color: inherit;
}

/* Staff directory */
.staff-shell .facility-dashboard-main {
    padding: 14px 58px 38px 10px;
}

.staff-shell .dashboard-topbar {
    min-height: 38px;
    gap: 14px;
    margin-bottom: 35px;
}

.staff-shell .dashboard-search {
    width: min(318px, 100%);
    margin-left: clamp(0px, 5vw, 56px);
}

.staff-shell .dashboard-search input {
    height: 28px;
    border-color: #e8e9f2;
    border-radius: 4px;
    background: #ffffff;
    font-size: 0.72rem;
    padding: 0 30px 0 14px;
}

.staff-shell .dashboard-search i {
    right: 12px;
    font-size: 0.66rem;
}

.staff-shell .dashboard-icon-btn {
    width: 32px;
    height: 28px;
    border: 1px solid #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.82rem;
}

.staff-shell .dashboard-profile {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.staff-shell .dashboard-profile div,
.staff-shell .dashboard-profile > i {
    display: none;
}

.staff-shell .dashboard-profile-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #1f2937, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.staff-page-main {
    display: grid;
    align-content: start;
    gap: 22px;
}

.staff-directory-toolbar,
.staff-directory-filters,
.staff-directory-actions,
.staff-directory-search,
.staff-date-filter,
.staff-pagination,
.staff-page-size,
.staff-pages,
.staff-check-cell,
.staff-name-cell,
.staff-row-actions {
    display: flex;
    align-items: center;
}

.staff-directory-toolbar {
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.staff-directory-filters,
.staff-directory-actions {
    gap: 16px;
    flex-wrap: wrap;
}

.staff-directory-filters select {
    min-width: 74px;
    height: 23px;
    border: 0;
    border-radius: 3px;
    background: #ffffff;
    color: #010724;
    font-family: var(--font-primary);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 22px 3px 7px;
}

.staff-directory-search {
    position: relative;
}

.staff-directory-search input {
    width: 162px;
    height: 24px;
    border: 1px solid #ececf4;
    border-radius: 4px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    padding: 4px 25px 4px 10px;
}

.staff-directory-search i {
    position: absolute;
    right: 9px;
    color: rgba(39, 40, 47, 0.45);
    font-size: 0.64rem;
}

.staff-date-filter {
    gap: 5px;
    color: #010724;
}

.staff-date-filter i {
    color: #27282f;
    font-size: 0.82rem;
}

.staff-date-filter select,
.staff-page-size select {
    border: 0;
    background: transparent;
    color: #010724;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.staff-filter-submit,
.staff-page-size button {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.staff-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 17px;
}

.staff-table-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.staff-members-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
}

.staff-members-table th,
.staff-members-table td {
    border-bottom: 1px solid #dedfea;
    color: #010724;
    font-size: 0.72rem;
    padding: 9px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.staff-members-table th {
    background: transparent;
    font-size: 0.66rem;
    font-weight: 900;
}

.staff-members-table th i {
    color: rgba(1, 7, 36, 0.62);
    font-size: 0.58rem;
    margin-left: 3px;
}

.staff-check-cell {
    gap: 7px;
}

.staff-check-cell > span:first-child {
    width: 17px;
    height: 17px;
    border: 1px solid #010724;
    border-radius: 3px;
    background: transparent;
    flex: 0 0 auto;
}

.staff-name-cell {
    gap: 6px;
}

.staff-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid #9aa0b3;
    border-radius: 4px;
    background: #f7f8ff;
    color: var(--color-primary);
    font-size: 0.58rem;
    font-weight: 900;
}

.staff-members-table td strong {
    color: #010724;
    font-size: 0.72rem;
    font-weight: 800;
}

.staff-availability {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 20px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 4px 9px;
}

.staff-availability-available {
    background: var(--color-primary);
}

.staff-availability-unavailable,
.staff-availability-suspended {
    background: #e41c1e;
}

.staff-availability-invited {
    background: #b3b3b3;
}

.staff-row-actions {
    gap: 11px;
}

.staff-row-actions a,
.staff-row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.92rem;
    padding: 0;
}

.staff-row-actions form {
    display: inline-flex;
    margin: 0;
}

.staff-row-actions button {
    color: #f3302e;
}

.staff-row-actions button.is-activate {
    color: #0ba83c;
}

.staff-row-actions button.is-resend {
    color: var(--color-primary);
}

.staff-owner-lock {
    color: #7e818f;
    font-size: 0.68rem;
    font-weight: 900;
}

.staff-empty {
    color: #7e818f !important;
    font-weight: 800;
    text-align: center !important;
    padding: 24px !important;
}

.staff-pagination {
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: -2px;
}

.staff-page-size {
    gap: 8px;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 800;
}

.staff-page-size select {
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    padding: 3px 6px;
}

.staff-pages {
    gap: 6px;
}

.staff-pages a,
.staff-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0 6px;
}

.staff-pages span {
    background: #b3b3b3;
}

.staff-pages .is-current {
    box-shadow: 0 0 0 2px rgba(51, 79, 224, 0.2);
}

.staff-modal {
    width: min(760px, 100%);
}

.staff-name-link {
    color: #010724;
    text-decoration: none;
}

.staff-name-link:hover {
    color: var(--color-primary);
}

.staff-member-form .patient-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-member-form .staff-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-checkbox-field {
    grid-column: 1 / -1;
}

.staff-checkbox-field label {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    min-height: 18px;
}

.patient-form-grid .staff-checkbox-field input[type="checkbox"] {
    width: 14px;
    height: 14px;
    padding: 0;
    accent-color: var(--color-primary);
}

/* Staff profile */
.staff-profile-shell .facility-dashboard-main,
.staff-profile-main {
    padding: 14px 58px 38px 10px;
}

.clinical-shell .facility-dashboard-main,
.billing-shell .facility-dashboard-main {
    padding: 18px 26px 38px;
}

.pending-verification-shell .facility-dashboard-main {
    padding: 28px 32px 38px;
}

.staff-profile-public-shell {
    min-height: 100vh;
    background: #eef0fa;
    padding: 28px 16px;
}

.staff-profile-public-main {
    width: min(1020px, 100%);
    margin: 0 auto;
}

.staff-profile-public-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.staff-profile-public-top > div,
.staff-profile-public-top form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-profile-public-top a,
.staff-profile-public-top button {
    border: 1px solid #dfe3f2;
    border-radius: 7px;
    background: #ffffff;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 9px 12px;
}

.staff-profile-public-top button {
    color: #ef4444;
}

.staff-profile-page-head {
    margin-bottom: 16px;
}

.staff-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
}

.staff-profile-primary {
    display: grid;
    gap: 12px;
}

.staff-profile-hero {
    min-height: 92px;
}

.staff-bio-card {
    display: grid;
    gap: 10px;
}

.staff-bio-card p,
.staff-profile-boundary {
    margin: 0;
    color: #010724;
    font-size: 0.78rem;
    line-height: 1.65;
}

.staff-profile-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: 12px;
}

.staff-profile-side {
    display: grid;
    align-content: start;
    gap: 12px;
}

.staff-profile-edit-modal {
    width: min(760px, 100%);
}

.staff-profile-form textarea {
    min-height: 112px;
    resize: vertical;
}

.staff-profile-bio-field {
    grid-column: span 3;
}

@media (max-width: 980px) {
    .staff-shell .facility-dashboard-main {
        padding: 16px 18px 34px;
    }

    .staff-shell .dashboard-search {
        margin-left: 0;
    }

    .staff-directory-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-directory-actions {
        width: 100%;
    }

    .staff-member-form .patient-form-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-shell .facility-dashboard-main,
    .staff-profile-main {
        padding: 16px 18px 34px;
    }

    .clinical-shell .facility-dashboard-main,
    .billing-shell .facility-dashboard-main,
    .pending-verification-shell .facility-dashboard-main {
        padding: 16px 18px 28px;
    }

    .staff-profile-layout,
    .staff-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .staff-profile-bio-field {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .staff-directory-filters,
    .staff-directory-actions {
        width: 100%;
    }

    .staff-directory-search,
    .staff-directory-search input {
        width: 100%;
    }

    .staff-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Patient profile detail */
.patient-detail-shell .facility-dashboard-main {
    padding: 14px 70px 38px 10px;
}

.patient-detail-shell .dashboard-topbar {
    min-height: 38px;
    gap: 14px;
    margin-bottom: 0;
}

.patient-detail-shell .dashboard-search {
    width: min(320px, 100%);
    margin-left: clamp(0px, 5vw, 46px);
}

.patient-detail-shell .dashboard-search input {
    height: 28px;
    border-color: #e8e9f2;
    border-radius: 4px;
    background: #ffffff;
    font-size: 0.72rem;
    padding: 0 30px 0 14px;
}

.patient-detail-shell .dashboard-search i {
    right: 12px;
    font-size: 0.66rem;
}

.patient-detail-shell .dashboard-icon-btn {
    width: 30px;
    height: 26px;
    border: 1px solid #e8e9f2;
    border-radius: 4px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.76rem;
}

.patient-detail-shell .dashboard-profile {
    min-width: 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.patient-detail-shell .dashboard-profile div,
.patient-detail-shell .dashboard-profile > i {
    display: none;
}

.patient-detail-shell .dashboard-profile-avatar {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #1f2937, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.patient-detail-main {
    display: grid;
    align-content: start;
    gap: 10px;
}

.patient-detail-page-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.patient-detail-page-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    background: #b3b3b3;
    color: #ffffff;
}

.patient-detail-page-head span {
    color: #010724;
    font-size: 0.62rem;
    font-weight: 800;
}

.patient-detail-page-head h1 {
    margin: 0;
    color: #010724;
    font-size: 0.95rem;
    font-weight: 900;
}

.patient-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 14px;
    align-items: start;
}

.patient-detail-primary {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.patient-profile-hero,
.patient-detail-card,
.patient-note-card,
.patient-vitals-grid,
.patient-medical-lists article {
    background: #e1e1e1;
    border-radius: 4px;
}

.patient-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 8px 10px;
}

.patient-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #ffffff;
    border-radius: 6px;
    background: #f7f8ff;
    color: var(--color-primary);
    font-size: 1.15rem;
    font-weight: 900;
}

.patient-profile-hero h2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #010724;
    font-size: 1.35rem;
    font-weight: 900;
}

.patient-profile-hero .patient-status {
    min-width: auto;
    min-height: 14px;
    margin-left: 5px;
    border-radius: 4px;
    font-size: 0.45rem;
    padding: 2px 5px;
    vertical-align: middle;
}

.patient-profile-hero p {
    margin: 2px 0 0;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 700;
}

.patient-profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 30px;
    margin-left: auto;
    border-radius: 5px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 6px 12px;
}

.patient-detail-info-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.8fr;
    gap: 10px;
}

.patient-detail-card {
    min-width: 0;
    padding: 10px 8px;
}

.patient-detail-card-head,
.patient-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.patient-detail-card-head h3,
.patient-detail-section-head h3,
.patient-medical-section h3 {
    margin: 0;
    color: #010724;
    font-size: 0.88rem;
    font-weight: 900;
}

.patient-detail-card-head i {
    color: #010724;
    font-size: 0.75rem;
}

.patient-detail-list,
.patient-general-grid {
    margin: 10px 0 0;
}

.patient-detail-list dt,
.patient-general-grid dt {
    color: #010724;
    font-size: 0.68rem;
    font-weight: 700;
}

.patient-detail-list dd,
.patient-general-grid dd {
    margin: 4px 0 10px;
    color: #010724;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.4;
}

.patient-general-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
}

.patient-general-grid div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
}

.patient-note-section,
.patient-medical-section {
    display: grid;
    gap: 9px;
}

.patient-detail-section-head a,
.patient-detail-section-head span {
    color: #5f6576;
    font-size: 0.62rem;
    font-weight: 800;
}

.patient-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.patient-note-card {
    min-height: 90px;
    padding: 10px 9px;
}

.patient-note-card time {
    display: block;
    color: #010724;
    font-size: 0.58rem;
    font-weight: 700;
}

.patient-note-card strong {
    display: block;
    margin-top: 6px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 900;
}

.patient-note-card p {
    margin: 6px 0 0;
    color: #010724;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.45;
}

.patient-vitals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
    padding: 14px 12px;
}

.patient-vitals-grid article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: center;
}

.patient-vitals-grid i {
    grid-row: span 2;
    color: #073cff;
    font-size: 2rem;
}

.patient-vitals-grid span {
    color: #010724;
    font-size: 0.62rem;
    font-weight: 700;
}

.patient-vitals-grid strong {
    color: #010724;
    font-size: 0.72rem;
    font-weight: 900;
}

.patient-medical-lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.patient-medical-lists article {
    min-height: 92px;
    padding: 13px 10px;
}

.patient-medical-lists h4 {
    margin: 0 0 10px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 700;
}

.patient-medical-lists strong,
.patient-medical-lists span {
    display: block;
    margin-top: 8px;
    color: #010724;
    font-size: 0.72rem;
    font-weight: 900;
}

.patient-medical-lists span {
    color: #5f6576;
    font-weight: 800;
}

.patient-restricted-card {
    border-radius: 4px;
    background: #e1e1e1;
    padding: 16px;
}

.patient-restricted-card p {
    margin: 8px 0 0;
    color: #010724;
    font-size: 0.75rem;
    font-weight: 800;
}

.patient-detail-rail {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.patient-report-list,
.patient-appointment-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.patient-report-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 5px;
    background: #f7f7f7;
    color: #010724;
    padding: 6px;
}

.patient-report-list a > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    border-radius: 3px;
    background: #f23425;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
}

.patient-report-list strong {
    display: block;
    overflow: hidden;
    color: #010724;
    font-size: 0.58rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-report-list small,
.patient-appointment-list small {
    color: #5f6576;
    font-size: 0.55rem;
    font-weight: 700;
}

.patient-report-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #b3b3b3;
    color: #ffffff;
    font-size: 0.56rem;
}

.patient-appointment-list h4 {
    margin: 4px 0 0;
    color: #010724;
    font-size: 0.55rem;
    font-weight: 900;
}

.patient-appointment-list article {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-radius: 4px;
    background: #f7f7f7;
    padding: 8px;
}

.patient-appointment-list strong,
.patient-appointment-list span {
    display: block;
    color: #010724;
    font-size: 0.58rem;
    font-weight: 900;
}

.patient-appointment-list span {
    margin-top: 3px;
    font-weight: 700;
}

.patient-appointment-list em {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: 3px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 900;
    padding: 2px 5px;
}

.patient-detail-empty {
    margin: 0;
    color: #5f6576;
    font-size: 0.7rem;
    font-weight: 800;
}

.role-dashboard-main {
    display: grid;
    align-content: start;
    gap: 22px;
}

.role-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.role-dashboard-heading span {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.role-dashboard-heading h1 {
    margin: 0;
    color: #010724;
    font-size: 1.65rem;
    font-weight: 900;
}

.role-dashboard-heading p {
    margin: 3px 0 0;
    color: #7e818f;
    font-size: 0.92rem;
}

.role-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 24px;
}

.role-quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.role-quick-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 900;
    padding: 9px 14px;
}

.role-quick-actions a:nth-child(even) {
    background: #27282f;
}

.role-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.role-dashboard-side {
    display: grid;
    gap: 24px;
}

.role-work-card {
    min-height: 240px;
}

.role-work-card-main {
    min-height: 480px;
}

.role-work-list {
    display: grid;
    gap: 10px;
}

.role-work-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) minmax(96px, auto);
    gap: 12px;
    align-items: center;
    border: 1px solid #eef0f7;
    border-radius: 8px;
    background: #ffffff;
    color: #27282f;
    padding: 12px;
}

.role-work-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf0ff;
    color: var(--color-primary);
    font-size: 0.46rem;
}

.role-work-row strong,
.role-work-row p,
.role-work-row small,
.role-work-row em {
    overflow-wrap: anywhere;
}

.role-work-row strong {
    display: block;
    color: #010724;
    font-size: 0.88rem;
    font-weight: 900;
}

.role-work-row p {
    margin: 2px 0 0;
    color: #4a4e5d;
    font-size: 0.78rem;
    line-height: 1.35;
}

.role-work-row small {
    display: block;
    color: #7e818f;
    font-size: 0.72rem;
    line-height: 1.35;
}

.role-work-row > span:last-child {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
}

.role-work-row em {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: #e0e7ff;
    color: var(--color-primary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
    padding: 4px 8px;
}

.role-boundary-card {
    display: grid;
    gap: 8px;
    border: 1px solid #dbe1ff;
    border-radius: 10px;
    background: #f5f7ff;
    padding: 14px 16px;
}

.role-boundary-card p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #27282f;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.45;
}

.role-boundary-card i {
    color: var(--color-primary);
    margin-top: 2px;
}

.nurse-dashboard-main {
    padding: 16px 54px 38px 18px;
}

.nurse-topbar {
    min-height: 48px;
    margin-bottom: 18px;
}

.nurse-system-search {
    width: min(330px, 100%);
    margin-left: clamp(0px, 5vw, 42px);
}

.nurse-system-search input {
    height: 36px;
    border-color: #e9eaf3;
    background: #ffffff;
    font-size: 0.78rem;
    padding: 0 36px 0 18px;
}

.nurse-system-search i {
    right: 16px;
    font-size: 0.72rem;
}

.nurse-top-actions {
    gap: 16px;
}

.nurse-top-actions .dashboard-icon-btn {
    width: 32px;
    height: 28px;
    border: 1px solid #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.82rem;
}

.nurse-profile {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.nurse-profile div,
.nurse-profile > i {
    display: none;
}

.nurse-profile .dashboard-profile-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #27282f, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.nurse-hero {
    margin: 0 0 18px;
}

.nurse-hero h1 {
    margin: 0;
    color: #010724;
    font-size: 1.34rem;
    font-weight: 500;
    line-height: 1.2;
}

.nurse-hero p {
    margin: 5px 0 0;
    color: #010724;
    font-size: 0.96rem;
}

.nurse-dashboard-layout {
    display: grid;
    grid-template-columns: 216px minmax(420px, 510px);
    gap: 24px;
    align-items: start;
}

.nurse-stat-stack {
    display: grid;
    gap: 24px;
}

.nurse-stat-card,
.nurse-recent-card {
    border: 1px solid #eceef6;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: none;
}

.nurse-stat-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
}

.nurse-stat-card > i {
    color: var(--color-primary);
    font-size: 2.55rem;
    line-height: 1;
}

.nurse-stat-card div {
    display: grid;
    justify-items: center;
    min-width: 0;
}

.nurse-stat-card span {
    color: #010724;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.nurse-stat-card strong {
    color: #010724;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
}

.nurse-stat-card a,
.nurse-stat-card small {
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 500;
}

.nurse-recent-card {
    min-height: 262px;
    padding: 16px 12px 14px;
}

.nurse-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.nurse-card-header h2 {
    margin: 0;
    color: #010724;
    font-size: 1.24rem;
    font-weight: 900;
}

.nurse-card-header a {
    color: var(--color-primary);
    font-size: 0.96rem;
    font-weight: 500;
}

.nurse-patient-search {
    margin-bottom: 14px;
}

.nurse-patient-search input {
    width: 100%;
    height: 38px;
    border: 1px solid #d2d3dc;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.84rem;
    padding: 0 28px;
}

.nurse-patient-search input::placeholder {
    color: #a5a8b4;
}

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

.nurse-patient-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 430px;
}

.nurse-patient-table td {
    color: #27282f;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 7px 0;
    vertical-align: middle;
}

.nurse-patient-table td:first-child {
    width: 36%;
}

.nurse-patient-table td:last-child {
    width: 28%;
    text-align: right;
}

.nurse-patient-table a {
    color: #27282f;
    font-weight: 600;
}

.nurse-care-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.nurse-care-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: #edf0ff;
    color: #334fe0;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 9px;
}

.nurse-patients-main {
    padding: 15px 52px 38px 18px;
}

.nurse-patients-board {
    display: grid;
    gap: 12px;
    max-width: 732px;
}

.nurse-patients-search {
    width: min(376px, 100%);
}

.nurse-patients-search input {
    width: 100%;
    height: 38px;
    border: 1px solid #cfd1dc;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.84rem;
    padding: 0 14px;
}

.nurse-patients-search input::placeholder {
    color: #9da1ad;
}

.nurse-patients-card {
    border: 1px solid #eceef6;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

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

.nurse-patients-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

.nurse-patients-table th,
.nurse-patients-table td {
    color: #27282f;
    font-size: 0.78rem;
    text-align: left;
    vertical-align: middle;
    padding: 16px 12px;
}

.nurse-patients-table th {
    color: #010724;
    font-weight: 900;
}

.nurse-patients-table td {
    font-weight: 500;
}

.nurse-patients-table th:first-child,
.nurse-patients-table td:first-child {
    padding-left: 12px;
    width: 19%;
}

.nurse-patients-table th:nth-child(2),
.nurse-patients-table td:nth-child(2) {
    width: 23%;
}

.nurse-patients-table th:nth-child(3),
.nurse-patients-table td:nth-child(3) {
    width: 12%;
}

.nurse-patients-table th:nth-child(4),
.nurse-patients-table td:nth-child(4) {
    width: 24%;
}

.nurse-patients-table a {
    color: var(--color-primary);
    font-weight: 500;
}

.nurse-patients-empty {
    text-align: center;
}

.nurse-patients-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nurse-page-size,
.nurse-pages {
    display: flex;
    align-items: center;
}

.nurse-page-size {
    gap: 8px;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 500;
}

.nurse-page-size select {
    height: 20px;
    border: 0;
    border-radius: 3px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.76rem;
    padding: 0 20px 0 7px;
}

.nurse-page-size button {
    display: none;
}

.nurse-pages {
    gap: 7px;
}

.nurse-pages a,
.nurse-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    border-radius: 4px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0 6px;
}

.nurse-pages span[aria-hidden="true"],
.nurse-pages a[aria-label] {
    background: #b9bac0;
    color: #ffffff;
}

.nurse-vitals-main {
    padding: 15px 32px 38px 10px;
}

.nurse-vitals-layout {
    display: grid;
    grid-template-columns: 225px minmax(560px, 1fr);
    gap: 16px;
    align-items: start;
}

.nurse-vitals-patient-card {
    display: grid;
    gap: 14px;
}

.nurse-vitals-patient-card h1 {
    margin: 10px 0 0 0;
    color: #010724;
    font-size: 0.94rem;
    font-weight: 900;
}

.nurse-vitals-patient-card article,
.nurse-vitals-form {
    border: 1px solid #eceef6;
    border-radius: 7px;
}

.nurse-vitals-patient-card article {
    background: #ffffff;
    min-height: 330px;
    padding: 14px 12px;
}

.nurse-vitals-patient-card h2 {
    margin: 0 0 18px;
    color: #010724;
    font-size: 0.82rem;
    font-weight: 900;
}

.nurse-vitals-patient-card dl {
    display: grid;
    gap: 18px;
    margin: 0;
}

.nurse-vitals-patient-card dl div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.nurse-vitals-patient-card dt,
.nurse-vitals-patient-card dd {
    color: #27282f;
    font-size: 0.78rem;
    font-weight: 500;
}

.nurse-vitals-patient-card dt {
    white-space: nowrap;
}

.nurse-vitals-patient-card dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.nurse-vitals-form {
    background: #efeff7;
    display: grid;
    gap: 24px;
    min-height: 442px;
    padding: 11px 12px 12px;
}

.nurse-vitals-date-row,
.nurse-vitals-actions {
    display: flex;
    align-items: center;
}

.nurse-vitals-date-row {
    gap: 8px;
}

.nurse-vitals-date-row label,
.nurse-vitals-field label {
    color: #010724;
    font-size: 0.78rem;
    font-weight: 500;
}

.nurse-vitals-date-control {
    position: relative;
    width: 180px;
}

.nurse-vitals-date-control input,
.nurse-vitals-field input,
.nurse-vitals-field textarea {
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.78rem;
}

.nurse-vitals-date-control input {
    height: 24px;
    color: #a3a6b3;
    padding: 0 34px 0 8px;
}

.nurse-vitals-date-control i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6f7483;
    font-size: 0.78rem;
}

.nurse-vitals-alert {
    margin: 0;
}

.nurse-vitals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    column-gap: 13px;
    row-gap: 26px;
}

.nurse-vitals-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.nurse-vitals-field em {
    font-style: italic;
}

.nurse-vitals-field input {
    height: 24px;
    padding: 0 10px;
}

.nurse-vitals-field textarea {
    min-height: 60px;
    resize: vertical;
    padding: 22px 12px;
}

.nurse-vitals-field span {
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 700;
}

.nurse-vitals-note {
    grid-column: 1 / -1;
}

.nurse-vitals-actions {
    justify-content: flex-end;
    gap: 8px;
}

.nurse-vitals-actions p {
    margin: 0 auto 0 0;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.nurse-vitals-actions a,
.nurse-vitals-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.68rem;
    font-weight: 500;
}

.nurse-vitals-actions a {
    background: #ffffff;
    color: #010724;
}

.nurse-vitals-actions button {
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
}

.nurse-vitals-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.receptionist-dashboard-main {
    padding: 19px 64px 38px 28px;
}

.receptionist-topbar {
    min-height: 46px;
    margin-bottom: 22px;
}

.receptionist-system-search {
    width: min(354px, 100%);
    margin-left: clamp(0px, 4vw, 34px);
}

.receptionist-system-search input {
    height: 36px;
    border-color: #e9eaf3;
    background: #ffffff;
    font-size: 0.78rem;
    padding: 0 36px 0 18px;
}

.receptionist-system-search i {
    right: 16px;
    font-size: 0.72rem;
}

.receptionist-top-actions {
    gap: 16px;
}

.receptionist-top-actions .dashboard-icon-btn {
    width: 32px;
    height: 28px;
    border: 1px solid #e8e9f2;
    border-radius: 5px;
    background: #ffffff;
    color: #27282f;
    font-size: 0.82rem;
}

.receptionist-profile {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.receptionist-profile div,
.receptionist-profile > i {
    display: none;
}

.receptionist-profile .dashboard-profile-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #27282f, #334fe0);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(1, 7, 36, 0.18);
}

.receptionist-hero {
    margin: 0 0 22px;
}

.receptionist-hero h1 {
    margin: 0;
    color: #010724;
    font-size: 1.34rem;
    font-weight: 500;
    line-height: 1.2;
}

.receptionist-hero p {
    margin: 5px 0 0;
    color: #010724;
    font-size: 0.96rem;
}

.receptionist-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(460px, 614px) 236px;
    gap: 6px;
    align-items: start;
}

.receptionist-appointments-card,
.receptionist-bookings-card,
.receptionist-register-card {
    border: 1px solid #eceef6;
    border-radius: 7px;
    background: #ffffff;
}

.receptionist-appointments-card {
    min-height: 280px;
    padding: 13px 12px 12px;
}

.receptionist-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.receptionist-card-header h2,
.receptionist-register-card h2 {
    margin: 0;
    color: #010724;
    font-weight: 900;
}

.receptionist-card-header h2 {
    font-size: 1.28rem;
}

.receptionist-card-header a {
    color: var(--color-primary);
    font-size: 0.96rem;
    font-weight: 500;
}

.receptionist-appointment-search {
    width: min(496px, 100%);
    margin-bottom: 14px;
}

.receptionist-appointment-search input {
    width: 100%;
    height: 40px;
    border: 1px solid #cfd1dc;
    border-radius: 6px;
    background: #ffffff;
    color: #27282f;
    font-family: var(--font-primary);
    font-size: 0.84rem;
    padding: 0 32px;
}

.receptionist-appointment-search input::placeholder {
    color: #a7aab5;
}

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

.receptionist-appointment-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.receptionist-appointment-table th,
.receptionist-appointment-table td {
    color: #010724;
    font-size: 0.82rem;
    text-align: left;
    vertical-align: middle;
    padding: 7px 0;
}

.receptionist-appointment-table th {
    font-weight: 900;
}

.receptionist-appointment-table td {
    font-weight: 500;
}

.receptionist-appointment-table th:nth-child(1),
.receptionist-appointment-table td:nth-child(1) {
    width: 25%;
}

.receptionist-appointment-table th:nth-child(2),
.receptionist-appointment-table td:nth-child(2) {
    width: 31%;
}

.receptionist-appointment-table th:nth-child(3),
.receptionist-appointment-table td:nth-child(3) {
    width: 24%;
}

.receptionist-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 18px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 8px;
}

.receptionist-status.is-green {
    background: #05c168;
}

.receptionist-status.is-blue {
    background: var(--color-primary);
}

.receptionist-status.is-red {
    background: #ff3d00;
}

.receptionist-empty {
    color: #7e818f;
}

.lab-dashboard-main {
    display: grid;
    align-content: start;
    gap: 10px;
    background: #ebecf5;
    padding: 18px 28px 34px;
}

.lab-topbar {
    margin: -18px -28px 18px;
    padding: 20px 28px 14px;
    background: #ffffff;
}

.lab-system-search {
    width: min(100%, 470px);
    height: 38px;
}

.lab-system-search input {
    height: 38px;
    border: 1px solid #e6e7f0;
    border-radius: 5px;
    background: #ffffff;
    font-size: 0.82rem;
}

.lab-top-actions .dashboard-icon-btn {
    width: 38px;
    height: 32px;
    border: 1px solid #e9eaf3;
    border-radius: 5px;
    background: #ffffff;
    color: #252936;
}

.lab-profile {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

.lab-profile div {
    display: none;
}

.lab-hero {
    padding-top: 4px;
}

.lab-hero h1 {
    margin: 0;
    color: #101124;
    font-size: 1.42rem;
    font-weight: 500;
}

.lab-hero p {
    margin: 4px 0 0;
    color: #101124;
    font-size: 1rem;
}

.lab-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 8px;
}

.lab-stat-card,
.lab-upload-card,
.lab-search-card,
.lab-patients-card {
    border-radius: 8px;
    background: #ffffff;
}

.lab-stat-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 132px;
    padding: 16px 10px;
}

.lab-stat-card > i,
.lab-upload-card i {
    color: #063bff;
    font-size: 2.75rem;
}

.lab-stat-card span {
    display: block;
    color: #101124;
    font-size: 0.86rem;
    text-align: center;
}

.lab-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #000000;
    font-size: 2.05rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.lab-stat-card small {
    display: block;
    margin-top: 8px;
    color: #101124;
    font-size: 0.62rem;
    line-height: 1.15;
    text-align: center;
}

.lab-upload-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 132px;
    padding: 16px;
}

.lab-upload-card h2 {
    margin: 0 0 22px;
    color: #101124;
    font-size: 1rem;
    font-weight: 800;
}

.lab-upload-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 7px;
    background: #3154e7;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 7px 13px;
}

.lab-search-card {
    margin-top: 2px;
    padding: 16px 14px 12px;
}

.lab-patients-card {
    margin-top: 2px;
    padding: 16px 14px 6px;
}

.lab-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.lab-card-header h1,
.lab-card-header h2 {
    margin: 0;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 900;
}

.lab-card-header a {
    color: #3154e7;
    font-size: 1rem;
    font-weight: 600;
}

.lab-patient-search {
    margin: 18px 0 12px;
}

.lab-patients-search {
    margin-top: 18px;
}

.lab-patient-search input {
    width: min(100%, 520px);
    height: 42px;
    border: 1px solid #bfc2cc;
    border-radius: 7px;
    color: #101124;
    font-size: 0.88rem;
    padding: 0 32px;
}

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

.lab-patient-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.lab-overview-table {
    min-width: 760px;
}

.lab-patient-table th,
.lab-patient-table td {
    color: #101124;
    font-size: 0.82rem;
    padding: 10px 0;
    text-align: left;
}

.lab-patient-table th {
    font-weight: 900;
}

.lab-patient-table td {
    font-weight: 500;
}

.lab-patient-table a {
    color: #101124;
}

.lab-action-link {
    color: #0095ff !important;
    font-weight: 700;
}

.lab-status {
    display: inline-flex;
    align-items: center;
    min-width: 72px;
    justify-content: center;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 2px 8px;
}

.lab-status.is-green {
    background: #15d66b;
}

.lab-status.is-blue {
    background: #0d97f5;
}

.lab-patients-pagination {
    margin-top: 0;
}

@media (max-width: 980px) {
    .lab-dashboard-main {
        padding: 16px 18px 28px;
    }

    .lab-topbar {
        margin: -16px -18px 18px;
        padding: 16px 18px 14px;
    }

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

@media (max-width: 720px) {
    .lab-dashboard-main {
        padding: 14px;
    }

    .lab-topbar {
        margin: -14px -14px 16px;
        padding: 14px;
    }

    .lab-system-search {
        width: 100%;
    }

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

    .lab-stat-card {
        min-height: 112px;
    }

    .lab-upload-card {
        align-items: flex-start;
    }

    .lab-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .lab-card-header h1,
    .lab-card-header h2 {
        font-size: 1.2rem;
    }

    .lab-patient-search input {
        width: 100%;
        padding: 0 16px;
    }
}

.receptionist-side-stack {
    display: grid;
    gap: 20px;
}

.receptionist-bookings-card {
    min-height: 126px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
}

.receptionist-bookings-card > i,
.receptionist-register-card i {
    color: var(--color-primary);
    line-height: 1;
}

.receptionist-bookings-card > i {
    font-size: 2.8rem;
}

.receptionist-bookings-card div {
    display: grid;
    justify-items: center;
}

.receptionist-bookings-card span {
    color: #010724;
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
}

.receptionist-bookings-card strong {
    color: #010724;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
}

.receptionist-register-card {
    min-height: 132px;
    padding: 15px 8px;
}

.receptionist-register-card h2 {
    font-size: 0.94rem;
    margin-bottom: 28px;
}

.receptionist-register-card div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.receptionist-register-card i {
    justify-self: center;
    font-size: 2.75rem;
}

.receptionist-register-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 12px;
    white-space: nowrap;
}

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

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

@media (max-width: 1180px) {
    .subscription-usage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-status-grid {
        grid-template-columns: 1fr;
    }

    .subscription-billing-history {
        grid-template-columns: 1fr;
    }

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

    .nurse-dashboard-layout {
        grid-template-columns: 216px minmax(0, 1fr);
    }

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

    .receptionist-dashboard-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

@media (max-width: 980px) {
    .facility-dashboard-shell {
        grid-template-columns: 1fr;
    }

    .facility-dashboard-shell .facility-sidebar {
        position: static;
        height: auto;
    }

    .appointments-shell .facility-dashboard-main {
        padding: 16px 18px 28px;
    }

    .patients-shell .facility-dashboard-main {
        padding: 16px 18px 28px;
    }

    .patient-detail-shell .facility-dashboard-main {
        padding: 16px 18px 28px;
    }

    .dashboard-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .appointments-shell .dashboard-search,
    .patients-shell .dashboard-search,
    .patient-detail-shell .dashboard-search,
    .nurse-system-search {
        width: 100%;
        margin-left: 0;
    }

    .dashboard-top-actions {
        justify-content: space-between;
    }

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

    .subscription-open-invoice {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .subscription-open-invoice-meta {
        align-items: start;
        justify-items: start;
    }

    .subscription-payment-form {
        grid-template-columns: 1fr auto;
    }

    .appointment-toolbar,
    .appointment-pagination,
    .patient-toolbar,
    .patient-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-modal-layer {
        inset: 0;
        padding: 24px 16px;
    }

    .patient-form-grid,
    .patient-additional-grid {
        grid-template-columns: 1fr;
    }

    .patient-detail-layout,
    .patient-detail-info-grid,
    .patient-note-grid,
    .patient-vitals-grid,
    .patient-medical-lists {
        grid-template-columns: 1fr;
    }

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

    .patient-wide-field {
        grid-column: auto;
    }

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

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

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

    .nurse-patients-main {
        padding: 16px 18px 28px;
    }

    .nurse-vitals-main {
        padding: 16px 18px 28px;
    }

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

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

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

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

@media (max-width: 720px) {
    .facility-dashboard-shell,
    .facility-dashboard-shell .facility-sidebar,
    .facility-dashboard-shell .facility-main,
    .facility-dashboard-shell .facility-dashboard-main,
    .facility-dashboard-shell .dashboard-topbar,
    .facility-dashboard-shell .appointment-heading,
    .facility-dashboard-shell .appointment-form-panel {
        box-sizing: border-box;
        max-width: 100vw;
        min-width: 0;
        width: 100%;
    }

    .facility-dashboard-shell {
        overflow-x: hidden;
    }

    .facility-dashboard-main {
        padding: 16px 12px 0;
    }

    .appointments-shell .facility-dashboard-main {
        padding: 16px 12px 24px;
    }

    .patients-shell .facility-dashboard-main {
        padding: 16px 12px 24px;
    }

    .patient-detail-shell .facility-dashboard-main {
        padding: 16px 12px 24px;
    }

    .clinical-shell .facility-dashboard-main,
    .billing-shell .facility-dashboard-main,
    .pending-verification-shell .facility-dashboard-main {
        padding: 16px 12px 24px;
    }

    .dashboard-page-heading,
    .dashboard-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-top-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .dashboard-stat-grid,
    .subscription-usage-grid,
    .subscription-status-grid,
    .dashboard-mid-grid {
        grid-template-columns: 1fr;
    }

    .subscription-usage-header,
    .subscription-usage-value {
        align-items: flex-start;
        flex-direction: column;
    }

    .subscription-billing-summary {
        grid-template-columns: 1fr;
    }

    .subscription-billing-panel .dashboard-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-billing-panel .dashboard-card-header form,
    .subscription-inline-submit {
        justify-self: stretch;
        width: 100%;
    }

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

    .subscription-table-list > div {
        align-items: start;
        grid-template-columns: 1fr;
    }

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

    .subscription-upgrade-list article {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-upgrade-list form {
        width: 100%;
    }

    .subscription-request-submit {
        justify-self: stretch;
        width: 100%;
    }

    .dashboard-profile {
        width: 100%;
    }

    .appointment-page-main {
        gap: 18px;
    }

    .appointment-toolbar-actions,
    .appointment-search-form,
    .appointment-search-form label:first-of-type,
    .appointment-primary-action,
    .appointment-inline-form .staff-field {
        width: 100%;
    }

    .appointment-search-form input[type="search"] {
        width: 100%;
    }

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

    .referral-picker-header,
    .referral-picker-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .referral-picker-tools label,
    .referral-picker-tools button {
        width: 100%;
    }

    .referral-patient-option {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .referral-patient-status {
        margin-left: 34px;
    }

    .appointment-date-filter {
        width: 100%;
        border: 1px solid #ebebf6;
        border-radius: 8px;
        background: #fbfbfc;
        padding: 8px 12px;
    }

    .appointment-date-filter select {
        width: 100%;
    }

    .appointment-row-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-scheduling-defaults-form,
    .appointment-availability-form,
    .appointment-availability-edit-form,
    .appointment-blocked-time-form {
        grid-template-columns: 1fr;
    }

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

    .appointment-blocked-time-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-request-review-card header,
    .appointment-request-review-actions {
        grid-template-columns: 1fr;
    }

    .appointment-request-review-card header {
        flex-direction: column;
    }

    .appointment-request-review-card dl,
    .appointment-request-form-grid {
        grid-template-columns: 1fr;
    }

    .referral-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .referral-detail-grid,
    .referral-detail-meta {
        grid-template-columns: 1fr;
    }

    .referral-batch-cancel-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .appointment-pagination,
    .patient-pagination {
        padding-bottom: 18px;
    }

    .patient-toolbar-actions,
    .patient-toolbar-filters,
    .patient-search,
    .patient-primary-action {
        width: 100%;
    }

    .patient-search input {
        width: 100%;
    }

    .patient-status-filter,
    .patient-date-filter {
        width: 100%;
        border: 1px solid #ebebf6;
        border-radius: 8px;
        background: #fbfbfc;
        padding: 8px 12px;
    }

    .patient-status-filter select,
    .patient-date-filter select {
        width: 100%;
    }

    .patient-modal {
        padding: 22px 16px;
    }

    .role-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .role-quick-actions a {
        width: 100%;
    }

    .role-work-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .role-work-row > span:last-child {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .nurse-dashboard-main {
        padding: 16px 12px 24px;
    }

    .nurse-patients-main {
        padding: 16px 12px 24px;
    }

    .nurse-vitals-main {
        padding: 16px 12px 24px;
    }

    .receptionist-dashboard-main {
        padding: 16px 12px 24px;
    }

    .nurse-stat-stack {
        grid-template-columns: 1fr;
    }

    .nurse-stat-card {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 16px;
    }

    .nurse-stat-card > i {
        font-size: 2.1rem;
    }

    .nurse-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .nurse-patients-board {
        max-width: none;
    }

    .nurse-patients-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .nurse-vitals-grid,
    .nurse-vitals-patient-card dl div {
        grid-template-columns: 1fr;
    }

    .nurse-vitals-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .nurse-vitals-actions p {
        margin: 0;
    }

    .receptionist-side-stack {
        grid-template-columns: 1fr;
    }

    .receptionist-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 760px) {
    .facility-dashboard-shell.patient-portal-shell .patient-portal-sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 120;
        width: 100%;
        height: 76px;
        min-height: 0;
        border-top: 1px solid #eceef7;
        border-right: 0;
        background: #ffffff;
        box-shadow: 0 -8px 22px rgba(10, 15, 35, 0.05);
        overflow: visible;
        padding: 0;
    }

    .facility-dashboard-shell.patient-portal-shell .patient-mobile-bottom-nav {
        display: grid;
    }
}

@media (max-width: 980px) {
    .patient-summary-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .patient-notification-toolbar {
        align-items: center;
        padding: 12px 14px;
    }

    .patient-summary-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .patient-summary-compact .patient-portal-panel {
        min-height: 78px;
        padding: 12px;
    }

    .patient-summary-compact span {
        font-size: 0.72rem;
    }

    .patient-summary-compact strong {
        font-size: 1.35rem;
    }

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

    .patient-notification-row {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        min-height: 78px;
        padding: 8px 0;
    }

    .patient-notification-open-link {
        grid-template-columns: 14px minmax(0, 1fr) auto;
        grid-template-areas:
            "dot source date"
            "dot message message";
        gap: 4px 8px;
        min-height: 0;
        padding: 2px 12px 2px 0;
    }

    .patient-notification-unread-dot {
        grid-area: dot;
        margin-top: 8px;
    }

    .patient-notification-source {
        grid-area: source;
        font-size: 0.8rem;
    }

    .patient-notification-message {
        grid-area: message;
        display: block;
    }

    .patient-notification-message strong,
    .patient-notification-message span {
        display: inline;
        white-space: normal;
    }

    .patient-notification-message span::before {
        content: "-";
    }

    .patient-notification-date {
        grid-area: date;
        font-size: 0.7rem;
    }

    .patient-notification-row-action {
        grid-column: 2;
        justify-content: flex-start;
        padding: 3px 12px 0 22px;
    }

    .patient-notification-mobile-meta {
        display: flex;
        grid-column: 2;
        gap: 7px;
        flex-wrap: wrap;
        color: #7b7f8f;
        font-size: 0.68rem;
        font-weight: 800;
        padding: 2px 12px 0 22px;
    }

    .patient-notification-mobile-meta span + span::before {
        content: "/";
        margin-right: 7px;
        color: #a0a4b2;
    }

    .patient-notification-detail-card header,
    .patient-notification-detail-card footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-notification-detail-meta {
        grid-template-columns: 1fr;
    }

    .patient-appointment-collapsible summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .patient-request-summary-side {
        justify-content: space-between;
        width: 100%;
    }
}

.facility-setup-main {
    gap: 18px;
}

.facility-setup-heading {
    align-items: center;
}

.setup-overview-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) repeat(2, minmax(190px, 1fr));
    gap: 14px;
}

.setup-progress-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.setup-progress-card h2,
.setup-check-card strong,
.facility-setup-form h2 {
    margin: 0;
    color: #0b1437;
}

.setup-progress-card p,
.setup-check-card p,
.facility-setup-form small {
    margin: 4px 0 0;
    color: #6f7487;
    font-size: 0.86rem;
}

.setup-progress-card small {
    display: inline-flex;
    margin-top: 10px;
    color: #3651e4;
    font-size: 0.78rem;
    font-weight: 800;
}

.setup-progress-ring {
    --setup-progress: 0%;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 58%, transparent 59%),
        conic-gradient(#3651e4 var(--setup-progress), #e7e9f5 0);
}

.setup-progress-ring span {
    color: #0b1437;
    font-size: 0.95rem;
    font-weight: 900;
}

.setup-check-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 112px;
}

.setup-check-card > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef0f8;
    color: #8a90a4;
}

.setup-check-card.is-complete > span {
    background: #e5f9ee;
    color: #16a34a;
}

.facility-setup-form {
    display: grid;
    gap: 22px;
    padding: 24px;
}

.setup-form-section {
    display: grid;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eceef7;
}

.setup-form-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

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

.setup-field-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-field {
    display: grid;
    gap: 7px;
}

.setup-field span,
.setup-choice-panel > strong {
    color: #30364a;
    font-size: 0.78rem;
    font-weight: 900;
}

.setup-field input,
.setup-choice-panel input,
.setup-field select {
    width: 100%;
}

.setup-field input {
    min-height: 42px;
    border: 1px solid #d8dbea;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font: inherit;
    padding: 0 12px;
}

.setup-field.has-error input,
.setup-choice-panel.has-error {
    border-color: #ef4444;
}

.setup-field em,
.setup-choice-panel em {
    color: #ef4444;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
}

.setup-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.setup-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid #dfe2ef;
    border-radius: 8px;
    background: #fff;
    color: #30364a;
    font-weight: 850;
    padding: 10px 12px;
}

.setup-toggle input,
.setup-choice-panel input {
    width: 16px;
    height: 16px;
    accent-color: #3651e4;
}

.setup-choice-panel {
    display: grid;
    gap: 10px;
    border: 1px solid #dfe2ef;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.setup-choice-panel ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-choice-panel li label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 800;
}

.setup-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid #d8dbea;
    border-radius: 8px;
    background: #fff;
    color: #30364a;
    font-weight: 850;
    padding: 0 18px;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .setup-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .facility-setup-main {
        padding: 16px 12px 96px;
    }

    .setup-overview-grid,
    .setup-field-grid,
    .setup-field-grid-compact,
    .setup-module-grid,
    .setup-choice-panel ul {
        grid-template-columns: 1fr;
    }

    .facility-setup-form {
        padding: 16px;
    }

    .setup-form-actions {
        flex-direction: column-reverse;
    }

    .setup-form-actions .btn,
    .setup-form-actions .btn-secondary {
        width: 100%;
    }
}