@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Component/Appointment/AppointmentDoctorCard.razor.rz.scp.css */
/* /Component/Appointment/AppointmentEditDrawer.razor.rz.scp.css */
/* =========================================================
   OVERLAY + PANEL — same dimensions as snippet 1
   (max-width: 1300px, height: 92vh, max-height: 96vh)
========================================================= */

.dialog-overlay[b-1mskdzvxw4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px; /* tighter padding = taller panel */
    animation: fadeIn-b-1mskdzvxw4 .2s ease;
}

.dialog-panel[b-1mskdzvxw4] {
    width: 100%;
    max-width: 1300px; /* ← same as snippet 1 */
    height: 92vh; /* ← same as snippet 1 */
    max-height: 96vh; /* ← same as snippet 1 */
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: popIn-b-1mskdzvxw4 .2s ease;
}

/* =========================================================
   HEADER
========================================================= */

.dialog-header[b-1mskdzvxw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 100;
}

    .dialog-header h3[b-1mskdzvxw4] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

.dialog-close-btn[b-1mskdzvxw4] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 6px;
    border-radius: 8px;
}

    .dialog-close-btn:hover[b-1mskdzvxw4] {
        background: #f1f5f9;
        color: #1e293b;
    }

/* =========================================================
   BODY — single panel (scrollable)
========================================================= */

.dialog-body-single[b-1mskdzvxw4] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

/* =========================================================
   FOOTER
========================================================= */

.dialog-footer[b-1mskdzvxw4] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.drawer-cancel-btn[b-1mskdzvxw4] {
    border: 1px solid #dbe2ea;
    background: white;
    color: #475569;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.drawer-save-btn[b-1mskdzvxw4] {
    border: none;
    background: #2563eb;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .drawer-save-btn:hover[b-1mskdzvxw4] {
        background: #1d4ed8;
    }

    .drawer-save-btn:disabled[b-1mskdzvxw4] {
        background: #93c5fd;
        cursor: not-allowed;
    }

/* =========================================================
   SECTIONS
========================================================= */

.drawer-section[b-1mskdzvxw4] {
    margin-bottom: 18px;
}

.drawer-section-last[b-1mskdzvxw4] {
    margin-bottom: 0;
}

.drawer-section h4[b-1mskdzvxw4] {
    margin: 0 0 10px;
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}

/* =========================================================
   GRID / FIELDS
========================================================= */

.drawer-grid[b-1mskdzvxw4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.full-width[b-1mskdzvxw4] {
    grid-column: 1 / -1;
}

.field[b-1mskdzvxw4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field label[b-1mskdzvxw4] {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
    }

    .field input[b-1mskdzvxw4],
    .field select[b-1mskdzvxw4],
    .field textarea[b-1mskdzvxw4] {
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .field textarea[b-1mskdzvxw4] {
        min-height: 70px;
        resize: vertical;
    }

    .field input:disabled[b-1mskdzvxw4] {
        background: #f8fafc;
        color: #475569;
    }

/* =========================================================
   DOCTOR GROUP
========================================================= */

.doctor-group-box[b-1mskdzvxw4] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #fff;
}

.group-title[b-1mskdzvxw4] {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.doctor-selection-section[b-1mskdzvxw4] {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.doctor-search-panel[b-1mskdzvxw4] {
    flex: 1;
    min-width: 0;
}

.doctor-selected-panel[b-1mskdzvxw4] {
    width: 260px;
    flex-shrink: 0;
}

.workflow-selected-card[b-1mskdzvxw4],
.doctor-placeholder[b-1mskdzvxw4] {
    height: 100%;
    min-height: 88px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    box-sizing: border-box;
}

.workflow-selected-card[b-1mskdzvxw4] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.selected-title[b-1mskdzvxw4] {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
}

.selected-subtitle[b-1mskdzvxw4] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.change-btn[b-1mskdzvxw4] {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.placeholder-title[b-1mskdzvxw4] {
    font-weight: 700;
    font-size: 13px;
    color: #64748b;
}

.placeholder-subtitle[b-1mskdzvxw4] {
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes fadeIn-b-1mskdzvxw4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn-b-1mskdzvxw4 {
    from {
        opacity: 0;
        transform: scale(.97);
    }

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

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 768px) {

    .drawer-grid[b-1mskdzvxw4] {
        grid-template-columns: 1fr;
    }

    .doctor-selection-section[b-1mskdzvxw4] {
        flex-direction: column;
    }

    .doctor-selected-panel[b-1mskdzvxw4] {
        width: 100%;
    }
}

@media (max-width: 640px) {

    .dialog-overlay[b-1mskdzvxw4] {
        padding: 0;
    }

    .dialog-panel[b-1mskdzvxw4] {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .dialog-footer[b-1mskdzvxw4] {
        flex-direction: column-reverse;
    }

    .drawer-save-btn[b-1mskdzvxw4],
    .drawer-cancel-btn[b-1mskdzvxw4] {
        width: 100%;
    }
}
/* /Component/Appointment/AppointmentFilterBar.razor.rz.scp.css */
/* =========================================================
   APPOINTMENT FILTER BAR  (apt-* classes)
   ========================================================= */

.apt-filter-shell[b-6yjck0o1jm] {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 16px;
}

.apt-filters-row[b-6yjck0o1jm] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    /* labelled and unlabelled controls share one bottom line */
    align-items: flex-end;
}

/* SEARCH */
.apt-search[b-6yjck0o1jm] {
    position: relative;
    flex: 1 1 260px;
    min-width: 240px;
}

    .apt-search .mdi[b-6yjck0o1jm] {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #94a3b8;
        pointer-events: none;
    }

    .apt-search input[b-6yjck0o1jm] {
        width: 100%;
        height: 42px;
        padding: 0 14px 0 40px;
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        background: #fff;
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

/* LABELLED FIELDS */
.apt-field[b-6yjck0o1jm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
}

.apt-field-wide[b-6yjck0o1jm] {
    min-width: 210px;
}

.apt-field label[b-6yjck0o1jm] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #5f6b7a;
}

.apt-field input[b-6yjck0o1jm],
.apt-field select[b-6yjck0o1jm] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .apt-search input:focus[b-6yjck0o1jm],
    .apt-field input:focus[b-6yjck0o1jm],
    .apt-field select:focus[b-6yjck0o1jm] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

/* BUTTONS */
.apt-actions[b-6yjck0o1jm] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.apt-search-btn[b-6yjck0o1jm],
.apt-book-btn[b-6yjck0o1jm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

    .apt-search-btn .mdi[b-6yjck0o1jm],
    .apt-book-btn .mdi[b-6yjck0o1jm] {
        font-size: 16px;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .apt-filters-row[b-6yjck0o1jm] {
        flex-direction: column;
        align-items: stretch;
    }

    .apt-search[b-6yjck0o1jm],
    .apt-field[b-6yjck0o1jm],
    .apt-field-wide[b-6yjck0o1jm] {
        min-width: 0;
        width: 100%;
    }

    .apt-actions[b-6yjck0o1jm] {
        width: 100%;
    }

        .apt-actions .btn[b-6yjck0o1jm] {
            flex: 1;
        }
}

/* DATE RANGE TRIGGER */

.apt-date-range[b-6yjck0o1jm] {
    min-width: 220px;
}

.apt-date-range-button[b-6yjck0o1jm] {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 11px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .apt-date-range-button:hover[b-6yjck0o1jm],
    .apt-date-range-button:focus-visible[b-6yjck0o1jm] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        outline: none;
    }

.apt-date-range-icon[b-6yjck0o1jm] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 16px;
}

.apt-date-range-content[b-6yjck0o1jm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.apt-date-range-label[b-6yjck0o1jm] {
    font-size: 11px;
    line-height: 1.1;
    color: #64748b;
    font-weight: 600;
}

.apt-date-range-value[b-6yjck0o1jm] {
    overflow: hidden;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-date-range-chevron[b-6yjck0o1jm] {
    margin-left: auto;
    color: #64748b;
}

/* DRAWER */

.apt-date-drawer-backdrop[b-6yjck0o1jm] {
    position: fixed;
    z-index: 1060;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.38);
}

.apt-date-drawer[b-6yjck0o1jm] {
    width: min(430px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -10px 0 35px rgba(15, 23, 42, 0.16);
    animation: apt-date-drawer-in-b-6yjck0o1jm 0.18s ease-out;
}

@keyframes apt-date-drawer-in-b-6yjck0o1jm {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

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

.apt-date-drawer-header[b-6yjck0o1jm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #edf0f5;
}

    .apt-date-drawer-header h3[b-6yjck0o1jm] {
        margin: 0;
        color: #172033;
        font-size: 18px;
        font-weight: 750;
    }

    .apt-date-drawer-header p[b-6yjck0o1jm] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.apt-date-drawer-close[b-6yjck0o1jm] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

.apt-date-drawer-body[b-6yjck0o1jm] {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
}

.apt-date-section-title[b-6yjck0o1jm],
.apt-custom-date-title[b-6yjck0o1jm] {
    margin-bottom: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.apt-date-presets[b-6yjck0o1jm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apt-date-preset[b-6yjck0o1jm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .apt-date-preset:hover[b-6yjck0o1jm],
    .apt-date-preset.active[b-6yjck0o1jm] {
        border-color: #2563eb;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .apt-date-preset i[b-6yjck0o1jm] {
        color: #94a3b8;
    }

    .apt-date-preset.active i[b-6yjck0o1jm] {
        color: #2563eb;
    }

.apt-custom-date-section[b-6yjck0o1jm] {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf0f5;
}

.apt-custom-date-grid[b-6yjck0o1jm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.apt-custom-date-field[b-6yjck0o1jm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .apt-custom-date-field label[b-6yjck0o1jm] {
        color: #64748b;
        font-size: 12px;
        font-weight: 650;
    }

    .apt-custom-date-field input[b-6yjck0o1jm] {
        width: 100%;
        height: 42px;
        padding: 0 10px;
        border: 1px solid #dbe2ea;
        border-radius: 9px;
        color: #334155;
        outline: none;
    }

        .apt-custom-date-field input:focus[b-6yjck0o1jm] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.apt-date-error[b-6yjck0o1jm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

.apt-date-drawer-footer[b-6yjck0o1jm] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #edf0f5;
}

.apt-reset-date-button[b-6yjck0o1jm],
.apt-apply-date-button[b-6yjck0o1jm] {
    min-height: 40px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .apt-date-range[b-6yjck0o1jm] {
        width: 100%;
        min-width: 0;
    }

    .apt-custom-date-grid[b-6yjck0o1jm] {
        grid-template-columns: 1fr;
    }

    .apt-date-drawer-footer[b-6yjck0o1jm] {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}
/* /Component/Appointment/AppointmentPatientCard.razor.rz.scp.css */
.patient-card[b-07sph6v56p] {
    display: flex;
    gap: 18px;
    align-items: center;
}

.patient-avatar[b-07sph6v56p] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patient-details[b-07sph6v56p] {
    flex: 1;
}

.patient-name-row[b-07sph6v56p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .patient-name-row h3[b-07sph6v56p] {
        margin: 0;
        font-size: 18px;
    }

.patient-badge[b-07sph6v56p] {
    background: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

.patient-meta[b-07sph6v56p] {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}
/* /Component/Appointment/AppointmentSlotGrid.razor.rz.scp.css */
.appointment-card[b-y9g9gr3yu3] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
}

.slot-header[b-y9g9gr3yu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.card-title[b-y9g9gr3yu3] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.slot-summary[b-y9g9gr3yu3] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.summary[b-y9g9gr3yu3] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

    .summary.available[b-y9g9gr3yu3] {
        background: #dcfce7;
        color: #15803d;
    }

    .summary.booked[b-y9g9gr3yu3] {
        background: #fee2e2;
        color: #dc2626;
    }

    .summary.blocked[b-y9g9gr3yu3] {
        background: #e2e8f0;
        color: #475569;
    }

.selected-slot-info[b-y9g9gr3yu3] {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
}

.slot-grid-modern[b-y9g9gr3yu3] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(95px,1fr));
    gap: 10px;
}

.slot-chip[b-y9g9gr3yu3] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    min-height: 62px;
    cursor: pointer;
    transition: .2s;
    background: white;
}

    .slot-chip:hover[b-y9g9gr3yu3] {
        transform: translateY(-2px);
    }

.slot-time[b-y9g9gr3yu3] {
    font-size: 13px;
    font-weight: 700;
}

.slot-capacity[b-y9g9gr3yu3] {
    margin-top: 4px;
    font-size: 11px;
}

.slot-available[b-y9g9gr3yu3] {
    background: #f0fdf4;
    border-color: #22c55e;
}

.slot-booked[b-y9g9gr3yu3] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
    cursor: not-allowed;
}

.slot-blocked[b-y9g9gr3yu3] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #64748b;
    cursor: not-allowed;
}

.slot-selected[b-y9g9gr3yu3] {
    border: 2px solid #2563eb;
    background: #dbeafe;
}
/* /Component/Appointment/AppointmentStatusTabs.razor.rz.scp.css */
/* =========================================================
   APPOINTMENT WORKBAR  =  status tabs + filters in ONE card

   ROW 1   [ Waiting 19 ][ Check In 21 ][ Completed 5 ][ Cancelled 0 ][ All 45 ]
   ROW 2   [ 🔍 search ................ ][ 📅 date ▾ ][ Search ][ Book Appointment ]

   - Tabs are equal-width segments: icon + label left, count right,
     and a thin "share of total" bar along the bottom edge.
   - The card's top edge takes the colour of the active status.
   - Row 2 is fully used: search stretches, actions sit on the right.

   NOTE: this file uses ::deep, so it must stay a scoped
   component stylesheet (AppointmentStatusTabs.razor.css).
   ========================================================= */

/* ---------- status colours ----------
   --t-color accent | --t-dark gradient end | --t-soft tint
   Applied to both the tab buttons and the .workbar (active tone). */

.tone-waiting[b-3yy3s97umi] {
    --t-color: #d97706;
    --t-dark: #b45309;
    --t-soft: #fef3c7;
}

.tone-checkin[b-3yy3s97umi] {
    --t-color: #2563eb;
    --t-dark: #1d4ed8;
    --t-soft: #dbeafe;
}

.tone-completed[b-3yy3s97umi] {
    --t-color: #059669;
    --t-dark: #047857;
    --t-soft: #d1fae5;
}

.tone-cancelled[b-3yy3s97umi] {
    --t-color: #e11d48;
    --t-dark: #be123c;
    --t-soft: #ffe4e9;
}

.tone-all[b-3yy3s97umi] {
    --t-color: #5b4fe5;
    --t-dark: #3d33b0;
    --t-soft: #edebff;
}

.tone-booked[b-3yy3s97umi] {
    --t-color: #0284c7;
    --t-dark: #0369a1;
    --t-soft: #e0f2fe;
}

/* =========================================================
   CARD
   ========================================================= */

.workbar[b-3yy3s97umi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 11px 10px 10px;
    background: #fff;
    border: 1px solid #e2e6ed;
    border-radius: 14px;
    /* inset line = coloured top edge that follows the active tab */
}

/* =========================================================
   ROW 1 - TABS
   ========================================================= */

.status-tabs[b-3yy3s97umi] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 3px;
    background: #f2f3fa;
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .status-tabs[b-3yy3s97umi]::-webkit-scrollbar {
        display: none;
    }

.status-tab[b-3yy3s97umi] {
    position: relative;
    flex: 1 1 0; /* equal widths */
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 44px;
    padding: 0 12px 5px 8px; /* bottom room for the share bar */
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #475467;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

    .status-tab:hover:not(.active)[b-3yy3s97umi] {
        background: #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 39, .10);
    }

    .status-tab:focus-visible[b-3yy3s97umi] {
        outline: 2px solid var(--t-color);
        outline-offset: 1px;
    }

    .status-tab.active[b-3yy3s97umi] {
        background: linear-gradient(160deg, var(--t-color), var(--t-dark));
        color: #fff;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--t-color) 35%, transparent);
    }

    /* ---- share bar: ::before = track, ::after = fill (--share is 0-100) ---- */

    .status-tab[b-3yy3s97umi]::before,
    .status-tab[b-3yy3s97umi]::after {
        content: "";
        position: absolute;
        left: 12px;
        bottom: 6px;
        height: 3px;
        border-radius: 3px;
        pointer-events: none;
    }

    .status-tab[b-3yy3s97umi]::before {
        right: 12px;
        background: rgba(16, 24, 39, .07);
    }

    .status-tab[b-3yy3s97umi]::after {
        width: calc((100% - 24px) * var(--share, 0) / 100);
/*        background: var(--t-color);
*/        opacity: .9;
        transition: width .4s ease;
    }

    .status-tab.active[b-3yy3s97umi]::before {
        background: rgba(255, 255, 255, .28);
    }

    .status-tab.active[b-3yy3s97umi]::after {
        background: #fff;
        opacity: 1;
    }

/* icon */
.status-tab-icon[b-3yy3s97umi] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--t-soft);
    color: var(--t-color);
    font-size: 16px;
    transition: background .15s ease, color .15s ease;
}

.status-tab.active .status-tab-icon[b-3yy3s97umi] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* label grows and pushes the count to the far right */
.status-tab-copy[b-3yy3s97umi] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.status-tab-label[b-3yy3s97umi] {
    font-size: 13.5px;
    font-weight: 700;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* count badge */
.status-tab-count[b-3yy3s97umi] {
    flex: 0 0 auto;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--t-soft);
    color: var(--t-color);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease, color .15s ease;
}

    .status-tab-count.is-zero[b-3yy3s97umi] {
        opacity: .55;
    }

.status-tab.active .status-tab-count[b-3yy3s97umi] {
    background: #fff;
    color: var(--t-dark);
    opacity: 1;
}

/* =========================================================
   ROW 2 - FILTERS  (existing AppointmentFilterBar, restyled ONLY here)
   Everything is scoped under .workbar-filter, so the same filter
   on other pages keeps its normal look.
   ========================================================= */

.workbar-filter[b-3yy3s97umi] {
    width: 100%;
    padding-top: 9px;
    border-top: 1px solid #eef0f5;
}

    /* the workbar is the card now, drop the filter's own card */
    .workbar-filter[b-3yy3s97umi]  .apt-filter-shell {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-filters-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /* SEARCH: takes ALL the free space in the row */
    .workbar-filter[b-3yy3s97umi]  .apt-search {
        flex: 1 1 auto;
        min-width: 200px;
        max-width: none;
    }

        .workbar-filter[b-3yy3s97umi]  .apt-search input {
            height: 40px;
            padding: 0 14px 0 38px;
            border-radius: 10px;
            background: #f8f9fc;
            font-size: 13.5px;
        }

            .workbar-filter[b-3yy3s97umi]  .apt-search input:focus {
                background: #fff;
                border-color: var(--t-color, #5b4fe5);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-color, #5b4fe5) 18%, transparent);
            }

        .workbar-filter[b-3yy3s97umi]  .apt-search .mdi {
            left: 13px;
            font-size: 18px;
        }

    /* DATE RANGE: one line (icon + value) */
    .workbar-filter[b-3yy3s97umi]  .apt-date-range {
        flex: 0 0 auto;
        min-width: 0;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-date-range-button {
        min-height: 40px;
        padding: 4px 20px 4px 30px;
        background: #f8f9fc;
    }

        .workbar-filter[b-3yy3s97umi]  .apt-date-range-button:hover,
        .workbar-filter[b-3yy3s97umi]  .apt-date-range-button:focus-visible {
            background: #fff;
            border-color: var(--t-color, #5b4fe5);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-color, #5b4fe5) 18%, transparent);
        }

    .workbar-filter[b-3yy3s97umi]  .apt-date-range-label {
        display: none;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-date-range-icon {
        width: 26px;
        height: 26px;
        font-size: 15px;
        background: #edebff;
        color: #5b4fe5;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-date-range-value {
        font-size: 13px;
    }

    /* BUTTONS: Search = quiet outline, Book Appointment = solid primary */
    .workbar-filter[b-3yy3s97umi]  .apt-actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-search-btn,
    .workbar-filter[b-3yy3s97umi]  .apt-book-btn {
        height: 40px;
        padding: 0 60px;
        border-radius: 10px;
        font-size: 13px;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-search-btn {
        border: 1px solid #e2e6ed;
        color: white;
    }

        .workbar-filter[b-3yy3s97umi]  .apt-search-btn:hover {
            background: #edebff;
            border-color: #5b4fe5;
            color: #3d33b0;
        }

    .workbar-filter[b-3yy3s97umi]  .apt-book-btn {
        border: 1px solid #5b4fe5;
        color: #fff;
    }

        .workbar-filter[b-3yy3s97umi]  .apt-book-btn:hover {
            background: #3d33b0;
            border-color: #3d33b0;
            color: #fff;
        }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
    .status-tab[b-3yy3s97umi] {
        gap: 8px;
        padding: 0 10px 5px 6px;
    }

    .status-tab-label[b-3yy3s97umi] {
        font-size: 12.5px;
    }
}

@media (max-width: 768px) {
    .workbar[b-3yy3s97umi] {
        padding: 10px 8px 8px;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-filters-row {
        flex-wrap: wrap;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-search {
        flex: 1 1 100%;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-date-range {
        flex: 1 1 auto;
    }

    .workbar-filter[b-3yy3s97umi]  .apt-actions {
        width: 100%;
    }

        .workbar-filter[b-3yy3s97umi]  .apt-actions .btn {
            flex: 1;
        }
}

/* Phones: tabs scroll sideways instead of squeezing */
@media (max-width: 640px) {
    .status-tab[b-3yy3s97umi] {
        flex: 0 0 auto;
        min-width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-tab[b-3yy3s97umi],
    .status-tab[b-3yy3s97umi]::after {
        transition: none;
    }
}
/* /Component/Appointment/AppointmentStepper.razor.rz.scp.css */
.vertical-stepper[b-xmktw35oxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.step-item[b-xmktw35oxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-circle[b-xmktw35oxj] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.step-label[b-xmktw35oxj] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

.step-line[b-xmktw35oxj] {
    width: 2px;
    height: 110px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* =========================================
   ACTIVE
========================================= */

.step-item.active .step-circle[b-xmktw35oxj] {
    background: #2563eb;
    color: white;
    box-shadow: 0 0 0 4px #dbeafe;
}

.step-item.active .step-label[b-xmktw35oxj] {
    color: #2563eb;
}

/* =========================================
   COMPLETED
========================================= */

.step-item.completed .step-circle[b-xmktw35oxj] {
    background: #16a34a;
    color: white;
}

.step-item.completed .step-label[b-xmktw35oxj] {
    color: #16a34a;
}

/* =========================================
   PENDING
========================================= */

.step-item.pending .step-circle[b-xmktw35oxj] {
    background: #f3f4f6;
    color: #6b7280;
}

.step-item.pending .step-label[b-xmktw35oxj] {
    color: #9ca3af;
}
/* /Component/Appointment/AppointmentSummary.razor.rz.scp.css */
.summary-card[b-h6syl97yhb] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 20px;
}

.summary-title[b-h6syl97yhb] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.summary-row[b-h6syl97yhb] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #475569;
}

    .summary-row strong[b-h6syl97yhb] {
        color: #0f172a;
    }
/* /Component/Appointment/AppointmentTable.razor.rz.scp.css */
/* =========================================================
   APPOINTMENT TABLE
   Lives inside the page card, so the wrapper has no border,
   radius or shadow of its own (no double frame).
   Colour tokens come from .appointment-manage-page; the
   fallbacks keep it safe if used elsewhere.
   ========================================================= */

.appointment-table-wrapper[b-2re7j4bn17] {
    background: transparent;
    /* No overflow:hidden here — it would clip the row-action dropdown.
       Rounded corners are applied per-cell on the last row instead. */
}

/* Round the last row's outer cells so the table still fits the
   card's rounded bottom without needing overflow:hidden. */
.appointment-table tbody tr:last-child td:first-child[b-2re7j4bn17] {
    border-bottom-left-radius: var(--radius-lg, 18px);
}

.appointment-table tbody tr:last-child td:last-child[b-2re7j4bn17] {
    border-bottom-right-radius: var(--radius-lg, 18px);
}


.appointment-table[b-2re7j4bn17] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13.5px;
}

    .appointment-table .col-token[b-2re7j4bn17] {
        width: 110px;
    }

    .appointment-table .col-slot[b-2re7j4bn17] {
        width: 130px;
    }

    .appointment-table .col-mobile[b-2re7j4bn17] {
        width: 150px;
    }

    .appointment-table .col-action[b-2re7j4bn17] {
        width: 210px;
    }

    /* HEADER - identical to the patient directory */
    .appointment-table thead th[b-2re7j4bn17] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        padding: 12px 16px;
        background: var(--surface-muted, #F8F9FC);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-soft, #667085);
        border-bottom: 1px solid var(--border, #E2E6ED);
        white-space: nowrap;
        vertical-align: middle;
    }

        .appointment-table thead th.th-action[b-2re7j4bn17] {
            text-align: right;
        }

    .appointment-table td[b-2re7j4bn17] {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: var(--ink, #101827);
    }

    .appointment-table tbody tr[b-2re7j4bn17] {
        transition: background .12s ease;
    }

        .appointment-table tbody tr:hover[b-2re7j4bn17] {
            background: var(--surface-muted, #F8F9FC);
        }

        .appointment-table tbody tr:last-child td[b-2re7j4bn17] {
            border-bottom: none;
        }

/* =========================================================
   TOKEN
   ========================================================= */

.token-chip[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-soft, #EDEBFF);
    color: var(--primary, #5B4FE5);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

    .token-chip .mdi[b-2re7j4bn17] {
        font-size: 14px;
    }

/* =========================================================
   PATIENT
   ========================================================= */

.patient-cell[b-2re7j4bn17] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.patient-avatar[b-2re7j4bn17] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-soft, #EDEBFF);
    color: var(--primary, #5B4FE5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    flex-shrink: 0;
}

.patient-info[b-2re7j4bn17] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.patient-name[b-2re7j4bn17] {
    font-weight: 600;
    color: var(--ink, #101827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-sub-text[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary, #5B4FE5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .patient-sub-text .mdi[b-2re7j4bn17] {
        font-size: 13px;
        flex-shrink: 0;
    }

/* =========================================================
   DOCTOR / DEPARTMENT / SLOT / MOBILE
   ========================================================= */

.doctor-name[b-2re7j4bn17] {
    font-weight: 500;
    color: var(--ink, #101827);
}

.doctor-cell[b-2re7j4bn17],
.mobile-cell[b-2re7j4bn17],
.slot-cell[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.doctor-cell[b-2re7j4bn17] {
    font-weight: 600;
    color: var(--ink, #101827);
}

.mobile-cell[b-2re7j4bn17] {
    font-weight: 500;
    color: var(--ink, #101827);
}

.slot-cell[b-2re7j4bn17] {
    font-weight: 600;
    color: var(--ink, #101827);
}

    .doctor-cell .mdi[b-2re7j4bn17],
    .mobile-cell .mdi[b-2re7j4bn17],
    .slot-cell .mdi[b-2re7j4bn17] {
        font-size: 15px;
        color: var(--ink-soft, #667085);
        flex-shrink: 0;
    }

.department-chip[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-muted, #F8F9FC);
    border: 1px solid var(--border, #E2E6ED);
    color: #475569;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .department-chip .mdi[b-2re7j4bn17] {
        font-size: 14px;
        color: var(--ink-soft, #667085);
    }

/* =========================================================
   STATUS  (kept for the upcoming status column / badge)
   ========================================================= */

.appointment-status-badge[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

    .appointment-status-badge[b-2re7j4bn17]::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.status-scheduled[b-2re7j4bn17] {
    background: #DBEAFE;
    color: #1D4ED8;
}

.status-checkedin[b-2re7j4bn17] {
    background: var(--amber-100, #FEF3C7);
    color: var(--amber-600, #D97706);
}

.status-completed[b-2re7j4bn17] {
    background: var(--emerald-100, #D1FAE5);
    color: var(--emerald-600, #059669);
}

.status-cancelled[b-2re7j4bn17] {
    background: var(--rose-100, #FFE4E9);
    color: var(--rose-600, #E11D48);
}

.status-default[b-2re7j4bn17] {
    background: #E2E8F0;
    color: #334155;
}

/* =========================================================
   ROW ACTIONS  (same sizing as the patient directory)
   ========================================================= */

.tbl-act[b-2re7j4bn17] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

    .tbl-act .btn[b-2re7j4bn17] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .tbl-act .btn .mdi[b-2re7j4bn17] {
            font-size: 16px;
            line-height: 1;
        }

        .tbl-act .btn:hover:not(:disabled)[b-2re7j4bn17] {
            transform: translateY(-1px);
        }

    /* Same width for Consult / Check In / Edit Consult so the column aligns */
    .tbl-act .consult-btn[b-2re7j4bn17] {
        min-width: 118px;
    }

    /* Edit Consult uses the brand colour */
    .tbl-act .btn-primary[b-2re7j4bn17] {
        color: #fff;
    }

        .tbl-act .btn-primary:hover[b-2re7j4bn17] {
            background: var(--primary-dark, #3D33B0);
            border-color: var(--primary-dark, #3D33B0);
            color: #fff;
        }

    .tbl-act .btn-secondary[b-2re7j4bn17] {
        background: var(--surface-muted, #F8F9FC);
        border-color: var(--border, #E2E6ED);
        color: var(--ink-soft, #667085);
    }

/* Cancelled rows: muted pill instead of loose grey text */
.no-consult[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface-muted, #F8F9FC);
    color: var(--ink-soft, #667085);
    font-size: 12px;
    font-weight: 600;
}

/* "More" icon button */
.action-more-btn.btn[b-2re7j4bn17] {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    min-width: 0;
    background: var(--surface, #fff);
    border-color: var(--border, #E2E6ED);
    color: var(--ink-soft, #667085);
}

    .action-more-btn.btn:hover[b-2re7j4bn17] {
        border-color: var(--primary, #5B4FE5);
        color: var(--primary, #5B4FE5);
        background: var(--primary-soft, #EDEBFF);
    }

.action-more-btn[b-2re7j4bn17]::after {
    display: none;
}

.action-more-btn .mdi[b-2re7j4bn17] {
    font-size: 18px;
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.patient-action-menu[b-2re7j4bn17] {
    min-width: 180px;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--border, #E2E6ED);
    border-radius: 9px;
    background: var(--surface, #fff);
    box-shadow: 0 16px 36px rgba(16, 24, 39, .14);
    z-index: 1050;
}

    .patient-action-menu .patient-action-item[b-2re7j4bn17] {
        display: flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background .15s ease;
    }

        .patient-action-menu .patient-action-item .mdi[b-2re7j4bn17] {
            width: 18px;
            display: inline-flex;
            justify-content: center;
            font-size: 17px;
        }

    .patient-action-menu .action-billing[b-2re7j4bn17] {
        color: var(--primary, #5B4FE5);
    }

        .patient-action-menu .action-billing:hover[b-2re7j4bn17] {
            background: var(--primary-soft, #EDEBFF);
        }

    .patient-action-menu .action-edit[b-2re7j4bn17] {
        color: var(--amber-600, #D97706);
    }

        .patient-action-menu .action-edit:hover[b-2re7j4bn17] {
            background: var(--amber-100, #FEF3C7);
        }

    .patient-action-menu .action-ipd[b-2re7j4bn17] {
        color: var(--emerald-600, #059669);
    }

        .patient-action-menu .action-ipd:hover[b-2re7j4bn17] {
            background: var(--emerald-100, #D1FAE5);
        }

/* =========================================================
   EMPTY STATE
   ========================================================= */

.appointment-empty-state[b-2re7j4bn17] {
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-soft, #667085);
}

    .appointment-empty-state .empty-icon[b-2re7j4bn17] {
        font-size: 32px;
        color: var(--ink-soft, #667085);
        display: block;
        margin-bottom: 8px;
    }

    .appointment-empty-state h4[b-2re7j4bn17] {
        margin: 0 0 4px;
        color: var(--ink, #101827);
        font-size: 15px;
        font-weight: 700;
    }

    .appointment-empty-state p[b-2re7j4bn17] {
        margin: 0;
        font-size: 13px;
    }

/* =========================================================
   MOBILE / TABLET CARD VIEW
   ========================================================= */

.mobile-view[b-2re7j4bn17] {
    display: none;
}

.appointment-mobile-list[b-2re7j4bn17] {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.appointment-mobile-card[b-2re7j4bn17] {
    border: 1px solid var(--border, #E2E6ED);
    border-radius: 13px;
    padding: 14px;
    background: var(--surface, #fff);
}

.mobile-card-top[b-2re7j4bn17] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-card-body[b-2re7j4bn17] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-row[b-2re7j4bn17] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

    .mobile-row > span:first-child[b-2re7j4bn17] {
        color: var(--ink-soft, #667085);
    }

.mobile-actions .tbl-act[b-2re7j4bn17] {
    justify-content: stretch;
}

    .mobile-actions .tbl-act .consult-btn[b-2re7j4bn17] {
        flex: 1;
    }

@media (max-width: 1024px) {
    .desktop-view[b-2re7j4bn17] {
        display: none;
    }

    .mobile-view[b-2re7j4bn17] {
        display: flex;
    }
}


.patient-action-menu .action-cancel[b-2re7j4bn17] {
    color: #dc2626;
}

    .patient-action-menu .action-cancel:hover[b-2re7j4bn17] {
        background: #fef2f2;
    }

/* =========================================================
   COMPACT DENSITY  -  8+ rows on screen, no inner scroll
   (appended last on purpose; same selectors, later wins)
   ========================================================= */

.appointment-table thead th[b-2re7j4bn17] {
    position: static; /* no sticky: the table no longer scrolls */
    padding: 9px 14px;
}

.appointment-table td[b-2re7j4bn17] {
    padding: 7px 14px;
}

.patient-avatar[b-2re7j4bn17] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 12px;
}

.patient-info[b-2re7j4bn17] {
    gap: 0;
}

.patient-name[b-2re7j4bn17] {
    font-size: 13.5px;
}

.token-chip[b-2re7j4bn17] {
    padding: 3px 10px;
    font-size: 11.5px;
}

.department-chip[b-2re7j4bn17] {
    padding: 3px 9px;
}

.tbl-act .btn[b-2re7j4bn17] {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

.tbl-act .consult-btn[b-2re7j4bn17] {
    min-width: 104px;
}

.action-more-btn.btn[b-2re7j4bn17] {
    width: 30px;
    height: 30px;
}

/* =========================================================
   DROPDOWN ESCAPE — Bootstrap Popper keeps the menu attached
   to the button and flips it above when the row is close to
   the viewport bottom. Boundary set to viewport (in markup) so
   it is never clipped by the page card's overflow.
   ========================================================= */

.patient-action-menu[data-popper-placement^="bottom"][b-2re7j4bn17] {
    margin-top: 6px !important;
}

.patient-action-menu[data-popper-placement^="top"][b-2re7j4bn17] {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

.action-cancel[b-2re7j4bn17] {
    color: #b91c1c;
}

    .action-cancel:hover[b-2re7j4bn17] {
        background: #fef2f2;
        color: #991b1b;
    }


.appointment-directory-card[b-2re7j4bn17] {
    /* ...existing styles... */
    overflow: visible;
}

/* =========================================================
   DATE STACK — Appointment date on top (muted), Consulted
   date below (emphasized) for Completed rows. Rows without
   a completion date just show a single line, unchanged.
   ========================================================= */

.date-stack[b-2re7j4bn17] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-line[b-2re7j4bn17] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .date-line .mdi[b-2re7j4bn17] {
        font-size: 14px;
        flex-shrink: 0;
    }

.date-line-muted[b-2re7j4bn17] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft, #667085);
}

.date-line-strong[b-2re7j4bn17] {
    font-size: 13px;
    font-weight: 700;
    color: var(--emerald-600, #059669);
}

.date-stack-mobile[b-2re7j4bn17] {
    align-items: flex-end;
}
/* /Component/Appointment/AppointmentVitals.razor.rz.scp.css */
.vitals-grid[b-h94grgtmaw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
    gap: 16px;
}
/* /Component/Appointment/BookAppointmentDialog.razor.rz.scp.css */
/* =========================================================
   OVERLAY + PANEL (centered dialog, not a side drawer)
========================================================= */

/* =========================================================
   OVERLAY + PANEL (centered dialog, not a side drawer)
========================================================= */

.dialog-overlay[b-6mszphulhx] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;               /* was 16px — tighter padding = taller panel */
    animation: fadeIn-b-6mszphulhx .2s ease;
}

.dialog-panel[b-6mszphulhx] {
    width: 100%;
    max-width: 1300px;
    height: 92vh;
    max-height: 96vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden; /* was: overflow: visible !important */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: popIn-b-6mszphulhx .2s ease;
}

/* =========================================================
   HEADER
========================================================= */

.dialog-header[b-6mszphulhx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 100;
}

    .dialog-header h3[b-6mszphulhx] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

.dialog-close-btn[b-6mszphulhx] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 6px;
    border-radius: 8px;
}

    .dialog-close-btn:hover[b-6mszphulhx] {
        background: #f1f5f9;
        color: #1e293b;
    }

/* =========================================================
   BODY (scrollable center + sticky summary)
========================================================= */
.dialog-body[b-6mszphulhx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto; /* was: overflow: visible !important */
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    padding: 12px 20px;
    align-items: start;
}

.dialog-center-panel[b-6mszphulhx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow: visible !important; /* Critical: Allows dropdown to overflow */
}

.dialog-right-panel[b-6mszphulhx] {
    min-width: 0;
}

    .dialog-right-panel .summary-card-v2[b-6mszphulhx] {
        position: sticky;
        top: 0;
    }

/* =========================================================
   FOOTER
========================================================= */

.dialog-footer[b-6mszphulhx] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.drawer-cancel-btn[b-6mszphulhx] {
    border: 1px solid #dbe2ea;
    background: white;
    color: #475569;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.drawer-save-btn[b-6mszphulhx] {
    border: none;
    background: #2563eb;
    color: white;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .drawer-save-btn:hover[b-6mszphulhx] {
        background: #1d4ed8;
    }

    .drawer-save-btn:disabled[b-6mszphulhx] {
        background: #93c5fd;
        cursor: not-allowed;
    }

/* =========================================================
   WORKFLOW ROW (patient / doctor search + selected)
========================================================= */

.workflow-row[b-6mszphulhx] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 12px;
    overflow: visible !important; /* Critical: Allows dropdown to overflow */
}

.workflow-title[b-6mszphulhx] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.workflow-search-card[b-6mszphulhx],
.workflow-selected-card[b-6mszphulhx],
.appointment-card-v2[b-6mszphulhx],
.summary-card-v2[b-6mszphulhx] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.workflow-search-card[b-6mszphulhx],
.appointment-card-v2[b-6mszphulhx] {
    padding: 10px 14px;
}

.workflow-search-card[b-6mszphulhx] {
    overflow: visible !important; /* Critical: Allows dropdown to overflow */
    position: relative;
}

.workflow-selected-card[b-6mszphulhx] {
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.patient-locked-card[b-6mszphulhx] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.selected-title[b-6mszphulhx] {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
}

.selected-subtitle[b-6mszphulhx] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.change-btn[b-6mszphulhx] {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.locked-badge[b-6mszphulhx] {
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* =========================================================
   VISIT / VITALS CARDS
========================================================= */

.card-title-v2[b-6mszphulhx] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.compact-grid-4[b-6mszphulhx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.compact-grid-6[b-6mszphulhx] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.field[b-6mszphulhx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .field label[b-6mszphulhx] {
        font-size: 11px;
        color: #64748b;
        font-weight: 600;
    }

    .field input[b-6mszphulhx],
    .field select[b-6mszphulhx],
    .field textarea[b-6mszphulhx] {
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 13px;
        width: 100%;
        box-sizing: border-box;
    }

/* =========================================================
   SUMMARY PANEL
========================================================= */

.summary-card-v2[b-6mszphulhx] {
    padding: 14px;
}

.summary-header[b-6mszphulhx] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.summary-section[b-6mszphulhx] {
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
}

    .summary-section:first-of-type[b-6mszphulhx] {
        border-top: none;
        padding-top: 0;
    }

.summary-section-title[b-6mszphulhx] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

.summary-main-text[b-6mszphulhx] {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
}

.summary-sub-text[b-6mszphulhx] {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.summary-row[b-6mszphulhx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    padding: 3px 0;
}

    .summary-row strong[b-6mszphulhx] {
        color: #1e293b;
    }

/* =========================================================
   DOCTOR SEARCH - Ensure dropdown appears above everything
========================================================= */

.doctor-search-box-wrapper[b-6mszphulhx] {
    overflow: visible !important;
}

.doctor-search-suggestions[b-6mszphulhx] {
    z-index: 10001 !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
    max-height: 350px;
    overflow-y: auto;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes fadeIn-b-6mszphulhx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn-b-6mszphulhx {
    from {
        opacity: 0;
        transform: scale(.97);
    }

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

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 992px) {

    .dialog-body[b-6mszphulhx] {
        grid-template-columns: 1fr;
    }

    .dialog-right-panel .summary-card-v2[b-6mszphulhx] {
        position: static;
    }

    .workflow-row[b-6mszphulhx] {
        grid-template-columns: 1fr;
    }

    .compact-grid-4[b-6mszphulhx],
    .compact-grid-6[b-6mszphulhx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .dialog-overlay[b-6mszphulhx] {
        padding: 0;
    }

    .dialog-panel[b-6mszphulhx] {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        overflow-y: auto; /* On mobile, allow scrolling */
    }

    .dialog-footer[b-6mszphulhx] {
        flex-direction: column-reverse;
        position: static; /* On mobile, footer can be static */
    }

    .drawer-save-btn[b-6mszphulhx],
    .drawer-cancel-btn[b-6mszphulhx] {
        width: 100%;
    }

    .compact-grid-4[b-6mszphulhx],
    .compact-grid-6[b-6mszphulhx] {
        grid-template-columns: 1fr;
    }

    .dialog-header[b-6mszphulhx] {
        position: sticky;
        top: 0;
    }
}


/* =========================================================
   DIALOG EMPTY STATE
   Fills the center panel when the user hasn't selected a
   patient or doctor yet, so the layout never looks half-built.
   ========================================================= */

.dialog-empty-state[b-6mszphulhx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 24px;
    min-height: 280px;
    border: 1.5px dashed #dbe2ea;
    border-radius: 12px;
    background: #f8fafc;
    animation: emptyFadeIn-b-6mszphulhx 0.3s ease-out;
}

@keyframes emptyFadeIn-b-6mszphulhx {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* Large icon badge */
.empty-state-icon[b-6mszphulhx] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12);
}

    .empty-state-icon .mdi[b-6mszphulhx] {
        font-size: 38px;
        color: #4f46e5;
        line-height: 1;
    }

/* Title */
.empty-state-title[b-6mszphulhx] {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Description */
.empty-state-text[b-6mszphulhx] {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
    max-width: 380px;
}

/* Progress steps */
.empty-state-steps[b-6mszphulhx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.step-chip[b-6mszphulhx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

    .step-chip.active[b-6mszphulhx] {
        background: #eef2ff;
        border-color: #c7d2fe;
        color: #4f46e5;
    }

.step-number[b-6mszphulhx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5eaf0;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
}

.step-chip.active .step-number[b-6mszphulhx] {
    background: #4f46e5;
    color: #ffffff;
}

.step-arrow[b-6mszphulhx] {
    font-size: 16px;
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 640px) {
    .empty-state-steps[b-6mszphulhx] {
        flex-direction: column;
        gap: 6px;
    }

    .step-arrow[b-6mszphulhx] {
        transform: rotate(90deg);
    }
}

/* =========================================================
   "Already booked" info banner inside the Book Appointment
   dialog. Informational, non-blocking.
   Card with an amber accent bar; one clean row per appointment.
   ========================================================= */

.existing-appointment-alert[b-6mszphulhx] {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 12px 14px 12px 16px;
    background: #FFFBF0;
    border: 1px solid #F6E2A8;
    border-left: 4px solid #F59E0B;
    border-radius: 12px;
}

/* ---------- header ---------- */

.existing-alert-header[b-6mszphulhx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.existing-alert-icon[b-6mszphulhx] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #FEF3C7;
    color: #D97706;
    font-size: 19px;
}

.existing-alert-heading[b-6mszphulhx] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.existing-alert-title[b-6mszphulhx] {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #78350F;
}

.existing-alert-hint[b-6mszphulhx] {
    font-size: 12px;
    line-height: 1.4;
    color: #92400E;
}

/* ---------- appointment rows ---------- */

.existing-alert-list[b-6mszphulhx] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.existing-alert-item[b-6mszphulhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #F1E6C4;
    border-radius: 9px;
}

.existing-alert-meta[b-6mszphulhx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
    white-space: nowrap;
}

    .existing-alert-meta .mdi[b-6mszphulhx] {
        font-size: 15px;
        color: #98A2B3;
    }

    .existing-alert-meta strong[b-6mszphulhx] {
        font-weight: 700;
        color: #101827;
    }

/* token chip - same look as the appointments table */
.existing-alert-token[b-6mszphulhx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EDEBFF;
    color: #5B4FE5;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .existing-alert-token .mdi[b-6mszphulhx] {
        font-size: 14px;
    }

/* status pill - pushed to the right edge of the row */
.existing-alert-status[b-6mszphulhx] {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF0F5;
    color: #475467;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .existing-alert-status.status-booked[b-6mszphulhx],
    .existing-alert-status.status-scheduled[b-6mszphulhx] {
        background: #DBEAFE;
        color: #1D4ED8;
    }

    .existing-alert-status.status-checkedin[b-6mszphulhx],
    .existing-alert-status.status-waiting[b-6mszphulhx] {
        background: #FEF3C7;
        color: #B45309;
    }

    .existing-alert-status.status-completed[b-6mszphulhx] {
        background: #D1FAE5;
        color: #047857;
    }

@media (max-width: 560px) {
    .existing-alert-status[b-6mszphulhx] {
        margin-left: 0;
    }
}

.existing-alert-item.is-cancelled .existing-alert-meta[b-6mszphulhx],
.existing-alert-item.is-cancelled .existing-alert-token[b-6mszphulhx] {
    opacity: 0.6;
}
/* /Component/Appointment/ConsultationDrawer.razor.rz.scp.css */
/* =========================================================
   DIALOG SHELL — replaces the old full-page workspace/topbar.
   Same large-centered-modal pattern as ConsultationDrawer's
   .drawer-overlay/.drawer-panel (fixed header, scrollable body).
   ========================================================= */
.cd-overlay[b-rb46cbu0ml] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .55);
}

.cd-panel[b-rb46cbu0ml] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1270px;
    height: 92vh;
    overflow: hidden;
    border-radius: 1rem;
    background: #F1F5F9;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.cd-header[b-rb46cbu0ml] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

    .cd-header h3[b-rb46cbu0ml] {
        margin: 0;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: #0f172a;
    }
/* =========================================================
   ICON BUTTON (Full Screen / Expand)
   ========================================================= */

/* =========================================================
   HEADER ACTIONS — buttons side by side
   ========================================================= */

.cd-header-actions[b-rb46cbu0ml] {
    display: flex;
    flex-direction: row; /* horizontal layout */
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* don't let it get squeezed */
}

.cd-icon-btn[b-rb46cbu0ml] {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
}

    .cd-icon-btn:hover[b-rb46cbu0ml] {
        background: #e0e7ff;
        color: #4f46e5;
    }

    .cd-icon-btn:active[b-rb46cbu0ml] {
        transform: scale(0.96);
    }

    .cd-icon-btn .mdi[b-rb46cbu0ml] {
        font-size: 15px;
        line-height: 1;
    }

/* =========================================================
   CLOSE BUTTON — matches icon button size
   ========================================================= */

.cd-close-btn[b-rb46cbu0ml] {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
}

    .cd-close-btn:hover[b-rb46cbu0ml] {
        background: #fee2e2;
        color: #dc2626;
    }

    .cd-close-btn:active[b-rb46cbu0ml] {
        transform: scale(0.96);
    }

    .cd-close-btn .mdi[b-rb46cbu0ml] {
        font-size: 15px;
        line-height: 1;
    }

.cd-body[b-rb46cbu0ml] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    font-size: 15px;
    color: #1e293b;
}

    .cd-body *[b-rb46cbu0ml] {
        box-sizing: border-box;
    }

.muted[b-rb46cbu0ml] {
    color: crimson;
    font-weight: 500;
}

.consult-proto-workspace[b-rb46cbu0ml] {
    background-color: #F1F5F9;
    color: #1e293b;
    min-height: 100vh;
    font-size: 15px;
}

    .consult-proto-workspace *[b-rb46cbu0ml] {
        box-sizing: border-box;
    }

.consult-proto-container[b-rb46cbu0ml] {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 1.75rem;
}

.muted[b-rb46cbu0ml] {
    color: crimson;
    font-weight: 500;
}

/* ---- top bar ---- */
.consult-topbar[b-rb46cbu0ml] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.topbar-left[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-back[b-rb46cbu0ml] {
    background: #eef2ff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #4338ca;
}

    .icon-back:hover[b-rb46cbu0ml] {
        background: #e0e7ff;
    }

.patient-chip[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-avatar[b-rb46cbu0ml] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}

    .patient-avatar.sm[b-rb46cbu0ml] {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

.patient-chip-name[b-rb46cbu0ml] {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
    margin: 0;
}

.patient-chip-meta[b-rb46cbu0ml] {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0 0;
}

.topbar-right[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* =========================================================
   TOPBAR ACTION BUTTONS
   ========================================================= */

.topbar-btn[b-rb46cbu0ml] {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .topbar-btn i[b-rb46cbu0ml] {
        font-size: 17px;
        line-height: 1;
    }

.topbar-btn-vitals[b-rb46cbu0ml] {
    background: #ffffff;
    border-color: #2563eb;
    color: #2563eb;
}

    .topbar-btn-vitals:hover[b-rb46cbu0ml] {
        background: #eff6ff;
        border-color: #1d4ed8;
        color: #1d4ed8;
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
        transform: translateY(-1px);
    }

.topbar-btn-preview[b-rb46cbu0ml] {
    background: #ffffff;
    color: #7c3aed;
}

    .topbar-btn-preview:hover[b-rb46cbu0ml] {
        background: #f5f3ff;
        border-color: #6d28d9;
        color: #6d28d9;
        box-shadow: 0 3px 8px rgba(124, 58, 237, 0.12);
        transform: translateY(-1px);
    }

.topbar-btn-complete[b-rb46cbu0ml] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

    .topbar-btn-complete:hover[b-rb46cbu0ml] {
        background: #15803d;
        border-color: #15803d;
        box-shadow: 0 3px 8px rgba(22, 163, 74, 0.18);
        transform: translateY(-1px);
    }

.topbar-btn:active[b-rb46cbu0ml] {
    transform: translateY(0);
}

.topbar-btn:focus-visible[b-rb46cbu0ml] {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .topbar-right[b-rb46cbu0ml] {
        gap: 6px;
    }

    .topbar-btn[b-rb46cbu0ml] {
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }

        .topbar-btn i[b-rb46cbu0ml] {
            font-size: 16px;
        }
}


/* ---- layout ---- */
/* Trimmed top padding so the toolbar sits closer to the page edge
   instead of leaving unused white space above it. */
.consult-proto-main[b-rb46cbu0ml] {
    padding: 0.5rem 1.25rem 1.25rem;
}


/* ---- shared card bits still used by icon-badge etc ---- */
.card-title[b-rb46cbu0ml] {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.icon-badge[b-rb46cbu0ml] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.badge-rose[b-rb46cbu0ml] {
    background: #ffe4e6;
    color: #be123c;
}

.badge-preview[b-rb46cbu0ml] {
    background: #f5f3ff;
    color: #6d28d9;
}

.link-action[b-rb46cbu0ml] {
    background: none;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    color: #94a3b8;
}

    .link-action:hover[b-rb46cbu0ml], .link-action.danger:hover[b-rb46cbu0ml] {
        color: #dc2626;
        text-decoration: underline;
    }

/* ---- section-header "Clear" button (replaces the old +Add pattern
        on free-text sections: Symptoms, Examinations, Diagnosis, Advice) ---- */
.clear-action[b-rb46cbu0ml] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .clear-action i[b-rb46cbu0ml] {
        font-size: 14px;
        line-height: 1;
    }

    .clear-action:hover[b-rb46cbu0ml] {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #b91c1c;
    }

    .clear-action:focus-visible[b-rb46cbu0ml] {
        outline: 2px solid rgba(220, 38, 38, 0.35);
        outline-offset: 2px;
    }


/* ---- type-in tag inputs (kept for anything still using this pattern) ---- */
.tag-input-row[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tag-input-row .form-input[b-rb46cbu0ml] {
        flex: 1;
    }

.btn-add[b-rb46cbu0ml] {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 0.45rem;
    cursor: pointer;
    border: none;
    color: #fff;
    white-space: nowrap;
    font-family: inherit;
}

.btn-add-blue[b-rb46cbu0ml] {
    background: #2563eb;
}

    .btn-add-blue:hover[b-rb46cbu0ml] {
        background: #1d4ed8;
    }

.btn-add-violet[b-rb46cbu0ml] {
    background: #7c3aed;
}

    .btn-add-violet:hover[b-rb46cbu0ml] {
        background: #6d28d9;
    }

.btn-add-green[b-rb46cbu0ml] {
    background: #059669;
}

    .btn-add-green:hover[b-rb46cbu0ml] {
        background: #047857;
    }

.btn-add-amber[b-rb46cbu0ml] {
    background: #d97706;
}

    .btn-add-amber:hover[b-rb46cbu0ml] {
        background: #b45309;
    }

.btn-add-teal[b-rb46cbu0ml] {
    background: #0d9488;
}

    .btn-add-teal:hover[b-rb46cbu0ml] {
        background: #0f766e;
    }

.chip-row[b-rb46cbu0ml] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.chip[b-rb46cbu0ml] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 7px 5px 11px;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.chip-blue[b-rb46cbu0ml] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.chip-violet[b-rb46cbu0ml] {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.chip-amber[b-rb46cbu0ml] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.chip-x[b-rb46cbu0ml] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
    line-height: 1;
    color: inherit;
    opacity: .7;
}

    .chip-x:hover[b-rb46cbu0ml] {
        opacity: 1;
    }

.chip-suggest[b-rb46cbu0ml] {
    cursor: pointer;
    background: #fff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 9999px;
}

    .chip-suggest:hover[b-rb46cbu0ml] {
        background: #f5f3ff;
    }

.empty-hint[b-rb46cbu0ml] {
    font-size: 12.5px;
    color: crimson;
    font-style: italic;
}

/* ---- differential diagnosis toggle ---- */
.differential-toggle[b-rb46cbu0ml] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
    border-radius: 0.5rem;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

    .differential-toggle:hover[b-rb46cbu0ml] {
        background: #ffe4e6;
    }

.chevron[b-rb46cbu0ml] {
    transition: transform .2s ease;
}

    .chevron.open[b-rb46cbu0ml] {
        transform: rotate(180deg);
    }

.differential-panel[b-rb46cbu0ml] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 3px 0 3px;
}

/* ---- generic form bits ---- */
.field[b-rb46cbu0ml] {
    margin-top: 9px;
}

    .field label[b-rb46cbu0ml], .field-grid label[b-rb46cbu0ml] {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 4px;
    }

.field-grid[b-rb46cbu0ml] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .field-grid.cols-2[b-rb46cbu0ml] {
        grid-template-columns: 1fr 1fr;
    }
}

.form-input[b-rb46cbu0ml], textarea.form-input[b-rb46cbu0ml], select.form-input[b-rb46cbu0ml] {
    width: 100%;
    font-size: 13.5px;
    padding: 8px 11px;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    outline: none;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-input:focus[b-rb46cbu0ml] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

textarea.form-input[b-rb46cbu0ml] {
    resize: vertical;
    min-height: 38px;
}

/* Bigger free-text areas for Symptoms / Examinations / Diagnosis / Advice
   so there's real room to write, replacing the old single-line + chip UI. */
.rx-textarea[b-rb46cbu0ml] {
    min-height: 92px;
    line-height: 1.55;
    resize: vertical;
}

.stack-list[b-rb46cbu0ml] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-row[b-rb46cbu0ml] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .inline-row .form-input[b-rb46cbu0ml] {
        flex: 1;
    }

/* Investigation rows: test name stays a short input, remarks becomes a
   proper multi-line textarea so there's space to write instructions. */
.investigation-row[b-rb46cbu0ml] {
    align-items: flex-start;
}

    .investigation-row .investigation-name[b-rb46cbu0ml] {
        flex: 0 0 220px;
    }

    .investigation-row .investigation-remarks[b-rb46cbu0ml] {
        flex: 1;
        min-height: 54px;
        line-height: 1.5;
        resize: vertical;
    }

@media (max-width: 640px) {
    .investigation-row[b-rb46cbu0ml] {
        flex-wrap: wrap;
    }

        .investigation-row .investigation-name[b-rb46cbu0ml] {
            flex: 1 1 100%;
        }
}

.table-wrap[b-rb46cbu0ml] {
    overflow-x: auto;
}

table.data-table[b-rb46cbu0ml] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13.5px;
}

    table.data-table thead tr[b-rb46cbu0ml] {
        background: #f0fdf4;
        border-top: 1px solid #bbf7d0;
        border-bottom: 1px solid #bbf7d0;
    }

    table.data-table th[b-rb46cbu0ml] {
        padding: 8px 10px;
        color: #166534;
        font-weight: 700;
        white-space: nowrap;
    }

    table.data-table td[b-rb46cbu0ml] {
        padding: 6px 8px;
        border-bottom: 1px solid #f1f5f9;
    }

    table.data-table tbody tr:last-child td[b-rb46cbu0ml] {
        border-bottom: none;
    }

    table.data-table tbody tr:hover td[b-rb46cbu0ml] {
        background: #f8fafc;
    }

    table.data-table input[b-rb46cbu0ml] {
        width: 100%;
        padding: 7px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 13.5px;
        font-family: inherit;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        table.data-table input:focus[b-rb46cbu0ml] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

.col-center[b-rb46cbu0ml] {
    text-align: center;
}

.icon-btn-danger[b-rb46cbu0ml] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #ef4444;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 12.5px;
    border-radius: 6px;
}

    .icon-btn-danger:hover[b-rb46cbu0ml] {
        background: #fee2e2;
        color: #b91c1c;
    }


/* =========================================================
   PRESCRIPTION "PAPER" CANVAS — toolbar + shell
   ========================================================= */
.canvas-toolbar[b-rb46cbu0ml] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 9px 14px;
    margin-bottom: 12px;
}

.canvas-toolbar-title[b-rb46cbu0ml] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-toolbar-right[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-tab[b-rb46cbu0ml] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 5px 12px;
    border-radius: 6px;
}

.letterhead-select[b-rb46cbu0ml] {
    width: auto !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* Trimmed vertical padding so the canvas doesn't add extra scroll height
   on top of what its sections already need. */
.rx-canvas[b-rb46cbu0ml] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    padding: 1.15rem 1.5rem 1.35rem;
    position: relative;
    overflow: hidden;
}

.rx-canvas-corner[b-rb46cbu0ml] {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #0f766e, #14b8a6 60%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.rx-canvas-header[b-rb46cbu0ml] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    z-index: 1;
    padding-left: 64px;
}

.rx-canvas-hospital-block[b-rb46cbu0ml] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rx-canvas-logo[b-rb46cbu0ml] {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #f1f5f9;
    color: #0f766e;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
}

    .rx-canvas-logo img[b-rb46cbu0ml] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rx-canvas-hospital h2[b-rb46cbu0ml] {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
}

.rx-canvas-address[b-rb46cbu0ml] {
    font-size: 14px;
    color: black;
    margin: 3px 0 0 0;
    max-width: 360px;
}

.rx-canvas-contact[b-rb46cbu0ml] {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0 0;
}

.rx-canvas-doctors[b-rb46cbu0ml] {
    text-align: right;
    font-size: 13px;
    color: #1e293b;
}

.rx-canvas-divider[b-rb46cbu0ml] {
    height: 2px;
    background: #0f172a;
    margin: 12px 0 11px 0;
}

/* =========================================================
   PATIENT INFO ROW — header strip
   Label small + muted, value bold + dark. Same single row.
   ========================================================= */

.rx-canvas-patient-row[b-rb46cbu0ml] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    padding-bottom: 11px;
    border-bottom: 1px dashed #cbd5e1;
    font-size: 14px;
    color: #0f172a;
}

/* Each label + value pair — inline, side by side */
.rx-info-item[b-rb46cbu0ml] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

/* Small, muted, uppercase label */
.rx-info-label[b-rb46cbu0ml] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: crimson;
}

/* Bold, dark value */
.rx-info-value[b-rb46cbu0ml] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.rx-canvas-body[b-rb46cbu0ml] {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
}

.rx-canvas-rx-symbol[b-rb46cbu0ml] {
    font-size: 26px;
    font-weight: 800;
    color: #0f766e;
    margin: 4px 0 4px 0;
}


/* =========================================================
   SINGLE FULL-WIDTH EDITABLE PRESCRIPTION CANVAS
   (body now holds the live clinical form fields, replacing
   the old separate left-side input cards + right preview)
   ========================================================= */

.rx-canvas-editable[b-rb46cbu0ml] {
    max-width: 1208px;
    margin: 0 auto;
}

/* Trimmed per-section padding (was 18px top/bottom) to cut cumulative
   vertical whitespace across the ~7 sections on the page. */
.rx-section[b-rb46cbu0ml] {
    padding: 13px 0;
    border-bottom: 1px dashed #e2e8f0;
}

    .rx-section:first-child[b-rb46cbu0ml] {
        padding-top: 4px;
    }

    .rx-section:last-of-type[b-rb46cbu0ml] {
        border-bottom: none;
    }

.rx-section-head[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.rx-section-label[b-rb46cbu0ml] {
    font-weight: 800;
    color: #0f172a;
    font-size: 14px;
    letter-spacing: .01em;
}

.rx-section-label-full[b-rb46cbu0ml] {
    font-weight: 600;
    color: black;
    font-size: 14px;
    margin-left: 4px;
}

.rx-section-meds[b-rb46cbu0ml] {
    border-bottom: 1px dashed #e2e8f0;
}

.rx-med-table-editable .col-num[b-rb46cbu0ml] {
    width: 34px;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
}

.rx-canvas-signature[b-rb46cbu0ml] {
    position: static;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    font-size: 12.5px;
    color: #1e293b;
}

@media (max-width: 700px) {
    .rx-canvas[b-rb46cbu0ml] {
        padding: 1.1rem 1.1rem 1.25rem;
    }

    .rx-canvas-header[b-rb46cbu0ml] {
        flex-direction: column;
        gap: 10px;
        padding-left: 0;
    }

    .rx-canvas-corner[b-rb46cbu0ml] {
        display: none;
    }

    .rx-canvas-doctors[b-rb46cbu0ml] {
        text-align: left;
    }

    .rx-section-head[b-rb46cbu0ml] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}


/* =========================================================
   SUMMARY SCREEN — ported from the consultation drawer's
   summary-layout (left: actions, right: document-style rx
   preview). Same classes/behaviour as the drawer component,
   so this is a drop-in match once the pages sit side by side.
   ========================================================= */
.section-header-block[b-rb46cbu0ml] {
    margin-bottom: 1.25rem;
}

.section-title[b-rb46cbu0ml] {
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
}

.opd-subtitle[b-rb46cbu0ml] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.summary-layout[b-rb46cbu0ml] {
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .summary-layout[b-rb46cbu0ml] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SUMMARY ACTIONS — both buttons in one row, right-aligned
   ========================================================= */

.summary-actions[b-rb46cbu0ml] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* push both buttons to the right */
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Base button — sizing + icon/label alignment only.
   Colors come from Bootstrap's .btn-primary. */
.summary-action-btn[b-rb46cbu0ml] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex: 0 1 auto;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .summary-action-btn .mdi[b-rb46cbu0ml] {
        font-size: 17px;
        line-height: 1;
        flex-shrink: 0;
    }

    .summary-action-btn:hover[b-rb46cbu0ml] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, .28);
    }

    .summary-action-btn:active[b-rb46cbu0ml] {
        transform: translateY(0);
    }

.summary-action-label[b-rb46cbu0ml] {
    white-space: nowrap;
}

/* Responsive — stack full width on mobile */
@media (max-width: 640px) {
    .summary-actions[b-rb46cbu0ml] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-action-btn[b-rb46cbu0ml] {
        width: 100%;
    }
}

.summary-action-chevron[b-rb46cbu0ml] {
    color: #94a3b8;
    font-size: 18px;
}

.summary-whatsapp-card[b-rb46cbu0ml] {
    padding: 16px;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.summary-whatsapp-row[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.summary-whatsapp-icon[b-rb46cbu0ml] {
    display: flex;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 17px;
}

.summary-whatsapp-label[b-rb46cbu0ml] {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

.summary-whatsapp-number[b-rb46cbu0ml] {
    margin: 1px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.summary-whatsapp-btn[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(22, 163, 74, .3);
    transition: box-shadow .15s ease, transform .1s ease;
}

    .summary-whatsapp-btn:hover[b-rb46cbu0ml] {
        box-shadow: 0 4px 14px rgba(22, 163, 74, .4);
        transform: translateY(-1px);
    }

.summary-success-banner[b-rb46cbu0ml] {
    padding: 18px;
    border-radius: 0.85rem;
    background: linear-gradient(160deg, #0f172a, #1e1b4b);
    color: #fff;
}

.summary-success-icon[b-rb46cbu0ml] {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 15px;
    margin-bottom: 10px;
}

.summary-success-title[b-rb46cbu0ml] {
    margin: 0 0 5px;
    font-size: 14.5px;
    font-weight: 800;
}

.summary-success-text[b-rb46cbu0ml] {
    margin: 0 0 15px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #cbd5e1;
}

.summary-success-btn[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #1e1b4b;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

    .summary-success-btn:hover[b-rb46cbu0ml] {
        background: #e0e7ff;
    }

.summary-preview[b-rb46cbu0ml] {
    min-width: 0;
}

.summary-preview-label[b-rb46cbu0ml] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.rx-doc-card[b-rb46cbu0ml] {
    padding: 1.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #fff;
}

.rx-doc-header[b-rb46cbu0ml] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.rx-doc-doctor-name[b-rb46cbu0ml] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #4338ca;
}

.rx-doc-line[b-rb46cbu0ml] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #64748b;
}

.rx-doc-logo[b-rb46cbu0ml] {
    display: flex;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(67, 56, 202, .3);
    overflow: hidden;
}

    .rx-doc-logo img[b-rb46cbu0ml] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 13px;
    }

.rx-doc-clinic[b-rb46cbu0ml] {
    text-align: right;
}

.rx-doc-clinic-name[b-rb46cbu0ml] {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.rx-doc-divider[b-rb46cbu0ml] {
    height: 1px;
    margin: 16px 0;
    background: #e2e8f0;
}

.rx-patient-row[b-rb46cbu0ml] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .rx-patient-row[b-rb46cbu0ml] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rx-label[b-rb46cbu0ml] {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
}

.rx-value[b-rb46cbu0ml] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
}

.rx-section-title[b-rb46cbu0ml] {
    margin: 20px 0 9px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4338ca;
}

.rx-med-table[b-rb46cbu0ml] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rx-med-table th[b-rb46cbu0ml],
    .rx-med-table td[b-rb46cbu0ml] {
        padding: 9px 11px;
        border: 1px solid #e2e8f0;
        text-align: left;
        color: #1e293b;
    }

    .rx-med-table th[b-rb46cbu0ml] {
        background: #f8fafc;
        font-weight: 700;
        color: #475569;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.rx-block[b-rb46cbu0ml] {
    margin: 7px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #334155;
    white-space: pre-wrap;
}

.rx-block-label[b-rb46cbu0ml] {
    font-weight: 700;
    color: #1e293b;
}

.rx-notes-block[b-rb46cbu0ml] {
    margin: 5px 0 0;
    padding: 14px 16px;
    border-radius: 0.65rem;
    background: #fffefb;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 23px, #eef1f6 23px, #eef1f6 24px);
    font-size: 13.5px;
    line-height: 24px;
    color: #334155;
    white-space: pre-wrap;
}

@media print {
    body *[b-rb46cbu0ml] {
        visibility: hidden;
    }

    #printable-prescription[b-rb46cbu0ml], #printable-prescription *[b-rb46cbu0ml] {
        visibility: visible;
    }

    #printable-prescription[b-rb46cbu0ml] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}


/* =========================================================
   VITALS / PREVIEW MODAL DIALOGS
   ========================================================= */
.modal-overlay[b-rb46cbu0ml] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal-dialog-box[b-rb46cbu0ml] {
    background: #fff;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    border-radius: 0.85rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Vitals dialog — sized up per request; more room for the fields
   that will be added here later. */
    .modal-dialog-box.modal-lg[b-rb46cbu0ml] {
        max-width: 780px;
        min-height: 480px;
    }

    /* Preview dialog — the biggest of the three, since it hosts the
   full rx-doc-card review template. */
    .modal-dialog-box.modal-xl[b-rb46cbu0ml] {
        max-width: 960px;
        max-height: 92vh;
    }

.modal-dialog-header[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

    .modal-dialog-header .card-title[b-rb46cbu0ml] {
        margin: 0;
    }

.modal-close-btn[b-rb46cbu0ml] {
    background: #f1f5f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

    .modal-close-btn:hover[b-rb46cbu0ml] {
        background: #e2e8f0;
        color: #1e293b;
    }

.modal-dialog-body[b-rb46cbu0ml] {
    padding: 16px 18px;
    overflow-y: auto;
}

.modal-dialog-footer[b-rb46cbu0ml] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.field-grid.cols-4[b-rb46cbu0ml] {
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .field-grid.cols-4[b-rb46cbu0ml] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .field-grid.cols-4[b-rb46cbu0ml] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.form-input.readonly[b-rb46cbu0ml] {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}


/* =========================================================
   STATE CARDS — no-visit / loading / error
   (page now has real states the prototype didn't need)
   ========================================================= */
.state-card[b-rb46cbu0ml] {
    max-width: 1040px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    padding: 2rem;
    text-align: center;
}

.state-card-danger[b-rb46cbu0ml] {
    border-color: #fecaca;
    background: #fef2f2;
}

.state-title[b-rb46cbu0ml] {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

    .state-title.danger[b-rb46cbu0ml] {
        color: #b91c1c;
    }

.state-text[b-rb46cbu0ml] {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #64748b;
}

.spinner[b-rb46cbu0ml] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-rb46cbu0ml .7s linear infinite;
    vertical-align: -3px;
    margin-right: 6px;
}

@keyframes spin-b-rb46cbu0ml {
    to {
        transform: rotate(360deg);
    }
}

.vitals-drawer-overlay[b-rb46cbu0ml] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 100;
    display: flex;
    justify-content: flex-end;
}

.vitals-drawer[b-rb46cbu0ml] {
    background: #fff;
    width: 100%;
    max-width: 460px;
    height: 100vh;
    box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-rb46cbu0ml .22s ease-out;
}

@keyframes slideInRight-b-rb46cbu0ml {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.vitals-drawer-header[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vitals-drawer-body[b-rb46cbu0ml] {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}

.vitals-drawer-footer[b-rb46cbu0ml] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .vitals-drawer[b-rb46cbu0ml] {
        max-width: 100%;
    }
}

.rx-tpl-toolbar-actions[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   PDF-STYLE CONSULTATION PREVIEW TEMPLATE (rx-tpl-*)
   Full-width on screen, single contained page on print.
   ========================================================= */

.rx-tpl-workspace[b-rb46cbu0ml] {
    background: #eef1f6;
}

.rx-tpl-toolbar[b-rb46cbu0ml] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.rx-tpl-toolbar-title[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
}

    .rx-tpl-toolbar-title i[b-rb46cbu0ml] {
        font-size: 20px;
        color: #4338ca;
    }

.rx-tpl-readonly-badge[b-rb46cbu0ml] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 4px;
}

    .rx-tpl-readonly-badge i[b-rb46cbu0ml] {
        font-size: 13px;
    }

.rx-tpl-print-btn[b-rb46cbu0ml] {
    box-shadow: 0 3px 10px rgba(22, 163, 74, .25);
}

/* ---- shell: full width on screen ---- */
.rx-tpl-shell[b-rb46cbu0ml] {
    width: 100%;
    padding: 0px 20px 48px;
}

.rx-tpl-page[b-rb46cbu0ml] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
    padding: 20px 44px 28px;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.5;
}

/* ---- header ---- */
.rx-tpl-header[b-rb46cbu0ml] {
    display: grid;
    grid-template-columns: 1fr 68px 1fr;
    align-items: flex-start;
    gap: 16px;
}

.rx-tpl-doctor-name[b-rb46cbu0ml] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #7c3aed;
}

.rx-tpl-hospital-name[b-rb46cbu0ml] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
    text-align: right;
}

.rx-tpl-line[b-rb46cbu0ml] {
    margin: 1px 0;
    font-size: 12px;
    color: #475569;
}

    .rx-tpl-line i[b-rb46cbu0ml] {
        font-size: 12px;
        color: #94a3b8;
        margin-right: 2px;
    }

.rx-tpl-reg-line[b-rb46cbu0ml] {
    color: #64748b;
}

.rx-tpl-address[b-rb46cbu0ml] {
    text-align: right;
    max-width: 300px;
    margin-left: auto;
}

.rx-tpl-logo[b-rb46cbu0ml] {
    height: 58px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    overflow: hidden;
    justify-self: center;
    box-shadow: 0 4px 14px rgba(67, 56, 202, .28);
    flex-shrink: 0;
}

    .rx-tpl-logo img[b-rb46cbu0ml] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rx-tpl-hospital-block[b-rb46cbu0ml] {
    text-align: right;
}

.rx-tpl-rule[b-rb46cbu0ml] {
    height: 2px;
    background: #0f172a;
    margin: 14px 0 16px;
}

/* ---- patient info strip: icon chips instead of a plain grid ---- */
.rx-tpl-info-strip[b-rb46cbu0ml] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
}

.rx-tpl-info-chip[b-rb46cbu0ml] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 190px;
    min-width: 170px;
    padding: 4px 10px 4px 0;
}

    .rx-tpl-info-chip i[b-rb46cbu0ml] {
        font-size: 17px;
        color: #4338ca;
        margin-top: 1px;
        flex-shrink: 0;
    }

.rx-tpl-info-label[b-rb46cbu0ml] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
}

.rx-tpl-info-value[b-rb46cbu0ml] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
}

/* ---- generic sections with a left accent bar ---- */
.rx-tpl-section[b-rb46cbu0ml] {
    margin-bottom: 14px;
    padding-left: 13px;
    border-left: 3px solid #e2e8f0;
}

.rx-tpl-section-nobreak[b-rb46cbu0ml] {
    break-inside: avoid;
    page-break-inside: avoid;
}

.rx-tpl-inline-block[b-rb46cbu0ml] {
    margin: 0 0 5px;
    font-size: 13px;
}

.rx-tpl-block-title[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #4338ca;
}

    .rx-tpl-block-title i[b-rb46cbu0ml] {
        font-size: 15px;
    }

/* ---- two-column layout for advice + investigation ---- */
.rx-tpl-two-col[b-rb46cbu0ml] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* ---- medicine table ---- */
.rx-tpl-med-table[b-rb46cbu0ml] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .rx-tpl-med-table th[b-rb46cbu0ml],
    .rx-tpl-med-table td[b-rb46cbu0ml] {
        border: 1px solid #e2e8f0;
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
    }

    .rx-tpl-med-table th[b-rb46cbu0ml] {
        background: #f8fafc;
        font-weight: 700;
        color: #334155;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .rx-tpl-med-table tbody tr[b-rb46cbu0ml] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

        .rx-tpl-med-table tbody tr:nth-child(even) td[b-rb46cbu0ml] {
            background: #fafbfd;
        }

    .rx-tpl-med-table .col-sno[b-rb46cbu0ml] {
        width: 34px;
        text-align: center;
        color: #94a3b8;
        font-weight: 700;
    }

.rx-tpl-med-name[b-rb46cbu0ml] {
    font-weight: 700;
    color: #1e293b;
}

/* ---- numbered lists (advices / investigation) ---- */
.rx-tpl-numbered-list[b-rb46cbu0ml] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
}

.rx-tpl-notes[b-rb46cbu0ml] {
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 0.5rem;
    font-size: 13px;
    white-space: pre-wrap;
    color: #334155;
}

/* ---- footer: qr + signature ---- */
.rx-tpl-footer-row[b-rb46cbu0ml] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed #cbd5e1;
    break-inside: avoid;
    page-break-inside: avoid;
}

.rx-tpl-qr-block[b-rb46cbu0ml] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rx-tpl-qr-img[b-rb46cbu0ml] {
    width: 60px;
    height: 60px;
}

.rx-tpl-qr-caption[b-rb46cbu0ml] {
    margin: 0;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.4;
}

.rx-tpl-signature-block[b-rb46cbu0ml] {
    text-align: right;
    font-size: 12px;
}

.rx-tpl-signature-line[b-rb46cbu0ml] {
    margin: 0 0 2px;
    color: #cbd5e1;
    font-size: 13px;
}

.rx-tpl-signature-name[b-rb46cbu0ml] {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}

/* ---- bottom contact bar ---- */
.rx-tpl-bottom-bar[b-rb46cbu0ml] {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 10.5px;
    color: #94a3b8;
}

/* =========================================================
   PRINT — single contained page, no leftover blank space
   ========================================================= */
@page {
    size: A4;
    margin: 10mm 12mm;
}

@media print {
    /* Neutralise the full-viewport wrapper heights so the
       browser doesn't reserve a blank extra page around the
       absolutely-positioned #printable-prescription element. */
    html[b-rb46cbu0ml], body[b-rb46cbu0ml] {
        height: auto !important;
        margin: 0 !important;
        background: #fff !important;
    }

    .consult-proto-workspace[b-rb46cbu0ml],
    .rx-tpl-workspace[b-rb46cbu0ml] {
        min-height: 0 !important;
        height: auto !important;
        background: #fff !important;
    }

    .rx-tpl-toolbar[b-rb46cbu0ml] {
        display: none !important;
    }

    .rx-tpl-shell[b-rb46cbu0ml] {
        padding: 0 !important;
        width: auto !important;
    }

    /* This selector (class + id) outranks the site-wide
       #printable-prescription rule so it wins without touching
       that shared global rule used elsewhere. */
    .rx-tpl-page#printable-prescription[b-rb46cbu0ml] {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 11.5px !important;
    }

    .rx-tpl-info-strip[b-rb46cbu0ml],
    .rx-tpl-section[b-rb46cbu0ml],
    .rx-tpl-med-table[b-rb46cbu0ml],
    .rx-tpl-two-col[b-rb46cbu0ml],
    .rx-tpl-footer-row[b-rb46cbu0ml] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 900px) {
    .rx-tpl-shell[b-rb46cbu0ml] {
        padding: 20px 16px 36px;
    }

    .rx-tpl-corner[b-rb46cbu0ml] {
        display: none;
    }

    .rx-tpl-header[b-rb46cbu0ml] {
        padding-left: 0;
    }

    .rx-tpl-page[b-rb46cbu0ml] {
        padding: 24px 20px 22px;
    }

    .rx-tpl-header[b-rb46cbu0ml] {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .rx-tpl-hospital-block[b-rb46cbu0ml],
    .rx-tpl-hospital-name[b-rb46cbu0ml],
    .rx-tpl-address[b-rb46cbu0ml] {
        text-align: left;
        margin-left: 0;
    }

    .rx-tpl-logo[b-rb46cbu0ml] {
        justify-self: start;
    }

    .rx-tpl-two-col[b-rb46cbu0ml] {
        grid-template-columns: 1fr;
    }

    .rx-tpl-footer-row[b-rb46cbu0ml] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .rx-tpl-signature-block[b-rb46cbu0ml] {
        text-align: left;
    }
}


/* ---- corner accent + rounded card, matching the editable canvas header ---- */
.rx-tpl-page[b-rb46cbu0ml] {
    position: relative;
    overflow: hidden;
    border-radius: 0.7rem; /* was square-cornered before */
}

.rx-tpl-corner[b-rb46cbu0ml] {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #0f766e, #14b8a6 60%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 0;
}

.rx-tpl-header[b-rb46cbu0ml] {
    position: relative;
    z-index: 1;
    padding-left: 74px; /* clears the corner triangle, same idea as rx-canvas-header's 64px */
}


/* /Component/Appointment/PrescriptionPreview.razor.rz.scp.css */
.prescription-sheet[b-4u80c8puaz] {
    background: white;
    padding: 30px;
    width: 210mm;
    min-height: 297mm;
    margin: auto;
    color: #000;
    font-size: 14px;
}

.rx-header[b-4u80c8puaz] {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.rx-logo img[b-4u80c8puaz] {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.rx-hospital-info[b-4u80c8puaz] {
    flex: 1;
}

    .rx-hospital-info h1[b-4u80c8puaz] {
        margin: 0;
        font-size: 34px;
    }

    .rx-hospital-info p[b-4u80c8puaz] {
        margin: 3px 0;
    }

.patient-section[b-4u80c8puaz],
.doctor-section[b-4u80c8puaz] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 15px 0;
}

.rx-block[b-4u80c8puaz] {
    margin-top: 20px;
}

    .rx-block h4[b-4u80c8puaz] {
        margin-bottom: 8px;
    }

.rx-table[b-4u80c8puaz] {
    width: 100%;
    border-collapse: collapse;
}

    .rx-table th[b-4u80c8puaz],
    .rx-table td[b-4u80c8puaz] {
        border: 1px solid #ddd;
        padding: 8px;
    }

.signature-section[b-4u80c8puaz] {
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;
}

.signature-box[b-4u80c8puaz] {
    text-align: center;
    min-width: 200px;
}
/* /Component/Appointment/PrescriptionPreviewDrawer.razor.rz.scp.css */
/* ============================================
   OVERLAY
============================================ */

.prescription-overlay[b-re8e1it77i] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 99999;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    animation: fadeIn-b-re8e1it77i .2s ease;
}

/* ============================================
   DRAWER
============================================ */

.prescription-drawer[b-re8e1it77i] {
    width: 1100px;
    max-width: 95vw;
    height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    box-shadow: -15px 0 40px rgba(0,0,0,.15);
    animation: slideInRight-b-re8e1it77i .25s ease;
}

/* ============================================
   HEADER
============================================ */

.prescription-header[b-re8e1it77i] {
    height: 72px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    flex-shrink: 0;
}

    .prescription-header h2[b-re8e1it77i] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
    }

.prescription-close-btn[b-re8e1it77i] {
    border: none;
    background: #f1f5f9;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}

/* ============================================
   BODY
============================================ */

.prescription-body[b-re8e1it77i] {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    background: #e5e7eb;
}

/* ============================================
   PAPER
============================================ */

.prescription-paper[b-re8e1it77i] {
    width: 210mm;
    min-height: 297mm;
    background: white;
    margin: auto;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* ============================================
   FOOTER
============================================ */

.prescription-footer[b-re8e1it77i] {
    height: 80px;
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    flex-shrink: 0;
}

.print-btn[b-re8e1it77i] {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.cancel-btn[b-re8e1it77i] {
    background: white;
    border: 1px solid #dbe2ea;
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
}

/* ============================================
   ANIMATION
============================================ */

@keyframes slideInRight-b-re8e1it77i {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-re8e1it77i {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Component/Appointment/VitalsDrawer.razor.rz.scp.css */
/* ==== VitalsDrawer — scoped styles (only apply to this component) ==== */

.vd-overlay[b-jp1zm0zsd2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    z-index: 200;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    transition: background-color .22s ease;
}

    .vd-overlay.vd-open[b-jp1zm0zsd2] {
        background: rgba(15, 23, 42, .45);
        pointer-events: auto;
    }

.vd-drawer[b-jp1zm0zsd2] {
    background: #fff;
    width: 100%;
    max-width: 480px;
    margin-top: 68px !important;
    height: 90vh;
    box-shadow: -10px 0 30px rgba(15, 23, 42, .2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease-out;
}

.vd-overlay.vd-open .vd-drawer[b-jp1zm0zsd2] {
    transform: translateX(0);
}

.vd-header[b-jp1zm0zsd2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vd-header-text[b-jp1zm0zsd2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vd-icon-badge[b-jp1zm0zsd2] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #ffe4e6;
    color: #be123c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vd-title[b-jp1zm0zsd2] {
    margin: 0;
    font-size: 16.5px;
    font-weight: 800;
    color: #0f172a;
}

.vd-subtitle[b-jp1zm0zsd2] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #64748b;
}

.vd-close-btn[b-jp1zm0zsd2] {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}

    .vd-close-btn:hover:not(:disabled)[b-jp1zm0zsd2] {
        background: #e2e8f0;
        color: #1e293b;
    }

    .vd-close-btn:disabled[b-jp1zm0zsd2] {
        opacity: .5;
        cursor: not-allowed;
    }

.vd-body[b-jp1zm0zsd2] {
    padding: 18px 20px 22px;
    overflow-y: auto;
    flex: 1;
}

.vd-hint[b-jp1zm0zsd2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 0.6rem;
    margin-bottom: 18px;
}

    .vd-hint i[b-jp1zm0zsd2] {
        font-size: 16px;
        margin-top: 1px;
        flex-shrink: 0;
    }

.vd-section[b-jp1zm0zsd2] {
    margin-bottom: 22px;
}

    .vd-section:last-child[b-jp1zm0zsd2] {
        margin-bottom: 0;
    }

.vd-section-title[b-jp1zm0zsd2] {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}

.vd-field-grid[b-jp1zm0zsd2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vd-field label[b-jp1zm0zsd2] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}

    .vd-field label i[b-jp1zm0zsd2] {
        font-size: 14px;
        color: #94a3b8;
    }

.vd-input[b-jp1zm0zsd2] {
    width: 100%;
    font-size: 13.5px;
    padding: 9px 11px;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    outline: none;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .vd-input:focus[b-jp1zm0zsd2] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

    .vd-input:disabled[b-jp1zm0zsd2] {
        background: #f8fafc;
        cursor: not-allowed;
    }

.vd-input-readonly[b-jp1zm0zsd2] {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
    font-weight: 700;
}

.vd-bmi-readout[b-jp1zm0zsd2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .vd-bmi-readout .vd-input[b-jp1zm0zsd2] {
        flex: 1;
    }

.vd-bmi-chip[b-jp1zm0zsd2] {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.vd-bmi-chip-under[b-jp1zm0zsd2] {
    background: #eff6ff;
    color: #1d4ed8;
}

.vd-bmi-chip-normal[b-jp1zm0zsd2] {
    background: #f0fdf4;
    color: #15803d;
}

.vd-bmi-chip-over[b-jp1zm0zsd2] {
    background: #fffbeb;
    color: #b45309;
}

.vd-bmi-chip-obese[b-jp1zm0zsd2] {
    background: #fef2f2;
    color: #b91c1c;
}

.vd-footer[b-jp1zm0zsd2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vd-btn[b-jp1zm0zsd2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

    .vd-btn:disabled[b-jp1zm0zsd2] {
        opacity: .6;
        cursor: not-allowed;
    }

.vd-btn-ghost[b-jp1zm0zsd2] {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}

    .vd-btn-ghost:hover:not(:disabled)[b-jp1zm0zsd2] {
        background: #f8fafc;
        border-color: #94a3b8;
    }

.vd-btn-primary[b-jp1zm0zsd2] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

    .vd-btn-primary:hover:not(:disabled)[b-jp1zm0zsd2] {
        background: #15803d;
        border-color: #15803d;
        transform: translateY(-1px);
    }

.vd-spinner[b-jp1zm0zsd2] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vd-spin-b-jp1zm0zsd2 .7s linear infinite;
}

@keyframes vd-spin-b-jp1zm0zsd2 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    .vd-drawer[b-jp1zm0zsd2] {
        max-width: 100%;
    }

    .vd-field-grid[b-jp1zm0zsd2] {
        grid-template-columns: 1fr;
    }
}
/* /Component/Billing/BillEditor.razor.rz.scp.css */
/* =========================================================
   BILLING — CREATE BILL
   ========================================================= */

.create-bill-wrapper[b-qox69klsao] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 9px;
    background: var(--page-bg);
    padding: 16px 24px 20px;
    height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    min-height: 560px;
    display: flex;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

    .create-bill-wrapper h2[b-qox69klsao],
    .create-bill-wrapper h6[b-qox69klsao] {
        font-family: 'Sora', 'Inter', sans-serif;
    }

.create-bill-page[b-qox69klsao] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 39, .04), 0 10px 26px rgba(16, 24, 39, .06);
}

/* =========================================================
   TOP BAR
   ========================================================= */

.create-bill-topbar[b-qox69klsao] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

    .create-bill-topbar h2[b-qox69klsao] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.back-circle[b-qox69klsao] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .back-circle:hover[b-qox69klsao] {
        border-color: var(--primary);
        color: var(--primary);
    }

.topbar-actions[b-qox69klsao] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
/* =========================================================
   PATIENT INFO CARD
   ========================================================= */

.patient-info-card[b-qox69klsao] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    animation: patientInfoFadeIn-b-qox69klsao 0.25s ease-out;
    margin-bottom: 25px;
}

@keyframes patientInfoFadeIn-b-qox69klsao {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* =========================================================
   GRID — Proportional widths that fill the whole row
   ========================================================= */

.patient-info-grid[b-qox69klsao] {
    display: grid;
    /* Name(1.6) | UHID(1.6) | Mobile(1.2) | Age(0.7) | Gender(0.9) */
    grid-template-columns: 1.6fr 1.6fr 1.2fr 0.7fr 0.9fr;
    gap: 12px 20px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.patient-info-item[b-qox69klsao] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    /* UHID — allow full display, wrap if needed */
    .patient-info-item.uhid-item .info-value[b-qox69klsao] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all;
        line-height: 1.3;
    }

.info-label[b-qox69klsao] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.info-value[b-qox69klsao] {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .patient-info-grid[b-qox69klsao] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .patient-info-grid[b-qox69klsao] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .patient-info-grid[b-qox69klsao] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .patient-info-card[b-qox69klsao] {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }

    .patient-info-avatar[b-qox69klsao] {
        width: 44px;
        height: 44px;
    }

        .patient-info-avatar .mdi[b-qox69klsao] {
            font-size: 30px;
        }

    .patient-info-grid[b-qox69klsao] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 16px;
    }
}

@media (max-width: 480px) {
    .patient-info-grid[b-qox69klsao] {
        grid-template-columns: 1fr;
    }
}

.btn-outline-soft[b-qox69klsao] {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .15s ease, color .15s ease;
}

    .btn-outline-soft:hover[b-qox69klsao] {
        border-color: var(--primary);
        color: var(--primary);
    }

.btn-primary-strong[b-qox69klsao] {
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(91, 79, 229, .25);
    transition: transform .15s ease;
}

    .btn-primary-strong:hover[b-qox69klsao] {
        transform: translateY(-1px);
        background: var(--primary-dark);
        color: white;
    }

/* =========================================================
   BODY LAYOUT
   ========================================================= */

.create-bill-body[b-qox69klsao] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 340px;
}

.create-bill-left[b-qox69klsao] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 22px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.create-bill-right[b-qox69klsao] {
    min-height: 0;
    padding: 18px 22px;
    background: var(--surface-muted);
    overflow-y: auto;
}

    .create-bill-left[b-qox69klsao]::-webkit-scrollbar,
    .create-bill-right[b-qox69klsao]::-webkit-scrollbar {
        width: 6px;
    }

    .create-bill-left[b-qox69klsao]::-webkit-scrollbar-thumb,
    .create-bill-right[b-qox69klsao]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

/* =========================================================
   FIELD GROUPS
   ========================================================= */

.field-group label[b-qox69klsao] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 6px;
    display: block;
}

    .field-group label .req[b-qox69klsao] {
        color: var(--rose-600);
    }

.top-fields-grid[b-qox69klsao] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.plain-input[b-qox69klsao] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    background: var(--surface-muted);
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease;
}

    .plain-input:focus[b-qox69klsao] {
        border-color: var(--primary);
        background: var(--surface);
    }

    .plain-input:disabled[b-qox69klsao] {
        color: var(--ink-soft);
        cursor: not-allowed;
    }

.error-msg[b-qox69klsao] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--rose-600);
    font-weight: 500;
}

/* =========================================================
   SERVICE SEARCH DROPDOWN
   (moved out of the page's inline <style> block — same
   selectors, same markup, purely relocated + polished)
   ========================================================= */

.services-search-suggestions[b-qox69klsao] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-radius: 12px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: 0 16px 34px rgba(16, 24, 39, .12);
    list-style: none;
    padding: 6px;
}

.service-item[b-qox69klsao] {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .service-item:hover[b-qox69klsao] {
        background-color: var(--surface-muted);
    }

.services-suggestion-content[b-qox69klsao] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.services-name[b-qox69klsao] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
}

.services-suggestion-content .text-muted[b-qox69klsao] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

/* =========================================================
   BILLING ITEMS SECTION
   ========================================================= */

.item-section-head[b-qox69klsao] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .item-section-head h6[b-qox69klsao] {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700;
    }

.item-links[b-qox69klsao] {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

    .item-links a[b-qox69klsao] {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .item-links a:hover[b-qox69klsao] {
            color: var(--primary-dark);
        }

/* Scrollable table zone — keeps the page height bounded even
   with a long list of billing items; the header stays put. */
.item-table-scroll[b-qox69klsao] {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

    .item-table-scroll[b-qox69klsao]::-webkit-scrollbar {
        width: 6px;
    }

    .item-table-scroll[b-qox69klsao]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

.item-table[b-qox69klsao] {
    width: 100%;
    border-collapse: collapse;
}

    .item-table thead th[b-qox69klsao] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--ink-soft);
        font-weight: 700;
        background: var(--surface);
        padding: 11px 10px;
        border-bottom: 1px solid var(--border);
    }

    .item-table td[b-qox69klsao] {
        padding: 8px 10px;
        border-bottom: 1px solid #F0F1F7;
    }

    .item-table tbody tr:hover[b-qox69klsao] {
        background: var(--surface-muted);
    }

    .item-table input[b-qox69klsao],
    .item-table select[b-qox69klsao] {
        border: 1px solid var(--border);
        border-radius: 8px;
        height: 36px;
        padding: 0 10px;
        background: var(--surface-muted);
        font-size: 13px;
        width: 100%;
        color: var(--ink);
        outline: none;
        transition: border-color .15s ease;
    }

        .item-table input:focus[b-qox69klsao],
        .item-table select:focus[b-qox69klsao] {
            border-color: var(--primary);
            background: var(--surface);
        }

        .item-table input:disabled[b-qox69klsao] {
            color: var(--ink-soft);
            cursor: not-allowed;
        }

    .item-table .amt-cell[b-qox69klsao] {
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
    }

.item-row-delete[b-qox69klsao] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .item-row-delete:hover[b-qox69klsao] {
        border-color: var(--rose-600);
        color: var(--rose-600);
        background: var(--rose-100);
    }

.item-empty-hint[b-qox69klsao] {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease;
}

    .item-empty-hint:hover[b-qox69klsao] {
        background: var(--primary-soft);
    }

/* =========================================================
   PAYMENT / RIGHT PANEL
   ========================================================= */

.paid-amount-group[b-qox69klsao] {
    display: flex;
}

    .paid-amount-group select[b-qox69klsao] {
        height: 42px;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 0 10px;
        font-size: 13.5px;
        flex: 0 0 108px;
        border-radius: 10px 0 0 10px;
        border-right: none;
        color: var(--ink);
        outline: none;
    }

    .paid-amount-group input[b-qox69klsao] {
        height: 42px;
        border: 1px solid var(--border);
        border-left: none;
        border-radius: 0 10px 10px 0;
        padding: 0 12px;
        font-size: 13.5px;
        flex: 1;
        background: var(--surface);
        color: var(--ink);
        outline: none;
        min-width: 0;
    }

    .paid-amount-group:focus-within[b-qox69klsao] {
        box-shadow: 0 0 0 2px var(--primary-soft);
        border-radius: 10px;
    }

.add-payment-mode[b-qox69klsao],
.add-notes-link[b-qox69klsao] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    margin-top: 10px;
    text-decoration: none;
}

    .add-payment-mode:hover[b-qox69klsao],
    .add-notes-link:hover[b-qox69klsao] {
        color: var(--primary-dark);
    }

.add-notes-link[b-qox69klsao] {
    margin-top: 20px;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.summary-card-box[b-qox69klsao] {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px 4px;
}

.summary-line[b-qox69klsao] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 6px 0;
}

    .summary-line.strong[b-qox69klsao] {
        font-weight: 800;
        color: var(--ink);
        font-size: 15px;
    }

/* Signature "perforated receipt" divider between line items and the payable total */
.summary-divider-scallop[b-qox69klsao] {
    height: 14px;
    margin: 14px -18px;
    background: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--surface) 7.5px) repeat-x;
    background-size: 14px 14px;
    border-top: 1px dashed var(--border);
}

/* Highlighted panel for the numbers that matter most at a glance */
.summary-total-panel[b-qox69klsao] {
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: 14px 14px 12px;
    margin: 0 -4px 12px;
}

    .summary-total-panel .summary-line[b-qox69klsao] {
        color: var(--primary-dark);
    }

        .summary-total-panel .summary-line.strong[b-qox69klsao] {
            color: var(--ink);
        }

.total-paid-line[b-qox69klsao] {
    color: var(--emerald-600);
    font-weight: 800;
    font-size: 16px;
    font-family: 'Sora', sans-serif;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(61, 51, 176, .2);
}

@media (max-width: 1180px) {
    .create-bill-wrapper[b-qox69klsao] {
        height: auto;
        min-height: 0;
    }

    .create-bill-body[b-qox69klsao] {
        grid-template-columns: 1fr;
    }

    .create-bill-left[b-qox69klsao],
    .create-bill-right[b-qox69klsao] {
        overflow-y: visible;
    }

    .create-bill-right[b-qox69klsao] {
        border-top: 1px solid var(--border);
    }

    .item-table-scroll[b-qox69klsao] {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .create-bill-wrapper[b-qox69klsao] {
        padding: 12px 14px 16px;
    }

    .top-fields-grid[b-qox69klsao] {
        grid-template-columns: 1fr;
    }

    .topbar-actions[b-qox69klsao] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Component/Billing/BillingItemRow.razor.rz.scp.css */
/* CSS for BillingItemRow component */
/* =========================================================
   BILLING ITEM ROW
   Scoped to BillingItemRow.razor
   Styles one <tr> inside <BillingItemsGrid>'s table.

   NOTE: If these selectors ALSO exist in BillingItemsGrid.razor.css,
   remove them from there to avoid duplicate-rule cascade confusion.
   ========================================================= */

/* =========================================================
   1. CELLS
   ========================================================= */

.item-table td[b-m19n2erpl8] {
    padding: 8px 6px;
    border-bottom: 1px solid #F0F1F7;
    vertical-align: middle;
}

    /* Service cell needs slightly more horizontal breathing room */
    .item-table td.service-cell[b-m19n2erpl8] {
        padding: 8px 10px;
        position: relative; /* anchors the suggestion dropdown */
    }

.item-table tbody tr:hover[b-m19n2erpl8] {
    background: var(--surface-muted);
}

/* =========================================================
   2. INPUTS & SELECTS
   min-width:0 + box-sizing:border-box are essential so inputs
   shrink inside a table-layout:fixed cell instead of pushing
   the column wider than its declared width.
   ========================================================= */

.item-table input[b-m19n2erpl8],
.item-table select[b-m19n2erpl8] {
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 36px;
    padding: 0 10px;
    background: var(--surface-muted);
    font-size: 13px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}

    .item-table input:focus[b-m19n2erpl8],
    .item-table select:focus[b-m19n2erpl8] {
        border-color: var(--primary);
        background: var(--surface);
    }

    /* Disabled price field (tariff-driven, read-only) */
    .item-table input:disabled[b-m19n2erpl8] {
        color: var(--ink-soft);
        background: var(--surface-muted);
        cursor: not-allowed;
    }

    /* Number input spinners — keep them subtle */
    .item-table input[type="number"][b-m19n2erpl8]::-webkit-outer-spin-button,
    .item-table input[type="number"][b-m19n2erpl8]::-webkit-inner-spin-button {
        opacity: 0.5;
    }

/* =========================================================
   3. COMPUTED TOTAL CELL
   ========================================================= */

.item-table .amt-cell[b-m19n2erpl8] {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    text-align: right;
    padding-right: 12px;
}

/* =========================================================
   4. DELETE BUTTON (trash icon)
   ========================================================= */

.item-row-delete[b-m19n2erpl8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .item-row-delete:hover[b-m19n2erpl8] {
        border-color: var(--rose-600);
        color: var(--rose-600);
        background: var(--rose-100);
    }

    .item-row-delete:focus-visible[b-m19n2erpl8] {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

/* =========================================================
   5. SERVICE SEARCH DROPDOWN
   Floats below the search input inside the service cell.
   ========================================================= */

.search-input-wrapper[b-m19n2erpl8] {
    position: relative;
    width: 100%;
}

.services-search-suggestions[b-m19n2erpl8] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-radius: 12px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: 0 16px 34px rgba(16, 24, 39, .12);
    list-style: none;
    padding: 6px;
}

    .services-search-suggestions[b-m19n2erpl8]::-webkit-scrollbar {
        width: 6px;
    }

    .services-search-suggestions[b-m19n2erpl8]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

.service-item[b-m19n2erpl8] {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .service-item:hover[b-m19n2erpl8] {
        background-color: var(--surface-muted);
    }

.services-suggestion-content[b-m19n2erpl8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.services-name[b-m19n2erpl8] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
}

.services-suggestion-content .text-muted[b-m19n2erpl8] {
    font-size: 11.5px;
    color: var(--ink-soft);
}
/* /Component/Billing/BillingItemsGrid.razor.rz.scp.css */
/* CSS for BillingItemsGrid component */
/* =========================================================
   BILLING ITEMS GRID
   Scoped to BillingItemsGrid.razor
   Includes table, thead, rows, cells, inputs, delete btn,
   service search dropdown, and empty-row hint.
   ========================================================= */

/* =========================================================
   ITEM SECTION HEADER  (Packages / Save / Clear)
   ========================================================= */

.item-section-head[b-wol1clovhs] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .item-section-head h6[b-wol1clovhs] {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700;
    }

.item-links[b-wol1clovhs] {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

    .item-links a[b-wol1clovhs] {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .item-links a:hover[b-wol1clovhs] {
            color: var(--primary-dark);
        }

/* =========================================================
   SCROLLABLE TABLE ZONE
   Keeps the page height bounded; header stays put.
   ========================================================= */

.item-table-scroll[b-wol1clovhs] {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 46vh;
    overflow-y: auto;
    overflow-x: hidden; /* prevents accidental horizontal scrollbar */
    min-width: 0; /* allow shrinking inside flex parents */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

    .item-table-scroll[b-wol1clovhs]::-webkit-scrollbar {
        width: 6px;
    }

    .item-table-scroll[b-wol1clovhs]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

/* =========================================================
   TABLE
   table-layout: fixed ensures column widths respect <th> %
   and stops long inputs from stretching the table.
   ========================================================= */

.item-table[b-wol1clovhs] {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .item-table thead th[b-wol1clovhs] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--ink-soft);
        font-weight: 700;
        background: var(--surface);
        padding: 11px 8px;
        border-bottom: 1px solid var(--border);
    }

    .item-table td[b-wol1clovhs] {
        padding: 8px 6px;
        border-bottom: 1px solid #F0F1F7;
    }

        /* service cell gets a bit more breathing room */
        .item-table td.service-cell[b-wol1clovhs] {
            padding: 8px 10px;
        }

    .item-table tbody tr:hover[b-wol1clovhs] {
        background: var(--surface-muted);
    }

    /* =========================================================
   CELL INPUTS
   min-width:0 + box-sizing:border-box are required so inputs
   shrink inside a table-layout:fixed cell.
   ========================================================= */

    .item-table input[b-wol1clovhs],
    .item-table select[b-wol1clovhs] {
        border: 1px solid var(--border);
        border-radius: 8px;
        height: 36px;
        padding: 0 10px;
        background: var(--surface-muted);
        font-size: 13px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        color: var(--ink);
        outline: none;
        transition: border-color .15s ease;
    }

        .item-table input:focus[b-wol1clovhs],
        .item-table select:focus[b-wol1clovhs] {
            border-color: var(--primary);
            background: var(--surface);
        }

        .item-table input:disabled[b-wol1clovhs] {
            color: var(--ink-soft);
            cursor: not-allowed;
        }

    .item-table .amt-cell[b-wol1clovhs] {
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
    }

/* =========================================================
   DELETE BUTTON
   ========================================================= */

.item-row-delete[b-wol1clovhs] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .item-row-delete:hover[b-wol1clovhs] {
        border-color: var(--rose-600);
        color: var(--rose-600);
        background: var(--rose-100);
    }

/* =========================================================
   EMPTY-ROW HINT  ("+ add new service")
   ========================================================= */

.item-empty-hint[b-wol1clovhs] {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease;
}

    .item-empty-hint:hover[b-wol1clovhs] {
        background: var(--primary-soft);
    }

/* =========================================================
   SERVICE SEARCH DROPDOWN
   ========================================================= */

.services-search-suggestions[b-wol1clovhs] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-radius: 12px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: 0 16px 34px rgba(16, 24, 39, .12);
    list-style: none;
    padding: 6px;
}

.service-item[b-wol1clovhs] {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .service-item:hover[b-wol1clovhs] {
        background-color: var(--surface-muted);
    }

.services-suggestion-content[b-wol1clovhs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.services-name[b-wol1clovhs] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
}

.services-suggestion-content .text-muted[b-wol1clovhs] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .item-table-scroll[b-wol1clovhs] {
        max-height: none;
    }
}
/* /Component/Billing/BillingPaymentSummary.razor.rz.scp.css */
/* CSS for BillingPaymentSummary component */
/* =========================================================
   BILLING PAYMENT SUMMARY
   Scoped to BillingPaymentSummary.razor
   ========================================================= */

/* =========================================================
   PAYMENT METHOD + PAID AMOUNT
   ========================================================= */

.paid-amount-group[b-vc1x63qvzg] {
    display: flex;
}

    .paid-amount-group select[b-vc1x63qvzg] {
        height: 42px;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 0 10px;
        font-size: 13.5px;
        flex: 0 0 108px;
        border-radius: 10px 0 0 10px;
        border-right: none;
        color: var(--ink);
        outline: none;
    }

    .paid-amount-group input[b-vc1x63qvzg] {
        height: 42px;
        border: 1px solid var(--border);
        border-left: none;
        border-radius: 0 10px 10px 0;
        padding: 0 12px;
        font-size: 13.5px;
        flex: 1;
        background: var(--surface);
        color: var(--ink);
        outline: none;
        min-width: 0;
    }

    .paid-amount-group:focus-within[b-vc1x63qvzg] {
        box-shadow: 0 0 0 2px var(--primary-soft);
        border-radius: 10px;
    }

.add-payment-mode[b-vc1x63qvzg],
.add-notes-link[b-vc1x63qvzg] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    margin-top: 10px;
    text-decoration: none;
}

    .add-payment-mode:hover[b-vc1x63qvzg],
    .add-notes-link:hover[b-vc1x63qvzg] {
        color: var(--primary-dark);
    }

.add-notes-link[b-vc1x63qvzg] {
    margin-top: 20px;
}

/* =========================================================
   SUMMARY CARD
   ========================================================= */

.summary-card-box[b-vc1x63qvzg] {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px 4px;
}

.summary-line[b-vc1x63qvzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 6px 0;
}

    .summary-line.strong[b-vc1x63qvzg] {
        font-weight: 800;
        color: var(--ink);
        font-size: 15px;
    }

/* Signature perforated-receipt divider */
.summary-divider-scallop[b-vc1x63qvzg] {
    height: 14px;
    margin: 14px -18px;
    background: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--surface) 7.5px) repeat-x;
    background-size: 14px 14px;
    border-top: 1px dashed var(--border);
}

/* Highlighted totals panel */
.summary-total-panel[b-vc1x63qvzg] {
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: 14px 14px 12px;
    margin: 0 -4px 12px;
}

    .summary-total-panel .summary-line[b-vc1x63qvzg] {
        color: var(--primary-dark);
    }

        .summary-total-panel .summary-line.strong[b-vc1x63qvzg] {
            color: var(--ink);
        }

.total-paid-line[b-vc1x63qvzg] {
    color: var(--emerald-600);
    font-weight: 800;
    font-size: 16px;
    font-family: 'Sora', sans-serif;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(61, 51, 176, .2);
}

/* =========================================================
   PAYMENT BREAKDOWN / DUE ROW
   (only rendered when there are split payments or a balance)
   ========================================================= */

.payment-breakdown[b-vc1x63qvzg] {
    margin-top: 4px;
}

.border-bottom-dashed[b-vc1x63qvzg] {
    border-bottom: 1px dashed var(--border);
}

.summary-row[b-vc1x63qvzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink);
    padding: 6px 0;
}
/* /Component/Common/ConfirmDialog.razor.rz.scp.css */
/* =========================================================
   REUSABLE CONFIRM DIALOG
   ========================================================= */
.confirm-dialog-overlay[b-qzzjlihid1] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-dialog-box[b-qzzjlihid1] {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 0.9rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    padding: 28px 26px 22px;
    text-align: center;
    animation: confirmPop-b-qzzjlihid1 .18s ease-out;
}

@keyframes confirmPop-b-qzzjlihid1 {
    from {
        transform: scale(.95);
        opacity: 0;
    }

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

.confirm-dialog-icon[b-qzzjlihid1] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
}

.confirm-dialog-warning .confirm-dialog-icon[b-qzzjlihid1] {
    background: #fffbeb;
    color: #d97706;
}

.confirm-dialog-danger .confirm-dialog-icon[b-qzzjlihid1] {
    background: #fef2f2;
    color: #dc2626;
}

.confirm-dialog-info .confirm-dialog-icon[b-qzzjlihid1] {
    background: #eff6ff;
    color: #2563eb;
}

.confirm-dialog-title[b-qzzjlihid1] {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 800;
    color: #0f172a;
}

.confirm-dialog-message[b-qzzjlihid1] {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
}

.confirm-dialog-actions[b-qzzjlihid1] {
    display: flex;
    justify-content: center;
    gap: 10px;
}

    .confirm-dialog-actions .btn[b-qzzjlihid1] {
        min-width: 130px;
    }

.btn-warning-solid[b-qzzjlihid1] {
    background: #d97706;
    border: 1px solid #d97706;
    color: #fff;
}

    .btn-warning-solid:hover[b-qzzjlihid1] {
        background: #b45309;
        border-color: #b45309;
    }

.btn-danger[b-qzzjlihid1] {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
}

    .btn-danger:hover[b-qzzjlihid1] {
        background: #b91c1c;
        border-color: #b91c1c;
    }
/* /Component/Common/HMSTable.razor.rz.scp.css */

.table-card[b-cq9ii7dz05] {
    background: #ffffff;
    border: 1px solid var(--border-color, #d8dce1);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.patient-directory-card .table-card[b-cq9ii7dz05] {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* ---- Toolbar ---- */

.table-toolbar[b-cq9ii7dz05] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e5e9);
}

.table-title[b-cq9ii7dz05] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.table-toolbar-actions[b-cq9ii7dz05] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Table shell ---- */

.table-responsive-wrapper[b-cq9ii7dz05] {
    width: 100%;
    overflow-x: auto;
    /* real outer border around the grid itself, independent of .table-card */
    border: 1px solid var(--border-color, #d8dce1);
    border-radius: 6px;
}

.table-card .table-toolbar + .table-responsive-wrapper[b-cq9ii7dz05],
.table-card > .table-responsive-wrapper[b-cq9ii7dz05] {
    border: none;
    border-radius: 0;
}

.app-table[b-cq9ii7dz05] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    /* ---- Header: distinct weight, distinct surface, clear divider ---- */

    .app-table thead[b-cq9ii7dz05]  th {
        text-align: left;
        padding: 14px 20px;
        background: var(--table-header-bg, #f3f4f6);
        color: var(--table-header-text, #374151);
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-color, #d8dce1);
        white-space: nowrap;
    }

        .app-table thead[b-cq9ii7dz05]  th:not(:last-child) {
            border-right: 1px solid #e9eaec;
        }

    /* ---- Body cells ---- */

    .app-table tbody[b-cq9ii7dz05]  td {
        padding: 14px 20px;
        color: var(--text-primary, #1f2937);
        font-weight: 400;
        border-bottom: 1px solid var(--border-color, #edeef0);
        vertical-align: middle;
    }

    .app-table tbody tr:last-child[b-cq9ii7dz05]  td {
        border-bottom: none;
    }

    /* Optional zebra striping — kept very light so it doesn't compete
   with the header/border structure */
    .app-table.table-striped tbody tr:nth-child(even)[b-cq9ii7dz05] {
        background: #fafbfc;
    }

    /* ---- Hover: neutral "current row" cue, no blue fill ----
   A soft gray background plus a thin left accent bar. This is the
   only place a brand color appears, and it's muted, not a full fill. */

    .app-table.table-hover tbody tr[b-cq9ii7dz05] {
        border-left: 3px solid transparent;
        transition: background-color 0.12s ease, border-left-color 0.12s ease;
    }

        .app-table.table-hover tbody tr:hover[b-cq9ii7dz05] {
            background: #f8f9fa;
            border-left-color: var(--border-accent, #9aa5b1);
            cursor: pointer;
        }

            .app-table.table-hover tbody tr:hover[b-cq9ii7dz05]  td:first-child {
                padding-left: 17px; /* compensates for the 3px accent bar so text doesn't jump */
            }

/* ---- Loading / empty state (declared directly in DataTable.razor) ---- */

.table-state-cell[b-cq9ii7dz05] {
    text-align: center;
    padding: 48px 16px !important;
    background: #ffffff;
}

.table-loading-state[b-cq9ii7dz05],
.table-empty-state[b-cq9ii7dz05] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
}

    .table-empty-state i[b-cq9ii7dz05] {
        font-size: 1.6rem;
        color: #c9ccd1;
    }

.table-spinner[b-cq9ii7dz05] {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: table-spin-b-cq9ii7dz05 0.7s linear infinite;
}

@keyframes table-spin-b-cq9ii7dz05 {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Optional row-highlight helper (returned from RowClass) ---- */

.app-table tbody[b-cq9ii7dz05]  tr.row-critical td {
    background: rgba(220, 38, 38, 0.05);
}
/* /Component/Common/MasterDataHint.razor.rz.scp.css */
/* =========================================================
   MASTER DATA HINT  -  compact one-line info link
   "ⓘ Can't find the doctor?  ⊕ Create doctor ↗"
   Hard-coded fallbacks so it works inside drawers/modals too.
   ========================================================= */

.master-hint[b-cfblnx4uef] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-top: 8px;
    padding: 0 2px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
}

.master-hint-icon[b-cfblnx4uef] {
    font-size: 15px;
    color: var(--primary, #5B4FE5);
}

.master-hint-title[b-cfblnx4uef] {
    color: var(--ink-soft, #667085);
    font-weight: 500;
}

.master-hint-link[b-cfblnx4uef] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary, #5B4FE5);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

    .master-hint-link:hover[b-cfblnx4uef] {
        color: var(--primary-dark, #3D33B0);
        border-bottom-color: currentColor;
    }

    .master-hint-link:focus-visible[b-cfblnx4uef] {
        outline: 2px solid var(--primary, #5B4FE5);
        outline-offset: 2px;
        border-radius: 3px;
    }

    .master-hint-link .mdi[b-cfblnx4uef] {
        font-size: 15px;
    }

    .master-hint-link .master-hint-external[b-cfblnx4uef] {
        font-size: 12px;
        opacity: .7;
    }
/* /Component/Common/MultiSelectDropdown.razor.rz.scp.css */
/* =========================================================
   Self-contained scoped styles - this component carries its
   own look everywhere it's dropped in, independent of whatever
   stylesheet the host page happens to have loaded.
========================================================= */

.multi-select-dropdown[b-w1aldzfdig] {
    position: relative;
    width: 100%;
}

.multi-select-header[b-w1aldzfdig] {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .multi-select-header:hover[b-w1aldzfdig] {
        border-color: #94a3b8;
    }

.multi-select-dropdown:has(.multi-select-menu) .multi-select-header[b-w1aldzfdig] {
    border-color: var(--hms-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .10);
}
.placeholder[b-w1aldzfdig] {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentColor;
    opacity: .5;
    color: white;
    font-size: 13.5px;
}

.selected-tags[b-w1aldzfdig] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.multi-select-select-all[b-w1aldzfdig] {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
    font-weight: 500;
}
.selected-tag[b-w1aldzfdig] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 9px;
    border-radius: 6px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--hms-primary, #4f46e5);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.multi-select-placeholder[b-w1aldzfdig] {
    display: inline-block;
    color: #9ca3af;
    font-size: 13.5px;
    font-weight: 400;
}
.selected-tag-remove[b-w1aldzfdig] {
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    opacity: .75;
    transition: background .15s ease, opacity .15s ease;
}

    .selected-tag-remove:hover[b-w1aldzfdig] {
        background: rgba(79, 70, 229, 0.18);
        opacity: 1;
    }

.dropdown-arrow[b-w1aldzfdig] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 16px;
    transition: transform .15s ease;
}

    .dropdown-arrow.open[b-w1aldzfdig] {
        transform: rotate(180deg);
        color: var(--hms-primary, #4f46e5);
    }

/* Transparent full-screen click-catcher so the menu closes when the
   user clicks anywhere outside it - no JS interop needed. */
.multi-select-backdrop[b-w1aldzfdig] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.multi-select-menu[b-w1aldzfdig] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: 200px; 
    overflow-y: auto; 
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(32, 48, 64, .16);
}
.multi-select-empty[b-w1aldzfdig] {
    padding: 14px;
    color: #94a3b8;
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
}

.multi-select-option[b-w1aldzfdig] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background .15s ease;
}

    .multi-select-option:hover[b-w1aldzfdig] {
        background: #f8fafc;
    }

    .multi-select-option input[type="checkbox"][b-w1aldzfdig] {
        display: none;
    }

.custom-check[b-w1aldzfdig] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    transition: all .15s ease;
}

.multi-select-option input[type="checkbox"]:checked + .custom-check[b-w1aldzfdig] {
    border-color: var(--hms-primary, #4f46e5);
    background: var(--hms-primary, #4f46e5);
}

    .multi-select-option input[type="checkbox"]:checked + .custom-check[b-w1aldzfdig]::after {
        content: "\2713";
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

.option-text[b-w1aldzfdig] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Component/Common/NotFound.razor.rz.scp.css */
/* ============================================
   404 NOT FOUND PAGE — ENTERPRISE REDESIGN
============================================ */

.not-found-container[b-5ph2fzuow5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    background: radial-gradient(circle at 20% 0%, rgba(79, 70, 229, 0.06), transparent 40%), radial-gradient(circle at 80% 100%, rgba(14, 165, 233, 0.06), transparent 40%), #F7F8FC;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   CARD
============================================ */

.not-found-card[b-5ph2fzuow5] {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2.5rem 2.75rem 1.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 24px -8px rgba(15, 23, 42, 0.08), 0 32px 64px -16px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.6);
    animation: cardEnter-b-5ph2fzuow5 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

    .not-found-card[b-5ph2fzuow5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #4F46E5 0%, #0EA5E9 50%, #10B981 100%);
        opacity: 0.85;
    }

@keyframes cardEnter-b-5ph2fzuow5 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

/* ============================================
   HERO SECTION (Illustration + Content)
============================================ */

.not-found-visual[b-5ph2fzuow5] {
    position: absolute;
    top: 2.5rem;
    right: 2.75rem;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4F46E5;
}

.visual-glow[b-5ph2fzuow5] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.12), transparent 70%);
    animation: glowPulse-b-5ph2fzuow5 3s ease-in-out infinite;
}

@keyframes glowPulse-b-5ph2fzuow5 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

.visual-svg[b-5ph2fzuow5] {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    animation: rotateSlow-b-5ph2fzuow5 24s linear infinite;
}

@keyframes rotateSlow-b-5ph2fzuow5 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.visual-svg circle[b-5ph2fzuow5],
.visual-svg path[b-5ph2fzuow5],
.visual-svg line[b-5ph2fzuow5] {
    transform-origin: center;
}

.visual-badge[b-5ph2fzuow5] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    padding: 4px 10px;
    background: #4F46E5;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.badge-code[b-5ph2fzuow5] {
    font-family: 'Inter', monospace;
}

/* ============================================
   CONTENT
============================================ */

.not-found-content[b-5ph2fzuow5] {
    position: relative;
    z-index: 1;
    padding-right: 160px;
    min-height: 140px;
}

.status-pill[b-5ph2fzuow5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.pulse-dot[b-5ph2fzuow5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    animation: pulseDot-b-5ph2fzuow5 1.8s ease-in-out infinite;
}

@keyframes pulseDot-b-5ph2fzuow5 {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.08);
    }
}

.not-found-title[b-5ph2fzuow5] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0F172A;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.not-found-description[b-5ph2fzuow5] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748B;
    margin: 0 0 1.75rem;
    max-width: 42ch;
}

/* ============================================
   ACTION BUTTONS
============================================ */

.not-found-actions[b-5ph2fzuow5] {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.btn-primary[b-5ph2fzuow5],
.btn-secondary[b-5ph2fzuow5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.7rem 1.35rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

    .btn-primary .mdi[b-5ph2fzuow5],
    .btn-secondary .mdi[b-5ph2fzuow5] {
        font-size: 1.05rem;
    }

.btn-primary[b-5ph2fzuow5] {
    background: #4F46E5;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

    .btn-primary:hover[b-5ph2fzuow5] {
        background: #4338CA;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .btn-primary:active[b-5ph2fzuow5] {
        transform: translateY(0);
    }

.btn-secondary[b-5ph2fzuow5] {
    background: #FFFFFF;
    color: #334155;
    border-color: #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

    .btn-secondary:hover[b-5ph2fzuow5] {
        background: #F8FAFC;
        border-color: #CBD5E1;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    }

    .btn-secondary:active[b-5ph2fzuow5] {
        transform: translateY(0);
    }

    .btn-primary:focus-visible[b-5ph2fzuow5],
    .btn-secondary:focus-visible[b-5ph2fzuow5] {
        outline: 2px solid #4F46E5;
        outline-offset: 2px;
    }

/* ============================================
   QUICK LINKS
============================================ */

.not-found-links[b-5ph2fzuow5] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #F1F5F9;
}

.links-label[b-5ph2fzuow5] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.85rem;
}

.links-grid[b-5ph2fzuow5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.link-item[b-5ph2fzuow5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    padding: 0.75rem 0.4rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    text-decoration: none;
    background: #F8FAFC;
    border: 1px solid transparent;
}

    .link-item .mdi[b-5ph2fzuow5] {
        font-size: 1.15rem;
        color: #64748B;
        transition: all 0.15s ease;
    }

    .link-item:hover[b-5ph2fzuow5] {
        background: #EEF2FF;
        border-color: #C7D2FE;
        color: #4F46E5;
        transform: translateY(-2px);
    }

        .link-item:hover .mdi[b-5ph2fzuow5] {
            color: #4F46E5;
            transform: scale(1.1);
        }

    .link-item:focus-visible[b-5ph2fzuow5] {
        outline: 2px solid #4F46E5;
        outline-offset: 2px;
    }

/* ============================================
   FOOTER
============================================ */

.not-found-footer[b-5ph2fzuow5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #F1F5F9;
    font-size: 0.82rem;
}

.footer-text[b-5ph2fzuow5] {
    color: #94A3B8;
}

.footer-link[b-5ph2fzuow5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .footer-link .mdi[b-5ph2fzuow5] {
        font-size: 0.95rem;
    }

    .footer-link:hover[b-5ph2fzuow5] {
        background: #EEF2FF;
    }

    .footer-link:focus-visible[b-5ph2fzuow5] {
        outline: 2px solid #4F46E5;
        outline-offset: 2px;
    }

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 720px) {
    .not-found-card[b-5ph2fzuow5] {
        padding: 2rem 1.5rem 1.5rem;
    }

    .not-found-visual[b-5ph2fzuow5] {
        position: static;
        margin: 0 auto 1.5rem;
        width: 120px;
        height: 120px;
    }

    .not-found-content[b-5ph2fzuow5] {
        padding-right: 0;
        text-align: center;
    }

    .not-found-description[b-5ph2fzuow5] {
        margin-left: auto;
        margin-right: auto;
    }

    .not-found-actions[b-5ph2fzuow5] {
        justify-content: center;
    }

    .links-grid[b-5ph2fzuow5] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .not-found-container[b-5ph2fzuow5] {
        padding: 1rem;
    }

    .not-found-card[b-5ph2fzuow5] {
        border-radius: 18px;
        padding: 1.75rem 1.25rem 1.25rem;
    }

    .not-found-title[b-5ph2fzuow5] {
        font-size: 1.35rem;
    }

    .not-found-description[b-5ph2fzuow5] {
        font-size: 0.9rem;
    }

    .not-found-actions[b-5ph2fzuow5] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary[b-5ph2fzuow5],
    .btn-secondary[b-5ph2fzuow5] {
        justify-content: center;
    }

    .links-grid[b-5ph2fzuow5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .not-found-visual[b-5ph2fzuow5] {
        width: 100px;
        height: 100px;
    }

    .not-found-footer[b-5ph2fzuow5] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ============================================
   ACCESSIBILITY
============================================ */

@media (prefers-reduced-motion: reduce) {
    .not-found-card[b-5ph2fzuow5],
    .visual-glow[b-5ph2fzuow5],
    .visual-svg[b-5ph2fzuow5],
    .pulse-dot[b-5ph2fzuow5] {
        animation: none;
    }

    .btn-primary:hover[b-5ph2fzuow5],
    .btn-secondary:hover[b-5ph2fzuow5],
    .link-item:hover[b-5ph2fzuow5] {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .not-found-card[b-5ph2fzuow5] {
        border: 2px solid #0F172A;
    }

    .btn-primary[b-5ph2fzuow5] {
        background: #0F172A;
    }

    .btn-secondary[b-5ph2fzuow5] {
        border: 2px solid #0F172A;
    }

    .status-pill[b-5ph2fzuow5] {
        border: 2px solid #0F172A;
    }
}
/* /Component/Common/Pagination.razor.rz.scp.css */
.pagination-container[b-q9je1pwodx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-wrap: wrap;
    gap: 12px;
}
.page-dots[b-q9je1pwodx] {
    padding: 0 6px;
    font-weight: 700;
    color: #64748b;
}
.pagination-info[b-q9je1pwodx] {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.pagination-actions[b-q9je1pwodx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size[b-q9je1pwodx] {
    min-width: 90px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

.page-btn[b-q9je1pwodx] {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    transition: all .2s ease;
}

    .page-btn:hover:not(:disabled)[b-q9je1pwodx] {
        background: #eff6ff;
        border-color: #2563eb;
        color: #2563eb;
    }

    .page-btn.active[b-q9je1pwodx] {
        background: #2563eb;
        border-color: #2563eb;
        color: white;
    }

    .page-btn:disabled[b-q9je1pwodx] {
        opacity: .45;
        cursor: not-allowed;
    }

@media(max-width:768px) {

    .pagination-container[b-q9je1pwodx] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-actions[b-q9je1pwodx] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-size[b-q9je1pwodx] {
        width: 100%;
    }
}
/* /Component/Common/ShimmerLoader.razor.rz.scp.css */
.shimmer-wrapper[b-kx1w2vnemx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shimmer-line[b-kx1w2vnemx] {
    height: 50px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

    .shimmer-line[b-kx1w2vnemx]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150px;
        width: 150px;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.7), transparent );
        animation: shimmer-b-kx1w2vnemx 1.2s infinite;
    }

@keyframes shimmer-b-kx1w2vnemx {

    from {
        left: -150px;
    }

    to {
        left: 100%;
    }
}
/* /Component/DoctorSearch.razor.rz.scp.css */
/* =========================================================
   DOCTOR SEARCH - COMPACT & CLEAN
========================================================= */

.doctor-search[b-0q8ij5217q] {
    width: 100%;
}

/* =========================================================
   SEARCH BOX WRAPPER
========================================================= */

.doctor-search-box-wrapper[b-0q8ij5217q] {
    position: relative;
    width: 100%;
}

/* =========================================================
   SEARCH BOX
========================================================= */

.doctor-search-box[b-0q8ij5217q] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    min-height: 52px;
}

    .doctor-search-box:focus-within[b-0q8ij5217q] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.08);
    }

/* =========================================================
   ICON
========================================================= */

.doctor-search .search-icon[b-0q8ij5217q] {
    font-size: 18px;
    opacity: 0.75;
    flex-shrink: 0;
}

/* =========================================================
   INPUT
========================================================= */

.doctor-search-input[b-0q8ij5217q] {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
    padding: 0 !important;
    box-shadow: none !important;
    min-width: 0;
}

    .doctor-search-input[b-0q8ij5217q]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

/* =========================================================
   CLEAR BUTTON
========================================================= */

.doctor-search .search-action-btn[b-0q8ij5217q] {
    border: none;
    background: #f1f5f9;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

    .doctor-search .search-action-btn:hover[b-0q8ij5217q] {
        background: #e2e8f0;
        color: #0f172a;
    }

/* =========================================================
   SUGGESTION DROPDOWN
========================================================= */

.doctor-search-suggestions[b-0q8ij5217q] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e7eef8;
    border-radius: 16px;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    max-height: 350px;
    overflow-y: auto;
}

/* =========================================================
   EACH SUGGESTION
========================================================= */

.doctor-suggestion-item[b-0q8ij5217q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
    border-bottom: 1px solid #f1f5f9;
}

    /* Alternate light rows */
    .doctor-suggestion-item:nth-child(odd)[b-0q8ij5217q] {
        background: #fcfdff;
    }

    .doctor-suggestion-item:nth-child(even)[b-0q8ij5217q] {
        background: #f8fbff;
    }

    .doctor-suggestion-item:last-child[b-0q8ij5217q] {
        border-bottom: none;
    }

    .doctor-suggestion-item:hover[b-0q8ij5217q] {
        background: #eef6ff;
    }

/* =========================================================
   LEFT CONTENT
========================================================= */

.doctor-suggestion-content[b-0q8ij5217q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.doctor-name[b-0q8ij5217q] {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.doctor-department[b-0q8ij5217q] {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* =========================================================
   AVAILABILITY BADGE
========================================================= */

.doctor-availability[b-0q8ij5217q] {
    flex-shrink: 0;
}

.availability-badge[b-0q8ij5217q] {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
}

    /* AVAILABLE */

    .availability-badge.available[b-0q8ij5217q] {
        background: #dcfce7;
        color: #166534;
    }

    /* BUSY */

    .availability-badge.unavailable[b-0q8ij5217q] {
        background: #fee2e2;
        color: #991b1b;
    }

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .doctor-search-box[b-0q8ij5217q] {
        min-height: 48px;
        padding: 8px 12px;
    }

    .doctor-suggestion-item[b-0q8ij5217q] {
        padding: 12px 14px;
    }

    .doctor-name[b-0q8ij5217q] {
        font-size: 14px;
    }

    .doctor-department[b-0q8ij5217q] {
        font-size: 12px;
    }

    .availability-badge[b-0q8ij5217q] {
        font-size: 11px;
        padding: 5px 10px;
        min-width: 72px;
    }
}
/* /Component/Master/ServiceTariffDrawer.razor.rz.scp.css */
/* =========================================================
   OVERLAY + PANEL
========================================================= */
.dialog-overlay[b-u6erbjry69] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    animation: fadeIn-b-u6erbjry69 .2s ease;
}

.dialog-panel[b-u6erbjry69] {
    width: 100%;
    max-width: 1300px;
    height: 92vh;
    max-height: 96vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: popIn-b-u6erbjry69 .2s ease;
}

/* HEADER */
.dialog-header[b-u6erbjry69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #ffffff;
}

    .dialog-header h3[b-u6erbjry69] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

.dialog-close-btn[b-u6erbjry69] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 6px;
    border-radius: 8px;
}

    .dialog-close-btn:hover[b-u6erbjry69] {
        background: #f1f5f9;
        color: #1e293b;
    }

/* BODY */
.dialog-body-single[b-u6erbjry69] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

/* FOOTER */
.dialog-footer[b-u6erbjry69] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.drawer-cancel-btn[b-u6erbjry69] {
    border: 1px solid #dbe2ea;
    background: white;
    color: #475569;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

/* Animations */
@keyframes fadeIn-b-u6erbjry69 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn-b-u6erbjry69 {
    from {
        opacity: 0;
        transform: scale(.97);
    }

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

/* Mobile */
@media (max-width: 640px) {
    .dialog-overlay[b-u6erbjry69] {
        padding: 0;
    }

    .dialog-panel[b-u6erbjry69] {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .dialog-footer[b-u6erbjry69] {
        flex-direction: column-reverse;
    }

    .drawer-cancel-btn[b-u6erbjry69] {
        width: 100%;
    }
}
/* /Component/Master/TariffEditDrawer.razor.rz.scp.css */
/* =========================================================
   OVERLAY + PANEL
========================================================= */
.dialog-overlay[b-1sjvrdou7z] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    animation: fadeIn-b-1sjvrdou7z .2s ease;
}

.dialog-panel[b-1sjvrdou7z] {
    width: 100%;
    max-width: 1300px;
    height: 92vh;
    max-height: 96vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: popIn-b-1sjvrdou7z .2s ease;
}

/* =========================================================
   HEADER
========================================================= */
.dialog-header[b-1sjvrdou7z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #ffffff;
}

    .dialog-header h3[b-1sjvrdou7z] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

.dialog-close-btn[b-1sjvrdou7z] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 6px;
    border-radius: 8px;
}

    .dialog-close-btn:hover[b-1sjvrdou7z] {
        background: #f1f5f9;
        color: #1e293b;
    }

/* =========================================================
   BODY
========================================================= */
.dialog-body-single[b-1sjvrdou7z] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

/* =========================================================
   FOOTER
========================================================= */
.dialog-footer[b-1sjvrdou7z] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.drawer-cancel-btn[b-1sjvrdou7z] {
    border: 1px solid #dbe2ea;
    background: white;
    color: #475569;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.drawer-save-btn[b-1sjvrdou7z] {
    border: none;
    background: #2563eb;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .drawer-save-btn:hover[b-1sjvrdou7z] {
        background: #1d4ed8;
    }

    .drawer-save-btn:disabled[b-1sjvrdou7z] {
        background: #93c5fd;
        cursor: not-allowed;
    }

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes fadeIn-b-1sjvrdou7z {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn-b-1sjvrdou7z {
    from {
        opacity: 0;
        transform: scale(.97);
    }

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

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 640px) {
    .dialog-overlay[b-1sjvrdou7z] {
        padding: 0;
    }

    .dialog-panel[b-1sjvrdou7z] {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .dialog-footer[b-1sjvrdou7z] {
        flex-direction: column-reverse;
    }

    .drawer-save-btn[b-1sjvrdou7z],
    .drawer-cancel-btn[b-1sjvrdou7z] {
        width: 100%;
    }
}
/* /Component/PatientSearch.razor.rz.scp.css */
.patient-search-box-wrapper[b-rvd5mkzpk8] {
    position: relative;
}

.patient-search-suggestions[b-rvd5mkzpk8] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: white;
    border-radius: 14px;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid #dbe4f0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* =====================================================
   ITEM
===================================================== */

.patient-suggestion-item[b-rvd5mkzpk8] {
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
    border-bottom: 1px solid #f1f5f9;
}

    /* Alternate Light Colors */

    .patient-suggestion-item:nth-child(odd)[b-rvd5mkzpk8] {
        background: #fcfdff;
    }

    .patient-suggestion-item:nth-child(even)[b-rvd5mkzpk8] {
        background: #f8fbff;
    }

    /* Hover */

    .patient-suggestion-item:hover[b-rvd5mkzpk8] {
        background: #eaf4ff;
        transform: translateX(2px);
    }

    /* Last */

    .patient-suggestion-item:last-child[b-rvd5mkzpk8] {
        border-bottom: none;
    }

/* =====================================================
   CONTENT
===================================================== */

.patient-suggestion-content[b-rvd5mkzpk8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* =====================================================
   NAME
===================================================== */

.patient-name[b-rvd5mkzpk8] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* =====================================================
   DETAILS
===================================================== */

.patient-details[b-rvd5mkzpk8] {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

/* =====================================================
   SCROLLBAR
===================================================== */

.patient-search-suggestions[b-rvd5mkzpk8]::-webkit-scrollbar {
    width: 6px;
}

.patient-search-suggestions[b-rvd5mkzpk8]::-webkit-scrollbar-thumb {
    background: #dbe4f0;
    border-radius: 20px;
}

.patient-search-suggestions[b-rvd5mkzpk8]::-webkit-scrollbar-track {
    background: transparent;
}
/* /Component/Sidebar.razor.rz.scp.css */
/* /Component/Topbar.razor.rz.scp.css */
/* =========================================================
   WALK-IN CONSULTATION DIALOG - IMPROVED VERSION
   ========================================================= */

/* Overlay positioning - dialog at top with centering */
.walkin-modal-overlay[b-0yw9o7zg2u] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: center;
    padding: 40px 24px 24px;
    z-index: 1000;
    animation: overlay-fade-b-0yw9o7zg2u 0.2s ease-out;
}

@keyframes overlay-fade-b-0yw9o7zg2u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dialog box - wider and centered */
.walkin-modal[b-0yw9o7zg2u] {
    max-width: 820px; /* Increased width */
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    overflow: visible; /* Changed to visible to allow dropdown to expand */
    animation: slide-down-b-0yw9o7zg2u 0.25s ease-out;
    margin: 0 auto; /* Center horizontally */
}

@keyframes slide-down-b-0yw9o7zg2u {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }

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

/* Header - more spacious */
.walkin-modal .modal-dialog-header[b-0yw9o7zg2u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 30px 18px;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
    background: #fafbfc;
    border-radius: 18px 18px 0 0;
}

.walkin-modal-title[b-0yw9o7zg2u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
}

    .walkin-modal-title .mdi[b-0yw9o7zg2u] {
        color: #2563eb;
        font-size: 24px;
    }

/* Close button */
.modal-close-btn[b-0yw9o7zg2u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

    .modal-close-btn:hover[b-0yw9o7zg2u] {
        background: #f1f4f9;
        color: #1e293b;
        transform: rotate(90deg);
    }

/* Body - more spacing */
.walkin-modal .modal-dialog-body[b-0yw9o7zg2u] {
    padding: 28px 30px 32px;
    overflow: visible; /* Changed to visible */
    position: relative; /* Added for positioning context */
}

/* Label - refined */
.walkin-label[b-0yw9o7zg2u] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 16px;
    letter-spacing: 0.2px;
}

    .walkin-label .mdi[b-0yw9o7zg2u] {
        color: #2563eb;
        font-size: 18px;
    }

/* Search input area - improved */
.walkin-modal .patient-search-box[b-0yw9o7zg2u] {
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .walkin-modal .patient-search-box:focus-within[b-0yw9o7zg2u] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

.walkin-modal .patient-search-input[b-0yw9o7zg2u] {
    font-size: 14.5px;
    padding: 0 18px;
}

    .walkin-modal .patient-search-input[b-0yw9o7zg2u]::placeholder {
        color: #94a3b8;
    }

/* =========================================================
   SEARCH SUGGESTIONS - INCREASED HEIGHT & VISIBILITY
========================================================= */

.walkin-modal .patient-search-suggestions[b-0yw9o7zg2u] {
    max-height: 420px; /* Increased from 340px */
    min-height: 100px; /* Minimum height when results appear */
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 0 12px 12px;
    border: 1.5px solid #e2e8f0;
    border-top: none;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
    margin-top: 0;
    padding: 6px 0;
}

/* Suggestions heading */
.walkin-modal .patient-suggestions-heading[b-0yw9o7zg2u] {
    padding: 12px 20px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f4f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* Suggestion rows - more spacious */
.walkin-modal .patient-suggestion-row[b-0yw9o7zg2u] {
    padding: 16px 20px; /* Increased padding */
    transition: background 0.15s ease;
    border-bottom: 1px solid #f1f4f9;
    min-height: 60px; /* Minimum height for each row */
}

    .walkin-modal .patient-suggestion-row:last-child[b-0yw9o7zg2u] {
        border-bottom: none;
    }

    .walkin-modal .patient-suggestion-row:hover[b-0yw9o7zg2u] {
        background: #f8fafc;
    }

/* Patient content spacing */
.walkin-modal .patient-suggestion-content[b-0yw9o7zg2u] {
    gap: 14px;
}

.walkin-modal .patient-avatar-icon[b-0yw9o7zg2u] {
    width: 44px; /* Larger avatar */
    height: 44px;
    font-size: 24px;
}

.walkin-modal .patient-suggestion-text[b-0yw9o7zg2u] {
    gap: 4px;
}

.walkin-modal .patient-name[b-0yw9o7zg2u] {
    font-size: 15px !important; /* Larger text */
    font-weight: 700;
}

.walkin-modal .patient-meta-inline[b-0yw9o7zg2u] {
    font-size: 13.5px;
}

.walkin-modal .patient-details[b-0yw9o7zg2u] {
    font-size: 13.5px;
    gap: 8px;
}

    .walkin-modal .patient-details .mdi[b-0yw9o7zg2u] {
        font-size: 15px;
    }

/* Action buttons - more visible */
.walkin-modal .patient-suggestion-actions[b-0yw9o7zg2u] {
    gap: 12px;
}

.walkin-modal .btn-view-profile[b-0yw9o7zg2u],
.walkin-modal .btn-start-consult[b-0yw9o7zg2u] {
    height: 40px; /* Taller buttons */
    padding: 0 20px;
    font-size: 13.5px;
    min-width: 110px;
}

    .walkin-modal .btn-view-profile .mdi[b-0yw9o7zg2u],
    .walkin-modal .btn-start-consult .mdi[b-0yw9o7zg2u] {
        font-size: 17px;
    }

/* Empty state - more visible */
.walkin-modal .patient-search-empty[b-0yw9o7zg2u] {
    padding: 40px 20px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .walkin-modal .patient-search-empty .mdi[b-0yw9o7zg2u] {
        font-size: 48px;
        color: #cbd5e1;
    }

.walkin-modal .patient-search-empty[b-0yw9o7zg2u] {
    font-size: 14.5px;
    color: #64748b;
}

/* Scrollbar styling for better visibility */
.walkin-modal .patient-search-suggestions[b-0yw9o7zg2u]::-webkit-scrollbar {
    width: 6px;
}

.walkin-modal .patient-search-suggestions[b-0yw9o7zg2u]::-webkit-scrollbar-track {
    background: #f1f4f9;
    border-radius: 3px;
}

.walkin-modal .patient-search-suggestions[b-0yw9o7zg2u]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .walkin-modal .patient-search-suggestions[b-0yw9o7zg2u]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Button container - better layout */
.walkin-modal .modal-actions[b-0yw9o7zg2u] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Bootstrap-styled buttons */
.btn-add-new-patient[b-0yw9o7zg2u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

    .btn-add-new-patient .mdi[b-0yw9o7zg2u] {
        font-size: 18px;
    }

    /* Primary button - Bootstrap btn-primary style */
    .btn-add-new-patient.btn-primary-custom[b-0yw9o7zg2u] {
        background: #0d6efd;
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
    }

        .btn-add-new-patient.btn-primary-custom:hover[b-0yw9o7zg2u] {
            background: #0b5ed7;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);
        }

        .btn-add-new-patient.btn-primary-custom:active[b-0yw9o7zg2u] {
            background: #0a58ca;
            transform: translateY(0);
        }

    /* Outline button - Bootstrap btn-outline-secondary style */
    .btn-add-new-patient.btn-outline-custom[b-0yw9o7zg2u] {
        background: transparent;
        color: #6c757d;
        border: 1.5px solid #ced4da;
    }

        .btn-add-new-patient.btn-outline-custom:hover[b-0yw9o7zg2u] {
            background: #f8f9fa;
            border-color: #6c757d;
            color: #495057;
        }

        .btn-add-new-patient.btn-outline-custom:active[b-0yw9o7zg2u] {
            background: #e9ecef;
        }

/* =========================================================
   RESPONSIVE ADJUSTMENTS
========================================================= */

@media (max-width: 768px) {
    .walkin-modal-overlay[b-0yw9o7zg2u] {
        padding: 20px 16px 16px;
        align-items: flex-start;
        padding-top: 30px;
    }

    .walkin-modal[b-0yw9o7zg2u] {
        max-width: 100%;
        border-radius: 14px;
        margin: 0;
    }

        .walkin-modal .modal-dialog-header[b-0yw9o7zg2u] {
            padding: 16px 20px 14px;
            border-radius: 14px 14px 0 0;
        }

    .walkin-modal-title[b-0yw9o7zg2u] {
        font-size: 17px;
    }

    .walkin-modal .modal-dialog-body[b-0yw9o7zg2u] {
        padding: 18px 20px 22px;
    }

    .walkin-modal .patient-search-suggestions[b-0yw9o7zg2u] {
        max-height: 350px; /* Slightly less on mobile */
        min-height: 80px;
    }

    .walkin-modal .patient-suggestion-row[b-0yw9o7zg2u] {
        padding: 14px 16px;
        min-height: 50px;
    }

    .walkin-modal .patient-avatar-icon[b-0yw9o7zg2u] {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .walkin-modal .patient-name[b-0yw9o7zg2u] {
        font-size: 14px !important;
    }

    .walkin-modal .btn-view-profile[b-0yw9o7zg2u],
    .walkin-modal .btn-start-consult[b-0yw9o7zg2u] {
        height: 36px;
        padding: 0 14px;
        font-size: 12.5px;
        min-width: 90px;
    }

    .walkin-modal .modal-actions[b-0yw9o7zg2u] {
        flex-direction: column;
        gap: 10px;
    }

    .btn-add-new-patient[b-0yw9o7zg2u] {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .walkin-modal-overlay[b-0yw9o7zg2u] {
        padding: 12px 10px 10px;
        padding-top: 16px;
    }

    .walkin-modal .modal-dialog-header[b-0yw9o7zg2u] {
        padding: 12px 16px 10px;
    }

    .walkin-modal-title[b-0yw9o7zg2u] {
        font-size: 15px;
        gap: 8px;
    }

        .walkin-modal-title .mdi[b-0yw9o7zg2u] {
            font-size: 20px;
        }

    .walkin-modal .modal-dialog-body[b-0yw9o7zg2u] {
        padding: 14px 16px 18px;
    }

    .walkin-label[b-0yw9o7zg2u] {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .walkin-modal .patient-search-box[b-0yw9o7zg2u] {
        height: 42px;
    }

    .walkin-modal .patient-search-input[b-0yw9o7zg2u] {
        font-size: 13px;
        padding: 0 14px;
    }

    .walkin-modal .patient-search-suggestions[b-0yw9o7zg2u] {
        max-height: 280px; /* Even less on very small screens */
        min-height: 60px;
    }

    .walkin-modal .patient-suggestion-row[b-0yw9o7zg2u] {
        padding: 12px 14px;
        min-height: 44px;
        flex-wrap: wrap;
    }

    .walkin-modal .patient-avatar-icon[b-0yw9o7zg2u] {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .walkin-modal .patient-name[b-0yw9o7zg2u] {
        font-size: 13px !important;
    }

    .walkin-modal .patient-details[b-0yw9o7zg2u] {
        font-size: 12px;
    }

    .walkin-modal .patient-suggestion-actions[b-0yw9o7zg2u] {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 6px;
    }

    .walkin-modal .btn-view-profile[b-0yw9o7zg2u],
    .walkin-modal .btn-start-consult[b-0yw9o7zg2u] {
        flex: 1;
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
        min-width: 70px;
    }

    .btn-add-new-patient[b-0yw9o7zg2u] {
        font-size: 13px;
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* =========================================================
   SCROLLBAR STYLING FOR FIREFOX
========================================================= */

.walkin-modal .patient-search-suggestions[b-0yw9o7zg2u] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f4f9;
}


/* =========================================================
   NOTIFICATION DRAWER — slides in from right
   ========================================================= */

.notif-overlay[b-0yw9o7zg2u] {
    position: fixed;
    inset: 0;
    z-index: 3500;
    background: rgba(32, 48, 64, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

    .notif-overlay.show[b-0yw9o7zg2u] {
        opacity: 1;
        visibility: visible;
    }

.notif-drawer[b-0yw9o7zg2u] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3600;
    display: flex;
    width: 380px;
    max-width: 92vw;
    flex-direction: column;
    background: #fff;
    box-shadow: -20px 0 48px rgba(32, 48, 64, .16);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}

    .notif-drawer.open[b-0yw9o7zg2u] {
        transform: translateX(0);
    }

/* HEADER */

.notif-header[b-0yw9o7zg2u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hms-border);
}

.notif-header-left[b-0yw9o7zg2u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .notif-header-left .mdi[b-0yw9o7zg2u] {
        font-size: 20px;
        color: var(--hms-primary);
    }

    .notif-header-left h3[b-0yw9o7zg2u] {
        margin: 0;
        color: var(--hms-ink);
        font-size: 16px;
        font-weight: 750;
    }

.notif-count[b-0yw9o7zg2u] {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.notif-close[b-0yw9o7zg2u] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hms-border);
    border-radius: 8px;
    background: #fff;
    color: var(--hms-muted);
    cursor: pointer;
    font-size: 16px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .notif-close:hover[b-0yw9o7zg2u] {
        border-color: #c9c4ff;
        background: #f7f6ff;
        color: var(--hms-primary);
    }

/* BODY */

.notif-body[b-0yw9o7zg2u] {
    flex: 1;
    overflow-y: auto;
}

.notif-item[b-0yw9o7zg2u] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .15s ease;
}

    .notif-item:hover[b-0yw9o7zg2u] {
        background: #f8fafc;
    }

    .notif-item.unread[b-0yw9o7zg2u] {
        background: #f8fbff;
    }

        .notif-item.unread:hover[b-0yw9o7zg2u] {
            background: #eef5ff;
        }

.notif-icon[b-0yw9o7zg2u] {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

    .notif-icon .mdi[b-0yw9o7zg2u] {
        font-size: 20px;
    }

    .notif-icon.icon-emerald[b-0yw9o7zg2u] {
        background: #ecfdf5;
        color: #059669;
    }

    .notif-icon.icon-blue[b-0yw9o7zg2u] {
        background: #eff6ff;
        color: #2563eb;
    }

    .notif-icon.icon-amber[b-0yw9o7zg2u] {
        background: #fffbeb;
        color: #d97706;
    }

.notif-content[b-0yw9o7zg2u] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-0yw9o7zg2u] {
    margin: 0 0 3px;
    color: var(--hms-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

.notif-text[b-0yw9o7zg2u] {
    margin: 0 0 6px;
    color: var(--hms-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.notif-time[b-0yw9o7zg2u] {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.notif-empty[b-0yw9o7zg2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    color: var(--hms-muted);
    font-size: 12.5px;
    font-weight: 600;
}

    .notif-empty .mdi[b-0yw9o7zg2u] {
        font-size: 30px;
        color: #cbd5e1;
    }

/* FOOTER */

.notif-footer[b-0yw9o7zg2u] {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--hms-border);
}

.notif-mark-read[b-0yw9o7zg2u] {
    display: inline-flex;
    width: 100%;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--hms-border);
    border-radius: 9px;
    background: #fff;
    color: var(--hms-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease;
}

    .notif-mark-read:hover[b-0yw9o7zg2u] {
        border-color: #c9c4ff;
        background: #f7f6ff;
    }

    .notif-mark-read .mdi[b-0yw9o7zg2u] {
        font-size: 16px;
    }

/* MOBILE */

@media (max-width: 640px) {
    .notif-drawer[b-0yw9o7zg2u] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Pages/Account/ChangePassword.razor.rz.scp.css */
/* =========================================================
   LOGIN / CHANGE PASSWORD — form alignment
   ========================================================= */

.login-heading[b-1wxche8sj7] {
    text-align: center;
    margin-bottom: 28px;
}

    .login-heading h4[b-1wxche8sj7] {
        margin: 0 0 6px;
        font-size: 26px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.2;
    }

    .login-heading h5[b-1wxche8sj7] {
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: #64748b;
        line-height: 1.4;
    }

/* Label row — indented to sit over the actual text field,
   not the input-group icon prefix */
.login-label-row[b-1wxche8sj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-left: 42px; /* align over the text field */
}

    .login-label-row .form-label[b-1wxche8sj7] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
    }

    .login-label-row .btn-link[b-1wxche8sj7] {
        padding: 0;
        font-size: 12.5px;
        text-decoration: none;
    }

/* Input group — consistent height */
.login-form .input-group-text[b-1wxche8sj7],
.login-form .form-control[b-1wxche8sj7] {
    height: 46px;
}

.login-form .input-group-text[b-1wxche8sj7] {
    background: #ffffff;
    border-right: 0;
    color: #64748b;
    padding: 0 14px;
}

    .login-form .input-group-text .mdi[b-1wxche8sj7] {
        font-size: 16px;
        line-height: 1;
    }

.login-form .form-control[b-1wxche8sj7] {
    border-left: 0;
    font-size: 14px;
}

    .login-form .form-control:focus[b-1wxche8sj7] {
        box-shadow: none;
        border-color: #86b7fe;
    }

.login-form .input-group:focus-within .input-group-text[b-1wxche8sj7] {
    border-color: #86b7fe;
}

/* Password hint block */
.password-hint[b-1wxche8sj7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
    padding: 10px 12px;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
}

    .password-hint .mdi[b-1wxche8sj7] {
        color: #4f46e5;
        font-size: 15px;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* Buttons */
.login-right-panel .btn-primary[b-1wxche8sj7],
.login-right-panel .btn-outline-secondary[b-1wxche8sj7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-right-panel .btn-primary .mdi[b-1wxche8sj7],
    .login-right-panel .btn-outline-secondary .mdi[b-1wxche8sj7] {
        font-size: 16px;
    }

/* Right panel — vertically centered */
.login-right-panel[b-1wxche8sj7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: calc(100vh - 4rem);
    padding: 2rem 1.5rem;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}
/* /Pages/Account/Dashboard.razor.rz.scp.css */
/* =============================================================
   DASHBOARD — landing/welcome page.
   Same content as before (logo, title, tagline, services, contact) —
   this file only replaces the old inline <style> block with proper
   external CSS, built on the existing --hms-* tokens so it matches
   the rest of the shell. Fits the viewport height under the topbar,
   no page scroll needed.
============================================================= */

.dashboard-page[b-798gd2bcoc] {
    display: flex;
    height: calc(90vh - var(--hms-topbar-height, 50px));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    gap: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    color: var(--hms-ink);
    text-align: center;
}

/* ---------------------------------------------------------------
   HERO
--------------------------------------------------------------- */

.dash-hero[b-798gd2bcoc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dash-logo[b-798gd2bcoc] {
    width: 160px;
    height: 120px;
    margin-bottom: 6px;
    background: url('../../assets/images/logo.png') no-repeat center / contain;
}

.dash-hero h1[b-798gd2bcoc] {
    margin: 0;
    color: #005eb8;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.dash-hero p[b-798gd2bcoc] {
    margin: 0;
    color: #00796b;
    font-size: 1.1rem;
    font-weight: 550;
}

/* ---------------------------------------------------------------
   SERVICES
--------------------------------------------------------------- */

.dash-services-heading[b-798gd2bcoc] {
    margin: 0;
    color: #005eb8;
    font-size: 1.4rem;
    font-weight: 700;
}

.dash-services[b-798gd2bcoc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.dash-service[b-798gd2bcoc] {
    display: flex;
    width: 132px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 10px;
    border: 1px solid var(--hms-border, #d8e2ec);
    border-radius: 14px;
    background: rgba(255, 255, 255, .7);
    color: #34495e;
    font-size: .9rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .dash-service:hover[b-798gd2bcoc] {
        box-shadow: 0 10px 24px rgba(0, 94, 184, .12);
        transform: translateY(-2px);
    }

.dash-service-icon[b-798gd2bcoc] {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--hms-primary-soft, #eef0ff);
    color: var(--hms-primary, #005eb8);
    font-size: 1.4rem;
}

/* ---------------------------------------------------------------
   CONTACT
--------------------------------------------------------------- */

.dash-contact[b-798gd2bcoc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
}

    .dash-contact a[b-798gd2bcoc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #005eb8;
        font-size: .95rem;
        font-weight: 550;
        text-decoration: none;
    }

        .dash-contact a:hover[b-798gd2bcoc] {
            text-decoration: underline;
        }

        .dash-contact a i[b-798gd2bcoc] {
            font-size: 1.05rem;
        }

/* ---------------------------------------------------------------
   BOTTOM LOGO
--------------------------------------------------------------- */

.dash-logo-bottom[b-798gd2bcoc] {
    width: 150px;
    height: 70px;
    background: url('../../assets/images/companylogoN.png') no-repeat center / contain;
}

/* ---------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------- */

@media (max-width: 700px) {
    .dashboard-page[b-798gd2bcoc] {
        height: auto;
        min-height: calc(100vh - var(--hms-topbar-height, 64px));
        overflow-y: auto;
    }

    .dash-hero h1[b-798gd2bcoc] {
        font-size: 1.6rem;
    }
}
/* /Pages/Account/LoginComponent.razor.rz.scp.css */
/* =========================================================
   LOGIN PAGE
   ========================================================= */

.loginbg[b-hgzn3m14c7] {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

    .loginbg .container[b-hgzn3m14c7] {
        display: flex;
        align-items: stretch;
    }

        .loginbg .container > .row[b-hgzn3m14c7] {
            width: 100%;
            min-height: 100vh;
        }

/* ---------- LEFT PANEL ---------- */

.login-left-panel[b-hgzn3m14c7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 2rem 1.5rem;
}

.login-hero[b-hgzn3m14c7] {
    max-width: 100%;
    margin: auto 0;
}

.login-powered-by[b-hgzn3m14c7] {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* ---------- RIGHT PANEL (centered vertically) ---------- */

.login-right-panel[b-hgzn3m14c7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- HEADING ---------- */

.login-heading[b-hgzn3m14c7] {
    text-align: center;
    margin-bottom: 28px;
}

    .login-heading h4[b-hgzn3m14c7] {
        margin: 0 0 4px;
        font-size: 24px;
        font-weight: 700;
    }

    .login-heading h5[b-hgzn3m14c7] {
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: #64748b;
    }

/* ---------- LABEL ROW ---------- */

.login-label-row[b-hgzn3m14c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

    .login-label-row .form-label[b-hgzn3m14c7] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: #334155;
    }

    .login-label-row .btn-link[b-hgzn3m14c7] {
        padding: 0;
        font-size: 12.5px;
        text-decoration: none;
    }

/* ---------- INPUT GROUP (Bootstrap default styling) ---------- */

.login-form .input-group-text[b-hgzn3m14c7] {
    background: #ffffff;
    border-right: 0;
    color: #64748b;
}

    .login-form .input-group-text .mdi[b-hgzn3m14c7] {
        font-size: 16px;
        line-height: 1;
    }

.login-form .form-control[b-hgzn3m14c7] {
    border-left: 0;
}

    .login-form .form-control:focus[b-hgzn3m14c7] {
        box-shadow: none;
        border-color: #86b7fe;
    }

.login-form .input-group:focus-within .input-group-text[b-hgzn3m14c7] {
    border-color: #86b7fe;
}

/* ---------- REMEMBER ME ---------- */

.login-remember[b-hgzn3m14c7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .login-remember .form-check-input[b-hgzn3m14c7] {
        margin: 0;
        cursor: pointer;
    }

    .login-remember .form-check-label[b-hgzn3m14c7] {
        margin: 0;
        font-size: 13px;
        cursor: pointer;
    }

/* ---------- SUBMIT ---------- */

.login-submit[b-hgzn3m14c7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-submit .mdi[b-hgzn3m14c7] {
        font-size: 16px;
    }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 767.98px) {
    .loginbg .container > .row[b-hgzn3m14c7] {
        min-height: auto;
    }

    .login-left-panel[b-hgzn3m14c7] {
        padding: 1.5rem 1rem;
    }

    .login-hero[b-hgzn3m14c7] {
        max-height: 200px;
        margin: 0 0 12px;
    }

    .login-right-panel[b-hgzn3m14c7] {
        padding: 1.5rem 1rem 2.5rem;
    }
}
/* /Pages/Appointment/AppointmentManage.razor.rz.scp.css */
/* =========================================================
   APPOINTMENT MANAGE  (/appointments/manage)
   Compact layout: one command bar (tabs + filters) and one
   table card. No fixed page height and no inner scrolling -
   the table shows all of its rows and the page grows with it.
   ========================================================= */

.appointment-manage-page[b-c8bpn9mvu2] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 14px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 6px 16px rgba(16, 24, 39, .05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* min-height (not height): background fills the screen, content is never clipped */
    min-height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    padding: 0px 0px 8px;
    background: var(--page-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

    .appointment-manage-page h4[b-c8bpn9mvu2] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
        margin: 0;
    }

/* =========================================================
   TABLE CARD
   ========================================================= */

.appointment-content-layout[b-c8bpn9mvu2] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* no inner scroll - rows are shown in full */
.appointment-table-section[b-c8bpn9mvu2] {
    flex: 0 0 auto;
    overflow: visible;
}

.appointment-pagination-bar[b-c8bpn9mvu2] {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* =========================================================
   ERROR STATE
   ========================================================= */

.appointment-state[b-c8bpn9mvu2] {
    background: transparent;
    border: none;
    padding: 40px 20px;
    text-align: center;
}

    .appointment-state.error-state i[b-c8bpn9mvu2] {
        font-size: 32px;
        color: var(--rose-600);
        margin-bottom: 8px;
        display: block;
    }

    .appointment-state h4[b-c8bpn9mvu2] {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
    }

    .appointment-state p[b-c8bpn9mvu2] {
        margin: 0 0 14px;
        font-size: 13px;
        color: var(--ink-soft);
    }

.reset-btn[b-c8bpn9mvu2] {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .appointment-manage-page[b-c8bpn9mvu2] {
        min-height: 0;
        padding: 10px 12px 6px;
    }
}


.appointment-directory-card[b-c8bpn9mvu2] {
    /* ...existing styles... */
    overflow: visible;
}

/* =========================================================
   DROPDOWN CLIPPING FIX
   Root cause: .appointment-content-layout uses overflow:hidden
   to get rounded card corners, which clips the absolutely-
   positioned dropdown-menu when the table is short (1-2 rows).
   Fix: remove the clip everywhere in the dropdown's ancestor
   chain, and fake the rounded corners with per-cell radius
   instead of container clipping.
   ========================================================= */

.appointment-content-layout[b-c8bpn9mvu2],
.appointment-table-section[b-c8bpn9mvu2],
.appointment-table-wrapper[b-c8bpn9mvu2],
.appointment-table-wrapper .desktop-view[b-c8bpn9mvu2],
.appointment-table-wrapper .mobile-view[b-c8bpn9mvu2] {
    overflow: visible !important;
}

/* Re-create the rounded top corners now that the container
   no longer clips (bottom corners already handled by your
   existing tbody tr:last-child rule). */
.appointment-table thead tr:first-child th:first-child[b-c8bpn9mvu2] {
    border-top-left-radius: var(--radius-lg, 14px);
}

.appointment-table thead tr:first-child th:last-child[b-c8bpn9mvu2] {
    border-top-right-radius: var(--radius-lg, 14px);
}

/* Make sure the dropdown always renders above every sibling
   row/card below it (pagination bar, other rows, etc.) */
.action-dropdown[b-c8bpn9mvu2] {
    position: relative;
    z-index: 5;
}

.patient-action-menu[b-c8bpn9mvu2] {
    z-index: 1060 !important;
}

/* Belt-and-braces: if any other page reuses this table inside
   a card that also clips, kill that clip too. */
.appointment-manage-page .appointment-content-layout[b-c8bpn9mvu2],
.appointment-manage-page .appointment-table-section[b-c8bpn9mvu2] {
    overflow: visible !important;
}
/* /Pages/Appointment/BookAppointment.razor.rz.scp.css */
.appointment-page-v2[b-tew9qc6ynf] {
    display: grid;
    grid-template-columns: 64px 1fr 320px;
    gap: 14px;
    align-items: start;
    padding: 14px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.appointment-left-panel[b-tew9qc6ynf] {
    position: sticky;
    top: 0;
    height: fit-content;
}

.appointment-center-panel[b-tew9qc6ynf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}

.appointment-right-panel[b-tew9qc6ynf] {
    position: sticky;
    top: 0;
    height: fit-content;
    max-height: 100%;
    overflow-y: auto;
}

/* =========================================================
   STEPPER COMPACTION (::deep reaches into AppointmentStepper's
   own rendered markup from here — its .razor/.cs/.css files are
   NOT modified). Shrinks it from ~630px tall to ~330px so it
   comfortably fits the viewport alongside the form.
========================================================= */

.appointment-left-panel[b-tew9qc6ynf]  .vertical-stepper {
    padding-top: 0;
    gap: 0;
}

.appointment-left-panel[b-tew9qc6ynf]  .step-circle {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.appointment-left-panel[b-tew9qc6ynf]  .step-label {
    font-size: 10px;
}

.appointment-left-panel[b-tew9qc6ynf]  .step-line {
    height: 40px;
    margin: 2px 0;
}

/* =========================================================
   WORKFLOW ROW (patient / doctor search + selected)
========================================================= */

.workflow-row[b-tew9qc6ynf] {
    display: grid;
    gap: 12px;
}

.workflow-search-card[b-tew9qc6ynf],
.workflow-selected-card[b-tew9qc6ynf],
.appointment-card-v2[b-tew9qc6ynf],
.summary-card-v2[b-tew9qc6ynf] {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.workflow-search-card[b-tew9qc6ynf],
.workflow-selected-card[b-tew9qc6ynf],
.appointment-card-v2[b-tew9qc6ynf] {
    padding: 14px;
}

.summary-card-v2[b-tew9qc6ynf] {
    padding: 16px;
}

.workflow-title[b-tew9qc6ynf],
.card-title-v2[b-tew9qc6ynf],
.summary-header[b-tew9qc6ynf] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.workflow-selected-card[b-tew9qc6ynf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.selected-title[b-tew9qc6ynf],
.summary-main-text[b-tew9qc6ynf] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.selected-subtitle[b-tew9qc6ynf],
.summary-sub-text[b-tew9qc6ynf] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* =========================================================
   VISIT / VITALS GRIDS
========================================================= */

.compact-grid-4[b-tew9qc6ynf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.compact-grid-6[b-tew9qc6ynf] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.field[b-tew9qc6ynf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .field label[b-tew9qc6ynf] {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

    .field input[b-tew9qc6ynf],
    .field select[b-tew9qc6ynf] {
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

.change-btn[b-tew9qc6ynf] {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* =========================================================
   SLOT GRID — capped height, own internal scroll, so a long
   slot list can never push the page taller.
========================================================= */

.slot-grid-wrapper[b-tew9qc6ynf] {
    max-height: 220px;
    overflow-y: auto;
    border-radius: 16px;
}

/* =========================================================
   SUMMARY PANEL
========================================================= */

.summary-section[b-tew9qc6ynf] {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
    margin-top: 12px;
}

    .summary-section:first-of-type[b-tew9qc6ynf] {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

.summary-section-title[b-tew9qc6ynf] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
}

.summary-row[b-tew9qc6ynf] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.summary-actions[b-tew9qc6ynf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.confirm-btn-v2[b-tew9qc6ynf] {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 12px;
    height: 44px;
    font-weight: 700;
    cursor: pointer;
}

    .confirm-btn-v2:hover[b-tew9qc6ynf] {
        background: #1d4ed8;
    }

    .confirm-btn-v2:disabled[b-tew9qc6ynf] {
        background: #93c5fd;
        cursor: not-allowed;
    }

.draft-btn[b-tew9qc6ynf] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    height: 42px;
    font-weight: 600;
    cursor: pointer;
}

/* =========================================================
   RESPONSIVE
   Below 1400px there isn't enough width for a 3-column layout
   anyway (summary already dropped here in the original design) —
   so this is also where the "pinned to viewport" behavior stands
   down and the page reverts to normal document scroll, which is
   the right trade-off on tablets/small windows.
========================================================= */

@media (max-width: 1400px) {

    .appointment-page-v2[b-tew9qc6ynf] {
        grid-template-columns: 56px 1fr;
        height: auto;
        overflow: visible;
    }

    .appointment-center-panel[b-tew9qc6ynf] {
        height: auto;
        overflow-y: visible;
    }

    .appointment-right-panel[b-tew9qc6ynf] {
        display: none;
    }

    .workflow-row[b-tew9qc6ynf] {
        grid-template-columns: 1fr;
    }

    .compact-grid-4[b-tew9qc6ynf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .compact-grid-6[b-tew9qc6ynf] {
        grid-template-columns: repeat(3, 1fr);
    }

    .slot-grid-wrapper[b-tew9qc6ynf] {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {

    .appointment-page-v2[b-tew9qc6ynf] {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .appointment-left-panel[b-tew9qc6ynf] {
        position: static;
    }

        .appointment-left-panel[b-tew9qc6ynf]  .vertical-stepper {
            flex-direction: row;
            justify-content: space-between;
        }

        .appointment-left-panel[b-tew9qc6ynf]  .step-line {
            width: 24px;
            height: 2px;
            margin: 0;
            align-self: center;
        }

    .compact-grid-4[b-tew9qc6ynf],
    .compact-grid-6[b-tew9qc6ynf] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Billing/BillDetailsDrawer.razor.rz.scp.css */
.bill-details-backdrop[b-pzez0scccs] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}

.bill-details-panel[b-pzez0scccs] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --sky-600: #0284C7;
    --sky-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    width: 560px;
    max-width: 100%;
    height: 100%;
    background: #f4f7fb;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, sans-serif;
}

    .bill-details-panel h4[b-pzez0scccs],
    .bill-details-panel h5[b-pzez0scccs],
    .bill-details-panel h6[b-pzez0scccs] {
        font-family: 'Sora', 'Inter', sans-serif;
    }

/* ---- header: tightened, vertically centered instead of flex-start ---- */
.bill-details-header[b-pzez0scccs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.bd-header-left[b-pzez0scccs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bd-bill-no[b-pzez0scccs] {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    font-family: 'Sora', sans-serif;
    line-height: 1.2;
}

.bd-bill-date[b-pzez0scccs] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
}

    .bd-bill-date i[b-pzez0scccs] {
        font-size: 13px;
        color: #94a3b8;
    }

.bd-header-right[b-pzez0scccs] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.billing-status-badge[b-pzez0scccs] {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-block;
}

.status-paid[b-pzez0scccs] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.status-partial[b-pzez0scccs] {
    background: var(--sky-100);
    color: var(--sky-600);
}

.status-due[b-pzez0scccs] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.status-refunded[b-pzez0scccs] {
    background: var(--rose-100);
    color: var(--rose-600);
}

.bd-close-btn[b-pzez0scccs] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- body: reduced padding + gap so sections sit closer together ---- */
.bill-details-body[b-pzez0scccs] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bd-section[b-pzez0scccs] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 39, .04), 0 6px 16px rgba(16, 24, 39, .05);
}

.bd-section-title[b-pzez0scccs] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
}

/* ---- patient info: single row strip instead of a 2x2 grid ---- */
.bd-patient-strip[b-pzez0scccs] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.bd-patient-item[b-pzez0scccs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px;
}

    .bd-patient-item:first-child[b-pzez0scccs] {
        padding-left: 0;
    }

    .bd-patient-item:last-child[b-pzez0scccs] {
        padding-right: 0;
    }

.bd-patient-label[b-pzez0scccs] {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.bd-patient-value[b-pzez0scccs] {
    font-size: 13px;
    color: #1e293b;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-patient-divider[b-pzez0scccs] {
    width: 1px;
    background: #e2e8f0;
    flex-shrink: 0;
    margin: 1px 0;
}

.bd-items-table[b-pzez0scccs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .bd-items-table th[b-pzez0scccs] {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        color: #64748b;
        padding: 8px 6px;
        border-bottom: 1px solid #e2e8f0;
    }

    .bd-items-table td[b-pzez0scccs] {
        padding: 8px 6px;
        border-bottom: 1px solid #eef2f7;
    }

.bd-amt[b-pzez0scccs] {
    font-weight: 700;
    color: #1e293b;
}

.bd-empty-items[b-pzez0scccs] {
    font-size: 13px;
    color: #64748b;
}

/* ---- payment summary: 3 cards in one row instead of 2-col wrap ---- */
.bd-payment-grid[b-pzez0scccs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bd-pay-card[b-pzez0scccs] {
    border: 1px solid #e2e8f0;
    background: #F9FAFC;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .bd-pay-card span[b-pzez0scccs] {
        font-size: 11.5px;
        color: #64748b;
        font-weight: 600;
    }

    .bd-pay-card b[b-pzez0scccs] {
        font-size: 15.5px;
        font-family: 'Sora', sans-serif;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bd-pay-card.paid[b-pzez0scccs] {
        background: var(--emerald-100);
        border-color: transparent;
    }

        .bd-pay-card.paid b[b-pzez0scccs] {
            color: var(--emerald-600);
        }

    .bd-pay-card.due[b-pzez0scccs] {
        background: var(--amber-100);
        border-color: transparent;
    }

        .bd-pay-card.due b[b-pzez0scccs] {
            color: var(--amber-600);
        }

    .bd-pay-card.refund[b-pzez0scccs] {
        background: var(--rose-100);
        border-color: transparent;
    }

        .bd-pay-card.refund b[b-pzez0scccs] {
            color: var(--rose-600);
        }

.bill-details-footer[b-pzez0scccs] {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

    .bill-details-footer button[b-pzez0scccs] {
        flex: 1;
        justify-content: center;
    }

.btn-outline-soft[b-pzez0scccs] {
    border: 1px solid #e2e8f0;
    background: white;
    color: #1e293b;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .15s ease, color .15s ease;
}

    .btn-outline-soft:hover[b-pzez0scccs] {
        border-color: var(--primary);
        color: var(--primary);
    }

.btn-primary-strong[b-pzez0scccs] {
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(91, 79, 229, .22);
    transition: transform .15s ease;
}

    .btn-primary-strong:hover[b-pzez0scccs] {
        transform: translateY(-1px);
        color: white;
    }

@media (max-width: 640px) {
    .bill-details-panel[b-pzez0scccs] {
        width: 100%;
    }

    .bd-patient-strip[b-pzez0scccs] {
        flex-direction: column;
        gap: 10px;
    }

    .bd-patient-item[b-pzez0scccs] {
        padding: 0 !important;
    }

    .bd-patient-divider[b-pzez0scccs] {
        display: none;
    }

    .bd-payment-grid[b-pzez0scccs] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Billing/BillingManage.razor.rz.scp.css */
/* =========================================================
   BILLING — MANAGE BILLS
   ========================================================= */

.billing-manage-page[b-fsa12s9nlb] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --info-600: #0891B2;
    --info-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    min-height: 520px;
    color: var(--ink);
}

    .billing-manage-page h4[b-fsa12s9nlb],
    .billing-manage-page h5[b-fsa12s9nlb] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

/* =========================================================
   CARD SHELL
   ========================================================= */

.billing-manage-card[b-fsa12s9nlb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* =========================================================
   TOOLBAR (Search + Actions inside the card)
   ========================================================= */

.modern-table-header[b-fsa12s9nlb] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.table-header-title[b-fsa12s9nlb] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

    .table-header-title h4[b-fsa12s9nlb] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
    }

.table-count[b-fsa12s9nlb] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-muted);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* =========================================================
   SEARCH (Centered)
   ========================================================= */

.table-header-search[b-fsa12s9nlb] {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

.search-wrapper[b-fsa12s9nlb] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon[b-fsa12s9nlb] {
    position: absolute;
    right: 12px;
    left: auto;
    font-size: 18px;
    color: var(--ink-soft);
    pointer-events: none;
    z-index: 1;
}

.search-input[b-fsa12s9nlb] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: 13px;
    color: var(--ink);
    transition: all 0.2s ease;
    outline: none;
}

    .search-input:focus[b-fsa12s9nlb] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.1);
    }

    .search-input[b-fsa12s9nlb]::placeholder {
        color: #94a3b8;
        font-size: 12.5px;
    }

/* =========================================================
   ACTIONS (Buttons on the right)
   ========================================================= */

.table-header-actions[b-fsa12s9nlb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

    .table-header-actions .btn[b-fsa12s9nlb] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .table-header-actions .btn .mdi[b-fsa12s9nlb] {
            font-size: 15px;
            line-height: 1;
        }

        .table-header-actions .btn:hover[b-fsa12s9nlb] {
            transform: translateY(-1px);
        }

    /* Button Colors (Exact match) */
    .table-header-actions .btn-warning[b-fsa12s9nlb] {
        background: var(--amber-600);
        border-color: var(--amber-600);
        color: #fff;
    }

    .table-header-actions .btn-success[b-fsa12s9nlb] {
        background: var(--emerald-600);
        border-color: var(--emerald-600);
        color: #fff;
    }

/* =========================================================
   RESULTS AREA
   ========================================================= */

.billing-manage-body[b-fsa12s9nlb] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.billing-table-scroll[b-fsa12s9nlb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

    .billing-table-scroll[b-fsa12s9nlb]::-webkit-scrollbar {
        width: 6px;
    }

    .billing-table-scroll[b-fsa12s9nlb]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

    /* =========================================================
   TABLE STRUCTURE (::deep into BillingTable)
   ========================================================= */

    .billing-table-scroll[b-fsa12s9nlb]  table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13.5px;
    }

    .billing-table-scroll[b-fsa12s9nlb]  thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left !important;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700 !important;
        color: var(--ink-soft) !important;
        background: var(--surface-muted) !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border) !important;
        white-space: nowrap;
        vertical-align: middle !important;
    }

        .billing-table-scroll[b-fsa12s9nlb]  thead th:last-child {
            text-align: right !important;
        }

    .billing-table-scroll[b-fsa12s9nlb]  tbody td {
        border-bottom: 1px solid #F0F1F7 !important;
        vertical-align: middle !important;
        color: var(--ink);
    }

    .billing-table-scroll[b-fsa12s9nlb]  tbody tr:last-child td {
        border-bottom: none !important;
    }

    .billing-table-scroll[b-fsa12s9nlb]  tbody tr:hover {
        background: var(--surface-muted);
    }

/* =========================================================
   TABLE CELLS (Matching Patient Records)
   ========================================================= */

.bill-no[b-fsa12s9nlb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

.bill-date[b-fsa12s9nlb] {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.patient-name[b-fsa12s9nlb] {
    font-weight: 600;
    color: var(--ink);
    font-size: 13.5px;
}

.patient-sub-text[b-fsa12s9nlb] {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.amount-strong[b-fsa12s9nlb] {
    font-weight: 700;
    color: var(--ink);
    font-size: 13.5px;
}

.amount-due[b-fsa12s9nlb] {
    font-weight: 700;
    color: var(--rose-600);
    font-size: 13.5px;
}

.amount-zero[b-fsa12s9nlb] {
    font-weight: 600;
    color: var(--emerald-600);
    font-size: 13.5px;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

.billing-status-badge[b-fsa12s9nlb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
}

.status-paid[b-fsa12s9nlb] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.status-partial[b-fsa12s9nlb] {
    background: var(--info-100);
    color: var(--info-600);
}

.status-due[b-fsa12s9nlb] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.status-refunded[b-fsa12s9nlb] {
    background: var(--rose-100);
    color: var(--rose-600);
}

/* =========================================================
   ROW ACTIONS (Print + 3 Dots)
   ========================================================= */

.tbl-act[b-fsa12s9nlb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

    .tbl-act .btn[b-fsa12s9nlb] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 34px;
        min-width: 92px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .tbl-act .btn .mdi[b-fsa12s9nlb] {
            font-size: 16px;
            line-height: 1;
        }

        .tbl-act .btn:hover:not(:disabled)[b-fsa12s9nlb] {
            transform: translateY(-1px);
        }

    /* The "Print" Button - Teal like "Book" */
    .tbl-act .btn-info[b-fsa12s9nlb] {
        background: var(--info-600);
        border-color: var(--info-600);
        color: #fff;
    }

        .tbl-act .btn-info:hover[b-fsa12s9nlb] {
            filter: brightness(.92);
            color: #fff;
        }

/* "More" icon button */
.action-more-btn.btn[b-fsa12s9nlb] {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    min-width: 0;
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink-soft);
}

    .action-more-btn.btn:hover[b-fsa12s9nlb] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
    }

.action-more-btn[b-fsa12s9nlb]::after {
    display: none;
}

.action-more-btn .mdi[b-fsa12s9nlb] {
    font-size: 18px;
}

/* =========================================================
   DROPDOWN MENU (Matching Patient Records exactly)
   ========================================================= */

.patient-action-menu[b-fsa12s9nlb] {
    min-width: 180px; /* Slightly wider */
    margin-top: 8px !important;
    padding: 8px; /* More inner padding */
    border: none; /* No hard border */
    border-radius: 12px; /* Softer corners */
    background: var(--surface);
    /* The key difference: A much softer, larger shadow */
    box-shadow: 0 10px 40px rgba(16, 24, 39, 0.12), 0 4px 12px rgba(16, 24, 39, 0.08);
}

    .patient-action-menu .patient-action-item[b-fsa12s9nlb] {
        display: flex;
        width: 100%;
        min-height: 42px; /* Taller items for better touch/click area */
        align-items: center;
        gap: 12px; /* More space between icon and text */
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13.5px; /* Slightly larger text */
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease;
    }

        .patient-action-menu .patient-action-item .mdi[b-fsa12s9nlb] {
            width: 20px; /* Fixed width for icon alignment */
            display: inline-flex;
            justify-content: center;
            font-size: 18px; /* Larger icons */
        }

    /* Colors (Kept exactly as they are) */
    .patient-action-menu .action-view[b-fsa12s9nlb] {
        color: var(--primary);
    }

        .patient-action-menu .action-view:hover[b-fsa12s9nlb] {
            background: var(--primary-soft);
        }

    .patient-action-menu .action-edit[b-fsa12s9nlb] {
        color: var(--amber-600);
    }

        .patient-action-menu .action-edit:hover[b-fsa12s9nlb] {
            background: var(--amber-100);
        }

    .patient-action-menu .action-delete[b-fsa12s9nlb] {
        color: var(--rose-600);
    }

        .patient-action-menu .action-delete:hover[b-fsa12s9nlb] {
            background: var(--rose-100);
        }

    .patient-action-menu .action-history[b-fsa12s9nlb] {
        color: var(--emerald-600);
    }

        .patient-action-menu .action-history:hover[b-fsa12s9nlb] {
            background: var(--emerald-100);
        }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
    .modern-table-header[b-fsa12s9nlb] {
        align-items: stretch;
        gap: 10px;
    }

    .table-header-search[b-fsa12s9nlb] {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .table-header-actions[b-fsa12s9nlb] {
        order: 2;
        justify-content: flex-start;
    }

    .table-header-title[b-fsa12s9nlb] {
        order: 1;
    }
}

@media (max-width: 640px) {
    .billing-manage-page[b-fsa12s9nlb] {
        padding: 14px 12px 4px;
        height: auto;
        min-height: 0;
    }

    .billing-manage-card[b-fsa12s9nlb] {
        overflow: visible;
    }

    .billing-table-scroll[b-fsa12s9nlb] {
        overflow-y: visible;
    }

    .table-header-actions .btn span[b-fsa12s9nlb] {
        display: none;
    }

    .table-header-actions .btn[b-fsa12s9nlb] {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }
}

/* =========================================================
   MODALS (Kept exactly as is)
   ========================================================= */

.modal-overlay[b-fsa12s9nlb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog-box[b-fsa12s9nlb] {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog-header[b-fsa12s9nlb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-dialog-header .card-title[b-fsa12s9nlb] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.modal-close-btn[b-fsa12s9nlb] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

    .modal-close-btn:hover[b-fsa12s9nlb] {
        background-color: #e2e8f0;
        color: #0f172a;
    }

.modal-dialog-body[b-fsa12s9nlb] {
    padding: 1.25rem;
}

.billing-summary-box[b-fsa12s9nlb] {
    display: flex;
    justify-content: space-between;
    background-color: #f1f5f9;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.summary-item[b-fsa12s9nlb] {
    display: flex;
    flex-direction: column;
}

.field-grid.cols-2[b-fsa12s9nlb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.field[b-fsa12s9nlb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .field label[b-fsa12s9nlb] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #334155;
    }

.form-control[b-fsa12s9nlb], select[b-fsa12s9nlb] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
    outline: none;
}

    .form-control:focus[b-fsa12s9nlb], select:focus[b-fsa12s9nlb] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

.modal-dialog-footer[b-fsa12s9nlb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.modal-dialog-box.modal-lg[b-fsa12s9nlb] {
    max-width: 800px;
}


.action-dropdown[b-fsa12s9nlb] {
    position: relative;
    z-index: 5;
}

.patient-action-menu[b-fsa12s9nlb] {
    z-index: 1060 !important;
}

/* Only relax overflow on the OUTER card, not the scroll container
   — .billing-table-scroll must keep overflow-y:auto to scroll rows. */
.billing-manage-card[b-fsa12s9nlb] {
    overflow: visible;
}


/* =========================================================
   PAYMENT DETAILS MODAL
   ========================================================= */

.payment-dialog-body[b-fsa12s9nlb] {
    padding: 0 !important; /* the summary strip + table manage their own spacing */
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Summary strip ---- */
.payment-summary-strip[b-fsa12s9nlb] {
    display: flex;
    gap: 24px;
    padding: 14px 20px;
    background: var(--surface-muted, #F8F9FC);
    border-bottom: 1px solid var(--border, #E2E6ED);
    flex: 0 0 auto;
}

.payment-summary-item[b-fsa12s9nlb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-summary-label[b-fsa12s9nlb] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft, #667085);
}

.payment-summary-value[b-fsa12s9nlb] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #101827);
}

.payment-summary-amount[b-fsa12s9nlb] {
    color: var(--emerald-600, #059669);
}

/* ---- Desktop table ---- */
.billing-table-wrapper[b-fsa12s9nlb] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 4px;
}

.billing-table[b-fsa12s9nlb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .billing-table thead th[b-fsa12s9nlb] {
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
        padding: 12px 16px;
        background: var(--surface, #fff);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-soft, #667085);
        border-bottom: 1px solid var(--border, #E2E6ED);
        white-space: nowrap;
    }

        .billing-table thead th.col-amount[b-fsa12s9nlb] {
            text-align: right;
        }

    .billing-table td[b-fsa12s9nlb] {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: var(--ink, #101827);
    }

        .billing-table td.col-amount[b-fsa12s9nlb] {
            text-align: right;
        }

    .billing-table tbody tr:last-child td[b-fsa12s9nlb] {
        border-bottom: none;
    }

    .billing-table tbody tr:hover[b-fsa12s9nlb] {
        background: var(--surface-muted, #F8F9FC);
    }

.payment-remarks[b-fsa12s9nlb] {
    color: var(--ink-soft, #667085);
    font-size: 12.5px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Mobile cards ---- */
.payment-mobile-list[b-fsa12s9nlb] {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
}

.payment-mobile-card[b-fsa12s9nlb] {
    border: 1px solid var(--border, #E2E6ED);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--surface, #fff);
}

.payment-mobile-top[b-fsa12s9nlb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.payment-mobile-row[b-fsa12s9nlb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
}

    .payment-mobile-row > span:first-child[b-fsa12s9nlb] {
        color: var(--ink-soft, #667085);
        flex-shrink: 0;
    }

@media (max-width: 720px) {
    .payment-dialog-body .desktop-view[b-fsa12s9nlb] {
        display: none;
    }

    .payment-mobile-list[b-fsa12s9nlb] {
        display: flex;
    }
}
/* /Pages/Billing/BillingTable.razor.rz.scp.css */
/* =========================================================
   BILLING TABLE — matches AppointmentTable's look & density.
   Every column has an explicit width so no single column
   (previously Patient Details) silently eats leftover space.
   Lives inside the page card, so no border/radius of its own.
   ========================================================= */

.billing-table-wrapper[b-dv20azqhue] {
    background: transparent;
}

.billing-table tbody tr:last-child td:first-child[b-dv20azqhue] {
    border-bottom-left-radius: var(--radius-lg, 18px);
}

.billing-table tbody tr:last-child td:last-child[b-dv20azqhue] {
    border-bottom-right-radius: var(--radius-lg, 18px);
}

.billing-table[b-dv20azqhue] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

    /* Column widths sum to 100% so the table fills the card
       edge-to-edge with no dead space. */
    .billing-table .col-bill[b-dv20azqhue] {
        width: 17%;
    }

    .billing-table .col-patient[b-dv20azqhue] {
        width: 22%;
    }

    .billing-table .col-amount[b-dv20azqhue] {
        width: 11%;
    }

    .billing-table .col-status[b-dv20azqhue] {
        width: 12%;
    }

    .billing-table .col-action[b-dv20azqhue] {
        width: 16%;
    }

    .billing-table thead th[b-dv20azqhue] {
        text-align: left;
        padding: 8px 12px;
        background: var(--surface-muted, #F8F9FC);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-soft, #667085);
        border-bottom: 1px solid var(--border, #E2E6ED);
        white-space: nowrap;
        vertical-align: middle;
    }

        .billing-table thead th.th-action[b-dv20azqhue] {
            text-align: right;
        }

    .billing-table td[b-dv20azqhue] {
        padding: 6px 12px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: var(--ink, #101827);
    }

    .billing-table tbody tr[b-dv20azqhue] {
        transition: background .12s ease;
    }

        .billing-table tbody tr:hover[b-dv20azqhue] {
            background: var(--surface-muted, #F8F9FC);
        }

        .billing-table tbody tr:last-child td[b-dv20azqhue] {
            border-bottom: none;
        }

/* =========================================================
   BILL NO / DATE — single row, no wrap
   ========================================================= */

.bill-cell[b-dv20azqhue] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}


.token-chip[b-dv20azqhue] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

    .token-chip .mdi[b-dv20azqhue] {
        font-size: 13px;
    }

.bill-date[b-dv20azqhue] {
    font-size: 11.5px;
    color: var(--ink-soft, #667085);
    white-space: nowrap;
}

/* =========================================================
   PATIENT
   ========================================================= */

.bill-cell[b-dv20azqhue] {
    display: flex;
    flex-direction: column; /* <-- stack, not row */
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
    min-width: 0;
}

.patient-avatar[b-dv20azqhue] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--primary-soft, #EDEBFF);
    color: var(--primary, #5B4FE5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.patient-info[b-dv20azqhue] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.patient-name[b-dv20azqhue] {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink, #101827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-sub-text[b-dv20azqhue] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary, #5B4FE5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .patient-sub-text .mdi[b-dv20azqhue] {
        font-size: 12.5px;
        flex-shrink: 0;
    }

/* =========================================================
   AMOUNTS
   ========================================================= */

.amount-strong[b-dv20azqhue],
.amount-due[b-dv20azqhue],
.amount-zero[b-dv20azqhue] {
    font-size: 13px;
    white-space: nowrap;
}

.amount-strong[b-dv20azqhue] {
    font-weight: 700;
    color: var(--ink, #101827);
}

.amount-due[b-dv20azqhue] {
    font-weight: 700;
    color: var(--rose-600, #E11D48);
}

.amount-zero[b-dv20azqhue] {
    font-weight: 600;
    color: var(--emerald-600, #059669);
}

/* =========================================================
   STATUS
   ========================================================= */

.billing-status-badge[b-dv20azqhue] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-paid[b-dv20azqhue] {
    background: var(--emerald-100, #D1FAE5);
    color: var(--emerald-600, #059669);
}

.status-partial[b-dv20azqhue] {
    background: var(--info-100, #E0F2FE);
    color: var(--info-600, #0891B2);
}

.status-due[b-dv20azqhue] {
    background: var(--amber-100, #FEF3C7);
    color: var(--amber-600, #D97706);
}

.status-refunded[b-dv20azqhue] {
    background: var(--rose-100, #FFE4E9);
    color: var(--rose-600, #E11D48);
}

/* =========================================================
   ROW ACTIONS — identical sizing/behaviour to AppointmentTable
   ========================================================= */

.tbl-act[b-dv20azqhue] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

    .tbl-act .btn[b-dv20azqhue] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .tbl-act .btn .mdi[b-dv20azqhue] {
            font-size: 14px;
            line-height: 1;
        }

        .tbl-act .btn:hover:not(:disabled)[b-dv20azqhue] {
            transform: translateY(-1px);
        }

    .tbl-act .consult-btn[b-dv20azqhue] {
        min-width: 76px;
    }

    .tbl-act .btn-primary[b-dv20azqhue] {
        color: #fff;
    }

        .tbl-act .btn-primary:hover[b-dv20azqhue] {
            background: var(--primary-dark, #3D33B0);
            border-color: var(--primary-dark, #3D33B0);
            color: #fff;
        }

    .tbl-act .btn-secondary[b-dv20azqhue] {
        background: var(--surface-muted, #F8F9FC);
        border-color: var(--border, #E2E6ED);
        color: var(--ink-soft, #667085);
    }

.action-more-btn.btn[b-dv20azqhue] {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    min-width: 0;
    background: var(--surface, #fff);
    border-color: var(--border, #E2E6ED);
    color: var(--ink-soft, #667085);
}

    .action-more-btn.btn:hover[b-dv20azqhue] {
        border-color: var(--primary, #5B4FE5);
        color: var(--primary, #5B4FE5);
        background: var(--primary-soft, #EDEBFF);
    }

.action-more-btn[b-dv20azqhue]::after {
    display: none;
}

.action-more-btn .mdi[b-dv20azqhue] {
    font-size: 16px;
}

/* =========================================================
   DROPDOWN MENU — same styling as AppointmentTable's
   ========================================================= */

.action-dropdown[b-dv20azqhue] {
    position: relative;
    z-index: 5;
}

.patient-action-menu[b-dv20azqhue] {
    min-width: 180px;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--border, #E2E6ED);
    border-radius: 9px;
    background: var(--surface, #fff);
    box-shadow: 0 16px 36px rgba(16, 24, 39, .14);
    z-index: 1060 !important;
}

    .patient-action-menu .patient-action-item[b-dv20azqhue] {
        display: flex;
        width: 100%;
        min-height: 36px;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background .15s ease;
    }

        .patient-action-menu .patient-action-item .mdi[b-dv20azqhue] {
            width: 18px;
            display: inline-flex;
            justify-content: center;
            font-size: 16px;
        }

    .patient-action-menu .action-billing[b-dv20azqhue] {
        color: var(--primary, #5B4FE5);
    }

        .patient-action-menu .action-billing:hover[b-dv20azqhue] {
            background: var(--primary-soft, #EDEBFF);
        }

    .patient-action-menu .action-edit[b-dv20azqhue] {
        color: var(--amber-600, #D97706);
    }

        .patient-action-menu .action-edit:hover[b-dv20azqhue] {
            background: var(--amber-100, #FEF3C7);
        }

    .patient-action-menu .action-cancel[b-dv20azqhue] {
        color: #b91c1c;
    }

        .patient-action-menu .action-cancel:hover[b-dv20azqhue] {
            background: #fef2f2;
            color: #991b1b;
        }

/* =========================================================
   EMPTY STATE
   ========================================================= */

.billing-empty-state[b-dv20azqhue] {
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-soft, #667085);
}

    .billing-empty-state .empty-icon[b-dv20azqhue] {
        font-size: 32px;
        color: var(--ink-soft, #667085);
        display: block;
        margin-bottom: 8px;
    }

    .billing-empty-state h4[b-dv20azqhue] {
        margin: 0 0 4px;
        color: var(--ink, #101827);
        font-size: 15px;
        font-weight: 700;
    }

    .billing-empty-state p[b-dv20azqhue] {
        margin: 0;
        font-size: 13px;
    }

/* =========================================================
   MOBILE / TABLET CARD VIEW
   ========================================================= */

.mobile-view[b-dv20azqhue] {
    display: none;
}

.billing-mobile-list[b-dv20azqhue] {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.billing-mobile-card[b-dv20azqhue] {
    border: 1px solid var(--border, #E2E6ED);
    border-radius: 13px;
    padding: 14px;
    background: var(--surface, #fff);
}

.mobile-card-top[b-dv20azqhue] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-card-body[b-dv20azqhue] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-row[b-dv20azqhue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

    .mobile-row > span:first-child[b-dv20azqhue] {
        color: var(--ink-soft, #667085);
    }

.mobile-actions .tbl-act[b-dv20azqhue] {
    justify-content: stretch;
}

    .mobile-actions .tbl-act .consult-btn[b-dv20azqhue] {
        flex: 1;
    }

@media (max-width: 1024px) {
    .desktop-view[b-dv20azqhue] {
        display: none;
    }

    .billing-mobile-list.mobile-view[b-dv20azqhue] {
        display: flex;
    }
}
/* /Pages/Billing/BillReceiptPrintView.razor.rz.scp.css */
.receipt-drawer-backdrop[b-dfst0a905m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}

.receipt-drawer-panel[b-dfst0a905m] {
    --primary: var(--hms-primary, #4338ca);
    --primary-soft: #eef2ff;
    --ink: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    width: 720px;
    max-width: 100%;
    height: 100%;
    background: #f4f7fb;
    overflow-y: auto;
    padding: 14px 16px;
}

.receipt-drawer-header[b-dfst0a905m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .receipt-drawer-header h5[b-dfst0a905m] {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

.receipt-close-btn[b-dfst0a905m] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: white;
    color: #475569;
    cursor: pointer;
}

.receipt-preview-wrap[b-dfst0a905m] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- the printable card itself — uses nearly the full panel
   width now, instead of floating at 640px inside a 720px panel ---- */
.receipt-doc[b-dfst0a905m] {
    width: 100%;
    max-width: 688px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    overflow: hidden;
    padding: 0 0 18px;
}

.receipt-topline[b-dfst0a905m] {
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #818cf8);
}

/* ---- header: brand left, status + bill no/date right.
   Grid (not wrapping flex) so the right column is always pinned
   to the right — a flex row here would sometimes drop the status
   block onto its own line once "Partially Paid" made it wider
   than "Paid", and a lone wrapped flex item re-centers itself
   instead of staying right-aligned. Grid doesn't have that failure
   mode: column 2 is sized to its content and never wraps below
   column 1. */
.receipt-header[b-dfst0a905m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--border);
}

.receipt-brand[b-dfst0a905m] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.receipt-logo-img[b-dfst0a905m] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(67, 56, 202, .28);
}

.receipt-logo-fallback[b-dfst0a905m] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), #312e81);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(67, 56, 202, .28);
}

.receipt-doc .hospital-name[b-dfst0a905m] {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--ink);
}

.receipt-doc .hospital-tagline[b-dfst0a905m] {
    margin: 1px 0 0;
    font-size: 10.5px;
    color: var(--muted);
}

.receipt-doc .hospital-meta[b-dfst0a905m] {
    margin: 3px 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 260px;
}

.receipt-aux[b-dfst0a905m] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    min-width: 0;
}

.receipt-doc-sub[b-dfst0a905m] {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    text-align: right;
}

/* ---- status chip ---- */
.receipt-status-chip[b-dfst0a905m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .receipt-status-chip i[b-dfst0a905m] {
        font-size: 13px;
    }

.status-paid[b-dfst0a905m] {
    background: #ecfdf3;
    color: #15803d;
    border-color: #86efac;
}

.status-partial[b-dfst0a905m] {
    background: #fefce8;
    color: #854d0e;
    border-color: #fde68a;
}

.status-due[b-dfst0a905m] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.status-refunded[b-dfst0a905m] {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

/* ---- meta grid ---- */
.receipt-meta-grid[b-dfst0a905m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    margin: 0 0 14px;
}

.receipt-meta-col[b-dfst0a905m] {
    padding: 12px 24px;
}

    .receipt-meta-col + .receipt-meta-col[b-dfst0a905m] {
        border-left: 1px solid var(--border);
    }

.receipt-meta-col-title[b-dfst0a905m] {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .receipt-meta-col-title i[b-dfst0a905m] {
        font-size: 13px;
        color: var(--primary);
    }

.receipt-meta-row[b-dfst0a905m] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: 12px;
}

    .receipt-meta-row + .receipt-meta-row[b-dfst0a905m] {
        border-top: 1px dashed #eef0f4;
    }

.receipt-meta-label[b-dfst0a905m] {
    color: var(--muted);
}

.receipt-meta-value[b-dfst0a905m] {
    font-weight: 700;
    text-align: right;
    color: var(--ink);
}

/* ---- section titles ---- */
.receipt-section-title[b-dfst0a905m] {
    margin: 0 0 8px;
    padding: 0 24px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .receipt-section-title[b-dfst0a905m]::before {
        content: '';
        width: 4px;
        height: 13px;
        border-radius: 2px;
        background: var(--primary);
    }

/* ---- service table ---- */
.receipt-table[b-dfst0a905m] {
    width: calc(100% - 48px);
    margin: 0 24px 14px;
    border-collapse: collapse;
    font-size: 12px;
}

    .receipt-table th[b-dfst0a905m], .receipt-table td[b-dfst0a905m] {
        border: 1px solid var(--border);
        padding: 7px 10px;
        text-align: left;
    }

    .receipt-table thead th[b-dfst0a905m] {
        background: var(--primary-soft);
        color: #3730a3;
        font-weight: 800;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .receipt-table td.num[b-dfst0a905m], .receipt-table th.num[b-dfst0a905m] {
        text-align: right;
        font-family: 'Courier New', monospace;
    }

    .receipt-table td.center[b-dfst0a905m] {
        text-align: center;
        color: var(--muted);
    }

.row-sub[b-dfst0a905m] {
    color: #94a3b8;
    font-size: 10.5px;
}

/* =========================================================
   TOTALS + AMOUNT PAID — side by side instead of two
   full-width stacked blocks; this pair used to take ~260px
   of vertical space on its own, now it takes about 110px.
   ========================================================= */

.receipt-summary-row[b-dfst0a905m] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin: 0 24px 12px;
}

.receipt-totals[b-dfst0a905m] {
    flex: 1 1 auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 14px;
}

    .receipt-totals table[b-dfst0a905m] {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .receipt-totals td[b-dfst0a905m] {
        padding: 4px 0;
    }

        .receipt-totals td.label[b-dfst0a905m] {
            color: var(--muted);
        }

        .receipt-totals td.value[b-dfst0a905m] {
            text-align: right;
            font-family: 'Courier New', monospace;
            font-weight: 600;
        }

    .receipt-totals tr.final td[b-dfst0a905m] {
        border-top: 1.5px solid var(--ink);
        font-weight: 800;
        font-size: 13px;
        padding-top: 7px;
        color: var(--ink);
    }

.receipt-hero[b-dfst0a905m] {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #dbe0fb;
    border-radius: 10px;
    padding: 12px 16px;
}

.receipt-hero-mark[b-dfst0a905m] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #15803d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 5px 14px rgba(21, 128, 61, .28);
}

.receipt-hero-label[b-dfst0a905m] {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.receipt-hero-value[b-dfst0a905m] {
    margin: 2px 0 0;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

/* ---- payment breakdown: light chips instead of a bordered
   table (a 2-column table was heavy for 2-3 small numbers) ---- */
.receipt-payment-chips[b-dfst0a905m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 24px 12px;
}

.receipt-payment-chips-label[b-dfst0a905m] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

.receipt-payment-chip[b-dfst0a905m] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: #3730a3;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* ---- due banner ---- */
.receipt-due-banner[b-dfst0a905m] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 12px;
    padding: 9px 13px;
    border-radius: 9px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12px;
}

    .receipt-due-banner i[b-dfst0a905m] {
        font-size: 15px;
    }

/* ---- footer ---- */
.receipt-footer-note[b-dfst0a905m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 24px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

    .receipt-footer-note i[b-dfst0a905m] {
        font-size: 14px;
    }

/* ---- action bar ---- */
.receipt-print-bar[b-dfst0a905m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

    .receipt-print-bar .btn[b-dfst0a905m] {
        min-width: 150px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 600;
        font-size: 13px;
        padding: 9px 16px;
        border-radius: 9px;
        transition: transform .15s ease;
    }

        .receipt-print-bar .btn:hover[b-dfst0a905m] {
            transform: translateY(-1px);
        }

    .receipt-print-bar .btn-primary[b-dfst0a905m] {
        background: var(--primary);
        border-color: var(--primary);
    }

        .receipt-print-bar .btn-primary:hover[b-dfst0a905m],
        .receipt-print-bar .btn-primary:focus[b-dfst0a905m] {
            background: #3730a3;
            border-color: #3730a3;
        }

    .receipt-print-bar .btn-success[b-dfst0a905m] {
        background: #059669;
        border-color: #059669;
    }

        .receipt-print-bar .btn-success:hover[b-dfst0a905m],
        .receipt-print-bar .btn-success:focus[b-dfst0a905m] {
            background: #047857;
            border-color: #047857;
        }

/* Loading spinner shown on the Download PDF / Print Receipt buttons while
   the server renders the PDF. */
.spinner-inline[b-dfst0a905m] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: receipt-spin-b-dfst0a905m .7s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

@keyframes receipt-spin-b-dfst0a905m {
    to {
        transform: rotate(360deg);
    }
}

/* Print-only rules: hide app chrome, show only the receipt */
@media print {
    .receipt-drawer-backdrop[b-dfst0a905m] {
        position: static;
        background: none;
    }

    .receipt-drawer-header[b-dfst0a905m],
    .receipt-print-bar[b-dfst0a905m] {
        display: none !important;
    }

    .receipt-drawer-panel[b-dfst0a905m] {
        height: auto;
        padding: 0;
    }

    .receipt-doc[b-dfst0a905m] {
        box-shadow: none;
        border: none;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .receipt-drawer-panel[b-dfst0a905m] {
        width: 100%;
    }

    .receipt-header[b-dfst0a905m] {
        grid-template-columns: 1fr;
    }

    .receipt-aux[b-dfst0a905m] {
        align-items: flex-start;
        text-align: left;
    }

    .receipt-meta-grid[b-dfst0a905m] {
        grid-template-columns: 1fr;
    }

    .receipt-meta-col + .receipt-meta-col[b-dfst0a905m] {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .receipt-summary-row[b-dfst0a905m] {
        flex-direction: column;
    }

    .receipt-hero[b-dfst0a905m] {
        flex: 1 1 auto;
    }

    .receipt-header[b-dfst0a905m],
    .receipt-meta-col[b-dfst0a905m],
    .receipt-section-title[b-dfst0a905m],
    .receipt-table[b-dfst0a905m],
    .receipt-summary-row[b-dfst0a905m],
    .receipt-payment-chips[b-dfst0a905m],
    .receipt-due-banner[b-dfst0a905m],
    .receipt-footer-note[b-dfst0a905m] {
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    .receipt-table[b-dfst0a905m] {
        width: calc(100% - 32px);
    }

    .receipt-print-bar[b-dfst0a905m] {
        width: 100%;
    }

        .receipt-print-bar .btn[b-dfst0a905m] {
            flex: 1;
            min-width: 0;
        }
}
/* /Pages/Billing/CreateBillPage.razor.rz.scp.css */
/* =========================================================
   BILLING — CREATE BILL
   ========================================================= */

.create-bill-wrapper[b-baustesf7j] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);

    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;

    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 9px;

    background: var(--page-bg);
    padding: 16px 24px 20px;
    height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    min-height: 560px;
    display: flex;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

.create-bill-wrapper h2[b-baustesf7j],
.create-bill-wrapper h6[b-baustesf7j] {
    font-family: 'Sora', 'Inter', sans-serif;
}

.create-bill-page[b-baustesf7j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 39, .04), 0 10px 26px rgba(16, 24, 39, .06);
}

/* =========================================================
   TOP BAR
   ========================================================= */

.create-bill-topbar[b-baustesf7j] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

.create-bill-topbar h2[b-baustesf7j] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-circle[b-baustesf7j] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.back-circle:hover[b-baustesf7j] {
    border-color: var(--primary);
    color: var(--primary);
}

.topbar-actions[b-baustesf7j] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
/* =========================================================
   PATIENT INFO CARD
   ========================================================= */

.patient-info-card[b-baustesf7j] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    animation: patientInfoFadeIn-b-baustesf7j 0.25s ease-out;
    margin-bottom: 25px;
}

@keyframes patientInfoFadeIn-b-baustesf7j {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* =========================================================
   GRID — Proportional widths that fill the whole row
   ========================================================= */

.patient-info-grid[b-baustesf7j] {
    display: grid;
    /* Name(1.6) | UHID(1.6) | Mobile(1.2) | Age(0.7) | Gender(0.9) */
    grid-template-columns: 1.6fr 1.6fr 1.2fr 0.7fr 0.9fr;
    gap: 12px 20px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.patient-info-item[b-baustesf7j] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    /* UHID — allow full display, wrap if needed */
    .patient-info-item.uhid-item .info-value[b-baustesf7j] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all;
        line-height: 1.3;
    }

.info-label[b-baustesf7j] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.info-value[b-baustesf7j] {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .patient-info-grid[b-baustesf7j] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .patient-info-grid[b-baustesf7j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .patient-info-grid[b-baustesf7j] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .patient-info-card[b-baustesf7j] {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }

    .patient-info-avatar[b-baustesf7j] {
        width: 44px;
        height: 44px;
    }

        .patient-info-avatar .mdi[b-baustesf7j] {
            font-size: 30px;
        }

    .patient-info-grid[b-baustesf7j] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 16px;
    }
}

@media (max-width: 480px) {
    .patient-info-grid[b-baustesf7j] {
        grid-template-columns: 1fr;
    }
}
.btn-outline-soft[b-baustesf7j] {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .15s ease, color .15s ease;
}

.btn-outline-soft:hover[b-baustesf7j] {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-primary-strong[b-baustesf7j] {
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(91, 79, 229, .25);
    transition: transform .15s ease;
}

.btn-primary-strong:hover[b-baustesf7j] {
    transform: translateY(-1px);
    background: var(--primary-dark);
    color: white;
}

/* =========================================================
   BODY LAYOUT
   ========================================================= */

.create-bill-body[b-baustesf7j] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 340px;
}

.create-bill-left[b-baustesf7j] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 22px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.create-bill-right[b-baustesf7j] {
    min-height: 0;
    padding: 18px 22px;
    background: var(--surface-muted);
    overflow-y: auto;
}

.create-bill-left[b-baustesf7j]::-webkit-scrollbar,
.create-bill-right[b-baustesf7j]::-webkit-scrollbar {
    width: 6px;
}

.create-bill-left[b-baustesf7j]::-webkit-scrollbar-thumb,
.create-bill-right[b-baustesf7j]::-webkit-scrollbar-thumb {
    background: #CBD2E1;
    border-radius: 10px;
}

/* =========================================================
   FIELD GROUPS
   ========================================================= */

.field-group label[b-baustesf7j] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 6px;
    display: block;
}

.field-group label .req[b-baustesf7j] {
    color: var(--rose-600);
}

.top-fields-grid[b-baustesf7j] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    flex: 0 0 auto;
    margin-bottom:10px;
}

.plain-input[b-baustesf7j] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    background: var(--surface-muted);
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease;
}

.plain-input:focus[b-baustesf7j] {
    border-color: var(--primary);
    background: var(--surface);
}

.plain-input:disabled[b-baustesf7j] {
    color: var(--ink-soft);
    cursor: not-allowed;
}

.error-msg[b-baustesf7j] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--rose-600);
    font-weight: 500;
}

/* =========================================================
   SERVICE SEARCH DROPDOWN
   (moved out of the page's inline <style> block — same
   selectors, same markup, purely relocated + polished)
   ========================================================= */

.services-search-suggestions[b-baustesf7j] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-radius: 12px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: 0 16px 34px rgba(16, 24, 39, .12);
    list-style: none;
    padding: 6px;
}

.service-item[b-baustesf7j] {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.service-item:hover[b-baustesf7j] {
    background-color: var(--surface-muted);
}

.services-suggestion-content[b-baustesf7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.services-name[b-baustesf7j] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
}

.services-suggestion-content .text-muted[b-baustesf7j] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

/* =========================================================
   BILLING ITEMS SECTION
   ========================================================= */

.item-section-head[b-baustesf7j] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.item-section-head h6[b-baustesf7j] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
}

.item-links[b-baustesf7j] {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.item-links a[b-baustesf7j] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.item-links a:hover[b-baustesf7j] {
    color: var(--primary-dark);
}

/* Scrollable table zone — keeps the page height bounded even
   with a long list of billing items; the header stays put. */
.item-table-scroll[b-baustesf7j] {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.item-table-scroll[b-baustesf7j]::-webkit-scrollbar {
    width: 6px;
}

.item-table-scroll[b-baustesf7j]::-webkit-scrollbar-thumb {
    background: #CBD2E1;
    border-radius: 10px;
}

.item-table[b-baustesf7j] {
    width: 100%;
    border-collapse: collapse;
}

.item-table thead th[b-baustesf7j] {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--ink-soft);
    font-weight: 700;
    background: var(--surface);
    padding: 11px 10px;
    border-bottom: 1px solid var(--border);
}

.item-table td[b-baustesf7j] {
    padding: 8px 10px;
    border-bottom: 1px solid #F0F1F7;
}

.item-table tbody tr:hover[b-baustesf7j] {
    background: var(--surface-muted);
}

.item-table input[b-baustesf7j],
.item-table select[b-baustesf7j] {
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 36px;
    padding: 0 10px;
    background: var(--surface-muted);
    font-size: 13px;
    width: 100%;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease;
}

.item-table input:focus[b-baustesf7j],
.item-table select:focus[b-baustesf7j] {
    border-color: var(--primary);
    background: var(--surface);
}

.item-table input:disabled[b-baustesf7j] {
    color: var(--ink-soft);
    cursor: not-allowed;
}

.item-table .amt-cell[b-baustesf7j] {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.item-row-delete[b-baustesf7j] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.item-row-delete:hover[b-baustesf7j] {
    border-color: var(--rose-600);
    color: var(--rose-600);
    background: var(--rose-100);
}

.item-empty-hint[b-baustesf7j] {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease;
}

.item-empty-hint:hover[b-baustesf7j] {
    background: var(--primary-soft);
}

/* =========================================================
   PAYMENT / RIGHT PANEL
   ========================================================= */

.paid-amount-group[b-baustesf7j] {
    display: flex;
}

.paid-amount-group select[b-baustesf7j] {
    height: 42px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0 10px;
    font-size: 13.5px;
    flex: 0 0 108px;
    border-radius: 10px 0 0 10px;
    border-right: none;
    color: var(--ink);
    outline: none;
}

.paid-amount-group input[b-baustesf7j] {
    height: 42px;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding: 0 12px;
    font-size: 13.5px;
    flex: 1;
    background: var(--surface);
    color: var(--ink);
    outline: none;
    min-width: 0;
}

.paid-amount-group:focus-within[b-baustesf7j] {
    box-shadow: 0 0 0 2px var(--primary-soft);
    border-radius: 10px;
}

.add-payment-mode[b-baustesf7j],
.add-notes-link[b-baustesf7j] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    margin-top: 10px;
    text-decoration: none;
}

.add-payment-mode:hover[b-baustesf7j],
.add-notes-link:hover[b-baustesf7j] {
    color: var(--primary-dark);
}

.add-notes-link[b-baustesf7j] {
    margin-top: 20px;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.summary-card-box[b-baustesf7j] {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px 4px;
}

.summary-line[b-baustesf7j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 6px 0;
}

.summary-line.strong[b-baustesf7j] {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
}

/* Signature "perforated receipt" divider between line items and the payable total */
.summary-divider-scallop[b-baustesf7j] {
    height: 14px;
    margin: 14px -18px;
    background: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--surface) 7.5px) repeat-x;
    background-size: 14px 14px;
    border-top: 1px dashed var(--border);
}

/* Highlighted panel for the numbers that matter most at a glance */
.summary-total-panel[b-baustesf7j] {
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: 14px 14px 12px;
    margin: 0 -4px 12px;
}

.summary-total-panel .summary-line[b-baustesf7j] {
    color: var(--primary-dark);
}

.summary-total-panel .summary-line.strong[b-baustesf7j] {
    color: var(--ink);
}

.total-paid-line[b-baustesf7j] {
    color: var(--emerald-600);
    font-weight: 800;
    font-size: 16px;
    font-family: 'Sora', sans-serif;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(61, 51, 176, .2);
}

@media (max-width: 1180px) {
    .create-bill-wrapper[b-baustesf7j] {
        height: auto;
        min-height: 0;
    }

    .create-bill-body[b-baustesf7j] {
        grid-template-columns: 1fr;
    }

    .create-bill-left[b-baustesf7j],
    .create-bill-right[b-baustesf7j] {
        overflow-y: visible;
    }

    .create-bill-right[b-baustesf7j] {
        border-top: 1px solid var(--border);
    }

    .item-table-scroll[b-baustesf7j] {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .create-bill-wrapper[b-baustesf7j] {
        padding: 12px 14px 16px;
    }

    .top-fields-grid[b-baustesf7j] {
        grid-template-columns: 1fr;
    }

    .topbar-actions[b-baustesf7j] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/IPD/ActivityLogs.razor.rz.scp.css */
/* CSS for ActivityLogs component */
/* =========================================================
   ACTIVITY LOGS
   Scoped to .activity-logs
   ========================================================= */

.activity-logs[b-130bvejzs5] {
    --al-primary: #6f42c1;
    --al-primary-dark: #59339d;
    --al-primary-light: #f3effb;
    --al-border: #e4e1ea;
    --al-text: #292735;
    --al-muted: #777487;
    --al-bg: #f7f7f9;
    --al-white: #ffffff;
    min-height: 100vh;
    padding: 24px;
    background: var(--al-bg);
    color: var(--al-text);    font-family: Inter, "Segoe UI", Arial, sans-serif;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.al-page-header[b-130bvejzs5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.al-breadcrumb[b-130bvejzs5] {
    color: var(--al-muted);
    font-size: 13px;
    margin-bottom: 7px;
}

    .al-breadcrumb span[b-130bvejzs5] {
        margin: 0 7px;
        color: #aaa5b3;
    }

.al-page-header h1[b-130bvejzs5] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.al-page-header p[b-130bvejzs5] {
    margin: 6px 0 0;
    color: var(--al-muted);
    font-size: 13px;
}

.al-header-actions[b-130bvejzs5] {
    display: flex;
    gap: 9px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.al-btn[b-130bvejzs5] {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all .18s ease;
}

    .al-btn svg[b-130bvejzs5] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.al-btn-primary[b-130bvejzs5] {
    background: var(--al-primary);
    color: #fff;
}

    .al-btn-primary:hover[b-130bvejzs5] {
        background: var(--al-primary-dark);
    }

.al-btn-light[b-130bvejzs5] {
    background: #fff;
    border-color: var(--al-border);
    color: #514d5c;
}

    .al-btn-light:hover[b-130bvejzs5] {
        background: #f5f3f8;
    }

.al-btn-secondary[b-130bvejzs5] {
    background: #ede8f7;
    color: var(--al-primary-dark);
}

    .al-btn-secondary:hover[b-130bvejzs5] {
        background: #e3daf2;
    }


/* =========================================================
   PATIENT CARD
   ========================================================= */

.al-patient-card[b-130bvejzs5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.al-patient-avatar[b-130bvejzs5] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--al-primary-light);
    color: var(--al-primary);
    font-size: 14px;
    font-weight: 700;
}

.al-patient-main[b-130bvejzs5] {
    min-width: 0;
    flex: 1;
}

.al-patient-name[b-130bvejzs5] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
}

.al-patient-meta[b-130bvejzs5] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 5px;
    color: var(--al-muted);
    font-size: 12px;
}

.al-patient-side[b-130bvejzs5] {
    min-width: 125px;
    padding-left: 18px;
    border-left: 1px solid var(--al-border);
    text-align: right;
}

    .al-patient-side span[b-130bvejzs5] {
        display: block;
        margin-bottom: 3px;
        color: var(--al-muted);
        font-size: 11px;
    }

    .al-patient-side strong[b-130bvejzs5] {
        font-size: 12px;
    }

.al-status[b-130bvejzs5] {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .al-status.active[b-130bvejzs5] {
        background: #eaf7ef;
        color: #25804a;
    }


/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.al-summary-grid[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.al-summary-card[b-130bvejzs5] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 75px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .03);
}

.al-summary-icon[b-130bvejzs5] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .al-summary-icon svg[b-130bvejzs5] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .al-summary-icon.purple[b-130bvejzs5] {
        background: #f0eafa;
        color: #6f42c1;
    }

    .al-summary-icon.green[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

    .al-summary-icon.blue[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-summary-icon.orange[b-130bvejzs5] {
        background: #fff4e3;
        color: #a46d17;
    }

.al-summary-card span[b-130bvejzs5] {
    display: block;
    color: var(--al-muted);
    font-size: 10px;
}

.al-summary-card strong[b-130bvejzs5] {
    display: block;
    margin-top: 4px;
    color: #403b47;
    font-size: 17px;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.al-layout[b-130bvejzs5] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.al-main[b-130bvejzs5] {
    min-width: 0;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.al-sidebar[b-130bvejzs5] {
    position: sticky;
    top: 20px;
    padding: 9px;
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.al-sidebar-title[b-130bvejzs5] {
    padding: 8px 10px 10px;
    color: #8b8793;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.al-sidebar a[b-130bvejzs5] {
    min-height: 40px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5c5866;
    text-decoration: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    transition: all .18s ease;
}

    .al-sidebar a:hover[b-130bvejzs5] {
        color: var(--al-primary);
        background: var(--al-primary-light);
    }

    .al-sidebar a:first-of-type[b-130bvejzs5] {
        color: var(--al-primary);
        background: var(--al-primary-light);
    }

.al-sidebar svg[b-130bvejzs5] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SECTION
   ========================================================= */

.al-section[b-130bvejzs5] {
    scroll-margin-top: 20px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.al-section-header[b-130bvejzs5] {
    min-height: 68px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--al-border);
}

    .al-section-header > div:first-child[b-130bvejzs5] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

.al-section-number[b-130bvejzs5] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--al-primary-light);
    color: var(--al-primary);
    font-size: 10px;
    font-weight: 800;
}

.al-section-header h2[b-130bvejzs5] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.al-section-header p[b-130bvejzs5] {
    margin: 3px 0 0;
    color: var(--al-muted);
    font-size: 11px;
}


/* =========================================================
   BADGES
   ========================================================= */

.al-badge[b-130bvejzs5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

    .al-badge.active-badge[b-130bvejzs5] {
        background: #f0eafa;
        color: var(--al-primary-dark);
    }

    .al-badge.security[b-130bvejzs5] {
        background: #f0eafa;
        color: var(--al-primary-dark);
    }

.al-count-badge[b-130bvejzs5] {
    padding: 5px 9px;
    border-radius: 20px;
    background: #f4f2f7;
    color: #6f6977;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.al-overview-grid[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--al-border);
}

.al-info-item[b-130bvejzs5] {
    padding: 14px 16px;
    background: #fff;
}

    .al-info-item span[b-130bvejzs5] {
        display: block;
        margin-bottom: 5px;
        color: var(--al-muted);
        font-size: 10px;
    }

    .al-info-item strong[b-130bvejzs5] {
        display: block;
        color: #403b47;
        font-size: 12px;
    }


/* =========================================================
   FILTER SECTION
   ========================================================= */

.al-filter-section[b-130bvejzs5] {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 10px;
    overflow: hidden;
}

.al-filter-title[b-130bvejzs5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--al-border);
}

    .al-filter-title strong[b-130bvejzs5] {
        display: block;
        color: #403b47;
        font-size: 13px;
    }

    .al-filter-title span[b-130bvejzs5] {
        display: block;
        margin-top: 3px;
        color: var(--al-muted);
        font-size: 10px;
    }

.al-clear-filter[b-130bvejzs5] {
    border: 0;
    background: transparent;
    color: var(--al-primary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}

.al-filter-grid[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 16px 18px;
}

.al-field label[b-130bvejzs5] {
    display: block;
    margin-bottom: 6px;
    color: #575260;
    font-size: 10px;
    font-weight: 650;
}

.al-field input[b-130bvejzs5],
.al-field select[b-130bvejzs5] {
    width: 100%;
    height: 37px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #ddd9e3;
    border-radius: 6px;
    background: #fff;
    color: #403b47;
    font-family: inherit;
    font-size: 11px;
    outline: none;
}

    .al-field input:focus[b-130bvejzs5],
    .al-field select:focus[b-130bvejzs5] {
        border-color: #a98bd2;
        box-shadow: 0 0 0 3px rgba(111, 66, 193, .07);
    }

.al-filter-search > div[b-130bvejzs5] {
    position: relative;
}

.al-filter-search svg[b-130bvejzs5] {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    fill: none;
    stroke: #99939f;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.al-filter-search input[b-130bvejzs5] {
    padding-left: 31px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.al-timeline[b-130bvejzs5] {
    padding: 20px 22px 24px;
}

.al-timeline-item[b-130bvejzs5] {
    display: grid;
    grid-template-columns: 65px 38px minmax(0, 1fr);
    min-height: 125px;
}

.al-time[b-130bvejzs5] {
    padding-top: 5px;
    text-align: right;
}

    .al-time strong[b-130bvejzs5] {
        display: block;
        color: #48434f;
        font-size: 12px;
    }

    .al-time span[b-130bvejzs5] {
        display: block;
        margin-top: 2px;
        color: #99939f;
        font-size: 9px;
    }

.al-line[b-130bvejzs5] {
    position: relative;
    display: flex;
    justify-content: center;
}

    .al-line[b-130bvejzs5]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: -20px;
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
        background: #ddd8e4;
    }

    .al-line.last[b-130bvejzs5]::before {
        display: none;
    }

.al-timeline-dot[b-130bvejzs5] {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid #fff;
}

    .al-timeline-dot svg[b-130bvejzs5] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .al-timeline-dot.admission[b-130bvejzs5] {
        background: #f0eafa;
        color: #6f42c1;
    }

    .al-timeline-dot.clinical[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

    .al-timeline-dot.lab[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-timeline-dot.consultant[b-130bvejzs5] {
        background: #fff4e3;
        color: #a46d17;
    }

    .al-timeline-dot.document[b-130bvejzs5] {
        background: #f3effb;
        color: #6f42c1;
    }

    .al-timeline-dot.verified[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }


/* =========================================================
   EVENT CARD
   ========================================================= */

.al-event-card[b-130bvejzs5] {
    margin: 0 0 15px 8px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    transition: all .18s ease;
}

    .al-event-card:hover[b-130bvejzs5] {
        border-color: #cdbce0;
        box-shadow: 0 3px 12px rgba(45, 35, 65, .05);
    }

.al-event-top[b-130bvejzs5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.al-module-tag[b-130bvejzs5] {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
}

    .al-module-tag.admission[b-130bvejzs5] {
        background: #f0eafa;
        color: #6f42c1;
    }

    .al-module-tag.clinical[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

    .al-module-tag.lab[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-module-tag.consultant[b-130bvejzs5] {
        background: #fff4e3;
        color: #a46d17;
    }

    .al-module-tag.document[b-130bvejzs5] {
        background: #f3effb;
        color: #6f42c1;
    }

    .al-module-tag.verified[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

.al-event-card h3[b-130bvejzs5] {
    margin: 6px 0 0;
    color: #403b47;
    font-size: 13px;
    font-weight: 700;
}

.al-event-card p[b-130bvejzs5] {
    margin: 8px 0 10px;
    color: #6e6975;
    font-size: 11px;
    line-height: 1.55;
}

.al-event-status[b-130bvejzs5] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

    .al-event-status.completed[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

    .al-event-status.reviewed[b-130bvejzs5] {
        background: #f0eafa;
        color: #6f42c1;
    }

    .al-event-status.viewed[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-event-status.verified[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

.al-event-meta[b-130bvejzs5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding-top: 9px;
    border-top: 1px solid #f0edf3;
    color: #85808c;
    font-size: 9px;
}

    .al-event-meta strong[b-130bvejzs5] {
        color: #5e5965;
    }


/* =========================================================
   TABLES
   ========================================================= */

.al-mini-table-wrapper[b-130bvejzs5],
.al-security-table-wrapper[b-130bvejzs5] {
    overflow-x: auto;
}

.al-table[b-130bvejzs5] {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

    .al-table th[b-130bvejzs5] {
        padding: 10px 12px;
        background: #f8f7fa;
        border-bottom: 1px solid var(--al-border);
        color: #77717f;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .al-table td[b-130bvejzs5] {
        padding: 12px;
        border-bottom: 1px solid #eeeaf1;
        color: #5d5965;
        font-size: 11px;
        vertical-align: middle;
    }

    .al-table tbody tr:last-child td[b-130bvejzs5] {
        border-bottom: 0;
    }

    .al-table tbody tr:hover[b-130bvejzs5] {
        background: #fcfbfd;
    }

    .al-table td strong[b-130bvejzs5] {
        color: #403b47;
        font-size: 11px;
    }

.al-table-status[b-130bvejzs5],
.al-action[b-130bvejzs5] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 9px;
    font-weight: 700;
}

    .al-table-status.success[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }

    .al-action.viewed[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-action.created[b-130bvejzs5] {
        background: #eaf7ef;
        color: #267847;
    }


/* =========================================================
   INVESTIGATION CARDS
   ========================================================= */

.al-investigation-grid[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 18px;
}

.al-investigation-card[b-130bvejzs5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #fcfbfd;
}

.al-investigation-icon[b-130bvejzs5] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .al-investigation-icon svg[b-130bvejzs5] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .al-investigation-icon.lab[b-130bvejzs5] {
        background: #edf4fb;
        color: #3975a8;
    }

    .al-investigation-icon.scan[b-130bvejzs5] {
        background: #f0eafa;
        color: #6f42c1;
    }

.al-investigation-card span[b-130bvejzs5] {
    display: block;
    color: var(--al-muted);
    font-size: 9px;
}

.al-investigation-card strong[b-130bvejzs5] {
    display: block;
    margin-top: 3px;
    color: #403b47;
    font-size: 12px;
}

.al-investigation-card small[b-130bvejzs5] {
    display: block;
    margin-top: 4px;
    color: #8b8692;
    font-size: 9px;
}


/* =========================================================
   ADMINISTRATIVE
   ========================================================= */

.al-admin-grid[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--al-border);
}

.al-admin-item[b-130bvejzs5] {
    padding: 15px;
    background: #fff;
}

    .al-admin-item span[b-130bvejzs5] {
        display: block;
        color: var(--al-muted);
        font-size: 10px;
    }

    .al-admin-item strong[b-130bvejzs5] {
        display: block;
        margin-top: 5px;
        color: #403b47;
        font-size: 12px;
    }

    .al-admin-item small[b-130bvejzs5] {
        display: block;
        margin-top: 5px;
        color: #8b8692;
        font-size: 9px;
    }


/* =========================================================
   BILLING
   ========================================================= */

.al-billing-row[b-130bvejzs5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--al-border);
}

    .al-billing-row > div[b-130bvejzs5] {
        padding: 15px;
        background: #fff;
    }

    .al-billing-row span[b-130bvejzs5] {
        display: block;
        color: var(--al-muted);
        font-size: 10px;
    }

    .al-billing-row strong[b-130bvejzs5] {
        display: block;
        margin-top: 5px;
        color: #403b47;
        font-size: 13px;
    }


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.al-bottom-actions[b-130bvejzs5] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--al-border);
    border-radius: 9px;
    box-shadow: 0 -3px 15px rgba(45, 35, 65, .06);
}

    .al-bottom-actions > div[b-130bvejzs5] {
        display: flex;
        gap: 8px;
    }


/* =========================================================
   SMOOTH SCROLL
   ========================================================= */

html[b-130bvejzs5] {
    scroll-behavior: smooth;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .al-summary-grid[b-130bvejzs5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .al-layout[b-130bvejzs5] {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .al-overview-grid[b-130bvejzs5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .al-filter-grid[b-130bvejzs5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .al-billing-row[b-130bvejzs5] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 850px) {

    .activity-logs[b-130bvejzs5] {
        padding: 16px;
    }

    .al-page-header[b-130bvejzs5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .al-header-actions[b-130bvejzs5] {
        width: 100%;
    }

        .al-header-actions .al-btn[b-130bvejzs5] {
            flex: 1;
        }

    .al-layout[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }

    .al-sidebar[b-130bvejzs5] {
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 7px;
    }

    .al-sidebar-title[b-130bvejzs5] {
        display: none;
    }

    .al-sidebar a[b-130bvejzs5] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

        .al-sidebar a:first-of-type[b-130bvejzs5] {
            background: transparent;
        }

        .al-sidebar a:hover[b-130bvejzs5] {
            background: var(--al-primary-light);
        }

    .al-patient-card[b-130bvejzs5] {
        align-items: flex-start;
    }

    .al-patient-side[b-130bvejzs5] {
        display: none;
    }

    .al-investigation-grid[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .activity-logs[b-130bvejzs5] {
        padding: 10px;
    }

    .al-page-header h1[b-130bvejzs5] {
        font-size: 21px;
    }

    .al-summary-grid[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }

    .al-overview-grid[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }

    .al-filter-grid[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }

    .al-admin-grid[b-130bvejzs5],
    .al-billing-row[b-130bvejzs5] {
        grid-template-columns: 1fr;
    }

    .al-section-header[b-130bvejzs5] {
        align-items: flex-start;
        flex-direction: column;
    }

        .al-section-header > div:first-child[b-130bvejzs5] {
            width: 100%;
        }

    .al-patient-meta[b-130bvejzs5] {
        flex-direction: column;
        gap: 4px;
    }

    .al-timeline[b-130bvejzs5] {
        padding: 16px 10px;
    }

    .al-timeline-item[b-130bvejzs5] {
        grid-template-columns: 48px 30px minmax(0, 1fr);
    }

    .al-event-card[b-130bvejzs5] {
        margin-left: 5px;
        padding: 11px;
    }

    .al-event-top[b-130bvejzs5] {
        flex-direction: column;
        gap: 8px;
    }

    .al-event-meta[b-130bvejzs5] {
        flex-direction: column;
        gap: 5px;
    }

    .al-bottom-actions[b-130bvejzs5] {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

        .al-bottom-actions > div[b-130bvejzs5] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .al-bottom-actions .al-btn[b-130bvejzs5] {
            width: 100%;
        }
}
/* /Pages/IPD/Admission.razor.rz.scp.css */
/* =========================================================
   IPD ADMISSION — CREATE FORM
   ========================================================= */

/* Patient Search is a separate child component — force its input
   to fill the card instead of leaving dead space to the right
   (its own layout can't be edited from here). */
.ipd-card[b-i5gpuiq0ey]  input {
    width: 100%;
    box-sizing: border-box;
}

.ipd-card[b-i5gpuiq0ey]  > div {
    width: 100%;
}
/* =========================================================
   PATIENT SEARCH ROW — Search + Patient Info side-by-side
   ========================================================= */
.patient-search-row[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    gap: 174px;
    flex-wrap: nowrap; /* Changed from wrap to nowrap to keep them on one line */
}
/* Let the search section size to its content (no stretching) */
.patient-search-section[b-i5gpuiq0ey] {
    flex: 0 0 auto; /* Changed from 0 1 auto. Do not grow, do not shrink. */
    width: 100%;
    max-width: 380px; /* Slightly reduced to give the pill more breathing room */
}

/* When no patient is selected, search still only takes its natural width */
.patient-search-row:not(:has(.patient-pill)) .patient-search-section[b-i5gpuiq0ey] {
    flex: 1 1 auto;
}

/* =========================================================
   PATIENT PILL — sits right next to the search box
   ========================================================= */
.patient-pill[b-i5gpuiq0ey] {
    display: flex;
    flex-wrap: nowrap; /* Keep the patient info on one line */
    align-items: center;
    gap: 24px;
    margin-left: 0;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-muted);
    flex: 1 1 auto; /* Changed to 1 1 auto. Grow to fill remaining space. */
    min-height: 42px;
    animation: patientPillIn-b-i5gpuiq0ey 0.25s ease-out;
    overflow: hidden; /* Prevents content from spilling out if screen gets too small */
}
@keyframes patientPillIn-b-i5gpuiq0ey {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

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

.patient-pill-item[b-i5gpuiq0ey] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    white-space: nowrap;
}

    .patient-pill-item.strong[b-i5gpuiq0ey] {
        color: var(--ink);
        font-weight: 700;
    }

    .patient-pill-item .mdi[b-i5gpuiq0ey] {
        font-size: 16px;
        color: var(--primary);
        flex-shrink: 0;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .patient-search-row[b-i5gpuiq0ey] {
        flex-direction: column;
        align-items: stretch;
    }

    .patient-search-section[b-i5gpuiq0ey] {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .patient-pill[b-i5gpuiq0ey] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px; /* Reduced from 135px to keep items neatly grouped */
        margin-left: 0; /* Changed from 80px to 0 so it sits naturally next to the search box */
        padding: 10px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface-muted);
        flex: 0 1 auto;
        min-height: 42px;
        animation: patientPillIn-b-i5gpuiq0ey 0.25s ease-out;
    }
}
.ipd-page[b-i5gpuiq0ey] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --ink: var(--hms-ink, #101827);
    --ink-soft: #64748b;
    --border: var(--hms-border, #e2e8f0);
    --surface: #fff;
    --surface-muted: #f8fafc;
    --emerald-600: #059669;
    --emerald-100: #d1fae5;
    --amber-600: #d97706;
    --amber-100: #fef3c7;
    --rose-600: #e11d48;
    --rose-100: #fef2f2;
    margin: 0 auto;
    padding: 0px 40px 48px;
    color: var(--ink);
}

    .ipd-page h4[b-i5gpuiq0ey] {
        font-family: 'Sora', 'Inter', sans-serif;
    }


/* =========================================================
   BACK LINK
   ========================================================= */

.ipd-back-link[b-i5gpuiq0ey] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    padding: 6px 0;
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

    .ipd-back-link .mdi[b-i5gpuiq0ey] {
        font-size: 22px;
        line-height: 1;
        transition: transform 0.15s ease;
    }

    .ipd-back-link:hover[b-i5gpuiq0ey] {
        color: var(--primary);
    }

        .ipd-back-link:hover .mdi[b-i5gpuiq0ey] {
            transform: translateX(-3px);
        }
/* =========================================================
   HEADER
   ========================================================= */

.ipd-header[b-i5gpuiq0ey] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ipd-title[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    font-family: 'Sora', sans-serif;
}

    .ipd-title .mdi[b-i5gpuiq0ey] {
        color: var(--primary);
        font-size: 22px;
    }

.ipd-subtitle[b-i5gpuiq0ey] {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 12.5px;
}

.ipd-actions[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

    .ipd-actions .btn[b-i5gpuiq0ey] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        transition: transform 0.15s ease, filter 0.15s ease;
    }

        .ipd-actions .btn .mdi[b-i5gpuiq0ey] {
            font-size: 16px;
            line-height: 1;
        }

        .ipd-actions .btn:hover:not(:disabled)[b-i5gpuiq0ey] {
            transform: translateY(-1px);
        }

    /* Back button - secondary style */
    .ipd-actions .btn-secondary[b-i5gpuiq0ey] {
        background: var(--surface-muted, #f8f9fc);
        border: 1px solid var(--border, #e2e6ed);
        color: var(--ink-soft, #667085);
    }

        .ipd-actions .btn-secondary:hover[b-i5gpuiq0ey] {
            background: #eef2ff;
            border-color: var(--primary, #5b4fe5);
            color: var(--primary, #5b4fe5);
        }

    /* Disabled state */
    .ipd-actions .btn[disabled][b-i5gpuiq0ey] {
        opacity: 0.65;
        cursor: not-allowed;
    }

        .ipd-actions .btn[disabled]:hover[b-i5gpuiq0ey] {
            transform: none;
        }

/* =========================================================
   PATIENT SEARCH
   PatientSearch is a separate child component, so its internal
   markup can't be verified here — these ::deep rules are a
   best-effort to make its input stretch to the card's full
   width instead of leaving dead space beside it. If PatientSearch
   already handles its own width, these are harmless no-ops.
   ========================================================= */

.appointment-center-panel[b-i5gpuiq0ey] {
    margin-bottom: 16px;
}

.workflow-row[b-i5gpuiq0ey] {
    display: flex;
    gap: 16px;
    align-items: stretch; /* Ensures both cards are the same height */
}
/* Left side: Patient Search */
.workflow-search-card[b-i5gpuiq0ey] {
    flex: 1; /* Takes up remaining space */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);

}

/* Right side: Admission Date */
.workflow-date-card[b-i5gpuiq0ey] {
    flex: 0 0 320px; /* Fixed width for the date column */
    background: var(--surface);
    border: 1px solid var(--border);
    justify-content: center; /* Vertically centers the label + input */
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    gap: 6px; /* Matches the gap in .ipd-field */
}

    .workflow-date-card .workflow-title[b-i5gpuiq0ey] {
        margin-bottom: 4px; /* Slightly less margin to align with search title */
    }

    .workflow-date-card input[b-i5gpuiq0ey] {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        outline: none;
        background: var(--surface-muted);
        color: var(--ink);
        font-size: 13px;
        font-family: inherit;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

        .workflow-date-card input:focus[b-i5gpuiq0ey] {
            border-color: var(--primary);
            background: var(--surface);
            box-shadow: 0 0 0 3px var(--primary-soft);
        }

/* Responsive: Stack them on smaller screens */
@media (max-width: 768px) {
    .workflow-row[b-i5gpuiq0ey] {
        flex-direction: column;
    }

    .workflow-date-card[b-i5gpuiq0ey] {
        flex: 1 1 auto;
    }
}

    .workflow-search-card[b-i5gpuiq0ey]  input {
        width: 100%;
        box-sizing: border-box;
    }

    .workflow-search-card[b-i5gpuiq0ey]  > div {
        width: 100%;
    }

.workflow-title[b-i5gpuiq0ey] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

/* =========================================================
   SELECTED PATIENT CARD
   ========================================================= */

.patient-profile-card[b-i5gpuiq0ey] {
    background: linear-gradient(135deg, var(--primary-soft), #fff);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.patient-profile[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.patient-avatar[b-i5gpuiq0ey] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.patient-details h4[b-i5gpuiq0ey] {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.patient-details p[b-i5gpuiq0ey] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* =========================================================
   CARD
   ========================================================= */

.ipd-card[b-i5gpuiq0ey] {
    padding: 20px 22px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.ipd-card-header[b-i5gpuiq0ey] {
    margin-bottom: 16px;
}
.ipd-card-header[b-i5gpuiq0ey] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.ipd-card-title[b-i5gpuiq0ey] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

/* =========================================================
   FORM GRID / FIELDS
   ========================================================= */

.ipd-grid[b-i5gpuiq0ey] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 18px;
}

    /* Use on any card that only has 2 real fields, so the layout
   doesn't leave a dead 3rd column — Admission Information and
   Billing Information both use this until their 3rd field
   (Admission Type / Payment Category) has a backing model field. */
    .ipd-grid.ipd-grid-2[b-i5gpuiq0ey] {
        grid-template-columns: repeat(2, 1fr);
    }

.ipd-field[b-i5gpuiq0ey] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .ipd-field.full-width[b-i5gpuiq0ey] {
        grid-column: 1 / -1;
    }

    .ipd-field label[b-i5gpuiq0ey] {
        font-size: 12.5px;
        font-weight: 700;
        color: #334155;
    }

    .ipd-field input[b-i5gpuiq0ey],
    .ipd-field select[b-i5gpuiq0ey],
    .ipd-field textarea[b-i5gpuiq0ey] {
        height: 42px;
        padding: 0 12px;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        outline: none;
        background: var(--surface-muted);
        color: var(--ink);
        font-size: 13px;
        font-family: inherit;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .ipd-field textarea[b-i5gpuiq0ey] {
        height: auto;
        min-height: 82px;
        padding: 10px 12px;
        resize: vertical;
    }

        .ipd-field input:focus[b-i5gpuiq0ey],
        .ipd-field select:focus[b-i5gpuiq0ey],
        .ipd-field textarea:focus[b-i5gpuiq0ey] {
            border-color: var(--primary);
            background: var(--surface);
            box-shadow: 0 0 0 3px var(--primary-soft);
        }

    .ipd-field input:disabled[b-i5gpuiq0ey],
    .ipd-field select:disabled[b-i5gpuiq0ey] {
        color: var(--ink-soft);
        cursor: not-allowed;
    }

    .ipd-field small[b-i5gpuiq0ey] {
        color: var(--amber-600);
        font-size: 11px;
        font-weight: 600;
    }

/* Fills the same slot a select/input would occupy (same height,
   same border-radius) when there's nothing to select yet — so the
   row's rhythm holds instead of collapsing to a mismatched pill. */
.ipd-field-static[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-style: italic;
}

/* =========================================================
   STATUS BANNER (load error / validation error)
   ========================================================= */

.status-badge[b-i5gpuiq0ey] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
}

    .status-badge .mdi[b-i5gpuiq0ey] {
        font-size: 16px;
    }

    .status-badge.status-inactive[b-i5gpuiq0ey] {
        border: 1px solid #fecaca;
        background: var(--rose-100);
        color: var(--rose-600);
    }

    .status-badge .btn[b-i5gpuiq0ey] {
        margin-left: auto;
    }

/* =========================================================
   MULTI-SELECT / LOADING
   ========================================================= */

.table-spinner[b-i5gpuiq0ey] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: ipd-spin-b-i5gpuiq0ey .6s linear infinite;
}

.table-loading-state[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink-soft);
    font-size: 12.5px;
}

@keyframes ipd-spin-b-i5gpuiq0ey {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .ipd-grid[b-i5gpuiq0ey] {
        grid-template-columns: repeat(2, 1fr);
    }

        .ipd-grid.ipd-grid-2[b-i5gpuiq0ey] {
            grid-template-columns: 1fr;
        }
}

@media (max-width: 600px) {
    .ipd-grid[b-i5gpuiq0ey] {
        grid-template-columns: 1fr;
    }

    .ipd-field.full-width[b-i5gpuiq0ey] {
        grid-column: 1;
    }

    .ipd-header[b-i5gpuiq0ey] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ipd-actions[b-i5gpuiq0ey] {
        width: 100%;
    }

        .ipd-actions .btn[b-i5gpuiq0ey] {
            flex: 1;
        }

    .patient-profile[b-i5gpuiq0ey] {
        flex-direction: column;
        text-align: center;
    }
}


/* =========================================================
   WARD & BED SELECTOR BUTTON
   ========================================================= */

.ipd-ward-bed-btn[b-i5gpuiq0ey] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px; /* Matches the height of your other inputs */
    padding: 0 16px;
    /* Dashed purple border */
    border: 1.5px dashed #7c6cf0;
    border-radius: 999px; /* Pill shape */
    /* Light purple background */
    background: #f4f2ff;
    /* Purple text */
    color: #5B4FE5;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .ipd-ward-bed-btn:hover[b-i5gpuiq0ey] {
        background: #ebe8ff;
        border-color: #5B4FE5;
    }

    .ipd-ward-bed-btn:active[b-i5gpuiq0ey] {
        transform: scale(0.99);
    }

    .ipd-ward-bed-btn:focus-visible[b-i5gpuiq0ey] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.2);
    }
.req[b-i5gpuiq0ey] {
color:red;
}
/* Make the wrapper a proper block that fills the field */
.ipd-field .ipd-select-wrap[b-i5gpuiq0ey] {
    width: 100%;
    position: relative;
}

    /* Ensure the select inside the wrapper inherits the exact same styling
   as .ipd-field input and .ipd-field select */
    .ipd-field .ipd-select-wrap select[b-i5gpuiq0ey] {
        width: 100%;
        height: 42px;
        padding: 0 36px 0 12px; /* right padding leaves room for the chevron */
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        outline: none;
        background: var(--surface-muted);
        color: var(--ink);
        font-size: 13px;
        font-family: inherit;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

        .ipd-field .ipd-select-wrap select:focus[b-i5gpuiq0ey] {
            border-color: var(--primary);
            background: var(--surface);
            box-shadow: 0 0 0 3px var(--primary-soft);
        }
/* /Pages/IPD/AdmissionAssessment.razor.rz.scp.css */
.ipd-assessment[b-k6xrexh3qv] {
    min-height: 100vh;
    padding: 22px 24px 48px;
    background: #f6f7fb;
    color: #202b42;
}

.assessment-header[b-k6xrexh3qv],
.patient-card[b-k6xrexh3qv],
.assessment-layout[b-k6xrexh3qv] {
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
}

.assessment-header[b-k6xrexh3qv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.breadcrumb[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    color: #9299a8;
    font-size: 12px;
    font-weight: 500;
}

.breadcrumb a[b-k6xrexh3qv] {
    color: #6944c4;
    text-decoration: none;
}

.breadcrumb .mdi[b-k6xrexh3qv] {
    color: #b6a8d9;
    font-size: 15px;
}

.assessment-header h1[b-k6xrexh3qv] {
    margin: 0;
    color: #202b42;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.assessment-header p[b-k6xrexh3qv] {
    margin: 5px 0 0;
    color: #8b94a6;
    font-size: 12px;
}

.header-actions[b-k6xrexh3qv],
.action-buttons[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn[b-k6xrexh3qv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding: 0 15px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn:disabled[b-k6xrexh3qv] {
    cursor: wait;
    opacity: .6;
}

.btn-primary[b-k6xrexh3qv] {
    color: #fff;
    box-shadow: 0 4px 12px rgba(89, 51, 180, .18);
}

.btn-primary:hover:not(:disabled)[b-k6xrexh3qv] {
    background: #4b2a99;
}

.btn-outline[b-k6xrexh3qv] {
    border: 1px solid #d7cff1;
    background: #fff;
    color: #5b35b5;
}

.btn-outline:hover:not(:disabled)[b-k6xrexh3qv] {
    border-color: #a58bdc;
    background: #f7f4ff;
}

.btn-light[b-k6xrexh3qv] {
    border: 1px solid #dfe3ea;
    background: #fff;
    color: #667085;
}

.btn-light:hover:not(:disabled)[b-k6xrexh3qv] {
    background: #f8f9fb;
}

.btn-compact[b-k6xrexh3qv] {
    min-height: 34px;
    padding: 0 11px;
}

.patient-card[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e1e5ed;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(31, 43, 66, .04);
}

.patient-avatar[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background: #eee8ff;
    color: #5b35b5;
    font-size: 18px;
    font-weight: 700;
}

.patient-main[b-k6xrexh3qv] {
    min-width: 220px;
    margin-right: auto;
}

.patient-name[b-k6xrexh3qv] {
    color: #202b42;
    font-size: 16px;
    font-weight: 700;
}

.ipd-badge[b-k6xrexh3qv] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    margin-left: 6px;
    border-radius: 20px;
    background: #e7f8ef;
    color: #168553;
    font-size: 9px;
    font-weight: 700;
}

.patient-meta[b-k6xrexh3qv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: #7d8799;
    font-size: 11px;
}

.patient-meta span:nth-child(even)[b-k6xrexh3qv] {
    color: #c2c7d0;
}

.patient-info[b-k6xrexh3qv] {
    min-width: 125px;
    padding-left: 16px;
    border-left: 1px solid #edf0f4;
}

.patient-info small[b-k6xrexh3qv] {
    display: block;
    margin-bottom: 4px;
    color: #939baa;
    font-size: 10px;
}

.patient-info strong[b-k6xrexh3qv] {
    display: block;
    color: #303c54;
    font-size: 11px;
    font-weight: 600;
}

.assessment-layout[b-k6xrexh3qv] {
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.assessment-nav[b-k6xrexh3qv] {
    position: sticky;
    top: 15px;
    padding: 9px;
    background: #fff;
    border: 1px solid #e0e4ec;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(31, 43, 66, .04);
}

.clinical-nav-item[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 49px;
    padding: 7px 10px;
    margin-bottom: 4px;
    box-sizing: border-box;
    border-radius: 9px;
    color: #59657a;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.clinical-nav-item:last-child[b-k6xrexh3qv] {
    margin-bottom: 0;
}

.clinical-nav-item:hover[b-k6xrexh3qv],
.clinical-nav-item.active[b-k6xrexh3qv] {
    background: #eee8ff;
    color: #5933b4;
}

.clinical-icon[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 8px;
    background: #f2edff;
    color: #6742c2;
    font-size: 16px;
}

.clinical-nav-item.active .clinical-icon[b-k6xrexh3qv] {
    background: #fff;
    color: #5933b4;
}

.assessment-content[b-k6xrexh3qv] {
    min-width: 0;
}

.assessment-section[b-k6xrexh3qv] {
    scroll-margin-top: 20px;
    padding: 18px 19px;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid #e1e5ed;
    border-radius: 13px;
    box-shadow: 0 3px 12px rgba(31, 43, 66, .035);
}

.section-title[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.section-heading[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: #f1ecff;
    color: #6240bd;
    font-size: 17px;
}

.section-title h2[b-k6xrexh3qv] {
    margin: 0;
    color: #202b42;
    font-size: 15px;
    font-weight: 700;
}

.section-title p[b-k6xrexh3qv] {
    margin: 3px 0 0;
    color: #9199a8;
    font-size: 10px;
}

.required-note[b-k6xrexh3qv] {
    color: #a36b20;
    font-size: 10px;
    font-weight: 600;
}

.clinical-textarea[b-k6xrexh3qv],
.form-field textarea[b-k6xrexh3qv],
.form-field input[b-k6xrexh3qv],
.diagnosis-fields input[b-k6xrexh3qv] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce1e9;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #303c54;
    font-family: inherit;
    font-size: 12px;
}

.clinical-textarea[b-k6xrexh3qv],
.form-field textarea[b-k6xrexh3qv] {
    min-height: 105px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.clinical-textarea:focus[b-k6xrexh3qv],
.form-field textarea:focus[b-k6xrexh3qv],
.form-field input:focus[b-k6xrexh3qv],
.diagnosis-fields input:focus[b-k6xrexh3qv],
.field input:focus[b-k6xrexh3qv] {
    border-color: #7250c6;
    box-shadow: 0 0 0 3px rgba(114, 80, 198, .08);
}

.section-footer[b-k6xrexh3qv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
}

.character-count[b-k6xrexh3qv] {
    color: #a0a7b4;
    font-size: 10px;
}

.vitals-grid[b-k6xrexh3qv] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.field[b-k6xrexh3qv],
.form-field[b-k6xrexh3qv] {
    display: block;
    min-width: 0;
    color: #344158;
    font-size: 10px;
    font-weight: 600;
}

.field > span[b-k6xrexh3qv],
.form-field > span[b-k6xrexh3qv] {
    display: block;
    margin: 3px 0 5px;
    color: #949cab;
    font-size: 9px;
    font-weight: 400;
}

.field input[b-k6xrexh3qv],
.form-field input[b-k6xrexh3qv] {
    height: 36px;
    padding: 0 8px;
    font-size: 11px;
}

.bp-input[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bp-input input[b-k6xrexh3qv] {
    min-width: 0;
}

.bp-input b[b-k6xrexh3qv] {
    color: #8e96a5;
    font-size: 11px;
}

.examination-grid[b-k6xrexh3qv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.examination-column[b-k6xrexh3qv] {
    padding: 0 17px;
    border-right: 1px solid #edf0f4;
}

.examination-column:first-child[b-k6xrexh3qv] {
    padding-left: 0;
}

.examination-column:last-child[b-k6xrexh3qv] {
    padding-right: 0;
    border-right: 0;
}

.exam-row[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    border-bottom: 1px solid #f0f2f5;
}

.exam-row > span[b-k6xrexh3qv] {
    color: #414d63;
    font-size: 11px;
    font-weight: 500;
}

.exam-buttons[b-k6xrexh3qv] {
    display: flex;
    gap: 3px;
}

.exam-buttons button[b-k6xrexh3qv] {
    padding: 5px 7px;
    border: 1px solid #dce1e9;
    border-radius: 5px;
    background: #fff;
    color: #697488;
    font-family: inherit;
    font-size: 9px;
    cursor: pointer;
}

.exam-buttons button:hover[b-k6xrexh3qv],
.exam-buttons button.exam-selected[b-k6xrexh3qv] {
    border-color: #8d72cf;
    background: #eee8ff;
    color: #5933b4;
}

.full-field[b-k6xrexh3qv] {
    margin-top: 15px;
}

.full-field textarea[b-k6xrexh3qv] {
    display: block;
    min-height: 65px;
    margin-top: 6px;
}

.diagnosis-list[b-k6xrexh3qv] {
    display: grid;
    gap: 7px;
}

.diagnosis-item[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e8ee;
    border-radius: 8px;
    background: #fafbfc;
}

.diagnosis-fields[b-k6xrexh3qv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    flex: 1;
    gap: 8px;
}

.diagnosis-fields input[b-k6xrexh3qv] {
    height: 35px;
    padding: 0 9px;
    font-size: 11px;
}

.primary-check[b-k6xrexh3qv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: #59657a;
    font-size: 10px;
    cursor: pointer;
}

.primary-check input[b-k6xrexh3qv] {
    accent-color: #5933b4;
}

.icon-button[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: #f0f1f4;
    color: #7d8696;
    cursor: pointer;
}

.icon-button:hover[b-k6xrexh3qv] {
    background: #fdecec;
    color: #bd4747;
}

.treatment-grid[b-k6xrexh3qv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.form-field textarea[b-k6xrexh3qv] {
    display: block;
    min-height: 95px;
    margin-top: 6px;
    font-size: 11px;
}

.bottom-actions[b-k6xrexh3qv] {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 14px;
    margin-top: 5px;
    border: 1px solid #dedfe7;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 20px rgba(31, 43, 66, .10);
    backdrop-filter: blur(8px);
}

.assessment-status[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9299a7;
    font-size: 10px;
}

.assessment-status strong[b-k6xrexh3qv] {
    color: #b17718;
}

.status-complete + strong[b-k6xrexh3qv] {
    color: #168553;
}

.status-dot[b-k6xrexh3qv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d49a35;
}

.status-dot.status-complete[b-k6xrexh3qv] {
    background: #168553;
}

.assessment-state[b-k6xrexh3qv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 280px;
    color: #697488;
    font-size: 13px;
}

.assessment-state > .mdi[b-k6xrexh3qv] {
    color: #6944c4;
    font-size: 22px;
}

.assessment-error[b-k6xrexh3qv] {
    align-items: flex-start;
    padding-top: 90px;
}

.assessment-error strong[b-k6xrexh3qv] {
    color: #303c54;
}

.assessment-error p[b-k6xrexh3qv] {
    margin: 6px 0 16px;
    color: #7b8494;
}

@media (max-width: 1350px) {
    .patient-card[b-k6xrexh3qv] {
        flex-wrap: wrap;
    }

    .patient-info[b-k6xrexh3qv] {
        padding-left: 0;
        border-left: 0;
    }

    .vitals-grid[b-k6xrexh3qv] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1050px) {
    .assessment-layout[b-k6xrexh3qv] {
        grid-template-columns: 1fr;
    }

    .assessment-nav[b-k6xrexh3qv] {
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
    }

    .clinical-nav-item[b-k6xrexh3qv] {
        min-width: 145px;
        margin-bottom: 0;
    }

    .examination-grid[b-k6xrexh3qv] {
        grid-template-columns: 1fr;
    }

    .examination-column[b-k6xrexh3qv] {
        padding: 0;
        border-right: 0;
    }

    .assessment-header[b-k6xrexh3qv] {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .ipd-assessment[b-k6xrexh3qv] {
        padding: 12px;
    }

    .header-actions[b-k6xrexh3qv],
    .action-buttons[b-k6xrexh3qv] {
        width: 100%;
        flex-wrap: wrap;
    }

    .patient-main[b-k6xrexh3qv] {
        width: calc(100% - 70px);
    }

    .patient-info[b-k6xrexh3qv] {
        width: calc(50% - 10px);
    }

    .vitals-grid[b-k6xrexh3qv],
    .treatment-grid[b-k6xrexh3qv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-actions[b-k6xrexh3qv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-buttons .btn[b-k6xrexh3qv] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .assessment-header h1[b-k6xrexh3qv] {
        font-size: 20px;
    }

    .patient-info[b-k6xrexh3qv] {
        width: 100%;
    }

    .section-title[b-k6xrexh3qv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnosis-item[b-k6xrexh3qv] {
        align-items: stretch;
        flex-direction: column;
    }

    .diagnosis-fields[b-k6xrexh3qv] {
        grid-template-columns: 1fr;
    }

    .primary-check[b-k6xrexh3qv],
    .icon-button[b-k6xrexh3qv] {
        align-self: flex-end;
    }

    .vitals-grid[b-k6xrexh3qv],
    .treatment-grid[b-k6xrexh3qv] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/IPD/AdmissionList.razor.rz.scp.css */
/* =========================================================
   IPD ADMISSIONS LIST  (/ipd/admission)
   Mirrors the /patients page design language.
   ========================================================= */

.admission-list-page[b-668kgrfx91] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --info-600: #0891B2;
    --info-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    min-height: 520px;
    color: var(--ink);
}

    .admission-list-page h4[b-668kgrfx91],
    .admission-list-page h5[b-668kgrfx91] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

/* =========================================================
   CARD SHELL  (same as .patient-directory-card)
   ========================================================= */

.admission-list-card[b-668kgrfx91] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: visible !important;
}

/* =========================================================
   TOOLBAR  (fixed, never scrolls)
   ========================================================= */

.modern-table-header[b-668kgrfx91] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.table-header-title[b-668kgrfx91] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

    .table-header-title h4[b-668kgrfx91] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
    }

.table-count[b-668kgrfx91] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-muted);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* =========================================================
   SEARCH  (icon right, clear button too)
   ========================================================= */

.table-header-search[b-668kgrfx91] {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

.search-wrapper[b-668kgrfx91] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon[b-668kgrfx91] {
    position: absolute;
    right: 12px;
    font-size: 18px;
    color: var(--ink-soft);
    pointer-events: none;
    z-index: 1;
}

.search-input[b-668kgrfx91] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: 13px;
    color: var(--ink);
    transition: all 0.2s ease;
    outline: none;
}

    .search-input.has-clear[b-668kgrfx91] {
        padding-right: 64px;
    }

    .search-input:focus[b-668kgrfx91] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.1);
    }

    .search-input[b-668kgrfx91]::placeholder {
        color: #94a3b8;
        font-size: 12.5px;
    }

.search-clear[b-668kgrfx91] {
    position: absolute;
    right: 38px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    z-index: 1;
}

    .search-clear:hover[b-668kgrfx91] {
        color: var(--rose-600);
        background: var(--rose-100);
    }

    .search-clear .mdi[b-668kgrfx91] {
        font-size: 18px;
    }

/* =========================================================
   TOOLBAR ACTIONS
   ========================================================= */

.table-header-actions[b-668kgrfx91] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

    .table-header-actions .btn[b-668kgrfx91] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .table-header-actions .btn .mdi[b-668kgrfx91] {
            font-size: 15px;
            line-height: 1;
        }

        .table-header-actions .btn:hover[b-668kgrfx91] {
            transform: translateY(-1px);
        }

/* =========================================================
   BODY
   ========================================================= */

.admission-list-body[b-668kgrfx91] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admission-table-scroll[b-668kgrfx91] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: visible;
}

    .admission-table-scroll[b-668kgrfx91]::-webkit-scrollbar {
        width: 6px;
    }

    .admission-table-scroll[b-668kgrfx91]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

/* Loading / empty state (same as patients page) */
.loader-row[b-668kgrfx91] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.spinner[b-668kgrfx91] {
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: admission-spin-b-668kgrfx91 .7s linear infinite;
}

@keyframes admission-spin-b-668kgrfx91 {
    to {
        transform: rotate(360deg);
    }
}

.p-5.text-center[b-668kgrfx91] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

    .p-5.text-center .state-icon[b-668kgrfx91] {
        font-size: 32px;
        color: var(--ink-soft);
        display: block;
        margin-bottom: 8px;
    }

    .p-5.text-center h5[b-668kgrfx91] {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
    }

    .p-5.text-center p[b-668kgrfx91] {
        color: var(--ink-soft);
        font-size: 13px;
        margin-bottom: 12px;
    }

/* =========================================================
   TABLE
   ========================================================= */

.admission-table[b-668kgrfx91] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .admission-table thead th[b-668kgrfx91] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
        color: var(--ink-soft);
        background: var(--surface-muted);
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        vertical-align: middle;
    }

        .admission-table thead th.text-end[b-668kgrfx91] {
            text-align: right;
        }

    .admission-table tbody td[b-668kgrfx91] {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: var(--ink);
    }

    .admission-table tbody tr:last-child td[b-668kgrfx91] {
        border-bottom: none;
    }

    .admission-table tbody tr:hover[b-668kgrfx91] {
        background: var(--surface-muted);
    }

/* =========================================================
   CELLS
   ========================================================= */

.patient-cell[b-668kgrfx91] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.patient-avatar[b-668kgrfx91] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.patient-info[b-668kgrfx91] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.patient-name[b-668kgrfx91] {
    font-weight: 600;
    color: var(--ink);
}

.patient-sub-text[b-668kgrfx91] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

.bed-cell[b-668kgrfx91] {
    font-weight: 600;
    color: var(--ink);
}

.bed-sub-text[b-668kgrfx91] {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 1px;
}

.doctor-cell[b-668kgrfx91],
.date-cell[b-668kgrfx91] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

    .doctor-cell .mdi[b-668kgrfx91],
    .date-cell .mdi[b-668kgrfx91] {
        font-size: 15px;
        color: var(--ink-soft);
    }

/* Status pill */
.admission-status-badge[b-668kgrfx91] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.status-admitted[b-668kgrfx91] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.status-discharged[b-668kgrfx91] {
    background: var(--surface-muted);
    color: var(--ink-soft);
}

/* =========================================================
   ROW ACTIONS
   ========================================================= */

.tbl-act[b-668kgrfx91] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

    .tbl-act .btn[b-668kgrfx91] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 34px;
        min-width: 92px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .tbl-act .btn .mdi[b-668kgrfx91] {
            font-size: 16px;
            line-height: 1;
        }

        .tbl-act .btn:hover:not(:disabled)[b-668kgrfx91] {
            transform: translateY(-1px);
        }

    .tbl-act .btn-info[b-668kgrfx91] {
        background: var(--info-600);
        border-color: var(--info-600);
        color: #fff;
    }

        .tbl-act .btn-info:hover[b-668kgrfx91] {
            filter: brightness(.92);
            color: #fff;
        }

/* "More" icon button */
.action-more-btn.btn[b-668kgrfx91] {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    min-width: 0;
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink-soft);
}

    .action-more-btn.btn:hover[b-668kgrfx91] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
    }

.action-more-btn[b-668kgrfx91]::after {
    display: none;
}

.action-more-btn .mdi[b-668kgrfx91] {
    font-size: 18px;
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.patient-action-menu[b-668kgrfx91] {
    min-width: 170px;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 16px 36px rgba(16, 24, 39, .14);
}

    .patient-action-menu .patient-action-item[b-668kgrfx91] {
        display: flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

        .patient-action-menu .patient-action-item .mdi[b-668kgrfx91] {
            width: 18px;
            display: inline-flex;
            justify-content: center;
            font-size: 17px;
        }

    .patient-action-menu .action-discharge[b-668kgrfx91] {
        color: var(--amber-600);
    }

        .patient-action-menu .action-discharge:hover[b-668kgrfx91] {
            background: var(--amber-100);
        }

    .patient-action-menu .action-history[b-668kgrfx91] {
        color: var(--primary);
    }

        .patient-action-menu .action-history:hover[b-668kgrfx91] {
            background: var(--primary-soft);
        }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
    .modern-table-header[b-668kgrfx91] {
        align-items: stretch;
        gap: 10px;
    }

    .table-header-search[b-668kgrfx91] {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .table-header-actions[b-668kgrfx91] {
        order: 2;
        justify-content: flex-start;
    }

    .table-header-title[b-668kgrfx91] {
        order: 1;
    }
}

@media (max-width: 640px) {
    .admission-list-page[b-668kgrfx91] {
        padding: 14px 12px 4px;
        height: auto;
        min-height: 0;
    }

    .admission-list-card[b-668kgrfx91] {
        overflow: visible;
    }

    .admission-table-scroll[b-668kgrfx91] {
        overflow-x: auto;
        overflow-y: visible;
    }

    .admission-table[b-668kgrfx91] {
        min-width: 720px;
    }

    .table-header-actions .btn span[b-668kgrfx91] {
        display: none;
    }

    .table-header-actions .btn[b-668kgrfx91] {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }

    .search-input[b-668kgrfx91] {
        font-size: 14px;
        height: 42px;
        padding: 0 38px 0 16px;
    }

        .search-input.has-clear[b-668kgrfx91] {
            padding-right: 64px;
        }

    .search-icon[b-668kgrfx91] {
        font-size: 20px;
        right: 14px;
    }
}

/* =========================================================
   Deposit MODAL DIALOG 
   ========================================================= */
.modal-overlay[b-668kgrfx91] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn 0.2s ease-in-out;
}

/* Central Dialog Card */
.modal-dialog-box[b-668kgrfx91] {
    background: #ffffff;
    width: 100%;
    max-width: 720px; /* ← bumped from 520 */
    max-height: calc(100vh - 48px); /* ← prevents overflow off-screen */
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header Section */
.modal-dialog-header[b-668kgrfx91] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-dialog-header .card-title[b-668kgrfx91] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.modal-close-btn[b-668kgrfx91] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .modal-close-btn:hover[b-668kgrfx91] {
        background-color: #e2e8f0;
        color: #0f172a;
    }

/* =========================================================
   PAYMENT MODAL — TABLE, BODY, FOOTER
   ========================================================= */

/* Body */
.modal-dialog-body[b-668kgrfx91] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    background: #ffffff;
}

    .modal-dialog-body[b-668kgrfx91]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-dialog-body[b-668kgrfx91]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

/* Icon badge inside the modal header */
.icon-badge[b-668kgrfx91] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
}

    .icon-badge.badge-rose[b-668kgrfx91] {
        background: #FFE4E9;
        color: #E11D48;
    }

    .icon-badge.badge-primary[b-668kgrfx91] {
        background: #EDEBFF;
        color: #5B4FE5;
    }

    .icon-badge.badge-emerald[b-668kgrfx91] {
        background: #D1FAE5;
        color: #059669;
    }

/* Payment table inside the modal */
.billing-table-wrapper[b-668kgrfx91] {
    width: 100%;
    overflow-x: auto;
}

.billing-table[b-668kgrfx91] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #101827;
}

    .billing-table thead th[b-668kgrfx91] {
        text-align: left;
        padding: 12px 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #667085;
        background: #F8F9FC;
        border-bottom: 1px solid #E2E6ED;
        white-space: nowrap;
    }

    .billing-table tbody td[b-668kgrfx91] {
        padding: 14px 20px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: #101827;
    }

    .billing-table tbody tr:last-child td[b-668kgrfx91] {
        border-bottom: none;
    }

    .billing-table tbody tr:hover[b-668kgrfx91] {
        background: #FAFBFF;
    }

/* Cell helpers */
.bill-no[b-668kgrfx91] {
    font-weight: 700;
    color: #5B4FE5;
    font-size: 13px;
}

.patient-name[b-668kgrfx91] {
    font-weight: 600;
    color: #101827;
    font-size: 13.5px;
}

.bill-date[b-668kgrfx91] {
    font-size: 11.5px;
    color: #667085;
    margin-top: 2px;
    word-break: break-word;
}

.amount-strong[b-668kgrfx91] {
    font-weight: 700;
    color: #101827;
    white-space: nowrap;
}

/* Status badge (used if you re-enable the status cell) */
.billing-status-badge[b-668kgrfx91] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.status-paid[b-668kgrfx91] {
    background: #D1FAE5;
    color: #059669;
}

.status-partial[b-668kgrfx91] {
    background: #E0F2FE;
    color: #0284C7;
}

.status-due[b-668kgrfx91] {
    background: #FEF3C7;
    color: #D97706;
}

.status-refunded[b-668kgrfx91] {
    background: #FFE4E9;
    color: #E11D48;
}

/* =========================================================
   MODAL FOOTER  (defensive — beats global .btn rules)
   ========================================================= */

.modal-overlay .modal-dialog-footer[b-668kgrfx91] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-top: 1px solid #E2E6ED !important;
    background: #FFFFFF !important;
}

    .modal-overlay .modal-dialog-footer .btn[b-668kgrfx91] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 38px !important;
        min-width: 90px !important;
        padding: 0 18px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    }

    .modal-overlay .modal-dialog-footer .btn-outline-secondary[b-668kgrfx91] {
        background: #FFFFFF !important;
        color: #667085 !important;
        border: 1px solid #E2E6ED !important;
    }

        .modal-overlay .modal-dialog-footer .btn-outline-secondary:hover[b-668kgrfx91],
        .modal-overlay .modal-dialog-footer .btn-outline-secondary:focus[b-668kgrfx91] {
            background: #F8F9FC !important;
            color: #101827 !important;
            border-color: #CBD2E1 !important;
            outline: none !important;
        }

/* =========================================================
   MODAL RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .modal-overlay[b-668kgrfx91] {
        padding: 12px;
    }

    .modal-dialog-box[b-668kgrfx91] {
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .modal-dialog-header[b-668kgrfx91] {
        padding: 14px 16px;
    }

    .billing-table thead th[b-668kgrfx91],
    .billing-table tbody td[b-668kgrfx91] {
        padding: 10px 14px;
    }

    .modal-overlay .modal-dialog-footer[b-668kgrfx91] {
        padding: 10px 16px !important;
    }
}
.modal-dialog-box.modal-lg[b-668kgrfx91] {
    max-width: 900px;
}

.modal-dialog-box.modal-xl[b-668kgrfx91] {
    max-width: 1100px;
}
/* =========================================================
   PAYMENT MODAL — SUMMARY STRIP + FORM
   ========================================================= */

/* Summary strip — visible in both modes */
.payment-summary-strip[b-668kgrfx91] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px 20px;
    background: #F8F9FC;
    border-bottom: 1px solid #E2E6ED;
}

    .payment-summary-strip .summary-item[b-668kgrfx91] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 120px;
    }

    .payment-summary-strip .summary-label[b-668kgrfx91] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #667085;
        font-weight: 700;
    }

    .payment-summary-strip .summary-value[b-668kgrfx91] {
        font-size: 13.5px;
        font-weight: 600;
        color: #101827;
    }

        .payment-summary-strip .summary-value.amount-strong[b-668kgrfx91] {
            color: #5B4FE5;
            font-weight: 700;
        }

/* Add-payment form */
.payment-form[b-668kgrfx91] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 20px;
}

    .payment-form .field[b-668kgrfx91] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .payment-form .field.full-width[b-668kgrfx91] {
            grid-column: 1 / -1;
        }

        .payment-form .field label[b-668kgrfx91] {
            font-size: 12.5px;
            font-weight: 700;
            color: #334155;
        }

    .payment-form .form-control[b-668kgrfx91] {
        width: 100%;
        height: 40px;
        padding: 0 12px;
        border: 1px solid #DBE2EA;
        border-radius: 8px;
        background: #F8FAFC;
        font-size: 13px;
        color: #101827;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .payment-form textarea.form-control[b-668kgrfx91] {
        height: auto;
        min-height: 68px;
        padding: 10px 12px;
        resize: vertical;
    }

    .payment-form .form-control:focus[b-668kgrfx91] {
        border-color: #5B4FE5;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.1);
    }

    .payment-form .req[b-668kgrfx91] {
        color: #EF4444;
        margin-left: 2px;
    }

    .payment-form .form-error[b-668kgrfx91] {
        grid-column: 1 / -1;
        padding: 10px 12px;
        border-radius: 8px;
        background: #FFE4E9;
        color: #E11D48;
        font-size: 12.5px;
        font-weight: 600;
    }

/* Primary button (Save) */
.modal-overlay .modal-dialog-footer .btn-primary[b-668kgrfx91] {
    background: #5B4FE5 !important;
    color: #FFFFFF !important;
    border-color: #5B4FE5 !important;
}

    .modal-overlay .modal-dialog-footer .btn-primary:hover:not(:disabled)[b-668kgrfx91] {
        background: #3D33B0 !important;
        border-color: #3D33B0 !important;
    }

    .modal-overlay .modal-dialog-footer .btn-primary[disabled][b-668kgrfx91] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Empty state row in the history table */
.billing-table td.empty-cell[b-668kgrfx91] {
    text-align: center;
    padding: 32px 20px;
    color: #667085;
    font-style: italic;
}

/* Mobile */
@media (max-width: 640px) {
    .payment-summary-strip[b-668kgrfx91] {
        gap: 16px;
        padding: 10px 16px;
    }

    .payment-form[b-668kgrfx91] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }
}
/* /Pages/IPD/BedManagement.razor.rz.scp.css */
.ipd-page[b-qddnnm2w9c] {
    margin: 0 auto;
    padding: 0px 40px 48px;
}

/* =========================================================
   HEADER
========================================================= */

.ipd-header[b-qddnnm2w9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.ipd-title[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

    .ipd-title .mdi[b-qddnnm2w9c] {
        font-size: 28px;
        color: #4f46e5;
    }

.ipd-subtitle[b-qddnnm2w9c] {
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
}

.ipd-actions[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* =========================================================
   STATS CARDS - IMPROVED
========================================================= */

.ipd-stats[b-qddnnm2w9c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ipd-stat-card[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8edf2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

    .ipd-stat-card:hover[b-qddnnm2w9c] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }

.stat-icon[b-qddnnm2w9c] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .stat-icon .mdi[b-qddnnm2w9c] {
        font-size: 24px;
    }

    .stat-icon.total[b-qddnnm2w9c] {
        background: #eef2ff;
        color: #4f46e5;
    }

    .stat-icon.available[b-qddnnm2w9c] {
        background: #ecfdf5;
        color: #059669;
    }

    .stat-icon.occupied[b-qddnnm2w9c] {
        background: #fef2f2;
        color: #dc2626;
    }

    .stat-icon.reserved[b-qddnnm2w9c] {
        background: #fffbeb;
        color: #d97706;
    }

.stat-content[b-qddnnm2w9c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.stat-label[b-qddnnm2w9c] {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-content h3[b-qddnnm2w9c] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

/* =========================================================
   CARD
========================================================= */

.ipd-card[b-qddnnm2w9c] {
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ipd-card-header[b-qddnnm2w9c] {
    margin-bottom: 16px;
}

.ipd-card-title[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

    .ipd-card-title .mdi[b-qddnnm2w9c] {
        font-size: 18px;
        color: #64748b;
    }

/* =========================================================
   FORM GRID / FIELDS
========================================================= */

.ipd-grid[b-qddnnm2w9c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ipd-field[b-qddnnm2w9c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .ipd-field label[b-qddnnm2w9c] {
        font-size: 12.5px;
        font-weight: 600;
        color: #334155;
    }

    .ipd-field input[b-qddnnm2w9c],
    .ipd-field select[b-qddnnm2w9c] {
        height: 40px;
        padding: 0 12px;
        border: 1px solid #dbe2ea;
        border-radius: 8px;
        outline: none;
        background: #fff;
        color: #1e293b;
        font-size: 13px;
        font-family: inherit;
        transition: all 0.15s ease;
    }

        .ipd-field input:focus[b-qddnnm2w9c],
        .ipd-field select:focus[b-qddnnm2w9c] {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

    .ipd-field small[b-qddnnm2w9c] {
        color: #b45309;
        font-size: 11px;
        font-weight: 500;
    }

/* =========================================================
   STATUS BADGE
========================================================= */

.status-badge[b-qddnnm2w9c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
}

    .status-badge.status-inactive[b-qddnnm2w9c] {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

/* =========================================================
   TABLE
========================================================= */

.ipd-table-wrapper[b-qddnnm2w9c] {
    overflow-x: auto;
}

.ipd-table[b-qddnnm2w9c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ipd-table thead tr[b-qddnnm2w9c] {
        border-top: 1px solid #e8edf2;
        border-bottom: 1px solid #e8edf2;
        background: #f8fafc;
    }

    .ipd-table th[b-qddnnm2w9c] {
        padding: 11px 14px;
        color: #475569;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .ipd-table td[b-qddnnm2w9c] {
        padding: 11px 14px;
        border-bottom: 1px solid #f1f5f9;
        color: #1e293b;
    }

    .ipd-table tbody tr:last-child td[b-qddnnm2w9c] {
        border-bottom: none;
    }

    .ipd-table tbody tr:hover[b-qddnnm2w9c] {
        background: #fafbfc;
    }

.ward-badge[b-qddnnm2w9c] {
    display: inline-block;
    padding: 2px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

/* =========================================================
   BED STATUS PILLS
========================================================= */

.bed-status[b-qddnnm2w9c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .bed-status.available[b-qddnnm2w9c] {
        background: #d1fae5;
        color: #047857;
    }

    .bed-status.occupied[b-qddnnm2w9c] {
        background: #fee2e2;
        color: #dc2626;
    }

    .bed-status.reserved[b-qddnnm2w9c] {
        background: #fef3c7;
        color: #d97706;
    }

/* =========================================================
   ACTION GROUP
========================================================= */

.action-group[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn[b-qddnnm2w9c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    text-decoration: none;
}

    .btn .mdi[b-qddnnm2w9c] {
        font-size: 18px;
    }

.btn-primary[b-qddnnm2w9c] {
    color: #fff;
}

    .btn-primary:hover[b-qddnnm2w9c] {
        background: #4338ca;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }

.btn-secondary[b-qddnnm2w9c] {
    color: #475569;
    border: 1px solid #e2e8f0;
}

    .btn-secondary:hover[b-qddnnm2w9c] {
        background: #e8edf3;
    }

.btn-warning[b-qddnnm2w9c] {
    background: #f59e0b;
    color: #fff;
}

    .btn-warning:hover[b-qddnnm2w9c] {
        background: #d97706;
    }

.btn-danger[b-qddnnm2w9c] {
    background: #ef4444;
    color: #fff;
}

    .btn-danger:hover[b-qddnnm2w9c] {
        background: #dc2626;
    }

.btn:disabled[b-qddnnm2w9c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm[b-qddnnm2w9c] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

    .btn-sm .mdi[b-qddnnm2w9c] {
        font-size: 16px;
    }

/* =========================================================
   SPINNER
========================================================= */

.table-spinner[b-qddnnm2w9c] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: ipd-spin-b-qddnnm2w9c 0.6s linear infinite;
}

@keyframes ipd-spin-b-qddnnm2w9c {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   DIALOG BOX - IMPROVED
========================================================= */

.ipd-dialog-overlay[b-qddnnm2w9c] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: dialogFadeIn-b-qddnnm2w9c 0.2s ease-out;
}

.ipd-dialog[b-qddnnm2w9c] {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    animation: dialogSlideUp-b-qddnnm2w9c 0.25s ease-out;
}

@keyframes dialogFadeIn-b-qddnnm2w9c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dialogSlideUp-b-qddnnm2w9c {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

/* DIALOG HEADER */
.ipd-dialog-header[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e8edf2;
    flex-shrink: 0;
}

.dialog-header-content[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dialog-header-content .mdi[b-qddnnm2w9c] {
        font-size: 22px;
        color: #4f46e5;
    }

    .dialog-header-content h4[b-qddnnm2w9c] {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: #0f172a;
    }

.dialog-close[b-qddnnm2w9c] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: none;
    background: #f1f4f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .dialog-close:hover[b-qddnnm2w9c] {
        background: #fee2e2;
        color: #dc2626;
    }

    .dialog-close .mdi[b-qddnnm2w9c] {
        font-size: 20px;
    }

/* DIALOG BODY */
.ipd-dialog-body[b-qddnnm2w9c] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.validation-error[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

    .validation-error .mdi[b-qddnnm2w9c] {
        font-size: 20px;
        flex-shrink: 0;
    }

.dialog-form[b-qddnnm2w9c] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-qddnnm2w9c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-qddnnm2w9c] {
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }

    .form-group .required[b-qddnnm2w9c] {
        color: #dc2626;
        margin-left: 2px;
    }

.form-control[b-qddnnm2w9c] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.15s ease;
}

    .form-control:focus[b-qddnnm2w9c] {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }

    .form-control[b-qddnnm2w9c]::placeholder {
        color: #94a3b8;
    }

.form-hint[b-qddnnm2w9c] {
    color: #b45309;
    font-size: 11px;
    font-weight: 500;
}

/* DIALOG FOOTER */
.ipd-dialog-footer[b-qddnnm2w9c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e8edf2;
    flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
    .ipd-grid[b-qddnnm2w9c] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ipd-stats[b-qddnnm2w9c] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ipd-grid[b-qddnnm2w9c] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ipd-page[b-qddnnm2w9c] {
        padding: 12px;
    }

    .ipd-stats[b-qddnnm2w9c] {
        grid-template-columns: 1fr;
    }

    .ipd-stat-card[b-qddnnm2w9c] {
        padding: 16px 20px;
    }

    .stat-content h3[b-qddnnm2w9c] {
        font-size: 22px;
    }

    .ipd-dialog[b-qddnnm2w9c] {
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
    }

    .ipd-dialog-header[b-qddnnm2w9c],
    .ipd-dialog-footer[b-qddnnm2w9c] {
        padding: 16px 20px;
    }

    .ipd-dialog-body[b-qddnnm2w9c] {
        padding: 20px;
    }

    .ipd-dialog-footer[b-qddnnm2w9c] {
        flex-direction: column-reverse;
    }

        .ipd-dialog-footer .btn[b-qddnnm2w9c] {
            width: 100%;
            justify-content: center;
        }

    .ipd-header[b-qddnnm2w9c] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ipd-actions[b-qddnnm2w9c] {
        width: 100%;
    }

        .ipd-actions .btn[b-qddnnm2w9c] {
            width: 100%;
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .ipd-table[b-qddnnm2w9c] {
        font-size: 12px;
    }

        .ipd-table th[b-qddnnm2w9c],
        .ipd-table td[b-qddnnm2w9c] {
            padding: 8px 10px;
        }

    .btn-sm[b-qddnnm2w9c] {
        padding: 0 8px;
        font-size: 11px;
    }

        .btn-sm .mdi[b-qddnnm2w9c] {
            font-size: 14px;
        }
}
/* /Pages/IPD/ClinicalCare.razor.rz.scp.css */
/* CSS for ClinicalCare component */
/* =========================================================
   IPD CLINICAL CARE
   Compact Clinical Documentation Module
   ========================================================= */

.clinical-care[b-7x530mb973] {
    --cc-primary: #6d28d9;
    --cc-primary-dark: #5420aa;
    --cc-primary-soft: #f3edff;
    --cc-primary-border: #e2d5f7;
    --cc-text: #292531;
    --cc-heading: #35313d;
    --cc-muted: #77727f;
    --cc-border: #e7e5eb;
    --cc-soft-border: #efedf2;
    --cc-bg: #f7f7fa;
    --cc-white: #ffffff;
    min-height: 100vh;
    padding: 22px 24px 85px;
    background: var(--cc-bg);
    color: var(--cc-text);
}


/* =========================================================
   HEADER
   ========================================================= */

.cc-header[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.cc-header-left[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cc-back[b-7x530mb973] {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #706b77;
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 7px;
    text-decoration: none;
}

    .cc-back:hover[b-7x530mb973] {
        color: var(--cc-primary);
        border-color: var(--cc-primary-border);
    }

    .cc-back svg[b-7x530mb973] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cc-title-icon[b-7x530mb973] {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-primary);
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    border-radius: 10px;
}

    .cc-title-icon svg[b-7x530mb973] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cc-kicker[b-7x530mb973],
.cc-section-kicker[b-7x530mb973],
.cc-mini-label[b-7x530mb973] {
    display: block;
    color: var(--cc-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.cc-header h1[b-7x530mb973] {
    margin: 2px 0;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.cc-header p[b-7x530mb973] {
    margin: 0;
    color: var(--cc-muted);
    font-size: 11px;
}

.cc-header-actions[b-7x530mb973] {
    display: flex;
    gap: 7px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.cc-btn[b-7x530mb973] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

    .cc-btn svg[b-7x530mb973] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cc-btn-primary[b-7x530mb973] {
    color: #fff;
    background: var(--cc-primary);
    border: 1px solid var(--cc-primary);
}

    .cc-btn-primary:hover[b-7x530mb973] {
        color: #fff;
        background: var(--cc-primary-dark);
    }

.cc-btn-outline[b-7x530mb973] {
    color: var(--cc-primary);
    background: #fff;
    border: 1px solid var(--cc-primary-border);
}

    .cc-btn-outline:hover[b-7x530mb973] {
        background: var(--cc-primary-soft);
    }

.cc-btn-light[b-7x530mb973] {
    color: #66616e;
    background: #f3f2f5;
    border: 1px solid #e4e1e8;
}


/* =========================================================
   PATIENT
   ========================================================= */

.cc-patient[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 17px;
    margin-bottom: 12px;
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 9px;
    box-shadow: 0 2px 9px rgba(40, 30, 60, .025);
}

.cc-patient-main[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cc-avatar[b-7x530mb973] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--cc-primary);
    background: var(--cc-primary-soft);
    font-size: 12px;
    font-weight: 800;
}

.cc-patient-name[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cc-patient-name h2[b-7x530mb973] {
        margin: 0;
        color: var(--cc-heading);
        font-size: 15px;
        font-weight: 750;
    }

.cc-status[b-7x530mb973] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    color: #237f50;
    background: #eef9f3;
    border: 1px solid #d7eee0;
    border-radius: 15px;
    font-size: 8px;
    font-weight: 700;
}

    .cc-status span[b-7x530mb973] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #25a05f;
    }

.cc-patient-meta[b-7x530mb973] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    color: #85808c;
    font-size: 9px;
}

    .cc-patient-meta strong[b-7x530mb973] {
        color: #55505d;
    }

.cc-patient-details[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 20px;
    border-left: 1px solid var(--cc-border);
}

    .cc-patient-details span[b-7x530mb973] {
        display: block;
        margin-bottom: 3px;
        color: #97929e;
        font-size: 8px;
    }

    .cc-patient-details strong[b-7x530mb973] {
        color: #403b47;
        font-size: 9px;
    }


/* =========================================================
   ALERT STRIP
   ========================================================= */

.cc-alert-strip[b-7x530mb973] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.cc-alert[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: #fffaf0;
    border: 1px solid #f0e4c7;
    border-radius: 7px;
}

    .cc-alert.normal[b-7x530mb973] {
        background: #f6fbf8;
        border-color: #dceee3;
    }

.cc-alert-icon[b-7x530mb973] {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b47d1b;
    background: #fff3d5;
    border-radius: 6px;
}

.cc-alert.normal .cc-alert-icon[b-7x530mb973] {
    color: #238354;
    background: #e8f6ee;
}

.cc-alert-icon svg[b-7x530mb973] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cc-alert strong[b-7x530mb973] {
    display: block;
    color: #735a26;
    font-size: 9px;
}

.cc-alert.normal strong[b-7x530mb973] {
    color: #286c4c;
}

.cc-alert span[b-7x530mb973] {
    display: block;
    margin-top: 2px;
    color: #9a8761;
    font-size: 8px;
}

.cc-alert.normal span[b-7x530mb973] {
    color: #759383;
}


/* =========================================================
   TABS
   ========================================================= */

.cc-tabs[b-7x530mb973] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    margin-bottom: 17px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(40,30,60,.035);
    overflow-x: auto;
}

.cc-tab[b-7x530mb973] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    color: #77727e;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
}

    .cc-tab:hover[b-7x530mb973] {
        color: var(--cc-primary);
        background: #faf8fe;
    }

    .cc-tab.active[b-7x530mb973] {
        color: var(--cc-primary);
        background: var(--cc-primary-soft);
    }

    .cc-tab svg[b-7x530mb973] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   SECTION
   ========================================================= */

.cc-section[b-7x530mb973] {
    scroll-margin-top: 70px;
    margin-bottom: 22px;
}

.cc-section-heading[b-7x530mb973] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 11px;
}

    .cc-section-heading h2[b-7x530mb973] {
        margin: 3px 0 2px;
        color: var(--cc-heading);
        font-size: 16px;
        font-weight: 750;
    }

    .cc-section-heading p[b-7x530mb973] {
        margin: 0;
        color: var(--cc-muted);
        font-size: 10px;
    }

.cc-last-update[b-7x530mb973] {
    color: #99949f;
    font-size: 8px;
}


/* =========================================================
   CARDS
   ========================================================= */

.cc-card[b-7x530mb973],
.cc-form-card[b-7x530mb973],
.consultant-summary[b-7x530mb973] {
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 9px;
    box-shadow: 0 2px 9px rgba(40,30,60,.025);
}

.cc-card[b-7x530mb973] {
    padding: 14px;
}

.cc-card-heading[b-7x530mb973] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .cc-card-heading h3[b-7x530mb973] {
        margin: 3px 0 0;
        color: var(--cc-heading);
        font-size: 12px;
        font-weight: 750;
    }

.cc-card-icon[b-7x530mb973] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-primary);
    background: var(--cc-primary-soft);
    border-radius: 7px;
}

    .cc-card-icon svg[b-7x530mb973] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cc-mini-label[b-7x530mb973] {
    font-size: 8px;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.cc-overview-grid[b-7x530mb973] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.diagnosis-card[b-7x530mb973] {
    grid-column: span 2;
}

.diagnosis-value[b-7x530mb973] {
    margin-top: 2px;
    color: #413c48;
    font-size: 13px;
    font-weight: 700;
}

.diagnosis-meta[b-7x530mb973] {
    display: flex;
    gap: 8px;
    margin-top: 7px;
}

    .diagnosis-meta span[b-7x530mb973] {
        padding: 3px 6px;
        color: #716a7d;
        background: #f7f5f9;
        border-radius: 4px;
        font-size: 8px;
    }

.cc-small-action[b-7x530mb973] {
    padding: 4px 7px;
    color: var(--cc-primary);
    background: var(--cc-primary-soft);
    border: 1px solid var(--cc-primary-border);
    border-radius: 5px;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.vitals-grid[b-7x530mb973] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.vital-item[b-7x530mb973] {
    padding: 8px;
    background: #faf9fb;
    border: 1px solid #f0edf3;
    border-radius: 6px;
}

    .vital-item span[b-7x530mb973],
    .vital-item small[b-7x530mb973] {
        display: block;
        color: #99939f;
        font-size: 7px;
    }

    .vital-item strong[b-7x530mb973] {
        display: inline-block;
        margin: 2px 3px 0 0;
        color: #413c48;
        font-size: 12px;
    }

.treatment-list[b-7x530mb973] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .treatment-list div[b-7x530mb973] {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #68626f;
        font-size: 9px;
    }

.treatment-dot[b-7x530mb973] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-primary);
}

.pending-count[b-7x530mb973] {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a6b16;
    background: #fff5d9;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}

.pending-list a[b-7x530mb973] {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cc-soft-border);
    color: #67616d;
    text-decoration: none;
    font-size: 9px;
}

    .pending-list a:last-child[b-7x530mb973] {
        border-bottom: 0;
    }

.pending-list strong[b-7x530mb973] {
    color: #a36f17;
    font-size: 8px;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.cc-form-card[b-7x530mb973] {
    padding: 15px;
}

.cc-form-header[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

    .cc-form-header strong[b-7x530mb973] {
        display: block;
        color: #413c48;
        font-size: 12px;
    }

    .cc-form-header span:not(.draft-label)[b-7x530mb973] {
        display: block;
        margin-top: 2px;
        color: #96919d;
        font-size: 8px;
    }

.draft-label[b-7x530mb973] {
    padding: 4px 7px;
    color: #8a6818;
    background: #fff7df;
    border: 1px solid #f0e3bb;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 700;
}

.cc-form-grid[b-7x530mb973] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cc-field.full[b-7x530mb973] {
    grid-column: span 2;
}

.cc-field label[b-7x530mb973] {
    display: block;
    margin-bottom: 4px;
    color: #625d69;
    font-size: 9px;
    font-weight: 700;
}

.cc-field input[b-7x530mb973],
.cc-field select[b-7x530mb973],
.cc-field textarea[b-7x530mb973] {
    width: 100%;
    box-sizing: border-box;
    color: #48434f;
    background: #fff;
    border: 1px solid #ddd9e2;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 9px;
}

.cc-field input[b-7x530mb973],
.cc-field select[b-7x530mb973] {
    height: 34px;
    padding: 0 8px;
}

.cc-field textarea[b-7x530mb973] {
    display: block;
    padding: 8px;
    resize: vertical;
    line-height: 1.5;
}

    .cc-field input:focus[b-7x530mb973],
    .cc-field select:focus[b-7x530mb973],
    .cc-field textarea:focus[b-7x530mb973] {
        border-color: #b99be5;
        box-shadow: 0 0 0 2px rgba(109,40,217,.06);
    }

.cc-form-actions[b-7x530mb973] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--cc-soft-border);
}


/* =========================================================
   HISTORY / NOTES
   ========================================================= */

.cc-history[b-7x530mb973] {
    margin-top: 11px;
}

.cc-history-header[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #4c4753;
    font-size: 10px;
}

    .cc-history-header span[b-7x530mb973] {
        color: #96919d;
        font-size: 8px;
    }

.cc-note-card[b-7x530mb973] {
    margin-bottom: 7px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
}

.cc-note-meta[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--cc-soft-border);
}

.cc-note-author[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-note-avatar[b-7x530mb973] {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--cc-primary);
    background: var(--cc-primary-soft);
    font-size: 8px;
    font-weight: 800;
}

.cc-note-author strong[b-7x530mb973] {
    display: block;
    color: #48434f;
    font-size: 9px;
}

.cc-note-author div span[b-7x530mb973] {
    display: block;
    margin-top: 2px;
    color: #99949f;
    font-size: 8px;
}

.final-badge[b-7x530mb973] {
    padding: 3px 6px;
    color: #257b4f;
    background: #edf8f1;
    border: 1px solid #d8ecdf;
    border-radius: 9px;
    font-size: 7px;
    font-weight: 700;
}

.cc-note-body[b-7x530mb973] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 10px;
}

    .cc-note-body span[b-7x530mb973] {
        color: var(--cc-primary);
        font-size: 7px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cc-note-body p[b-7x530mb973] {
        margin: 3px 0 0;
        color: #67616e;
        font-size: 9px;
        line-height: 1.5;
    }


/* =========================================================
   CONSULTANT
   ========================================================= */

.consultant-layout[b-7x530mb973] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 11px;
    align-items: start;
}

.consultant-summary[b-7x530mb973] {
    padding: 14px;
}

.summary-title h3[b-7x530mb973] {
    margin: 3px 0 12px;
    color: #403b47;
    font-size: 12px;
}

.summary-item[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    border-bottom: 1px solid var(--cc-soft-border);
}

    .summary-item:last-child[b-7x530mb973] {
        border-bottom: 0;
    }

    .summary-item span[b-7x530mb973] {
        color: #8a8491;
        font-size: 8px;
    }

    .summary-item strong[b-7x530mb973] {
        color: #49434f;
        font-size: 9px;
        text-align: right;
    }


/* =========================================================
   NURSING
   ========================================================= */

.nursing-grid[b-7x530mb973] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 11px;
    align-items: start;
}

.nursing-side[b-7x530mb973] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nursing-vitals[b-7x530mb973] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

    .nursing-vitals div[b-7x530mb973] {
        padding: 8px;
        background: #faf9fb;
        border: 1px solid #f0edf3;
        border-radius: 6px;
    }

    .nursing-vitals span[b-7x530mb973] {
        display: block;
        color: #99939f;
        font-size: 7px;
    }

    .nursing-vitals strong[b-7x530mb973] {
        display: block;
        margin-top: 3px;
        color: #403b47;
        font-size: 10px;
    }

.care-checklist[b-7x530mb973] {
    display: flex;
    flex-direction: column;
}

    .care-checklist label[b-7x530mb973] {
        display: flex;
        align-items: center;
        gap: 7px;
        min-height: 32px;
        border-bottom: 1px solid var(--cc-soft-border);
        color: #66616d;
        font-size: 8px;
    }

        .care-checklist label:last-child[b-7x530mb973] {
            border-bottom: 0;
        }

    .care-checklist input[b-7x530mb973] {
        accent-color: var(--cc-primary);
    }

.nursing-history[b-7x530mb973] {
    margin-top: 12px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.clinical-timeline[b-7x530mb973] {
    padding: 5px 0;
}

.timeline-item[b-7x530mb973] {
    display: grid;
    grid-template-columns: 58px 24px minmax(0, 1fr);
    min-height: 85px;
}

.timeline-time[b-7x530mb973] {
    padding-top: 4px;
    text-align: right;
}

    .timeline-time strong[b-7x530mb973] {
        display: block;
        color: #514b58;
        font-size: 10px;
    }

    .timeline-time span[b-7x530mb973] {
        color: #9a95a1;
        font-size: 7px;
    }

.timeline-line[b-7x530mb973] {
    position: relative;
    display: flex;
    justify-content: center;
}

    .timeline-line[b-7x530mb973]::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 0;
        width: 1px;
        background: #ded9e5;
    }

.timeline-item:last-child .timeline-line[b-7x530mb973]::before {
    bottom: 50%;
}

.timeline-line span[b-7x530mb973] {
    position: relative;
    z-index: 2;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    background: var(--cc-primary);
    border: 2px solid var(--cc-bg);
    border-radius: 50%;
}

.timeline-content[b-7x530mb973] {
    margin-left: 9px;
    margin-bottom: 10px;
    padding: 11px;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
}

.timeline-heading[b-7x530mb973] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .timeline-heading > div[b-7x530mb973] {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .timeline-heading strong[b-7x530mb973] {
        color: #48434f;
        font-size: 9px;
    }

    .timeline-heading small[b-7x530mb973] {
        color: #99949f;
        font-size: 7px;
    }

.timeline-type[b-7x530mb973] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 7px;
    font-weight: 700;
}

    .timeline-type.consultant[b-7x530mb973] {
        color: #6940a8;
        background: #f2eafd;
    }

    .timeline-type.nursing[b-7x530mb973] {
        color: #287951;
        background: #eaf7ef;
    }

    .timeline-type.progress[b-7x530mb973] {
        color: #946616;
        background: #fff5dc;
    }

    .timeline-type.vitals[b-7x530mb973] {
        color: #2c6c8d;
        background: #e9f5fb;
    }

.timeline-content p[b-7x530mb973] {
    margin: 7px 0 0;
    color: #716b77;
    font-size: 8px;
    line-height: 1.5;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.cc-bottom-bar[b-7x530mb973] {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 24px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--cc-border);
    box-shadow: 0 -4px 14px rgba(40,30,60,.05);
}

.cc-bottom-info[b-7x530mb973] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #85808b;
    font-size: 8px;
}

    .cc-bottom-info svg[b-7x530mb973] {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--cc-primary);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cc-bottom-actions[b-7x530mb973] {
    display: flex;
    gap: 6px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .cc-patient[b-7x530mb973] {
        align-items: flex-start;
        flex-direction: column;
    }

    .cc-patient-details[b-7x530mb973] {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-top: 11px;
        border-left: 0;
        border-top: 1px solid var(--cc-border);
    }

    .consultant-layout[b-7x530mb973],
    .nursing-grid[b-7x530mb973] {
        grid-template-columns: 1fr;
    }

    .nursing-side[b-7x530mb973] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 850px) {

    .clinical-care[b-7x530mb973] {
        padding: 15px 12px 80px;
    }

    .cc-header[b-7x530mb973] {
        align-items: flex-start;
        flex-direction: column;
    }

    .cc-header-actions[b-7x530mb973] {
        width: 100%;
    }

        .cc-header-actions .cc-btn[b-7x530mb973] {
            flex: 1;
        }

    .cc-alert-strip[b-7x530mb973] {
        grid-template-columns: 1fr;
    }

    .cc-overview-grid[b-7x530mb973] {
        grid-template-columns: 1fr;
    }

    .diagnosis-card[b-7x530mb973] {
        grid-column: auto;
    }

    .cc-note-body[b-7x530mb973] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .nursing-side[b-7x530mb973] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .cc-header-left[b-7x530mb973] {
        align-items: flex-start;
    }

    .cc-header h1[b-7x530mb973] {
        font-size: 20px;
    }

    .cc-patient-details[b-7x530mb973] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cc-patient-name[b-7x530mb973] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .cc-patient-meta[b-7x530mb973] {
        flex-direction: column;
        gap: 4px;
    }

    .cc-tabs[b-7x530mb973] {
        top: 0;
    }

    .cc-tab[b-7x530mb973] {
        padding: 0 9px;
    }

    .cc-section-heading[b-7x530mb973] {
        align-items: flex-start;
        flex-direction: column;
    }

    .cc-form-grid[b-7x530mb973] {
        grid-template-columns: 1fr;
    }

    .cc-field.full[b-7x530mb973] {
        grid-column: auto;
    }

    .cc-form-actions[b-7x530mb973] {
        flex-wrap: wrap;
    }

        .cc-form-actions .cc-btn[b-7x530mb973] {
            flex: 1;
        }

    .cc-bottom-bar[b-7x530mb973] {
        padding: 7px 10px;
    }

    .cc-bottom-info[b-7x530mb973] {
        display: none;
    }

    .cc-bottom-actions[b-7x530mb973] {
        width: 100%;
    }

        .cc-bottom-actions .cc-btn[b-7x530mb973] {
            flex: 1;
        }
}
/* /Pages/IPD/ConsultantNotes.razor.rz.scp.css */
/* CSS for ConsultantNotes component */
/* =========================================================
   CONSULTANT NOTES
   HMIS IPD MODULE
   Corporate / Clinical Hospital UI
   ========================================================= */

.consultant-notes[b-a1pcu2oxxe] {
    --cn-primary: #5b4bb7;
    --cn-primary-dark: #49399d;
    --cn-primary-light: #efedfc;
    --cn-bg: #f5f6fa;
    --cn-white: #ffffff;
    --cn-text: #292c3c;
    --cn-muted: #7c8190;
    --cn-border: #e1e3ea;
    --cn-success: #2f9365;
    --cn-danger: #d95368;
    width: 100%;
    min-height: 100vh;
    background: var(--cn-bg);
    color: var(--cn-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

    .consultant-notes *[b-a1pcu2oxxe],
    .consultant-notes *[b-a1pcu2oxxe]::before,
    .consultant-notes *[b-a1pcu2oxxe]::after {
        box-sizing: border-box;
    }


    /* =========================================================
   PAGE HEADER
   ========================================================= */

    .consultant-notes .pn-page-header[b-a1pcu2oxxe] {
        min-height: 68px;
        padding: 12px 20px;
        background: var(--cn-white);
        border-bottom: 1px solid var(--cn-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .consultant-notes .pn-title-area[b-a1pcu2oxxe] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .consultant-notes .pn-title-icon[b-a1pcu2oxxe] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--cn-primary-light);
        color: var(--cn-primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .consultant-notes .pn-title-icon svg[b-a1pcu2oxxe] {
            width: 21px;
            height: 21px;
            display: block;
        }

    .consultant-notes .pn-title-area h1[b-a1pcu2oxxe] {
        margin: 0;
        color: var(--cn-text);
        font-size: 19px;
        line-height: 1.2;
        font-weight: 700;
    }

    .consultant-notes .pn-title-area p[b-a1pcu2oxxe] {
        margin: 4px 0 0;
        color: var(--cn-muted);
        font-size: 12px;
    }


    /* =========================================================
   HEADER ACTIONS
   ========================================================= */

    .consultant-notes .pn-header-actions[b-a1pcu2oxxe] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .consultant-notes .pn-btn[b-a1pcu2oxxe] {
        height: 36px;
        padding: 0 14px;
        border: 1px solid #dfe1e8;
        border-radius: 7px;
        background: #fff;
        color: #3d4050;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }

        .consultant-notes .pn-btn svg[b-a1pcu2oxxe] {
            width: 15px;
            height: 15px;
            display: block;
            flex-shrink: 0;
        }

        .consultant-notes .pn-btn:hover[b-a1pcu2oxxe] {
            border-color: var(--cn-primary);
            color: var(--cn-primary);
        }

    .consultant-notes .pn-btn-primary[b-a1pcu2oxxe] {
        background: var(--cn-primary);
        border-color: var(--cn-primary);
        color: #fff;
    }

        .consultant-notes .pn-btn-primary:hover[b-a1pcu2oxxe] {
            background: var(--cn-primary-dark);
            border-color: var(--cn-primary-dark);
            color: #fff;
        }

    .consultant-notes .pn-btn-success[b-a1pcu2oxxe] {
        background: var(--cn-success);
        border-color: var(--cn-success);
        color: #fff;
    }

        .consultant-notes .pn-btn-success:hover[b-a1pcu2oxxe] {
            background: #267d56;
            border-color: #267d56;
            color: #fff;
        }


    /* =========================================================
   PATIENT SUMMARY
   ========================================================= */

    .consultant-notes .pn-patient-card[b-a1pcu2oxxe] {
        margin: 18px 20px 0;
        padding: 14px 17px;
        background: var(--cn-white);
        border: 1px solid var(--cn-border);
        border-radius: 10px;
        display: grid;
        grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
        gap: 15px;
        align-items: center;
    }

    .consultant-notes .pn-patient-main[b-a1pcu2oxxe] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .consultant-notes .pn-patient-avatar[b-a1pcu2oxxe] {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--cn-primary-light);
        color: var(--cn-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
    }

    .consultant-notes .pn-patient-main strong[b-a1pcu2oxxe] {
        display: block;
        color: var(--cn-text);
        font-size: 14px;
        font-weight: 700;
    }

    .consultant-notes .pn-patient-main span[b-a1pcu2oxxe] {
        display: block;
        margin-top: 3px;
        color: var(--cn-muted);
        font-size: 11px;
    }

    .consultant-notes .pn-patient-item label[b-a1pcu2oxxe] {
        display: block;
        margin-bottom: 4px;
        color: #8b8f9e;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .35px;
    }

    .consultant-notes .pn-patient-item strong[b-a1pcu2oxxe] {
        color: #353849;
        font-size: 12px;
        font-weight: 600;
    }


    /* =========================================================
   MAIN WORKSPACE
   ========================================================= */

    .consultant-notes .pn-workspace[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: 215px minmax(0, 1fr);
        gap: 18px;
        padding: 18px 20px 90px;
    }


    /* =========================================================
   SIDEBAR
   ========================================================= */

    .consultant-notes .pn-sidebar[b-a1pcu2oxxe] {
        position: sticky;
        top: 82px;
        align-self: start;
        padding: 9px;
        background: var(--cn-white);
        border: 1px solid var(--cn-border);
        border-radius: 10px;
    }

    .consultant-notes .pn-sidebar-title[b-a1pcu2oxxe] {
        padding: 8px 9px 9px;
        color: #8a8e9d;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .consultant-notes .pn-nav[b-a1pcu2oxxe] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .consultant-notes .pn-nav a[b-a1pcu2oxxe] {
            width: 100%;
            padding: 9px 10px;
            border-radius: 6px;
            background: transparent;
            color: #646878;
            text-decoration: none;
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            transition: .15s ease;
        }

            .consultant-notes .pn-nav a svg[b-a1pcu2oxxe] {
                width: 15px;
                height: 15px;
                margin-right: 8px;
                flex-shrink: 0;
                display: block;
            }

            .consultant-notes .pn-nav a:hover[b-a1pcu2oxxe] {
                background: var(--cn-primary-light);
                color: var(--cn-primary);
            }

            .consultant-notes .pn-nav a.active[b-a1pcu2oxxe] {
                background: var(--cn-primary-light);
                color: var(--cn-primary);
                font-weight: 600;
            }


    /* =========================================================
   CONTENT
   ========================================================= */

    .consultant-notes .pn-content[b-a1pcu2oxxe] {
        width: 100%;
        min-width: 0;
    }


    /* =========================================================
   SECTION
   ========================================================= */

    .consultant-notes .pn-section[b-a1pcu2oxxe] {
        width: 100%;
        margin-bottom: 16px;
        background: var(--cn-white);
        border: 1px solid var(--cn-border);
        border-radius: 10px;
        overflow: hidden;
        scroll-margin-top: 90px;
    }

    .consultant-notes .pn-section-header[b-a1pcu2oxxe] {
        min-height: 52px;
        padding: 10px 16px;
        border-bottom: 1px solid #e6e7ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .consultant-notes .pn-section-heading[b-a1pcu2oxxe] {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .consultant-notes .pn-section-icon[b-a1pcu2oxxe] {
        width: 29px;
        height: 29px;
        flex-shrink: 0;
        border-radius: 7px;
        background: var(--cn-primary-light);
        color: var(--cn-primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .consultant-notes .pn-section-icon svg[b-a1pcu2oxxe] {
            width: 15px;
            height: 15px;
            display: block;
        }

    .consultant-notes .pn-section-heading h2[b-a1pcu2oxxe] {
        margin: 0;
        color: #303344;
        font-size: 13px;
        font-weight: 700;
    }

    .consultant-notes .pn-section-heading span[b-a1pcu2oxxe] {
        display: block;
        margin-top: 2px;
        color: #8a8e9d;
        font-size: 10px;
    }

    .consultant-notes .pn-section-body[b-a1pcu2oxxe] {
        padding: 16px;
    }


    /* =========================================================
   FORM GRID
   ========================================================= */

    .consultant-notes .pn-form-grid[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .consultant-notes .pn-field[b-a1pcu2oxxe] {
        min-width: 0;
    }

    .consultant-notes .pn-field-full[b-a1pcu2oxxe] {
        grid-column: 1 / -1;
    }

    .consultant-notes .pn-field label[b-a1pcu2oxxe] {
        display: block;
        margin-bottom: 5px;
        color: #555a6d;
        font-size: 11px;
        font-weight: 600;
    }

    .consultant-notes .pn-required[b-a1pcu2oxxe] {
        color: var(--cn-danger);
        margin-left: 2px;
    }


    /* =========================================================
   INPUTS
   ========================================================= */

    .consultant-notes .pn-input[b-a1pcu2oxxe],
    .consultant-notes .pn-select[b-a1pcu2oxxe],
    .consultant-notes .pn-textarea[b-a1pcu2oxxe] {
        width: 100%;
        border: 1px solid #dcdfe7;
        border-radius: 6px;
        background: #fff;
        color: #303344;
        outline: none;
        font-family: inherit;
        font-size: 12px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .consultant-notes .pn-input[b-a1pcu2oxxe],
    .consultant-notes .pn-select[b-a1pcu2oxxe] {
        height: 36px;
        padding: 0 10px;
    }

    .consultant-notes .pn-textarea[b-a1pcu2oxxe] {
        min-height: 90px;
        padding: 9px 10px;
        resize: vertical;
        line-height: 1.5;
    }

        .consultant-notes .pn-input:focus[b-a1pcu2oxxe],
        .consultant-notes .pn-select:focus[b-a1pcu2oxxe],
        .consultant-notes .pn-textarea:focus[b-a1pcu2oxxe] {
            border-color: var(--cn-primary);
            box-shadow: 0 0 0 3px rgba(91, 75, 183, .08);
        }

        .consultant-notes .pn-input[b-a1pcu2oxxe]::placeholder,
        .consultant-notes .pn-textarea[b-a1pcu2oxxe]::placeholder {
            color: #a6a9b5;
        }


    /* =========================================================
   VITALS
   ========================================================= */

    .consultant-notes .pn-vitals-grid[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .consultant-notes .pn-vital[b-a1pcu2oxxe] {
        padding: 10px;
        background: #fafafd;
        border: 1px solid var(--cn-border);
        border-radius: 8px;
    }

        .consultant-notes .pn-vital label[b-a1pcu2oxxe] {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
            color: #777c8d;
            font-size: 10px;
            font-weight: 600;
        }

    .consultant-notes .pn-vital-unit[b-a1pcu2oxxe] {
        color: #9da1af;
        font-size: 9px;
    }


    /* =========================================================
   EXAMINATION
   ========================================================= */

    .consultant-notes .pn-examination-grid[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .consultant-notes .pn-exam-item[b-a1pcu2oxxe] {
        padding: 11px;
        background: #fafafd;
        border: 1px solid var(--cn-border);
        border-radius: 7px;
    }

        .consultant-notes .pn-exam-item label[b-a1pcu2oxxe] {
            display: block;
            margin-bottom: 6px;
            color: #777c8d;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .3px;
        }


    /* =========================================================
   TABLE
   ========================================================= */

    .consultant-notes .pn-table-wrap[b-a1pcu2oxxe] {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--cn-border);
        border-radius: 7px;
    }

    .consultant-notes .pn-table[b-a1pcu2oxxe] {
        width: 100%;
        min-width: 650px;
        border-collapse: collapse;
    }

        .consultant-notes .pn-table th[b-a1pcu2oxxe] {
            padding: 9px 10px;
            background: #f7f7fa;
            border-bottom: 1px solid var(--cn-border);
            color: #737889;
            font-size: 10px;
            font-weight: 700;
            text-align: left;
            text-transform: uppercase;
        }

        .consultant-notes .pn-table td[b-a1pcu2oxxe] {
            padding: 10px;
            border-bottom: 1px solid #eeeeF2;
            color: #454959;
            font-size: 12px;
        }

        .consultant-notes .pn-table tbody tr:last-child td[b-a1pcu2oxxe] {
            border-bottom: none;
        }

        .consultant-notes .pn-table tbody tr:hover td[b-a1pcu2oxxe] {
            background: #fafaff;
        }

    .consultant-notes .pn-result-normal[b-a1pcu2oxxe] {
        color: var(--cn-success);
        font-weight: 600;
    }

    .consultant-notes .pn-result-abnormal[b-a1pcu2oxxe] {
        color: var(--cn-danger);
        font-weight: 600;
    }


    /* =========================================================
   PLAN
   ========================================================= */

    .consultant-notes .pn-plan-grid[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .consultant-notes .pn-plan-item[b-a1pcu2oxxe] {
        padding: 12px;
        background: #fafafd;
        border: 1px solid var(--cn-border);
        border-radius: 8px;
    }

    .consultant-notes .pn-plan-title[b-a1pcu2oxxe] {
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #4f5466;
        font-size: 11px;
        font-weight: 700;
    }

        .consultant-notes .pn-plan-title svg[b-a1pcu2oxxe] {
            width: 15px;
            height: 15px;
            color: var(--cn-primary);
            display: block;
        }


    /* =========================================================
   REMARKS
   ========================================================= */

    .consultant-notes .pn-doctor-note[b-a1pcu2oxxe] {
        padding: 13px 15px;
        border-left: 3px solid var(--cn-primary);
        background: #faf9ff;
        border-radius: 0 7px 7px 0;
    }


    /* =========================================================
   AUTHENTICATION
   ========================================================= */

    .consultant-notes .pn-auth-card[b-a1pcu2oxxe] {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 15px;
        align-items: center;
        padding: 14px;
        background: #fafafa;
        border: 1px solid var(--cn-border);
        border-radius: 8px;
    }

    .consultant-notes .pn-auth-item label[b-a1pcu2oxxe] {
        display: block;
        margin-bottom: 4px;
        color: #888c9a;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .consultant-notes .pn-auth-item strong[b-a1pcu2oxxe] {
        color: #3d4050;
        font-size: 12px;
        font-weight: 600;
    }

    .consultant-notes .pn-status-badge[b-a1pcu2oxxe] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        border-radius: 20px;
        background: #eaf7f0;
        color: var(--cn-success);
        font-size: 10px;
        font-weight: 700;
    }

    .consultant-notes .pn-status-dot[b-a1pcu2oxxe] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }


    /* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

    .consultant-notes .pn-bottom-actions[b-a1pcu2oxxe] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        min-height: 58px;
        padding: 10px 20px;
        background: rgba(255,255,255,.98);
        border-top: 1px solid var(--cn-border);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }


/* =========================================================
   SMOOTH SIDEBAR ANCHOR SCROLL
   ========================================================= */

html[b-a1pcu2oxxe] {
    scroll-behavior: smooth;
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .consultant-notes .pn-patient-card[b-a1pcu2oxxe] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .consultant-notes .pn-vitals-grid[b-a1pcu2oxxe] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .consultant-notes .pn-workspace[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }

    .consultant-notes .pn-sidebar[b-a1pcu2oxxe] {
        position: sticky;
        top: 68px;
        z-index: 30;
        overflow-x: auto;
    }

    .consultant-notes .pn-sidebar-title[b-a1pcu2oxxe] {
        display: none;
    }

    .consultant-notes .pn-nav[b-a1pcu2oxxe] {
        width: max-content;
        flex-direction: row;
    }

        .consultant-notes .pn-nav a[b-a1pcu2oxxe] {
            white-space: nowrap;
        }

    .consultant-notes .pn-plan-grid[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TABLET / SMALL SCREEN
   ========================================================= */

@media (max-width: 750px) {

    .consultant-notes .pn-form-grid[b-a1pcu2oxxe] {
        grid-template-columns: 1fr 1fr;
    }

    .consultant-notes .pn-examination-grid[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }

    .consultant-notes .pn-auth-card[b-a1pcu2oxxe] {
        grid-template-columns: 1fr 1fr;
    }

        .consultant-notes .pn-auth-card > div:last-child[b-a1pcu2oxxe] {
            grid-column: 1 / -1;
        }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .consultant-notes .pn-page-header[b-a1pcu2oxxe] {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .consultant-notes .pn-header-actions[b-a1pcu2oxxe] {
        width: 100%;
    }

        .consultant-notes .pn-header-actions .pn-btn[b-a1pcu2oxxe] {
            flex: 1;
        }

    .consultant-notes .pn-patient-card[b-a1pcu2oxxe] {
        margin: 12px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .consultant-notes .pn-workspace[b-a1pcu2oxxe] {
        padding: 12px 12px 82px;
    }

    .consultant-notes .pn-form-grid[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }

    .consultant-notes .pn-field-full[b-a1pcu2oxxe] {
        grid-column: auto;
    }

    .consultant-notes .pn-vitals-grid[b-a1pcu2oxxe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consultant-notes .pn-auth-card[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }

        .consultant-notes .pn-auth-card > div:last-child[b-a1pcu2oxxe] {
            grid-column: auto;
        }

    .consultant-notes .pn-bottom-actions[b-a1pcu2oxxe] {
        padding: 8px 10px;
    }

        .consultant-notes .pn-bottom-actions .pn-btn[b-a1pcu2oxxe] {
            flex: 1;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .consultant-notes .pn-vitals-grid[b-a1pcu2oxxe] {
        grid-template-columns: 1fr;
    }

    .consultant-notes .pn-section-body[b-a1pcu2oxxe] {
        padding: 12px;
    }

    .consultant-notes .pn-btn[b-a1pcu2oxxe] {
        padding: 0 9px;
    }

    .consultant-notes .pn-title-area h1[b-a1pcu2oxxe] {
        font-size: 17px;
    }
}
/* /Pages/IPD/CrossReferral.razor.rz.scp.css */
/* CSS for CrossReferral component */
/* =========================================================
   CROSS REFERRAL
   CrossReferral.razor.css
   ========================================================= */

.cross-referral[b-8r9qv8z1tg] {
    --cr-primary: #6d4aff;
    --cr-primary-dark: #5635d9;
    --cr-primary-soft: #f3f0ff;
    --cr-success: #159570;
    --cr-success-dark: #117c60;
    --cr-success-soft: #eaf8f3;
    --cr-warning: #d89c22;
    --cr-warning-soft: #fff5df;
    --cr-danger: #d9534f;
    --cr-text: #25304a;
    --cr-muted: #7b8499;
    --cr-border: #e4e7ef;
    --cr-bg: #f6f7fb;
    --cr-white: #ffffff;
    width: 100%;
    min-height: 100vh;
    background: var(--cr-bg);
    color: var(--cr-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}


    /* =========================================================
   GLOBAL
   ========================================================= */

    .cross-referral *[b-8r9qv8z1tg],
    .cross-referral *[b-8r9qv8z1tg]::before,
    .cross-referral *[b-8r9qv8z1tg]::after {
        box-sizing: border-box;
    }


    /* =========================================================
   PAGE HEADER
   ========================================================= */

    .cross-referral .pn-page-header[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        background: var(--cr-white);
        border-bottom: 1px solid var(--cr-border);
    }


    .cross-referral .pn-title-area[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }


    .cross-referral .pn-title-icon[b-8r9qv8z1tg] {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--cr-primary-soft);
        color: var(--cr-primary);
    }


        .cross-referral .pn-title-icon svg[b-8r9qv8z1tg] {
            width: 25px;
            height: 25px;
            display: block;
        }


    .cross-referral .pn-title-area h1[b-8r9qv8z1tg] {
        margin: 0;
        color: var(--cr-text);
        font-size: 21px;
        line-height: 1.3;
        font-weight: 700;
    }


    .cross-referral .pn-title-area p[b-8r9qv8z1tg] {
        margin: 4px 0 0;
        color: var(--cr-muted);
        font-size: 13px;
        line-height: 1.4;
    }


    .cross-referral .pn-header-actions[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;
    }


    /* =========================================================
   BUTTONS
   ========================================================= */

    .cross-referral .pn-btn[b-8r9qv8z1tg] {
        min-height: 38px;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid var(--cr-border);
        border-radius: 8px;
        background: #fff;
        color: #465066;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }


        .cross-referral .pn-btn svg[b-8r9qv8z1tg] {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            display: block;
        }


        .cross-referral .pn-btn:hover[b-8r9qv8z1tg] {
            background: #fafaff;
            border-color: #c9cde0;
        }


        .cross-referral .pn-btn:active[b-8r9qv8z1tg] {
            transform: translateY(1px);
        }


    .cross-referral .pn-btn-primary[b-8r9qv8z1tg] {
        background: var(--cr-primary);
        border-color: var(--cr-primary);
        color: #fff;
    }


        .cross-referral .pn-btn-primary:hover[b-8r9qv8z1tg] {
            background: var(--cr-primary-dark);
            border-color: var(--cr-primary-dark);
        }


    .cross-referral .pn-btn-success[b-8r9qv8z1tg] {
        background: var(--cr-success);
        border-color: var(--cr-success);
        color: #fff;
    }


        .cross-referral .pn-btn-success:hover[b-8r9qv8z1tg] {
            background: var(--cr-success-dark);
            border-color: var(--cr-success-dark);
        }


    /* =========================================================
   PATIENT SUMMARY
   ========================================================= */

    .cross-referral .pn-patient-card[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(130px, 1fr));
        margin: 16px 24px;
        background: var(--cr-white);
        border: 1px solid var(--cr-border);
        border-radius: 12px;
        overflow: hidden;
    }


    .cross-referral .pn-patient-main[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 18px;
        border-right: 1px solid var(--cr-border);
    }


    .cross-referral .pn-patient-avatar[b-8r9qv8z1tg] {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--cr-primary-soft);
        color: var(--cr-primary);
        font-size: 14px;
        font-weight: 700;
    }


    .cross-referral .pn-patient-main strong[b-8r9qv8z1tg] {
        display: block;
        color: var(--cr-text);
        font-size: 14px;
        font-weight: 700;
    }


    .cross-referral .pn-patient-main span[b-8r9qv8z1tg] {
        display: block;
        margin-top: 3px;
        color: var(--cr-muted);
        font-size: 12px;
    }


    .cross-referral .pn-patient-item[b-8r9qv8z1tg] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 13px 15px;
        border-right: 1px solid var(--cr-border);
    }


        .cross-referral .pn-patient-item:last-child[b-8r9qv8z1tg] {
            border-right: 0;
        }


        .cross-referral .pn-patient-item label[b-8r9qv8z1tg] {
            margin-bottom: 4px;
            color: var(--cr-muted);
            font-size: 11px;
            font-weight: 500;
        }


        .cross-referral .pn-patient-item strong[b-8r9qv8z1tg] {
            color: var(--cr-text);
            font-size: 12px;
            font-weight: 650;
        }


    /* =========================================================
   WORKSPACE
   ========================================================= */

    .cross-referral .pn-workspace[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 0 24px 90px;
    }


    .cross-referral .pn-content[b-8r9qv8z1tg] {
        min-width: 0;
    }


    /* =========================================================
   SIDEBAR
   ========================================================= */

    .cross-referral .pn-sidebar[b-8r9qv8z1tg] {
        position: sticky;
        top: 18px;
        background: var(--cr-white);
        border: 1px solid var(--cr-border);
        border-radius: 12px;
        overflow: hidden;
        z-index: 5;
    }


    .cross-referral .pn-sidebar-title[b-8r9qv8z1tg] {
        padding: 14px 16px;
        background: #fbfbfe;
        border-bottom: 1px solid var(--cr-border);
        color: var(--cr-text);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }


    .cross-referral .pn-nav[b-8r9qv8z1tg] {
        padding: 7px;
    }


        .cross-referral .pn-nav a[b-8r9qv8z1tg] {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 39px;
            padding: 8px 10px;
            margin-bottom: 2px;
            border-radius: 7px;
            color: #626b80;
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 550;
            transition: background .15s ease, color .15s ease;
        }


            .cross-referral .pn-nav a:last-child[b-8r9qv8z1tg] {
                margin-bottom: 0;
            }


            .cross-referral .pn-nav a svg[b-8r9qv8z1tg] {
                width: 17px;
                height: 17px;
                flex: 0 0 17px;
                display: block;
                stroke-width: 1.8;
            }


            .cross-referral .pn-nav a:hover[b-8r9qv8z1tg] {
                background: #f7f5ff;
                color: var(--cr-primary);
            }


            .cross-referral .pn-nav a.active[b-8r9qv8z1tg] {
                background: var(--cr-primary-soft);
                color: var(--cr-primary);
                font-weight: 650;
            }


    /* =========================================================
   SECTION
   ========================================================= */

    .cross-referral .pn-section[b-8r9qv8z1tg] {
        scroll-margin-top: 20px;
        margin-bottom: 16px;
        background: var(--cr-white);
        border: 1px solid var(--cr-border);
        border-radius: 12px;
        overflow: hidden;
    }


        .cross-referral .pn-section:last-child[b-8r9qv8z1tg] {
            margin-bottom: 0;
        }


    .cross-referral .pn-section-header[b-8r9qv8z1tg] {
        min-height: 68px;
        padding: 13px 18px;
        display: flex;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid var(--cr-border);
    }


    .cross-referral .pn-section-heading[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        gap: 11px;
    }


    .cross-referral .pn-section-icon[b-8r9qv8z1tg] {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--cr-primary-soft);
        color: var(--cr-primary);
    }


        .cross-referral .pn-section-icon svg[b-8r9qv8z1tg] {
            width: 18px;
            height: 18px;
            display: block;
        }


    .cross-referral .pn-section-heading h2[b-8r9qv8z1tg] {
        margin: 0;
        color: var(--cr-text);
        font-size: 15px;
        font-weight: 700;
    }


    .cross-referral .pn-section-heading span[b-8r9qv8z1tg] {
        display: block;
        margin-top: 3px;
        color: var(--cr-muted);
        font-size: 11.5px;
    }


    .cross-referral .pn-section-body[b-8r9qv8z1tg] {
        padding: 18px;
    }


    /* =========================================================
   FORM GRID
   ========================================================= */

    .cross-referral .pn-form-grid[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }


    .cross-referral .pn-field[b-8r9qv8z1tg] {
        min-width: 0;
    }


    .cross-referral .pn-field-full[b-8r9qv8z1tg] {
        grid-column: 1 / -1;
    }


    .cross-referral .pn-field label[b-8r9qv8z1tg],
    .cross-referral .pn-response-status label[b-8r9qv8z1tg] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
        color: #4d566b;
        font-size: 12px;
        font-weight: 600;
    }


    .cross-referral .pn-required[b-8r9qv8z1tg] {
        color: var(--cr-danger);
        font-weight: 700;
    }


    .cross-referral .pn-input[b-8r9qv8z1tg],
    .cross-referral .pn-select[b-8r9qv8z1tg],
    .cross-referral .pn-textarea[b-8r9qv8z1tg] {
        width: 100%;
        border: 1px solid #dfe2ea;
        border-radius: 7px;
        background: #fff;
        color: var(--cr-text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }


    .cross-referral .pn-input[b-8r9qv8z1tg],
    .cross-referral .pn-select[b-8r9qv8z1tg] {
        height: 39px;
        padding: 8px 11px;
    }


    .cross-referral .pn-textarea[b-8r9qv8z1tg] {
        min-height: 90px;
        padding: 10px 11px;
        line-height: 1.5;
        resize: vertical;
    }


        .cross-referral .pn-input[b-8r9qv8z1tg]::placeholder,
        .cross-referral .pn-textarea[b-8r9qv8z1tg]::placeholder {
            color: #a8adba;
        }


        .cross-referral .pn-input:focus[b-8r9qv8z1tg],
        .cross-referral .pn-select:focus[b-8r9qv8z1tg],
        .cross-referral .pn-textarea:focus[b-8r9qv8z1tg] {
            border-color: var(--cr-primary);
            box-shadow: 0 0 0 3px rgba(109, 74, 255, .08);
        }


    /* =========================================================
   CONSULTANT RESPONSE HEADER
   ========================================================= */

    .cross-referral .pn-response-status[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 15px;
        padding: 14px;
        background: #fafbfe;
        border: 1px solid var(--cr-border);
        border-radius: 9px;
    }


        .cross-referral .pn-response-status > div[b-8r9qv8z1tg] {
            min-width: 0;
        }


    /* =========================================================
   AUTHENTICATION
   ========================================================= */

    .cross-referral .pn-auth-card[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        align-items: center;
        gap: 15px;
        padding: 15px;
        background: #fafbfe;
        border: 1px solid var(--cr-border);
        border-radius: 9px;
    }


    .cross-referral .pn-auth-item[b-8r9qv8z1tg] {
        min-width: 0;
    }


        .cross-referral .pn-auth-item label[b-8r9qv8z1tg] {
            display: block;
            margin-bottom: 4px;
            color: var(--cr-muted);
            font-size: 11px;
        }


        .cross-referral .pn-auth-item strong[b-8r9qv8z1tg] {
            display: block;
            color: var(--cr-text);
            font-size: 12.5px;
            font-weight: 650;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


    /* =========================================================
   STATUS BADGE
   ========================================================= */

    .cross-referral .pn-status-badge[b-8r9qv8z1tg] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: var(--cr-warning-soft);
        border: 1px solid #f3dfb2;
        border-radius: 20px;
        color: #9a6c13;
        font-size: 11px;
        font-weight: 650;
        white-space: nowrap;
    }


    .cross-referral .pn-status-dot[b-8r9qv8z1tg] {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: var(--cr-warning);
    }


    /* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

    .cross-referral .pn-bottom-actions[b-8r9qv8z1tg] {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--cr-border);
        box-shadow: 0 -4px 15px rgba(30, 40, 70, .05);
        backdrop-filter: blur(8px);
    }


/* =========================================================
   SMOOTH ANCHOR NAVIGATION
   ========================================================= */

.cross-referral[b-8r9qv8z1tg] {
    scroll-behavior: smooth;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    .cross-referral .pn-patient-card[b-8r9qv8z1tg] {
        grid-template-columns: 1.5fr repeat(2, 1fr);
    }


    .cross-referral .pn-patient-main[b-8r9qv8z1tg] {
        grid-row: span 2;
    }


    .cross-referral .pn-patient-item:nth-last-child(-n + 2)[b-8r9qv8z1tg] {
        border-top: 1px solid var(--cr-border);
    }


    .cross-referral .pn-auth-card[b-8r9qv8z1tg] {
        grid-template-columns: repeat(2, 1fr);
    }


        .cross-referral .pn-auth-card > div:last-child[b-8r9qv8z1tg] {
            grid-column: 1 / -1;
        }
}


/* =========================================================
   992px
   ========================================================= */

@media (max-width: 992px) {

    .cross-referral .pn-page-header[b-8r9qv8z1tg] {
        align-items: flex-start;
        flex-direction: column;
    }


    .cross-referral .pn-header-actions[b-8r9qv8z1tg] {
        width: 100%;
        justify-content: flex-start;
    }


    .cross-referral .pn-workspace[b-8r9qv8z1tg] {
        grid-template-columns: 1fr;
    }


    .cross-referral .pn-sidebar[b-8r9qv8z1tg] {
        position: relative;
        top: auto;
    }


    .cross-referral .pn-sidebar-title[b-8r9qv8z1tg] {
        display: none;
    }


    .cross-referral .pn-nav[b-8r9qv8z1tg] {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding: 8px;
    }


        .cross-referral .pn-nav a[b-8r9qv8z1tg] {
            flex: 0 0 auto;
            margin: 0;
            white-space: nowrap;
        }


    .cross-referral .pn-form-grid[b-8r9qv8z1tg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .cross-referral .pn-response-status[b-8r9qv8z1tg] {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width: 768px) {

    .cross-referral .pn-page-header[b-8r9qv8z1tg] {
        padding: 16px;
    }


    .cross-referral .pn-patient-card[b-8r9qv8z1tg] {
        margin: 12px 16px;
        grid-template-columns: 1fr 1fr;
    }


    .cross-referral .pn-patient-main[b-8r9qv8z1tg] {
        grid-column: 1 / -1;
        grid-row: auto;
        border-right: 0;
        border-bottom: 1px solid var(--cr-border);
    }


    .cross-referral .pn-patient-item[b-8r9qv8z1tg] {
        border-bottom: 1px solid var(--cr-border);
    }


        .cross-referral .pn-patient-item:nth-child(even)[b-8r9qv8z1tg] {
            border-right: 0;
        }


    .cross-referral .pn-workspace[b-8r9qv8z1tg] {
        padding: 0 16px 90px;
    }


    .cross-referral .pn-form-grid[b-8r9qv8z1tg] {
        grid-template-columns: 1fr;
    }


    .cross-referral .pn-field-full[b-8r9qv8z1tg] {
        grid-column: auto;
    }


    .cross-referral .pn-response-status[b-8r9qv8z1tg] {
        grid-template-columns: 1fr;
    }


    .cross-referral .pn-section-body[b-8r9qv8z1tg] {
        padding: 14px;
    }


    .cross-referral .pn-section-header[b-8r9qv8z1tg] {
        padding: 12px 14px;
    }


    .cross-referral .pn-auth-card[b-8r9qv8z1tg] {
        grid-template-columns: 1fr;
    }


        .cross-referral .pn-auth-card > div:last-child[b-8r9qv8z1tg] {
            grid-column: auto;
        }


    .cross-referral .pn-bottom-actions[b-8r9qv8z1tg] {
        padding: 10px 16px;
    }
}


/* =========================================================
   520px
   ========================================================= */

@media (max-width: 520px) {

    .cross-referral .pn-title-area[b-8r9qv8z1tg] {
        align-items: flex-start;
    }


    .cross-referral .pn-title-icon[b-8r9qv8z1tg] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .cross-referral .pn-title-area h1[b-8r9qv8z1tg] {
        font-size: 18px;
    }


    .cross-referral .pn-header-actions[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }


        .cross-referral .pn-header-actions .pn-btn[b-8r9qv8z1tg] {
            width: 100%;
        }


    .cross-referral .pn-patient-card[b-8r9qv8z1tg] {
        grid-template-columns: 1fr;
    }


    .cross-referral .pn-patient-item[b-8r9qv8z1tg] {
        border-right: 0 !important;
        border-bottom: 1px solid var(--cr-border);
    }


        .cross-referral .pn-patient-item:last-child[b-8r9qv8z1tg] {
            border-bottom: 0;
        }


    .cross-referral .pn-section-heading[b-8r9qv8z1tg] {
        align-items: flex-start;
    }


        .cross-referral .pn-section-heading h2[b-8r9qv8z1tg] {
            font-size: 14px;
        }


        .cross-referral .pn-section-heading span[b-8r9qv8z1tg] {
            font-size: 10.5px;
        }


    .cross-referral .pn-bottom-actions[b-8r9qv8z1tg] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


        .cross-referral .pn-bottom-actions .pn-btn:last-child[b-8r9qv8z1tg] {
            grid-column: 1 / -1;
        }
}
/* /Pages/IPD/DischargeSummary.razor.rz.scp.css */
/* =========================================================
   DISCHARGE SUMMARY
   Scoped to .discharge-summary
   ========================================================= */

.discharge-summary[b-18pvx3l1bm] {
    --ds-primary: #6f42c1;
    --ds-primary-dark: #59339d;
    --ds-primary-light: #f3effb;
    --ds-border: #e4e1ea;
    --ds-text: #292735;
    --ds-muted: #777487;
    --ds-bg: #f7f7f9;
    --ds-white: #ffffff;
    min-height: 100vh;
    padding: 24px;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.ds-page-header[b-18pvx3l1bm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.ds-breadcrumb[b-18pvx3l1bm] {
    margin-bottom: 7px;
    color: var(--ds-muted);
    font-size: 13px;
}

    .ds-breadcrumb span[b-18pvx3l1bm] {
        margin: 0 7px;
        color: #aaa5b3;
    }

.ds-page-header h1[b-18pvx3l1bm] {
    margin: 0;
    color: var(--ds-text);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.ds-page-header p[b-18pvx3l1bm] {
    margin: 6px 0 0;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-header-actions[b-18pvx3l1bm] {
    display: flex;
    gap: 8px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ds-btn[b-18pvx3l1bm],
.ds-small-btn[b-18pvx3l1bm] {
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all .18s ease;
}

.ds-btn[b-18pvx3l1bm] {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
}

    .ds-btn svg[b-18pvx3l1bm],
    .ds-small-btn svg[b-18pvx3l1bm] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ds-btn-primary[b-18pvx3l1bm] {
    background: var(--ds-primary);
    color: #fff;
}

    .ds-btn-primary:hover[b-18pvx3l1bm] {
        background: var(--ds-primary-dark);
    }

.ds-btn-light[b-18pvx3l1bm] {
    background: #fff;
    border-color: var(--ds-border);
    color: #514d5c;
}

    .ds-btn-light:hover[b-18pvx3l1bm] {
        background: #f5f3f8;
    }

.ds-btn-secondary[b-18pvx3l1bm] {
    background: #ede8f7;
    color: var(--ds-primary-dark);
}

    .ds-btn-secondary:hover[b-18pvx3l1bm] {
        background: #e3daf2;
    }

.ds-small-btn[b-18pvx3l1bm] {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-color: var(--ds-border);
    color: var(--ds-primary);
    font-size: 11px;
}

    .ds-small-btn:hover[b-18pvx3l1bm] {
        background: var(--ds-primary-light);
    }


/* =========================================================
   PATIENT CARD
   ========================================================= */

.ds-patient-card[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.ds-patient-avatar[b-18pvx3l1bm] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ds-primary-light);
    color: var(--ds-primary);
    font-size: 14px;
    font-weight: 700;
}

.ds-patient-main[b-18pvx3l1bm] {
    min-width: 0;
    flex: 1;
}

.ds-patient-name[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
}

.ds-patient-meta[b-18pvx3l1bm] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 5px;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-patient-side[b-18pvx3l1bm] {
    min-width: 125px;
    padding-left: 18px;
    border-left: 1px solid var(--ds-border);
    text-align: right;
}

    .ds-patient-side span[b-18pvx3l1bm] {
        display: block;
        margin-bottom: 3px;
        color: var(--ds-muted);
        font-size: 11px;
    }

    .ds-patient-side strong[b-18pvx3l1bm] {
        font-size: 12px;
    }

.ds-status[b-18pvx3l1bm] {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .ds-status.active[b-18pvx3l1bm] {
        background: #eaf7ef;
        color: #25804a;
    }


/* =========================================================
   DISCHARGE STATUS BAR
   ========================================================= */

.ds-status-bar[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    min-height: 65px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .03);
}

.ds-status-item[b-18pvx3l1bm] {
    flex: 1;
    padding: 10px 15px;
}

    .ds-status-item span[b-18pvx3l1bm] {
        display: block;
        margin-bottom: 4px;
        color: var(--ds-muted);
        font-size: 10px;
    }

    .ds-status-item strong[b-18pvx3l1bm] {
        color: #403b47;
        font-size: 12px;
    }

    .ds-status-item .billing-clear[b-18pvx3l1bm] {
        color: #a46d17;
    }

    .ds-status-item .draft[b-18pvx3l1bm] {
        color: var(--ds-primary);
    }

.ds-status-arrow[b-18pvx3l1bm] {
    color: #aaa4b1;
    font-size: 17px;
}

.ds-status-divider[b-18pvx3l1bm] {
    width: 1px;
    height: 34px;
    background: var(--ds-border);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ds-layout[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ds-main[b-18pvx3l1bm] {
    min-width: 0;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.ds-sidebar[b-18pvx3l1bm] {
    position: sticky;
    top: 20px;
    padding: 9px;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.ds-sidebar-title[b-18pvx3l1bm] {
    padding: 8px 10px 10px;
    color: #8b8793;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.ds-sidebar a[b-18pvx3l1bm] {
    min-height: 39px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5c5866;
    text-decoration: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    transition: all .18s ease;
}

    .ds-sidebar a:hover[b-18pvx3l1bm] {
        color: var(--ds-primary);
        background: var(--ds-primary-light);
    }

    .ds-sidebar a:first-of-type[b-18pvx3l1bm] {
        color: var(--ds-primary);
        background: var(--ds-primary-light);
    }

.ds-sidebar svg[b-18pvx3l1bm] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.ds-section[b-18pvx3l1bm] {
    scroll-margin-top: 20px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.ds-section-header[b-18pvx3l1bm] {
    min-height: 67px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--ds-border);
}

    .ds-section-header > div:first-child[b-18pvx3l1bm] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

.ds-section-number[b-18pvx3l1bm] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--ds-primary-light);
    color: var(--ds-primary);
    font-size: 10px;
    font-weight: 800;
}

.ds-section-header h2[b-18pvx3l1bm] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.ds-section-header p[b-18pvx3l1bm] {
    margin: 3px 0 0;
    color: var(--ds-muted);
    font-size: 11px;
}


/* =========================================================
   BADGES
   ========================================================= */

.ds-badge[b-18pvx3l1bm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

    .ds-badge.draft-badge[b-18pvx3l1bm] {
        background: #f0eafa;
        color: var(--ds-primary-dark);
    }


/* =========================================================
   FORM
   ========================================================= */

.ds-form-grid[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 18px;
}

.ds-field[b-18pvx3l1bm] {
    min-width: 0;
}

.ds-full[b-18pvx3l1bm] {
    grid-column: 1 / -1;
}

.ds-field > label[b-18pvx3l1bm],
.ds-instruction-card > label[b-18pvx3l1bm] {
    display: block;
    margin-bottom: 6px;
    color: #575260;
    font-size: 11px;
    font-weight: 650;
}

.ds-field input[b-18pvx3l1bm],
.ds-field select[b-18pvx3l1bm],
.ds-field textarea[b-18pvx3l1bm],
.ds-diagnosis-card textarea[b-18pvx3l1bm],
.ds-instruction-card textarea[b-18pvx3l1bm] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd9e3;
    border-radius: 6px;
    background: #fff;
    color: #373440;
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ds-field input[b-18pvx3l1bm],
.ds-field select[b-18pvx3l1bm] {
    height: 38px;
    padding: 0 11px;
}

.ds-field textarea[b-18pvx3l1bm],
.ds-diagnosis-card textarea[b-18pvx3l1bm],
.ds-instruction-card textarea[b-18pvx3l1bm] {
    min-height: 80px;
    padding: 10px 11px;
    resize: vertical;
}

    .ds-field input:focus[b-18pvx3l1bm],
    .ds-field select:focus[b-18pvx3l1bm],
    .ds-field textarea:focus[b-18pvx3l1bm],
    .ds-diagnosis-card textarea:focus[b-18pvx3l1bm],
    .ds-instruction-card textarea:focus[b-18pvx3l1bm] {
        border-color: #a98bd2;
        box-shadow: 0 0 0 3px rgba(111, 66, 193, .08);
    }

.ds-field input[readonly][b-18pvx3l1bm] {
    background: #f8f7fa;
    color: #77717f;
}


/* =========================================================
   DIAGNOSIS
   ========================================================= */

.ds-diagnosis-grid[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px;
}

.ds-diagnosis-card[b-18pvx3l1bm] {
    padding: 14px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #fcfbfd;
}

    .ds-diagnosis-card.admission[b-18pvx3l1bm] {
        border-left: 3px solid #6f42c1;
    }

    .ds-diagnosis-card.final[b-18pvx3l1bm] {
        border-left: 3px solid #267847;
    }

.ds-diagnosis-title[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.ds-diagnosis-icon[b-18pvx3l1bm] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--ds-primary-light);
    color: var(--ds-primary);
    font-size: 11px;
    font-weight: 800;
}

.ds-diagnosis-card.final .ds-diagnosis-icon[b-18pvx3l1bm] {
    background: #eaf7ef;
    color: #267847;
}

.ds-diagnosis-title strong[b-18pvx3l1bm] {
    display: block;
    color: #403b47;
    font-size: 12px;
}

.ds-diagnosis-title small[b-18pvx3l1bm] {
    display: block;
    margin-top: 3px;
    color: var(--ds-muted);
    font-size: 9px;
}


/* =========================================================
   TABLE
   ========================================================= */

.ds-table-wrapper[b-18pvx3l1bm] {
    overflow-x: auto;
}

.ds-table[b-18pvx3l1bm] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

    .ds-table th[b-18pvx3l1bm] {
        padding: 10px 12px;
        background: #f8f7fa;
        border-bottom: 1px solid var(--ds-border);
        color: #77717f;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .ds-table td[b-18pvx3l1bm] {
        padding: 12px;
        border-bottom: 1px solid #eeeaf1;
        color: #5d5965;
        font-size: 11px;
        vertical-align: middle;
    }

    .ds-table tbody tr:last-child td[b-18pvx3l1bm] {
        border-bottom: 0;
    }

    .ds-table tbody tr:hover[b-18pvx3l1bm] {
        background: #fcfbfd;
    }

    .ds-table td strong[b-18pvx3l1bm] {
        color: #403b47;
        font-size: 11px;
    }

.ds-result[b-18pvx3l1bm] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
}

    .ds-result.normal[b-18pvx3l1bm] {
        background: #eaf7ef;
        color: #267847;
    }

    .ds-result.reviewed[b-18pvx3l1bm] {
        background: #f0eafa;
        color: #6f42c1;
    }


/* =========================================================
   CONDITION
   ========================================================= */

.ds-condition-grid[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 18px 18px 0;
}

.ds-condition-card[b-18pvx3l1bm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #e2dee7;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all .18s ease;
}

    .ds-condition-card:hover[b-18pvx3l1bm] {
        border-color: #c3acd9;
        background: #fbf9fd;
    }

    .ds-condition-card input[b-18pvx3l1bm] {
        position: absolute;
        opacity: 0;
    }

.ds-radio[b-18pvx3l1bm] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1.5px solid #bbb5c2;
    border-radius: 50%;
    position: relative;
}

.ds-condition-card input:checked + .ds-radio[b-18pvx3l1bm] {
    border-color: var(--ds-primary);
}

    .ds-condition-card input:checked + .ds-radio[b-18pvx3l1bm]::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        left: 2.5px;
        top: 2.5px;
        border-radius: 50%;
        background: var(--ds-primary);
    }

.ds-condition-card strong[b-18pvx3l1bm] {
    display: block;
    color: #403b47;
    font-size: 11px;
}

.ds-condition-card small[b-18pvx3l1bm] {
    display: block;
    margin-top: 3px;
    color: var(--ds-muted);
    font-size: 9px;
}


/* =========================================================
   INSTRUCTIONS
   ========================================================= */

.ds-instruction-grid[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px;
}

.ds-instruction-card[b-18pvx3l1bm] {
    padding: 13px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #fcfbfd;
}


/* =========================================================
   BILLING CLEARANCE
   ========================================================= */

.ds-billing-section[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 15px 18px;
    background: #fffdf8;
    border: 1px solid #eadfc6;
    border-radius: 10px;
}

.ds-billing-icon[b-18pvx3l1bm] {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff1d8;
    color: #a46d17;
}

    .ds-billing-icon svg[b-18pvx3l1bm] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ds-billing-content[b-18pvx3l1bm] {
    flex: 1;
}

    .ds-billing-content strong[b-18pvx3l1bm] {
        display: block;
        color: #4a4133;
        font-size: 12px;
    }

    .ds-billing-content span[b-18pvx3l1bm] {
        display: block;
        margin-top: 4px;
        color: #7d725f;
        font-size: 10px;
        line-height: 1.5;
    }

.ds-billing-status[b-18pvx3l1bm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-clearance[b-18pvx3l1bm] {
    padding: 5px 9px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
}

    .ds-clearance.pending[b-18pvx3l1bm] {
        background: #fff1d8;
        color: #9a6914;
    }

.ds-link-btn[b-18pvx3l1bm] {
    border: 0;
    background: transparent;
    color: var(--ds-primary);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   AUTHENTICATION
   ========================================================= */

.ds-auth-grid[b-18pvx3l1bm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
}

.ds-auth-card[b-18pvx3l1bm] {
    padding: 13px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #faf9fb;
}

    .ds-auth-card span[b-18pvx3l1bm] {
        display: block;
        margin-bottom: 5px;
        color: var(--ds-muted);
        font-size: 10px;
    }

    .ds-auth-card strong[b-18pvx3l1bm] {
        display: block;
        color: #403b47;
        font-size: 12px;
    }

    .ds-auth-card small[b-18pvx3l1bm] {
        display: block;
        margin-top: 5px;
        color: #898490;
        font-size: 10px;
    }

.ds-auth-draft[b-18pvx3l1bm] {
    color: var(--ds-primary) !important;
}


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.ds-bottom-actions[b-18pvx3l1bm] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    box-shadow: 0 -3px 15px rgba(45, 35, 65, .06);
}

    .ds-bottom-actions > div[b-18pvx3l1bm] {
        display: flex;
        gap: 8px;
    }


/* =========================================================
   SMOOTH SCROLL
   ========================================================= */

html[b-18pvx3l1bm] {
    scroll-behavior: smooth;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .ds-layout[b-18pvx3l1bm] {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .ds-summary-grid[b-18pvx3l1bm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds-condition-grid[b-18pvx3l1bm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds-auth-grid[b-18pvx3l1bm] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 850px) {

    .discharge-summary[b-18pvx3l1bm] {
        padding: 16px;
    }

    .ds-page-header[b-18pvx3l1bm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ds-header-actions[b-18pvx3l1bm] {
        width: 100%;
    }

        .ds-header-actions .ds-btn[b-18pvx3l1bm] {
            flex: 1;
        }

    .ds-layout[b-18pvx3l1bm] {
        grid-template-columns: 1fr;
    }

    .ds-sidebar[b-18pvx3l1bm] {
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 7px;
    }

    .ds-sidebar-title[b-18pvx3l1bm] {
        display: none;
    }

    .ds-sidebar a[b-18pvx3l1bm] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

        .ds-sidebar a:first-of-type[b-18pvx3l1bm] {
            background: transparent;
        }

        .ds-sidebar a:hover[b-18pvx3l1bm] {
            background: var(--ds-primary-light);
        }

    .ds-patient-card[b-18pvx3l1bm] {
        align-items: flex-start;
    }

    .ds-patient-side[b-18pvx3l1bm] {
        display: none;
    }

    .ds-status-bar[b-18pvx3l1bm] {
        overflow-x: auto;
    }

    .ds-status-item[b-18pvx3l1bm] {
        min-width: 135px;
    }

    .ds-diagnosis-grid[b-18pvx3l1bm],
    .ds-instruction-grid[b-18pvx3l1bm] {
        grid-template-columns: 1fr;
    }

    .ds-billing-section[b-18pvx3l1bm] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ds-billing-status[b-18pvx3l1bm] {
        width: 100%;
        padding-left: 52px;
    }
}


@media (max-width: 600px) {

    .discharge-summary[b-18pvx3l1bm] {
        padding: 10px;
    }

    .ds-page-header h1[b-18pvx3l1bm] {
        font-size: 21px;
    }

    .ds-form-grid[b-18pvx3l1bm] {
        grid-template-columns: 1fr;
    }

    .ds-full[b-18pvx3l1bm] {
        grid-column: auto;
    }

    .ds-section-header[b-18pvx3l1bm] {
        align-items: flex-start;
        flex-direction: column;
    }

        .ds-section-header > div:first-child[b-18pvx3l1bm] {
            width: 100%;
        }

    .ds-patient-meta[b-18pvx3l1bm] {
        flex-direction: column;
        gap: 4px;
    }

    .ds-status-bar[b-18pvx3l1bm] {
        align-items: stretch;
        flex-direction: column;
    }

    .ds-status-item[b-18pvx3l1bm] {
        min-width: auto;
        border-bottom: 1px solid var(--ds-border);
    }

    .ds-status-divider[b-18pvx3l1bm],
    .ds-status-arrow[b-18pvx3l1bm] {
        display: none;
    }

    .ds-condition-grid[b-18pvx3l1bm] {
        grid-template-columns: 1fr;
    }

    .ds-billing-status[b-18pvx3l1bm] {
        padding-left: 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .ds-bottom-actions[b-18pvx3l1bm] {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

        .ds-bottom-actions > div[b-18pvx3l1bm] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .ds-bottom-actions .ds-btn[b-18pvx3l1bm] {
            width: 100%;
        }
}
/* /Pages/IPD/IPD.razor.rz.scp.css */
/* CSS for IPD component */
/* =========================================================
   IPD MANAGEMENT
   Central IPD Workflow Page
   ========================================================= */

.ipd-page[b-1rqe1z3mzi] {
    --ipd-primary: #6d28d9;
    --ipd-primary-dark: #5420aa;
    --ipd-primary-soft: #f3edff;
    --ipd-purple-border: #e4d8f8;
    --ipd-text: #252236;
    --ipd-muted: #737084;
    --ipd-border: #e8e6ee;
    --ipd-bg: #f7f7fa;
    --ipd-white: #ffffff;
    min-height: 100vh;
    background: var(--ipd-bg);
    color: var(--ipd-text);
    padding: 24px;
}


/* =========================================================
   HEADER
   ========================================================= */

.ipd-header[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.header-left[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon[b-1rqe1z3mzi] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ipd-primary-soft);
    border: 1px solid var(--ipd-purple-border);
    border-radius: 12px;
}

    .header-icon svg[b-1rqe1z3mzi] {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: var(--ipd-primary);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.page-kicker[b-1rqe1z3mzi],
.section-kicker[b-1rqe1z3mzi] {
    display: block;
    color: var(--ipd-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ipd-header h1[b-1rqe1z3mzi] {
    margin: 2px 0 3px;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.ipd-header p[b-1rqe1z3mzi] {
    margin: 0;
    color: var(--ipd-muted);
    font-size: 13px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn[b-1rqe1z3mzi] {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

    .btn svg[b-1rqe1z3mzi] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-primary[b-1rqe1z3mzi] {
    color: #fff;
    background: var(--ipd-primary);
    border: 1px solid var(--ipd-primary);
}

    .btn-primary:hover[b-1rqe1z3mzi] {
        color: #fff;
        background: var(--ipd-primary-dark);
        border-color: var(--ipd-primary-dark);
        transform: translateY(-1px);
    }


/* =========================================================
   PATIENT CONTEXT
   ========================================================= */

.patient-context[b-1rqe1z3mzi] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--ipd-white);
    border: 1px solid var(--ipd-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 26px;
    box-shadow: 0 3px 14px rgba(38, 28, 63, .035);
}

.patient-main[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.patient-avatar[b-1rqe1z3mzi] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ipd-primary);
    background: var(--ipd-primary-soft);
    font-size: 15px;
    font-weight: 800;
}

.patient-name-row[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .patient-name-row h2[b-1rqe1z3mzi] {
        margin: 0;
        font-size: 17px;
        font-weight: 750;
    }

.status-badge[b-1rqe1z3mzi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #eefbf4;
    border: 1px solid #d7f0e1;
    color: #218653;
    font-size: 10px;
    font-weight: 700;
}

.status-dot[b-1rqe1z3mzi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28a765;
}

.patient-meta[b-1rqe1z3mzi] {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 7px;
    color: var(--ipd-muted);
    font-size: 11px;
}

    .patient-meta strong[b-1rqe1z3mzi] {
        color: #504c5d;
        font-weight: 700;
    }

.patient-details[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-left: 25px;
    border-left: 1px solid var(--ipd-border);
}

.context-item[b-1rqe1z3mzi] {
    min-width: 105px;
}

    .context-item span[b-1rqe1z3mzi] {
        display: block;
        margin-bottom: 4px;
        color: #8a8795;
        font-size: 10px;
        font-weight: 600;
    }

    .context-item strong[b-1rqe1z3mzi] {
        color: #393544;
        font-size: 11px;
        font-weight: 700;
    }


/* =========================================================
   SECTION HEADING
   ========================================================= */

.workflow-section[b-1rqe1z3mzi],
.quick-section[b-1rqe1z3mzi] {
    margin-bottom: 27px;
}

.section-heading[b-1rqe1z3mzi] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

    .section-heading h2[b-1rqe1z3mzi] {
        margin: 3px 0 2px;
        font-size: 18px;
        font-weight: 750;
    }

    .section-heading p[b-1rqe1z3mzi] {
        margin: 0;
        color: var(--ipd-muted);
        font-size: 12px;
    }

.workflow-status[b-1rqe1z3mzi] {
    padding: 8px 12px;
    background: var(--ipd-primary-soft);
    border: 1px solid var(--ipd-purple-border);
    border-radius: 8px;
    text-align: right;
}

.workflow-label[b-1rqe1z3mzi] {
    display: block;
    margin-bottom: 2px;
    color: #8a7ca1;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.workflow-status strong[b-1rqe1z3mzi] {
    color: var(--ipd-primary);
    font-size: 12px;
}


/* =========================================================
   FLOW PROGRESS
   ========================================================= */

.flow-progress[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    padding: 13px 15px;
    margin-bottom: 18px;
    background: var(--ipd-white);
    border: 1px solid var(--ipd-border);
    border-radius: 10px;
    overflow-x: auto;
}

.flow-step[b-1rqe1z3mzi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9a97a4;
    white-space: nowrap;
}

.flow-number[b-1rqe1z3mzi] {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2f1f5;
    color: #888492;
    font-size: 9px;
    font-weight: 800;
}

.flow-text[b-1rqe1z3mzi] {
    font-size: 10px;
    font-weight: 700;
}

.flow-step.completed[b-1rqe1z3mzi] {
    color: #4f4a59;
}

    .flow-step.completed .flow-number[b-1rqe1z3mzi] {
        background: #e9e0fb;
        color: var(--ipd-primary);
    }

.flow-step.active[b-1rqe1z3mzi] {
    color: var(--ipd-primary);
}

    .flow-step.active .flow-number[b-1rqe1z3mzi] {
        background: var(--ipd-primary);
        color: #fff;
    }

.flow-line[b-1rqe1z3mzi] {
    flex: 1 1 30px;
    min-width: 20px;
    height: 1px;
    margin: 0 8px;
    background: #e5e2ea;
}

.completed-line[b-1rqe1z3mzi] {
    background: #cdb9ee;
}

.active-line[b-1rqe1z3mzi] {
    background: linear-gradient( to right, #cdb9ee, #e5e2ea );
}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.category-grid[b-1rqe1z3mzi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.category-card[b-1rqe1z3mzi] {
    position: relative;
    padding: 17px;
    background: var(--ipd-white);
    border: 1px solid var(--ipd-border);
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(38, 28, 63, .025);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .category-card:hover[b-1rqe1z3mzi] {
        transform: translateY(-2px);
        border-color: var(--ipd-purple-border);
        box-shadow: 0 8px 20px rgba(58, 39, 91, .07);
    }

.category-top[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.category-icon[b-1rqe1z3mzi] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

    .category-icon svg[b-1rqe1z3mzi] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.admission-icon[b-1rqe1z3mzi],
.clinical-icon[b-1rqe1z3mzi],
.procedure-icon[b-1rqe1z3mzi],
.investigation-icon[b-1rqe1z3mzi],
.records-icon[b-1rqe1z3mzi],
.billing-icon[b-1rqe1z3mzi],
.discharge-icon[b-1rqe1z3mzi] {
    color: var(--ipd-primary);
    background: var(--ipd-primary-soft);
}

.category-number[b-1rqe1z3mzi] {
    color: #aaa6b2;
    font-size: 10px;
    font-weight: 800;
}

.category-card h3[b-1rqe1z3mzi] {
    margin: 0 0 6px;
    color: #302d3a;
    font-size: 14px;
    font-weight: 750;
}

.category-card > p[b-1rqe1z3mzi] {
    min-height: 34px;
    margin: 0 0 13px;
    color: var(--ipd-muted);
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   MODULE LINKS
   ========================================================= */

.module-links[b-1rqe1z3mzi] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #efedf2;
}

.module-link[b-1rqe1z3mzi] {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
    color: #514d5b;
    text-decoration: none;
    border-bottom: 1px solid #f1eff4;
    font-size: 11px;
    font-weight: 650;
    transition: color .15s ease, padding .15s ease;
}

    .module-link:last-child[b-1rqe1z3mzi] {
        border-bottom: 0;
    }

    .module-link:hover[b-1rqe1z3mzi] {
        color: var(--ipd-primary);
        padding-left: 4px;
    }

.arrow[b-1rqe1z3mzi] {
    color: #aaa5b2;
    font-size: 15px;
    transition: transform .15s ease;
}

.module-link:hover .arrow[b-1rqe1z3mzi] {
    color: var(--ipd-primary);
    transform: translateX(2px);
}

.module-link-primary[b-1rqe1z3mzi] {
    color: var(--ipd-primary);
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.compact-heading[b-1rqe1z3mzi] {
    margin-bottom: 11px;
}

.quick-grid[b-1rqe1z3mzi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.quick-card[b-1rqe1z3mzi] {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: var(--ipd-white);
    border: 1px solid var(--ipd-border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .quick-card:hover[b-1rqe1z3mzi] {
        transform: translateY(-2px);
        border-color: var(--ipd-purple-border);
        box-shadow: 0 7px 16px rgba(48, 34, 75, .06);
    }

.quick-icon[b-1rqe1z3mzi] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ipd-primary-soft);
    border-radius: 8px;
    color: var(--ipd-primary);
}

    .quick-icon svg[b-1rqe1z3mzi] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.quick-card div:nth-child(2)[b-1rqe1z3mzi] {
    min-width: 0;
    flex: 1;
}

.quick-card strong[b-1rqe1z3mzi] {
    display: block;
    margin-bottom: 2px;
    color: #403c49;
    font-size: 11px;
    font-weight: 750;
}

.quick-card span[b-1rqe1z3mzi] {
    color: #8a8793;
    font-size: 9px;
}

.quick-arrow[b-1rqe1z3mzi] {
    color: #aaa6b2 !important;
    font-size: 15px !important;
}


/* =========================================================
   FOOTER NOTE
   ========================================================= */

.ipd-footer-note[b-1rqe1z3mzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    background: #fbfaff;
    border: 1px solid var(--ipd-purple-border);
    border-radius: 8px;
    color: #777181;
    font-size: 10px;
}

    .ipd-footer-note svg[b-1rqe1z3mzi] {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--ipd-primary);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .patient-context[b-1rqe1z3mzi] {
        flex-direction: column;
        gap: 17px;
    }

    .patient-details[b-1rqe1z3mzi] {
        padding-left: 0;
        padding-top: 15px;
        border-left: 0;
        border-top: 1px solid var(--ipd-border);
    }

    .category-grid[b-1rqe1z3mzi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-grid[b-1rqe1z3mzi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .ipd-page[b-1rqe1z3mzi] {
        padding: 16px;
    }

    .ipd-header[b-1rqe1z3mzi] {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions[b-1rqe1z3mzi] {
        width: 100%;
    }

        .header-actions .btn[b-1rqe1z3mzi] {
            width: 100%;
        }

    .section-heading[b-1rqe1z3mzi] {
        align-items: flex-start;
        flex-direction: column;
    }

    .workflow-status[b-1rqe1z3mzi] {
        text-align: left;
    }

    .patient-details[b-1rqe1z3mzi] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }

    .category-grid[b-1rqe1z3mzi] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .ipd-page[b-1rqe1z3mzi] {
        padding: 12px;
    }

    .ipd-header h1[b-1rqe1z3mzi] {
        font-size: 21px;
    }

    .header-left[b-1rqe1z3mzi] {
        align-items: flex-start;
    }

    .header-icon[b-1rqe1z3mzi] {
        width: 42px;
        height: 42px;
    }

    .patient-context[b-1rqe1z3mzi] {
        padding: 14px;
    }

    .patient-main[b-1rqe1z3mzi] {
        align-items: flex-start;
    }

    .patient-name-row[b-1rqe1z3mzi] {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .patient-meta[b-1rqe1z3mzi] {
        flex-direction: column;
        gap: 5px;
    }

    .patient-details[b-1rqe1z3mzi] {
        grid-template-columns: 1fr;
    }

    .quick-grid[b-1rqe1z3mzi] {
        grid-template-columns: 1fr;
    }

    .flow-progress[b-1rqe1z3mzi] {
        padding: 11px;
    }

    .flow-line[b-1rqe1z3mzi] {
        min-width: 14px;
        margin-left: 5px;
        margin-right: 5px;
    }
}
/* /Pages/IPD/IpdAdmissionDetails.razor.rz.scp.css */
/* =========================================================
   IPD ADMISSION — VIEW DETAILS  (redesign)
   Reuses theme tokens + .ipd-page / .ipd-header / .ipd-actions
   ========================================================= */

/* ---------------------------------------------------------
   HERO — patient identity band
   --------------------------------------------------------- */
.ipd-view-page .view-hero[b-7xn8ors2ol] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-soft) 0%, #ffffff 65%);
    box-shadow: 0 6px 22px rgba(15, 23, 42, .05);
    margin-bottom: 22px;
}

.ipd-view-page .view-hero-avatar[b-7xn8ors2ol] {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(91, 79, 229, .35);
}

.ipd-view-page .view-hero-main[b-7xn8ors2ol] {
    flex: 1 1 auto;
    min-width: 0;
}

.ipd-view-page .view-hero-name[b-7xn8ors2ol] {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.ipd-view-page .view-hero-meta[b-7xn8ors2ol] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.ipd-view-page .view-hero-meta-item[b-7xn8ors2ol] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .ipd-view-page .view-hero-meta-item .mdi[b-7xn8ors2ol] {
        font-size: 14px;
        color: var(--primary);
    }

.ipd-view-page .view-hero-dot[b-7xn8ors2ol] {
    color: var(--border);
}

.ipd-view-page .view-hero-side[b-7xn8ors2ol] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.ipd-view-page .view-hero-admno[b-7xn8ors2ol] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.ipd-view-page .view-hero-admno-label[b-7xn8ors2ol] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.ipd-view-page .view-hero-admno-value[b-7xn8ors2ol] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}

/* ---------------------------------------------------------
   LAYOUT — 2-column asymmetric grid
   --------------------------------------------------------- */
.ipd-view-page .view-layout[b-7xn8ors2ol] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: start;
}

.ipd-view-page .view-col[b-7xn8ors2ol] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */
.ipd-view-page .view-card[b-7xn8ors2ol] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.ipd-view-page .view-card-muted[b-7xn8ors2ol] {
    background: var(--surface-muted);
    box-shadow: none;
}

.ipd-view-page .view-card-full[b-7xn8ors2ol] {
    grid-column: 1 / -1;
    margin-top: 20px;
}

.ipd-view-page .view-card-head[b-7xn8ors2ol] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

.ipd-view-page .view-card-icon[b-7xn8ors2ol] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.ipd-view-page .view-card-title[b-7xn8ors2ol] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .01em;
}

/* ---------------------------------------------------------
   DEFINITION LIST ROWS
   --------------------------------------------------------- */
.ipd-view-page .view-dl[b-7xn8ors2ol] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.ipd-view-page .view-dl-row[b-7xn8ors2ol] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .ipd-view-page .view-dl-row:last-child[b-7xn8ors2ol] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .ipd-view-page .view-dl-row dt[b-7xn8ors2ol] {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-soft);
        flex-shrink: 0;
    }

    .ipd-view-page .view-dl-row dd[b-7xn8ors2ol] {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        text-align: right;
        word-break: break-word;
    }

.ipd-view-page .view-amount[b-7xn8ors2ol] {
    color: var(--emerald-600) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}

.ipd-view-page .view-empty[b-7xn8ors2ol] {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-style: italic;
}

/* ---------------------------------------------------------
   STATUS PILL
   --------------------------------------------------------- */
.ipd-view-page .view-status[b-7xn8ors2ol] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 11px 4px 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

    .ipd-view-page .view-status .mdi[b-7xn8ors2ol] {
        font-size: 14px;
        line-height: 1;
    }

.ipd-view-page .view-status-active[b-7xn8ors2ol] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.ipd-view-page .view-status-inactive[b-7xn8ors2ol] {
    background: var(--rose-100);
    color: var(--rose-600);
}

.ipd-view-page .view-status-warning[b-7xn8ors2ol] {
    background: var(--amber-100);
    color: var(--amber-600);
}

/* ---------------------------------------------------------
   DOCTORS
   --------------------------------------------------------- */
.ipd-view-page .view-doctor-list[b-7xn8ors2ol] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ipd-view-page .view-doctor[b-7xn8ors2ol] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
    transition: border-color .15s ease, background .15s ease;
}

    .ipd-view-page .view-doctor:hover[b-7xn8ors2ol] {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

.ipd-view-page .view-doctor-avatar[b-7xn8ors2ol] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.ipd-view-page .view-doctor-name[b-7xn8ors2ol] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* ---------------------------------------------------------
   BED BLOCK
   --------------------------------------------------------- */
.ipd-view-page .view-bed[b-7xn8ors2ol] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--primary);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-soft) 0%, #ffffff 80%);
}

.ipd-view-page .view-bed-badge[b-7xn8ors2ol] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
    flex-shrink: 0;
}

    .ipd-view-page .view-bed-badge .mdi[b-7xn8ors2ol] {
        font-size: 16px;
    }

.ipd-view-page .view-bed-info[b-7xn8ors2ol] {
    min-width: 0;
}

.ipd-view-page .view-bed-ward[b-7xn8ors2ol] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.ipd-view-page .view-bed-room[b-7xn8ors2ol] {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* ---------------------------------------------------------
   CLINICAL PROSE
   --------------------------------------------------------- */
.ipd-view-page .view-prose[b-7xn8ors2ol] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ipd-view-page .view-prose-block + .view-prose-block[b-7xn8ors2ol] {
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.ipd-view-page .view-prose-label[b-7xn8ors2ol] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.ipd-view-page .view-prose-text[b-7xn8ors2ol] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 992px) {
    .ipd-view-page .view-layout[b-7xn8ors2ol] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ipd-view-page .view-hero[b-7xn8ors2ol] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .ipd-view-page .view-hero-side[b-7xn8ors2ol] {
        align-items: flex-start;
        width: 100%;
    }

    .ipd-view-page .view-hero-admno[b-7xn8ors2ol] {
        align-items: flex-start;
    }

    .ipd-view-page .view-dl-row[b-7xn8ors2ol] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

        .ipd-view-page .view-dl-row dd[b-7xn8ors2ol] {
            text-align: left;
        }
}
/* /Pages/IPD/IPDBilling.razor.rz.scp.css */
/* =========================================================
   IPD BILLING
   ========================================================= */

.ipd-billing[b-jnw33rhjc0] {
    --bill-primary: #6d28d9;
    --bill-primary-dark: #5420aa;
    --bill-primary-soft: #f3edff;
    --bill-border-purple: #e3d7f7;
    --bill-text: #282431;
    --bill-muted: #777382;
    --bill-border: #e8e6ed;
    --bill-bg: #f7f7fa;
    --bill-white: #ffffff;
    min-height: 100vh;
    padding: 22px 24px 90px;
    background: var(--bill-bg);
    color: var(--bill-text);
}


/* =========================================================
   HEADER
   ========================================================= */

.billing-header[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.header-left[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-button[b-jnw33rhjc0] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #716c79;
    background: #fff;
    border: 1px solid var(--bill-border);
    border-radius: 8px;
    text-decoration: none;
}

    .back-button:hover[b-jnw33rhjc0] {
        color: var(--bill-primary);
        border-color: var(--bill-border-purple);
    }

    .back-button svg[b-jnw33rhjc0] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.header-icon[b-jnw33rhjc0] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bill-primary-soft);
    border: 1px solid var(--bill-border-purple);
    border-radius: 10px;
    color: var(--bill-primary);
}

    .header-icon svg[b-jnw33rhjc0] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.page-kicker[b-jnw33rhjc0],
.section-kicker[b-jnw33rhjc0] {
    display: block;
    color: var(--bill-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.billing-header h1[b-jnw33rhjc0] {
    margin: 2px 0 2px;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.billing-header p[b-jnw33rhjc0] {
    margin: 0;
    color: var(--bill-muted);
    font-size: 11px;
}

.header-actions[b-jnw33rhjc0] {
    display: flex;
    gap: 8px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn[b-jnw33rhjc0] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .btn svg[b-jnw33rhjc0] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-primary[b-jnw33rhjc0] {
    color: #fff;
    background: var(--bill-primary);
    border: 1px solid var(--bill-primary);
}

    .btn-primary:hover[b-jnw33rhjc0] {
        background: var(--bill-primary-dark);
    }

.btn-outline[b-jnw33rhjc0] {
    color: var(--bill-primary);
    background: #fff;
    border: 1px solid var(--bill-border-purple);
}

    .btn-outline:hover[b-jnw33rhjc0] {
        background: var(--bill-primary-soft);
    }

.btn-light[b-jnw33rhjc0] {
    color: #625d69;
    background: #f3f2f5;
    border: 1px solid #e5e2e9;
}


/* =========================================================
   PATIENT CARD
   ========================================================= */

.patient-card[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    margin-bottom: 15px;
    background: var(--bill-white);
    border: 1px solid var(--bill-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(40, 30, 60, .025);
}

.patient-main[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.patient-avatar[b-jnw33rhjc0] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bill-primary);
    background: var(--bill-primary-soft);
    font-size: 13px;
    font-weight: 800;
}

.patient-name-row[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .patient-name-row h2[b-jnw33rhjc0] {
        margin: 0;
        font-size: 16px;
        font-weight: 750;
    }

.status-badge[b-jnw33rhjc0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    color: #238252;
    background: #effaf4;
    border: 1px solid #d7efdf;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
}

    .status-badge span[b-jnw33rhjc0] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #27a464;
    }

.patient-meta[b-jnw33rhjc0] {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 5px;
    color: #85818d;
    font-size: 10px;
}

    .patient-meta strong[b-jnw33rhjc0] {
        color: #57525f;
    }

.patient-details[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-left: 22px;
    border-left: 1px solid var(--bill-border);
}

    .patient-details span[b-jnw33rhjc0] {
        display: block;
        margin-bottom: 3px;
        color: #96919e;
        font-size: 9px;
    }

    .patient-details strong[b-jnw33rhjc0] {
        color: #403b47;
        font-size: 10px;
        font-weight: 700;
    }


/* =========================================================
   STATUS CARDS
   ========================================================= */

.billing-status-grid[b-jnw33rhjc0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.status-card[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bill-white);
    border: 1px solid var(--bill-border);
    border-radius: 9px;
}

.status-card-icon[b-jnw33rhjc0] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bill-primary);
    background: var(--bill-primary-soft);
    border-radius: 8px;
}

    .status-card-icon svg[b-jnw33rhjc0] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.status-card span[b-jnw33rhjc0] {
    display: block;
    margin-bottom: 2px;
    color: #8c8793;
    font-size: 9px;
}

.status-card strong[b-jnw33rhjc0] {
    color: #37323e;
    font-size: 14px;
    font-weight: 750;
}

.status-card.outstanding[b-jnw33rhjc0] {
    border-color: #eadcf9;
    background: #fcfaff;
}

    .status-card.outstanding strong[b-jnw33rhjc0] {
        color: var(--bill-primary);
    }


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.billing-layout[b-jnw33rhjc0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 15px;
}

.billing-main[b-jnw33rhjc0] {
    min-width: 0;
}


/* =========================================================
   BILLING SECTION
   ========================================================= */

.billing-section[b-jnw33rhjc0] {
    margin-bottom: 15px;
    padding: 16px;
    background: var(--bill-white);
    border: 1px solid var(--bill-border);
    border-radius: 10px;
}

.section-header[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

    .section-header h2[b-jnw33rhjc0] {
        margin: 3px 0 0;
        font-size: 15px;
        font-weight: 750;
    }

.small-btn[b-jnw33rhjc0] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    color: var(--bill-primary);
    background: var(--bill-primary-soft);
    border: 1px solid var(--bill-border-purple);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

    .small-btn svg[b-jnw33rhjc0] {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }


/* =========================================================
   CHARGE GROUP
   ========================================================= */

.charge-group[b-jnw33rhjc0] {
    margin-bottom: 10px;
    border: 1px solid #eceaf0;
    border-radius: 8px;
    overflow: hidden;
}

    .charge-group:last-child[b-jnw33rhjc0] {
        margin-bottom: 0;
    }

.group-header[b-jnw33rhjc0] {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 11px;
    background: #fbfafc;
}

.group-title[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.group-icon[b-jnw33rhjc0] {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bill-primary);
    background: var(--bill-primary-soft);
    border-radius: 7px;
}

    .group-icon svg[b-jnw33rhjc0] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.group-title strong[b-jnw33rhjc0] {
    display: block;
    color: #403b47;
    font-size: 11px;
}

.group-title span[b-jnw33rhjc0] {
    display: block;
    margin-top: 2px;
    color: #928d99;
    font-size: 8px;
}

.group-total[b-jnw33rhjc0] {
    color: #4b4652;
    font-size: 11px;
}


/* =========================================================
   CHARGE TABLE
   ========================================================= */

.charge-table[b-jnw33rhjc0] {
    width: 100%;
}

.charge-row[b-jnw33rhjc0] {
    min-height: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 90px 100px;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    border-top: 1px solid #f0eef3;
    color: #67626e;
    font-size: 10px;
}

    .charge-row strong[b-jnw33rhjc0] {
        color: #403b47;
        text-align: right;
    }

    .charge-row > span:nth-child(n+2)[b-jnw33rhjc0] {
        text-align: right;
    }

    .charge-row.table-head[b-jnw33rhjc0] {
        min-height: 30px;
        background: #faf9fb;
        color: #9a95a1;
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

        .charge-row.table-head span[b-jnw33rhjc0] {
            text-align: left !important;
        }


/* =========================================================
   ADJUSTMENTS
   ========================================================= */

.adjustment-grid[b-jnw33rhjc0] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 10px;
}

.adjustment-card label[b-jnw33rhjc0],
.form-field label[b-jnw33rhjc0] {
    display: block;
    margin-bottom: 5px;
    color: #66616e;
    font-size: 9px;
    font-weight: 700;
}

.adjustment-card select[b-jnw33rhjc0],
.adjustment-card input[b-jnw33rhjc0],
.form-field select[b-jnw33rhjc0],
.form-field input[b-jnw33rhjc0] {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    padding: 0 9px;
    color: #46414d;
    background: #fff;
    border: 1px solid #dedbe4;
    border-radius: 6px;
    outline: none;
    font-size: 10px;
}

    .adjustment-card select:focus[b-jnw33rhjc0],
    .adjustment-card input:focus[b-jnw33rhjc0],
    .form-field select:focus[b-jnw33rhjc0],
    .form-field input:focus[b-jnw33rhjc0] {
        border-color: #b99be5;
        box-shadow: 0 0 0 2px rgba(109, 40, 217, .07);
    }

.input-prefix[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    height: 35px;
    border: 1px solid #dedbe4;
    border-radius: 6px;
    overflow: hidden;
}

    .input-prefix span[b-jnw33rhjc0] {
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: #f7f6f9;
        color: #77717e;
        font-size: 10px;
    }

    .input-prefix input[b-jnw33rhjc0] {
        height: 100%;
        border: 0;
        border-radius: 0;
    }


/* =========================================================
   PAYMENT TABLE
   ========================================================= */

.payment-table[b-jnw33rhjc0] {
    overflow-x: auto;
    border: 1px solid #eceaf0;
    border-radius: 7px;
}

.payment-row[b-jnw33rhjc0] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 1.2fr 1fr .8fr 1.2fr .8fr;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    border-top: 1px solid #f0eef3;
    color: #696470;
    font-size: 9px;
    min-width: 600px;
}

    .payment-row:first-child[b-jnw33rhjc0] {
        border-top: 0;
    }

.payment-head[b-jnw33rhjc0] {
    min-height: 31px;
    background: #faf9fb;
    color: #918c98;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.payment-row strong[b-jnw33rhjc0] {
    color: #403b47;
    text-align: right;
}

.receipt-number[b-jnw33rhjc0] {
    color: var(--bill-primary);
    font-weight: 700;
}

.payment-mode[b-jnw33rhjc0] {
    display: inline-flex;
    padding: 3px 7px;
    background: #f1edfa;
    color: var(--bill-primary);
    border-radius: 12px;
    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   PAYER
   ========================================================= */

.payer-grid[b-jnw33rhjc0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}


/* =========================================================
   BILLING SIDEBAR
   ========================================================= */

.billing-sidebar[b-jnw33rhjc0] {
    position: sticky;
    top: 15px;
}

.summary-card[b-jnw33rhjc0],
.clearance-card[b-jnw33rhjc0],
.quick-billing-card[b-jnw33rhjc0] {
    padding: 15px;
    margin-bottom: 12px;
    background: var(--bill-white);
    border: 1px solid var(--bill-border);
    border-radius: 10px;
}

.summary-header[b-jnw33rhjc0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .summary-header h3[b-jnw33rhjc0] {
        margin: 3px 0 0;
        font-size: 15px;
        font-weight: 750;
    }

.draft-badge[b-jnw33rhjc0] {
    padding: 4px 7px;
    color: #8a6917;
    background: #fff7df;
    border: 1px solid #f2e5ba;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 700;
}

.summary-lines > div[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    border-bottom: 1px solid #f0eef3;
    color: #77717e;
    font-size: 10px;
}

.summary-lines strong[b-jnw33rhjc0] {
    color: #46414d;
    font-weight: 700;
}

.summary-lines .discount-value[b-jnw33rhjc0] {
    color: #b15365;
}

.due-box[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 13px 0;
    padding: 12px;
    background: var(--bill-primary-soft);
    border: 1px solid var(--bill-border-purple);
    border-radius: 8px;
}

    .due-box span[b-jnw33rhjc0] {
        color: #6f6280;
        font-size: 10px;
        font-weight: 700;
    }

    .due-box strong[b-jnw33rhjc0] {
        color: var(--bill-primary);
        font-size: 17px;
        font-weight: 800;
    }

.settle-button[b-jnw33rhjc0] {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: var(--bill-primary);
    border: 1px solid var(--bill-primary);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

    .settle-button:hover[b-jnw33rhjc0] {
        background: var(--bill-primary-dark);
    }

    .settle-button svg[b-jnw33rhjc0] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   CLEARANCE
   ========================================================= */

.clearance-header[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.clearance-icon[b-jnw33rhjc0] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bill-primary);
    background: var(--bill-primary-soft);
    border-radius: 8px;
}

    .clearance-icon svg[b-jnw33rhjc0] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.clearance-header strong[b-jnw33rhjc0] {
    display: block;
    color: #403b47;
    font-size: 11px;
}

.clearance-header span[b-jnw33rhjc0] {
    display: block;
    margin-top: 2px;
    color: #99949f;
    font-size: 8px;
}

.clearance-status[b-jnw33rhjc0] {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-radius: 7px;
}

    .clearance-status.pending[b-jnw33rhjc0] {
        background: #fff9eb;
        border: 1px solid #f1e6c7;
    }

    .clearance-status .status-dot[b-jnw33rhjc0] {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        margin-top: 3px;
        border-radius: 50%;
        background: #d49a25;
    }

    .clearance-status strong[b-jnw33rhjc0] {
        display: block;
        color: #9a6a13;
        font-size: 10px;
    }

    .clearance-status div span[b-jnw33rhjc0] {
        display: block;
        margin-top: 2px;
        color: #947f58;
        font-size: 8px;
        line-height: 1.4;
    }

.clearance-info[b-jnw33rhjc0] {
    margin-top: 11px;
}

    .clearance-info div[b-jnw33rhjc0] {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        color: #88838e;
        font-size: 9px;
    }

    .clearance-info strong[b-jnw33rhjc0] {
        color: #46414d;
    }


/* =========================================================
   QUICK BILLING
   ========================================================= */

.quick-billing-card a[b-jnw33rhjc0] {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #efedf2;
    color: #625d69;
    text-decoration: none;
    font-size: 9px;
    font-weight: 650;
}

    .quick-billing-card a:last-child[b-jnw33rhjc0] {
        border-bottom: 0;
    }

    .quick-billing-card a:hover[b-jnw33rhjc0] {
        color: var(--bill-primary);
    }


/* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

.billing-action-bar[b-jnw33rhjc0] {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 24px;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--bill-border);
    box-shadow: 0 -4px 16px rgba(30, 20, 50, .05);
}

.action-note[b-jnw33rhjc0] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #817b88;
    font-size: 9px;
}

    .action-note svg[b-jnw33rhjc0] {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--bill-primary);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.action-buttons[b-jnw33rhjc0] {
    display: flex;
    gap: 7px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .billing-layout[b-jnw33rhjc0] {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .patient-card[b-jnw33rhjc0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-details[b-jnw33rhjc0] {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--bill-border);
    }
}


@media (max-width: 1000px) {

    .billing-layout[b-jnw33rhjc0] {
        grid-template-columns: 1fr;
    }

    .billing-sidebar[b-jnw33rhjc0] {
        position: static;
    }

    .billing-status-grid[b-jnw33rhjc0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .payer-grid[b-jnw33rhjc0] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 750px) {

    .ipd-billing[b-jnw33rhjc0] {
        padding: 15px 12px 90px;
    }

    .billing-header[b-jnw33rhjc0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions[b-jnw33rhjc0] {
        width: 100%;
    }

        .header-actions .btn[b-jnw33rhjc0] {
            flex: 1;
        }

    .billing-status-grid[b-jnw33rhjc0] {
        grid-template-columns: 1fr;
    }

    .patient-details[b-jnw33rhjc0] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .adjustment-grid[b-jnw33rhjc0],
    .payer-grid[b-jnw33rhjc0] {
        grid-template-columns: 1fr;
    }

    .billing-action-bar[b-jnw33rhjc0] {
        padding: 8px 12px;
    }

    .action-note[b-jnw33rhjc0] {
        display: none;
    }

    .action-buttons[b-jnw33rhjc0] {
        width: 100%;
    }

        .action-buttons .btn[b-jnw33rhjc0] {
            flex: 1;
        }
}


@media (max-width: 520px) {

    .billing-header h1[b-jnw33rhjc0] {
        font-size: 20px;
    }

    .header-left[b-jnw33rhjc0] {
        align-items: flex-start;
    }

    .header-actions[b-jnw33rhjc0] {
        flex-direction: column;
    }

        .header-actions .btn[b-jnw33rhjc0] {
            width: 100%;
        }

    .patient-details[b-jnw33rhjc0] {
        grid-template-columns: 1fr;
    }

    .patient-name-row[b-jnw33rhjc0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-meta[b-jnw33rhjc0] {
        flex-direction: column;
        gap: 4px;
    }

    .charge-row[b-jnw33rhjc0] {
        grid-template-columns: minmax(0, 1fr) 55px 70px 80px;
        font-size: 9px;
    }

    .group-header[b-jnw33rhjc0] {
        align-items: flex-start;
    }

    .billing-action-bar[b-jnw33rhjc0] {
        min-height: 55px;
    }

    .action-buttons .btn[b-jnw33rhjc0] {
        padding: 0 8px;
        font-size: 9px;
    }
}
/* /Pages/IPD/LabScanResults.razor.rz.scp.css */
/* CSS for LabScanResults component */
/* =========================================================
   LAB & SCAN RESULTS
   Scoped to .lab-scan-results
   ========================================================= */

.lab-scan-results[b-b9phphatcw] {
    --lsr-primary: #6f42c1;
    --lsr-primary-dark: #59339d;
    --lsr-primary-light: #f3effb;
    --lsr-border: #e4e1ea;
    --lsr-text: #292735;
    --lsr-muted: #777487;
    --lsr-bg: #f7f7f9;
    --lsr-white: #ffffff;
    min-height: 100vh;
    padding: 24px;
    background: var(--lsr-bg);
    color: var(--lsr-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.lsr-page-header[b-b9phphatcw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.lsr-breadcrumb[b-b9phphatcw] {
    color: var(--lsr-muted);
    font-size: 13px;
    margin-bottom: 7px;
}

    .lsr-breadcrumb span[b-b9phphatcw] {
        margin: 0 7px;
        color: #aaa5b3;
    }

.lsr-page-header h1[b-b9phphatcw] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.lsr-page-header p[b-b9phphatcw] {
    margin: 6px 0 0;
    color: var(--lsr-muted);
    font-size: 13px;
}

.lsr-header-actions[b-b9phphatcw] {
    display: flex;
    gap: 9px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.lsr-btn[b-b9phphatcw],
.lsr-small-btn[b-b9phphatcw] {
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.18s ease;
}

.lsr-btn[b-b9phphatcw] {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
}

    .lsr-btn svg[b-b9phphatcw],
    .lsr-small-btn svg[b-b9phphatcw] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lsr-btn-primary[b-b9phphatcw] {
    background: var(--lsr-primary);
    color: #fff;
}

    .lsr-btn-primary:hover[b-b9phphatcw] {
        background: var(--lsr-primary-dark);
    }

.lsr-btn-light[b-b9phphatcw] {
    background: #fff;
    border-color: var(--lsr-border);
    color: #514d5c;
}

    .lsr-btn-light:hover[b-b9phphatcw] {
        background: #f5f3f8;
    }

.lsr-btn-secondary[b-b9phphatcw] {
    background: #ede8f7;
    color: var(--lsr-primary-dark);
}

    .lsr-btn-secondary:hover[b-b9phphatcw] {
        background: #e3daf2;
    }

.lsr-small-btn[b-b9phphatcw] {
    min-height: 34px;
    padding: 0 11px;
    background: #fff;
    border-color: var(--lsr-border);
    color: var(--lsr-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

    .lsr-small-btn:hover[b-b9phphatcw] {
        background: var(--lsr-primary-light);
    }


/* =========================================================
   PATIENT SUMMARY
   ========================================================= */

.lsr-patient-card[b-b9phphatcw] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--lsr-white);
    border: 1px solid var(--lsr-border);
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, 0.035);
}

.lsr-patient-avatar[b-b9phphatcw] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 9px;
    background: var(--lsr-primary-light);
    color: var(--lsr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.lsr-patient-main[b-b9phphatcw] {
    min-width: 0;
    flex: 1;
}

.lsr-patient-name[b-b9phphatcw] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
}

.lsr-patient-meta[b-b9phphatcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 5px;
    color: var(--lsr-muted);
    font-size: 12px;
}

.lsr-patient-side[b-b9phphatcw] {
    min-width: 120px;
    padding-left: 18px;
    border-left: 1px solid var(--lsr-border);
    text-align: right;
}

    .lsr-patient-side span[b-b9phphatcw] {
        display: block;
        color: var(--lsr-muted);
        font-size: 11px;
        margin-bottom: 3px;
    }

    .lsr-patient-side strong[b-b9phphatcw] {
        font-size: 12px;
    }

.lsr-status[b-b9phphatcw] {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .lsr-status.active[b-b9phphatcw] {
        background: #eaf7ef;
        color: #25804a;
    }


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.lsr-layout[b-b9phphatcw] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.lsr-sidebar[b-b9phphatcw] {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid var(--lsr-border);
    border-radius: 10px;
    padding: 9px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, 0.035);
}

.lsr-sidebar-title[b-b9phphatcw] {
    padding: 8px 10px 10px;
    color: #8b8793;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.lsr-sidebar a[b-b9phphatcw] {
    min-height: 40px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5c5866;
    text-decoration: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    transition: all .18s ease;
}

    .lsr-sidebar a:hover[b-b9phphatcw] {
        color: var(--lsr-primary);
        background: var(--lsr-primary-light);
    }

    .lsr-sidebar a:first-of-type[b-b9phphatcw] {
        color: var(--lsr-primary);
        background: var(--lsr-primary-light);
    }

.lsr-sidebar svg[b-b9phphatcw] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.lsr-main[b-b9phphatcw] {
    min-width: 0;
}

.lsr-section[b-b9phphatcw] {
    scroll-margin-top: 20px;
    background: #fff;
    border: 1px solid var(--lsr-border);
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, 0.035);
    overflow: hidden;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.lsr-section-header[b-b9phphatcw] {
    min-height: 68px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--lsr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .lsr-section-header > div:first-child[b-b9phphatcw] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

.lsr-section-number[b-b9phphatcw] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lsr-primary-light);
    color: var(--lsr-primary);
    font-size: 10px;
    font-weight: 800;
}

.lsr-section-header h2[b-b9phphatcw] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.lsr-section-header p[b-b9phphatcw] {
    margin: 3px 0 0;
    color: var(--lsr-muted);
    font-size: 11px;
}


/* =========================================================
   BADGES
   ========================================================= */

.lsr-badge[b-b9phphatcw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

    .lsr-badge.pending[b-b9phphatcw] {
        background: #fff5df;
        color: #9a6b0a;
    }

    .lsr-badge.reviewed[b-b9phphatcw] {
        background: #eaf7ef;
        color: #267847;
    }


/* =========================================================
   FORM
   ========================================================= */

.lsr-form-grid[b-b9phphatcw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 18px;
}

.lsr-field[b-b9phphatcw] {
    min-width: 0;
}

    .lsr-field.full[b-b9phphatcw] {
        grid-column: 1 / -1;
    }

    .lsr-field label[b-b9phphatcw] {
        display: block;
        margin-bottom: 6px;
        color: #575260;
        font-size: 11px;
        font-weight: 650;
    }

    .lsr-field input[b-b9phphatcw],
    .lsr-field select[b-b9phphatcw],
    .lsr-field textarea[b-b9phphatcw] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ddd9e3;
        border-radius: 6px;
        background: #fff;
        color: #373440;
        font-family: inherit;
        font-size: 12px;
        outline: none;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .lsr-field input[b-b9phphatcw],
    .lsr-field select[b-b9phphatcw] {
        height: 38px;
        padding: 0 11px;
    }

    .lsr-field textarea[b-b9phphatcw] {
        padding: 10px 11px;
        min-height: 80px;
        resize: vertical;
    }

        .lsr-field input:focus[b-b9phphatcw],
        .lsr-field select:focus[b-b9phphatcw],
        .lsr-field textarea:focus[b-b9phphatcw] {
            border-color: #a98bd2;
            box-shadow: 0 0 0 3px rgba(111, 66, 193, .08);
        }


/* =========================================================
   TABLE
   ========================================================= */

.lsr-table-wrapper[b-b9phphatcw] {
    padding: 0 18px 18px;
    overflow-x: auto;
}

.lsr-table[b-b9phphatcw] {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

    .lsr-table th[b-b9phphatcw] {
        padding: 10px 11px;
        background: #f8f7fa;
        border-bottom: 1px solid var(--lsr-border);
        color: #77717f;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .lsr-table td[b-b9phphatcw] {
        padding: 12px 11px;
        border-bottom: 1px solid #eeeaf1;
        color: #5d5965;
        font-size: 11px;
        vertical-align: middle;
    }

    .lsr-table tbody tr:last-child td[b-b9phphatcw] {
        border-bottom: 0;
    }

    .lsr-table tbody tr:hover[b-b9phphatcw] {
        background: #fcfbfd;
    }

    .lsr-table td strong[b-b9phphatcw] {
        color: #383440;
        font-size: 11px;
    }

    .lsr-table td br + *[b-b9phphatcw] {
        color: var(--lsr-muted);
    }

.lsr-result[b-b9phphatcw] {
    display: inline-flex;
    min-width: 45px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
}

    .lsr-result.normal[b-b9phphatcw] {
        background: #eaf7ef;
        color: #267847;
    }

    .lsr-result.low[b-b9phphatcw] {
        background: #fff4df;
        color: #99690b;
    }

    .lsr-result.high[b-b9phphatcw] {
        background: #fff0ef;
        color: #bd4c45;
    }


/* =========================================================
   SCAN CARD
   ========================================================= */

.lsr-scan-card[b-b9phphatcw] {
    margin: 18px;
    border: 1px solid #e3dfe8;
    border-radius: 8px;
    background: #fff;
}

.lsr-scan-top[b-b9phphatcw] {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    border-bottom: 1px solid #eeeaf1;
}

.lsr-scan-label[b-b9phphatcw] {
    display: block;
    margin-bottom: 4px;
    color: var(--lsr-muted);
    font-size: 10px;
}

.lsr-scan-top h3[b-b9phphatcw] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.lsr-scan-grid[b-b9phphatcw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 13px 16px;
    gap: 15px;
    background: #faf9fb;
}

    .lsr-scan-grid label[b-b9phphatcw] {
        display: block;
        margin-bottom: 4px;
        color: var(--lsr-muted);
        font-size: 10px;
    }

    .lsr-scan-grid strong[b-b9phphatcw] {
        font-size: 11px;
        color: #46414e;
    }

.lsr-report-block[b-b9phphatcw] {
    padding: 13px 16px;
    border-top: 1px solid #eeeaf1;
}

    .lsr-report-block label[b-b9phphatcw] {
        display: block;
        margin-bottom: 5px;
        color: #696370;
        font-size: 10px;
        font-weight: 700;
    }

    .lsr-report-block p[b-b9phphatcw] {
        margin: 0;
        color: #57525f;
        font-size: 12px;
        line-height: 1.65;
    }


/* =========================================================
   ATTACHMENTS
   ========================================================= */

.lsr-attachment-list[b-b9phphatcw] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lsr-attachment[b-b9phphatcw] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid #e5e1e9;
    border-radius: 7px;
    background: #fcfbfd;
}

.lsr-file-icon[b-b9phphatcw] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f0ebf8;
    color: var(--lsr-primary);
}

    .lsr-file-icon svg[b-b9phphatcw] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lsr-file-info[b-b9phphatcw] {
    min-width: 0;
    flex: 1;
}

    .lsr-file-info strong[b-b9phphatcw] {
        display: block;
        color: #403b47;
        font-size: 11px;
    }

    .lsr-file-info span[b-b9phphatcw] {
        display: block;
        margin-top: 3px;
        color: var(--lsr-muted);
        font-size: 10px;
    }

.lsr-file-actions[b-b9phphatcw] {
    display: flex;
    gap: 6px;
}

    .lsr-file-actions button[b-b9phphatcw] {
        padding: 6px 9px;
        border: 1px solid #ddd8e4;
        border-radius: 5px;
        background: #fff;
        color: #615b68;
        cursor: pointer;
        font-size: 10px;
        font-weight: 600;
    }

        .lsr-file-actions button:hover[b-b9phphatcw] {
            border-color: #bca7d8;
            color: var(--lsr-primary);
            background: var(--lsr-primary-light);
        }


/* =========================================================
   AUTHENTICATION
   ========================================================= */

.lsr-auth-grid[b-b9phphatcw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
}

.lsr-auth-card[b-b9phphatcw] {
    padding: 13px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #faf9fb;
}

    .lsr-auth-card span[b-b9phphatcw] {
        display: block;
        margin-bottom: 5px;
        color: var(--lsr-muted);
        font-size: 10px;
    }

    .lsr-auth-card strong[b-b9phphatcw] {
        display: block;
        color: #403b47;
        font-size: 12px;
    }

    .lsr-auth-card small[b-b9phphatcw] {
        display: block;
        margin-top: 5px;
        color: #898490;
        font-size: 10px;
    }

.lsr-auth-complete[b-b9phphatcw] {
    color: #267847 !important;
}


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.lsr-bottom-actions[b-b9phphatcw] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--lsr-border);
    border-radius: 9px;
    box-shadow: 0 -3px 15px rgba(45, 35, 65, .06);
}

    .lsr-bottom-actions > div[b-b9phphatcw] {
        display: flex;
        gap: 8px;
    }


/* =========================================================
   SMOOTH SIDEBAR SCROLLING
   ========================================================= */

html[b-b9phphatcw] {
    scroll-behavior: smooth;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .lsr-layout[b-b9phphatcw] {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .lsr-sidebar a[b-b9phphatcw] {
        font-size: 11px;
    }

    .lsr-auth-grid[b-b9phphatcw] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 850px) {

    .lab-scan-results[b-b9phphatcw] {
        padding: 16px;
    }

    .lsr-page-header[b-b9phphatcw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .lsr-header-actions[b-b9phphatcw] {
        width: 100%;
    }

        .lsr-header-actions .lsr-btn[b-b9phphatcw] {
            flex: 1;
        }

    .lsr-layout[b-b9phphatcw] {
        grid-template-columns: 1fr;
    }

    .lsr-sidebar[b-b9phphatcw] {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 7px;
    }

    .lsr-sidebar-title[b-b9phphatcw] {
        display: none;
    }

    .lsr-sidebar a[b-b9phphatcw] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

        .lsr-sidebar a:first-of-type[b-b9phphatcw] {
            background: transparent;
        }

        .lsr-sidebar a:hover[b-b9phphatcw] {
            background: var(--lsr-primary-light);
        }

    .lsr-patient-card[b-b9phphatcw] {
        align-items: flex-start;
    }

    .lsr-patient-side[b-b9phphatcw] {
        display: none;
    }
}


@media (max-width: 600px) {

    .lab-scan-results[b-b9phphatcw] {
        padding: 10px;
    }

    .lsr-page-header h1[b-b9phphatcw] {
        font-size: 21px;
    }

    .lsr-form-grid[b-b9phphatcw] {
        grid-template-columns: 1fr;
    }

    .lsr-field.full[b-b9phphatcw] {
        grid-column: auto;
    }

    .lsr-scan-grid[b-b9phphatcw] {
        grid-template-columns: 1fr;
    }

    .lsr-section-header[b-b9phphatcw] {
        align-items: flex-start;
        flex-direction: column;
    }

        .lsr-section-header > div:first-child[b-b9phphatcw] {
            width: 100%;
        }

    .lsr-patient-meta[b-b9phphatcw] {
        flex-direction: column;
        gap: 4px;
    }

    .lsr-attachment[b-b9phphatcw] {
        align-items: flex-start;
    }

    .lsr-file-actions[b-b9phphatcw] {
        flex-direction: column;
    }

    .lsr-bottom-actions[b-b9phphatcw] {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

        .lsr-bottom-actions > div[b-b9phphatcw] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .lsr-bottom-actions .lsr-btn[b-b9phphatcw] {
            width: 100%;
        }
}
/* /Pages/IPD/MedicalRecords.razor.rz.scp.css */
/* CSS for MedicalRecords component */
/* =========================================================
   MEDICAL RECORDS
   Scoped to .medical-records
   ========================================================= */

.medical-records[b-h1rzt0j4sv] {
    --mr-primary: #6f42c1;
    --mr-primary-dark: #59339d;
    --mr-primary-light: #f3effb;
    --mr-border: #e4e1ea;
    --mr-text: #292735;
    --mr-muted: #777487;
    --mr-bg: #f7f7f9;
    --mr-white: #ffffff;
    min-height: 100vh;
    padding: 24px;
    background: var(--mr-bg);
    color: var(--mr-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.mr-page-header[b-h1rzt0j4sv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.mr-breadcrumb[b-h1rzt0j4sv] {
    color: var(--mr-muted);
    font-size: 13px;
    margin-bottom: 7px;
}

    .mr-breadcrumb span[b-h1rzt0j4sv] {
        margin: 0 7px;
        color: #aaa5b3;
    }

.mr-page-header h1[b-h1rzt0j4sv] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.mr-page-header p[b-h1rzt0j4sv] {
    margin: 6px 0 0;
    color: var(--mr-muted);
    font-size: 13px;
}

.mr-header-actions[b-h1rzt0j4sv] {
    display: flex;
    gap: 9px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mr-btn[b-h1rzt0j4sv],
.mr-small-btn[b-h1rzt0j4sv] {
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all .18s ease;
}

.mr-btn[b-h1rzt0j4sv] {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
}

    .mr-btn svg[b-h1rzt0j4sv],
    .mr-small-btn svg[b-h1rzt0j4sv] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mr-btn-primary[b-h1rzt0j4sv] {
    background: var(--mr-primary);
    color: #fff;
}

    .mr-btn-primary:hover[b-h1rzt0j4sv] {
        background: var(--mr-primary-dark);
    }

.mr-btn-light[b-h1rzt0j4sv] {
    background: #fff;
    border-color: var(--mr-border);
    color: #514d5c;
}

    .mr-btn-light:hover[b-h1rzt0j4sv] {
        background: #f5f3f8;
    }

.mr-btn-secondary[b-h1rzt0j4sv] {
    background: #ede8f7;
    color: var(--mr-primary-dark);
}

    .mr-btn-secondary:hover[b-h1rzt0j4sv] {
        background: #e3daf2;
    }

.mr-small-btn[b-h1rzt0j4sv] {
    min-height: 34px;
    padding: 0 11px;
    background: #fff;
    border-color: var(--mr-border);
    color: var(--mr-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

    .mr-small-btn:hover[b-h1rzt0j4sv] {
        background: var(--mr-primary-light);
    }


/* =========================================================
   PATIENT SUMMARY
   ========================================================= */

.mr-patient-card[b-h1rzt0j4sv] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mr-white);
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.mr-patient-avatar[b-h1rzt0j4sv] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 9px;
    background: var(--mr-primary-light);
    color: var(--mr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.mr-patient-main[b-h1rzt0j4sv] {
    min-width: 0;
    flex: 1;
}

.mr-patient-name[b-h1rzt0j4sv] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
}

.mr-patient-meta[b-h1rzt0j4sv] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 5px;
    color: var(--mr-muted);
    font-size: 12px;
}

.mr-patient-side[b-h1rzt0j4sv] {
    min-width: 125px;
    padding-left: 18px;
    border-left: 1px solid var(--mr-border);
    text-align: right;
}

    .mr-patient-side span[b-h1rzt0j4sv] {
        display: block;
        color: var(--mr-muted);
        font-size: 11px;
        margin-bottom: 3px;
    }

    .mr-patient-side strong[b-h1rzt0j4sv] {
        font-size: 12px;
    }

.mr-status[b-h1rzt0j4sv] {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .mr-status.active[b-h1rzt0j4sv] {
        background: #eaf7ef;
        color: #25804a;
    }


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.mr-layout[b-h1rzt0j4sv] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.mr-main[b-h1rzt0j4sv] {
    min-width: 0;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.mr-sidebar[b-h1rzt0j4sv] {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    padding: 9px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
}

.mr-sidebar-title[b-h1rzt0j4sv] {
    padding: 8px 10px 10px;
    color: #8b8793;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.mr-sidebar a[b-h1rzt0j4sv] {
    min-height: 40px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5c5866;
    text-decoration: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    transition: all .18s ease;
}

    .mr-sidebar a:hover[b-h1rzt0j4sv] {
        color: var(--mr-primary);
        background: var(--mr-primary-light);
    }

    .mr-sidebar a:first-of-type[b-h1rzt0j4sv] {
        color: var(--mr-primary);
        background: var(--mr-primary-light);
    }

.mr-sidebar svg[b-h1rzt0j4sv] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SECTION
   ========================================================= */

.mr-section[b-h1rzt0j4sv] {
    scroll-margin-top: 20px;
    background: #fff;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(45, 35, 65, .035);
    overflow: hidden;
}

.mr-section-header[b-h1rzt0j4sv] {
    min-height: 68px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--mr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .mr-section-header > div:first-child[b-h1rzt0j4sv] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

.mr-section-number[b-h1rzt0j4sv] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mr-primary-light);
    color: var(--mr-primary);
    font-size: 10px;
    font-weight: 800;
}

.mr-section-header h2[b-h1rzt0j4sv] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.mr-section-header p[b-h1rzt0j4sv] {
    margin: 3px 0 0;
    color: var(--mr-muted);
    font-size: 11px;
}


/* =========================================================
   BADGES
   ========================================================= */

.mr-badge[b-h1rzt0j4sv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

    .mr-badge.active-badge[b-h1rzt0j4sv] {
        background: #f0eafa;
        color: var(--mr-primary-dark);
    }

    .mr-badge.reviewed[b-h1rzt0j4sv] {
        background: #eaf7ef;
        color: #267847;
    }

    .mr-badge.restricted[b-h1rzt0j4sv] {
        background: #fff0ef;
        color: #b74d46;
    }


/* =========================================================
   FORM
   ========================================================= */

.mr-form-grid[b-h1rzt0j4sv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 18px;
}

.mr-field[b-h1rzt0j4sv] {
    min-width: 0;
}

.mr-full[b-h1rzt0j4sv] {
    grid-column: 1 / -1;
}

.mr-field > label[b-h1rzt0j4sv] {
    display: block;
    margin-bottom: 6px;
    color: #575260;
    font-size: 11px;
    font-weight: 650;
}

.mr-field input[b-h1rzt0j4sv],
.mr-field select[b-h1rzt0j4sv],
.mr-field textarea[b-h1rzt0j4sv] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd9e3;
    border-radius: 6px;
    background: #fff;
    color: #373440;
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mr-field input[b-h1rzt0j4sv],
.mr-field select[b-h1rzt0j4sv] {
    height: 38px;
    padding: 0 11px;
}

.mr-field textarea[b-h1rzt0j4sv] {
    padding: 10px 11px;
    min-height: 80px;
    resize: vertical;
}

    .mr-field input:focus[b-h1rzt0j4sv],
    .mr-field select:focus[b-h1rzt0j4sv],
    .mr-field textarea:focus[b-h1rzt0j4sv] {
        border-color: #a98bd2;
        box-shadow: 0 0 0 3px rgba(111, 66, 193, .08);
    }


/* =========================================================
   DOCUMENT UPLOAD
   ========================================================= */

.mr-upload-box[b-h1rzt0j4sv] {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px dashed #cfc7dc;
    border-radius: 8px;
    background: #fbfaff;
    transition: all .18s ease;
}

    .mr-upload-box:hover[b-h1rzt0j4sv] {
        border-color: #a98bd2;
        background: #f8f4fc;
    }

.mr-upload-icon[b-h1rzt0j4sv] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--mr-primary-light);
    color: var(--mr-primary);
}

    .mr-upload-icon svg[b-h1rzt0j4sv] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mr-upload-content[b-h1rzt0j4sv] {
    flex: 1;
    min-width: 0;
}

    .mr-upload-content strong[b-h1rzt0j4sv] {
        display: block;
        color: #403b47;
        font-size: 12px;
    }

    .mr-upload-content span[b-h1rzt0j4sv] {
        display: block;
        margin-top: 4px;
        color: var(--mr-muted);
        font-size: 10px;
    }

.mr-upload-btn[b-h1rzt0j4sv] {
    height: 34px;
    padding: 0 11px;
    border: 1px solid #ddd8e4;
    border-radius: 6px;
    background: #fff;
    color: var(--mr-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

    .mr-upload-btn:hover[b-h1rzt0j4sv] {
        background: var(--mr-primary-light);
    }


/* =========================================================
   TOGGLE
   ========================================================= */

.mr-toggle-row[b-h1rzt0j4sv] {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #66616e;
    font-size: 11px;
}

.mr-switch[b-h1rzt0j4sv] {
    position: relative;
    width: 38px;
    height: 21px;
    display: inline-block;
    flex: 0 0 38px;
}

    .mr-switch input[b-h1rzt0j4sv] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .mr-switch span[b-h1rzt0j4sv] {
        position: absolute;
        inset: 0;
        cursor: pointer;
        border-radius: 20px;
        background: #d9d5df;
        transition: .2s;
    }

        .mr-switch span[b-h1rzt0j4sv]::before {
            content: "";
            position: absolute;
            width: 17px;
            height: 17px;
            left: 2px;
            top: 2px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.15);
            transition: .2s;
        }

    .mr-switch input:checked + span[b-h1rzt0j4sv] {
        background: var(--mr-primary);
    }

        .mr-switch input:checked + span[b-h1rzt0j4sv]::before {
            transform: translateX(17px);
        }


/* =========================================================
   FILTER BAR
   ========================================================= */

.mr-filter-bar[b-h1rzt0j4sv] {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 180px 150px;
    gap: 9px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--mr-border);
    background: #fcfbfd;
}

.mr-search[b-h1rzt0j4sv] {
    position: relative;
}

    .mr-search svg[b-h1rzt0j4sv] {
        position: absolute;
        left: 10px;
        top: 50%;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        fill: none;
        stroke: #99939f;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .mr-search input[b-h1rzt0j4sv],
    .mr-filter-bar select[b-h1rzt0j4sv] {
        width: 100%;
        height: 36px;
        box-sizing: border-box;
        border: 1px solid #ddd9e3;
        border-radius: 6px;
        background: #fff;
        color: #494450;
        font-family: inherit;
        font-size: 11px;
        outline: none;
    }

    .mr-search input[b-h1rzt0j4sv] {
        padding: 0 10px 0 32px;
    }

.mr-filter-bar select[b-h1rzt0j4sv] {
    padding: 0 9px;
}

    .mr-search input:focus[b-h1rzt0j4sv],
    .mr-filter-bar select:focus[b-h1rzt0j4sv] {
        border-color: #a98bd2;
        box-shadow: 0 0 0 3px rgba(111, 66, 193, .07);
    }


/* =========================================================
   DOCUMENT TABLE
   ========================================================= */

.mr-table-wrapper[b-h1rzt0j4sv] {
    overflow-x: auto;
}

.mr-table[b-h1rzt0j4sv] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

    .mr-table th[b-h1rzt0j4sv] {
        padding: 10px 12px;
        background: #f8f7fa;
        border-bottom: 1px solid var(--mr-border);
        color: #77717f;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .mr-table td[b-h1rzt0j4sv] {
        padding: 12px;
        border-bottom: 1px solid #eeeaf1;
        color: #5d5965;
        font-size: 11px;
        vertical-align: middle;
    }

    .mr-table tbody tr:last-child td[b-h1rzt0j4sv] {
        border-bottom: 0;
    }

    .mr-table tbody tr:hover[b-h1rzt0j4sv] {
        background: #fcfbfd;
    }

    .mr-table td > strong[b-h1rzt0j4sv] {
        display: block;
        color: #403b47;
        font-size: 11px;
    }

    .mr-table td > small[b-h1rzt0j4sv] {
        display: block;
        margin-top: 3px;
        color: #8a8591;
        font-size: 9px;
    }


/* =========================================================
   DOCUMENT ITEM
   ========================================================= */

.mr-document[b-h1rzt0j4sv] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 220px;
}

.mr-file-icon[b-h1rzt0j4sv] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f0ebf8;
    color: var(--mr-primary);
}

    .mr-file-icon svg[b-h1rzt0j4sv] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mr-document strong[b-h1rzt0j4sv] {
    display: block;
    color: #403b47;
    font-size: 11px;
}

.mr-document small[b-h1rzt0j4sv] {
    display: block;
    margin-top: 3px;
    color: #898490;
    font-size: 9px;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.mr-action-buttons[b-h1rzt0j4sv] {
    display: flex;
    gap: 5px;
}

    .mr-action-buttons button[b-h1rzt0j4sv] {
        width: 29px;
        height: 29px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd8e4;
        border-radius: 5px;
        background: #fff;
        color: #686270;
        cursor: pointer;
        transition: all .18s ease;
    }

        .mr-action-buttons button:hover[b-h1rzt0j4sv] {
            border-color: #bba6d7;
            color: var(--mr-primary);
            background: var(--mr-primary-light);
        }

    .mr-action-buttons svg[b-h1rzt0j4sv] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   AUDIT
   ========================================================= */

.mr-audit-list[b-h1rzt0j4sv] {
    padding: 18px;
}

.mr-audit-item[b-h1rzt0j4sv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eeeaf1;
}

    .mr-audit-item:last-child[b-h1rzt0j4sv] {
        border-bottom: 0;
    }

.mr-audit-icon[b-h1rzt0j4sv] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--mr-primary-light);
    color: var(--mr-primary);
}

    .mr-audit-icon svg[b-h1rzt0j4sv] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mr-audit-content[b-h1rzt0j4sv] {
    min-width: 0;
    flex: 1;
}

    .mr-audit-content strong[b-h1rzt0j4sv] {
        display: block;
        color: #403b47;
        font-size: 11px;
    }

    .mr-audit-content span[b-h1rzt0j4sv] {
        display: block;
        margin-top: 3px;
        color: var(--mr-muted);
        font-size: 10px;
    }

.mr-audit-item time[b-h1rzt0j4sv] {
    flex: 0 0 auto;
    color: #898490;
    text-align: right;
    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   AUTHENTICATION
   ========================================================= */

.mr-auth-grid[b-h1rzt0j4sv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
}

.mr-auth-card[b-h1rzt0j4sv] {
    padding: 13px;
    border: 1px solid #e4e0e8;
    border-radius: 8px;
    background: #faf9fb;
}

    .mr-auth-card span[b-h1rzt0j4sv] {
        display: block;
        margin-bottom: 5px;
        color: var(--mr-muted);
        font-size: 10px;
    }

    .mr-auth-card strong[b-h1rzt0j4sv] {
        display: block;
        color: #403b47;
        font-size: 12px;
    }

    .mr-auth-card small[b-h1rzt0j4sv] {
        display: block;
        margin-top: 5px;
        color: #898490;
        font-size: 10px;
    }

    .mr-auth-card .mr-verified[b-h1rzt0j4sv] {
        color: #267847;
    }


/* =========================================================
   BOTTOM ACTIONS
   ========================================================= */

.mr-bottom-actions[b-h1rzt0j4sv] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--mr-border);
    border-radius: 9px;
    box-shadow: 0 -3px 15px rgba(45, 35, 65, .06);
}

    .mr-bottom-actions > div[b-h1rzt0j4sv] {
        display: flex;
        gap: 8px;
    }


/* =========================================================
   SMOOTH SCROLL
   ========================================================= */

html[b-h1rzt0j4sv] {
    scroll-behavior: smooth;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .mr-layout[b-h1rzt0j4sv] {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .mr-sidebar a[b-h1rzt0j4sv] {
        font-size: 11px;
    }

    .mr-auth-grid[b-h1rzt0j4sv] {
        grid-template-columns: 1fr;
    }

    .mr-filter-bar[b-h1rzt0j4sv] {
        grid-template-columns: 1fr 160px 140px;
    }
}


@media (max-width: 850px) {

    .medical-records[b-h1rzt0j4sv] {
        padding: 16px;
    }

    .mr-page-header[b-h1rzt0j4sv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .mr-header-actions[b-h1rzt0j4sv] {
        width: 100%;
    }

        .mr-header-actions .mr-btn[b-h1rzt0j4sv] {
            flex: 1;
        }

    .mr-layout[b-h1rzt0j4sv] {
        grid-template-columns: 1fr;
    }

    .mr-sidebar[b-h1rzt0j4sv] {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 7px;
    }

    .mr-sidebar-title[b-h1rzt0j4sv] {
        display: none;
    }

    .mr-sidebar a[b-h1rzt0j4sv] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

        .mr-sidebar a:first-of-type[b-h1rzt0j4sv] {
            background: transparent;
        }

        .mr-sidebar a:hover[b-h1rzt0j4sv] {
            background: var(--mr-primary-light);
        }

    .mr-patient-card[b-h1rzt0j4sv] {
        align-items: flex-start;
    }

    .mr-patient-side[b-h1rzt0j4sv] {
        display: none;
    }

    .mr-filter-bar[b-h1rzt0j4sv] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .medical-records[b-h1rzt0j4sv] {
        padding: 10px;
    }

    .mr-page-header h1[b-h1rzt0j4sv] {
        font-size: 21px;
    }

    .mr-form-grid[b-h1rzt0j4sv] {
        grid-template-columns: 1fr;
    }

    .mr-full[b-h1rzt0j4sv] {
        grid-column: auto;
    }

    .mr-section-header[b-h1rzt0j4sv] {
        align-items: flex-start;
        flex-direction: column;
    }

        .mr-section-header > div:first-child[b-h1rzt0j4sv] {
            width: 100%;
        }

    .mr-patient-meta[b-h1rzt0j4sv] {
        flex-direction: column;
        gap: 4px;
    }

    .mr-upload-box[b-h1rzt0j4sv] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mr-upload-content[b-h1rzt0j4sv] {
        min-width: calc(100% - 55px);
    }

    .mr-upload-btn[b-h1rzt0j4sv] {
        margin-left: 51px;
    }

    .mr-audit-item[b-h1rzt0j4sv] {
        align-items: flex-start;
    }

        .mr-audit-item time[b-h1rzt0j4sv] {
            display: none;
        }

    .mr-bottom-actions[b-h1rzt0j4sv] {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

        .mr-bottom-actions > div[b-h1rzt0j4sv] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .mr-bottom-actions .mr-btn[b-h1rzt0j4sv] {
            width: 100%;
        }
}
/* /Pages/IPD/NursingTreatmentNotes.razor.rz.scp.css */
/* CSS for NursingTreatmentNotes component */
/* =========================================================
   NURSING & TREATMENT NOTES
   NursingTreatmentNotes.razor.css
   ========================================================= */

.nursing-treatment-notes[b-1wrgbv470u] {
    --nt-primary: #6d4aff;
    --nt-primary-dark: #5635d9;
    --nt-primary-soft: #f3f0ff;
    --nt-success: #159570;
    --nt-success-soft: #eaf8f3;
    --nt-text: #25304a;
    --nt-muted: #7b8499;
    --nt-border: #e4e7ef;
    --nt-bg: #f6f7fb;
    --nt-white: #ffffff;
    --nt-danger: #d9534f;
    width: 100%;
    min-height: 100vh;
    background: var(--nt-bg);
    color: var(--nt-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}

    .nursing-treatment-notes *[b-1wrgbv470u],
    .nursing-treatment-notes *[b-1wrgbv470u]::before,
    .nursing-treatment-notes *[b-1wrgbv470u]::after {
        box-sizing: border-box;
    }


    /* =========================================================
   PAGE HEADER
   ========================================================= */

    .nursing-treatment-notes .pn-page-header[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        background: var(--nt-white);
        border-bottom: 1px solid var(--nt-border);
    }

    .nursing-treatment-notes .pn-title-area[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .nursing-treatment-notes .pn-title-icon[b-1wrgbv470u] {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--nt-primary-soft);
        color: var(--nt-primary);
        border-radius: 12px;
    }

        .nursing-treatment-notes .pn-title-icon svg[b-1wrgbv470u] {
            width: 25px;
            height: 25px;
        }

    .nursing-treatment-notes .pn-title-area h1[b-1wrgbv470u] {
        margin: 0;
        font-size: 21px;
        line-height: 1.3;
        font-weight: 700;
        color: var(--nt-text);
    }

    .nursing-treatment-notes .pn-title-area p[b-1wrgbv470u] {
        margin: 4px 0 0;
        color: var(--nt-muted);
        font-size: 13px;
    }

    .nursing-treatment-notes .pn-header-actions[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;
    }


    /* =========================================================
   BUTTONS
   ========================================================= */

    .nursing-treatment-notes .pn-btn[b-1wrgbv470u] {
        min-height: 38px;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid var(--nt-border);
        border-radius: 8px;
        background: #fff;
        color: #465066;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .18s ease;
    }

        .nursing-treatment-notes .pn-btn svg[b-1wrgbv470u] {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
        }

        .nursing-treatment-notes .pn-btn:hover[b-1wrgbv470u] {
            border-color: #c9cde0;
            background: #fafaff;
        }

    .nursing-treatment-notes .pn-btn-primary[b-1wrgbv470u] {
        background: var(--nt-primary);
        border-color: var(--nt-primary);
        color: #fff;
    }

        .nursing-treatment-notes .pn-btn-primary:hover[b-1wrgbv470u] {
            background: var(--nt-primary-dark);
            border-color: var(--nt-primary-dark);
        }

    .nursing-treatment-notes .pn-btn-success[b-1wrgbv470u] {
        background: var(--nt-success);
        border-color: var(--nt-success);
        color: #fff;
    }

        .nursing-treatment-notes .pn-btn-success:hover[b-1wrgbv470u] {
            background: #117c60;
            border-color: #117c60;
        }


    /* =========================================================
   PATIENT SUMMARY
   ========================================================= */

    .nursing-treatment-notes .pn-patient-card[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(130px, 1fr));
        gap: 0;
        margin: 16px 24px;
        background: var(--nt-white);
        border: 1px solid var(--nt-border);
        border-radius: 12px;
        overflow: hidden;
    }

    .nursing-treatment-notes .pn-patient-main[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 18px;
        border-right: 1px solid var(--nt-border);
    }

    .nursing-treatment-notes .pn-patient-avatar[b-1wrgbv470u] {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--nt-primary-soft);
        color: var(--nt-primary);
        font-size: 14px;
        font-weight: 700;
    }

    .nursing-treatment-notes .pn-patient-main strong[b-1wrgbv470u] {
        display: block;
        font-size: 14px;
        font-weight: 700;
    }

    .nursing-treatment-notes .pn-patient-main span[b-1wrgbv470u] {
        display: block;
        margin-top: 3px;
        color: var(--nt-muted);
        font-size: 12px;
    }

    .nursing-treatment-notes .pn-patient-item[b-1wrgbv470u] {
        padding: 13px 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid var(--nt-border);
    }

        .nursing-treatment-notes .pn-patient-item:last-child[b-1wrgbv470u] {
            border-right: 0;
        }

        .nursing-treatment-notes .pn-patient-item label[b-1wrgbv470u] {
            margin-bottom: 4px;
            color: var(--nt-muted);
            font-size: 11px;
            font-weight: 500;
        }

        .nursing-treatment-notes .pn-patient-item strong[b-1wrgbv470u] {
            font-size: 12px;
            font-weight: 650;
            color: var(--nt-text);
        }


    /* =========================================================
   WORKSPACE
   ========================================================= */

    .nursing-treatment-notes .pn-workspace[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 0 24px 90px;
    }


    /* =========================================================
   SIDEBAR
   ========================================================= */

    .nursing-treatment-notes .pn-sidebar[b-1wrgbv470u] {
        position: sticky;
        top: 18px;
        background: var(--nt-white);
        border: 1px solid var(--nt-border);
        border-radius: 12px;
        overflow: hidden;
    }

    .nursing-treatment-notes .pn-sidebar-title[b-1wrgbv470u] {
        padding: 14px 16px;
        background: #fbfbfe;
        border-bottom: 1px solid var(--nt-border);
        color: var(--nt-text);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .nursing-treatment-notes .pn-nav[b-1wrgbv470u] {
        padding: 7px;
    }

        .nursing-treatment-notes .pn-nav a[b-1wrgbv470u] {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 39px;
            padding: 8px 10px;
            margin-bottom: 2px;
            border-radius: 7px;
            color: #626b80;
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 550;
            transition: all .15s ease;
        }

            .nursing-treatment-notes .pn-nav a svg[b-1wrgbv470u] {
                width: 17px;
                height: 17px;
                flex: 0 0 17px;
                stroke-width: 1.8;
            }

            .nursing-treatment-notes .pn-nav a:hover[b-1wrgbv470u] {
                background: #f7f5ff;
                color: var(--nt-primary);
            }

            .nursing-treatment-notes .pn-nav a.active[b-1wrgbv470u] {
                background: var(--nt-primary-soft);
                color: var(--nt-primary);
                font-weight: 650;
            }


    /* =========================================================
   CONTENT
   ========================================================= */

    .nursing-treatment-notes .pn-content[b-1wrgbv470u] {
        min-width: 0;
    }

    .nursing-treatment-notes .pn-section[b-1wrgbv470u] {
        scroll-margin-top: 20px;
        margin-bottom: 16px;
        background: var(--nt-white);
        border: 1px solid var(--nt-border);
        border-radius: 12px;
        overflow: hidden;
    }

    .nursing-treatment-notes .pn-section-header[b-1wrgbv470u] {
        min-height: 68px;
        padding: 13px 18px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--nt-border);
        background: #fff;
    }

    .nursing-treatment-notes .pn-section-heading[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .nursing-treatment-notes .pn-section-icon[b-1wrgbv470u] {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--nt-primary-soft);
        color: var(--nt-primary);
        border-radius: 9px;
    }

        .nursing-treatment-notes .pn-section-icon svg[b-1wrgbv470u] {
            width: 18px;
            height: 18px;
        }

    .nursing-treatment-notes .pn-section-heading h2[b-1wrgbv470u] {
        margin: 0;
        color: var(--nt-text);
        font-size: 15px;
        font-weight: 700;
    }

    .nursing-treatment-notes .pn-section-heading span[b-1wrgbv470u] {
        display: block;
        margin-top: 3px;
        color: var(--nt-muted);
        font-size: 11.5px;
    }

    .nursing-treatment-notes .pn-section-body[b-1wrgbv470u] {
        padding: 18px;
    }


    /* =========================================================
   FORM GRID
   ========================================================= */

    .nursing-treatment-notes .pn-form-grid[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .nursing-treatment-notes .pn-field[b-1wrgbv470u] {
        min-width: 0;
    }

    .nursing-treatment-notes .pn-field-full[b-1wrgbv470u] {
        grid-column: 1 / -1;
    }

    .nursing-treatment-notes .pn-field label[b-1wrgbv470u],
    .nursing-treatment-notes .pn-exam-item label[b-1wrgbv470u],
    .nursing-treatment-notes .pn-vital label[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
        color: #4d566b;
        font-size: 12px;
        font-weight: 600;
    }

    .nursing-treatment-notes .pn-required[b-1wrgbv470u] {
        color: var(--nt-danger);
        margin-left: 2px;
    }

    .nursing-treatment-notes .pn-input[b-1wrgbv470u],
    .nursing-treatment-notes .pn-select[b-1wrgbv470u],
    .nursing-treatment-notes .pn-textarea[b-1wrgbv470u] {
        width: 100%;
        border: 1px solid #dfe2ea;
        border-radius: 7px;
        background: #fff;
        color: var(--nt-text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .nursing-treatment-notes .pn-input[b-1wrgbv470u],
    .nursing-treatment-notes .pn-select[b-1wrgbv470u] {
        height: 39px;
        padding: 8px 11px;
    }

    .nursing-treatment-notes .pn-textarea[b-1wrgbv470u] {
        min-height: 86px;
        padding: 10px 11px;
        line-height: 1.5;
        resize: vertical;
    }

        .nursing-treatment-notes .pn-input[b-1wrgbv470u]::placeholder,
        .nursing-treatment-notes .pn-textarea[b-1wrgbv470u]::placeholder {
            color: #a8adba;
        }

        .nursing-treatment-notes .pn-input:focus[b-1wrgbv470u],
        .nursing-treatment-notes .pn-select:focus[b-1wrgbv470u],
        .nursing-treatment-notes .pn-textarea:focus[b-1wrgbv470u] {
            border-color: var(--nt-primary);
            box-shadow: 0 0 0 3px rgba(109, 74, 255, .08);
        }

    .nursing-treatment-notes .pn-input:read-only[b-1wrgbv470u] {
        background: #f7f8fb;
        color: #687187;
    }

    .nursing-treatment-notes .pn-vital-unit[b-1wrgbv470u] {
        color: #969dad;
        font-size: 10px;
        font-weight: 500;
    }


    /* =========================================================
   VITALS
   ========================================================= */

    .nursing-treatment-notes .pn-vitals-grid[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: repeat(6, minmax(100px, 1fr));
        gap: 10px;
    }

    .nursing-treatment-notes .pn-vital[b-1wrgbv470u] {
        padding: 11px;
        background: #fafbfe;
        border: 1px solid var(--nt-border);
        border-radius: 9px;
    }

        .nursing-treatment-notes .pn-vital label[b-1wrgbv470u] {
            margin-bottom: 7px;
        }

        .nursing-treatment-notes .pn-vital .pn-input[b-1wrgbv470u] {
            background: #fff;
        }


    /* =========================================================
   NURSING ASSESSMENT
   ========================================================= */

    .nursing-treatment-notes .pn-examination-grid[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .nursing-treatment-notes .pn-exam-item[b-1wrgbv470u] {
        padding: 12px;
        border: 1px solid var(--nt-border);
        border-radius: 9px;
        background: #fafbfe;
    }

        .nursing-treatment-notes .pn-exam-item label[b-1wrgbv470u] {
            min-height: 31px;
        }


    /* =========================================================
   TABLE
   ========================================================= */

    .nursing-treatment-notes .pn-table-wrap[b-1wrgbv470u] {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--nt-border);
        border-radius: 9px;
    }

    .nursing-treatment-notes .pn-table[b-1wrgbv470u] {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
        font-size: 12px;
    }

        .nursing-treatment-notes .pn-table th[b-1wrgbv470u] {
            padding: 11px 12px;
            background: #f7f7fb;
            border-bottom: 1px solid var(--nt-border);
            color: #687187;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

        .nursing-treatment-notes .pn-table td[b-1wrgbv470u] {
            padding: 11px 12px;
            border-bottom: 1px solid #eef0f4;
            color: #4e586d;
            vertical-align: middle;
        }

        .nursing-treatment-notes .pn-table tbody tr:last-child td[b-1wrgbv470u] {
            border-bottom: 0;
        }

        .nursing-treatment-notes .pn-table tbody tr:hover[b-1wrgbv470u] {
            background: #fbfbfd;
        }


    /* =========================================================
   PLAN / HANDOVER
   ========================================================= */

    .nursing-treatment-notes .pn-plan-grid[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .nursing-treatment-notes .pn-plan-item[b-1wrgbv470u] {
        padding: 14px;
        border: 1px solid var(--nt-border);
        border-radius: 9px;
        background: #fafbfe;
    }

    .nursing-treatment-notes .pn-plan-title[b-1wrgbv470u] {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 9px;
        color: #4e586d;
        font-size: 12px;
        font-weight: 700;
    }

        .nursing-treatment-notes .pn-plan-title svg[b-1wrgbv470u] {
            width: 16px;
            height: 16px;
            color: var(--nt-primary);
        }


    /* =========================================================
   AUTHENTICATION
   ========================================================= */

    .nursing-treatment-notes .pn-auth-card[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: center;
        gap: 15px;
        padding: 15px;
        background: #fafbfe;
        border: 1px solid var(--nt-border);
        border-radius: 9px;
    }

    .nursing-treatment-notes .pn-auth-item label[b-1wrgbv470u] {
        display: block;
        margin-bottom: 4px;
        color: var(--nt-muted);
        font-size: 11px;
    }

    .nursing-treatment-notes .pn-auth-item strong[b-1wrgbv470u] {
        color: var(--nt-text);
        font-size: 12.5px;
        font-weight: 650;
    }

    .nursing-treatment-notes .pn-status-badge[b-1wrgbv470u] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: #fff5df;
        border: 1px solid #f3dfb2;
        border-radius: 20px;
        color: #9a6c13;
        font-size: 11px;
        font-weight: 650;
    }

    .nursing-treatment-notes .pn-status-dot[b-1wrgbv470u] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d89c22;
    }


    /* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

    .nursing-treatment-notes .pn-bottom-actions[b-1wrgbv470u] {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 9px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--nt-border);
        box-shadow: 0 -4px 15px rgba(30, 40, 70, .05);
        backdrop-filter: blur(8px);
    }


/* =========================================================
   SMOOTH SIDEBAR NAVIGATION
   ========================================================= */

.nursing-treatment-notes[b-1wrgbv470u] {
    scroll-behavior: smooth;
}


/* =========================================================
   RESPONSIVE - 1200px
   ========================================================= */

@media (max-width: 1200px) {

    .nursing-treatment-notes .pn-patient-card[b-1wrgbv470u] {
        grid-template-columns: 1.5fr repeat(2, 1fr);
    }

    .nursing-treatment-notes .pn-patient-main[b-1wrgbv470u] {
        grid-row: span 2;
    }

    .nursing-treatment-notes .pn-patient-item:nth-last-child(-n+2)[b-1wrgbv470u] {
        border-top: 1px solid var(--nt-border);
    }

    .nursing-treatment-notes .pn-vitals-grid[b-1wrgbv470u] {
        grid-template-columns: repeat(3, 1fr);
    }

    .nursing-treatment-notes .pn-examination-grid[b-1wrgbv470u] {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   RESPONSIVE - 992px
   ========================================================= */

@media (max-width: 992px) {

    .nursing-treatment-notes .pn-page-header[b-1wrgbv470u] {
        align-items: flex-start;
        flex-direction: column;
    }

    .nursing-treatment-notes .pn-header-actions[b-1wrgbv470u] {
        width: 100%;
        justify-content: flex-start;
    }

    .nursing-treatment-notes .pn-workspace[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-sidebar[b-1wrgbv470u] {
        position: relative;
        top: auto;
    }

    .nursing-treatment-notes .pn-nav[b-1wrgbv470u] {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding: 8px;
    }

        .nursing-treatment-notes .pn-nav a[b-1wrgbv470u] {
            flex: 0 0 auto;
            margin: 0;
            white-space: nowrap;
        }

    .nursing-treatment-notes .pn-sidebar-title[b-1wrgbv470u] {
        display: none;
    }

    .nursing-treatment-notes .pn-form-grid[b-1wrgbv470u] {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   RESPONSIVE - 768px
   ========================================================= */

@media (max-width: 768px) {

    .nursing-treatment-notes .pn-page-header[b-1wrgbv470u] {
        padding: 16px;
    }

    .nursing-treatment-notes .pn-patient-card[b-1wrgbv470u] {
        margin: 12px 16px;
        grid-template-columns: 1fr 1fr;
    }

    .nursing-treatment-notes .pn-patient-main[b-1wrgbv470u] {
        grid-column: 1 / -1;
        grid-row: auto;
        border-right: 0;
        border-bottom: 1px solid var(--nt-border);
    }

    .nursing-treatment-notes .pn-patient-item[b-1wrgbv470u] {
        border-right: 1px solid var(--nt-border);
        border-bottom: 1px solid var(--nt-border);
    }

        .nursing-treatment-notes .pn-patient-item:nth-child(even)[b-1wrgbv470u] {
            border-right: 0;
        }

    .nursing-treatment-notes .pn-workspace[b-1wrgbv470u] {
        padding: 0 16px 90px;
    }

    .nursing-treatment-notes .pn-form-grid[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-field-full[b-1wrgbv470u] {
        grid-column: auto;
    }

    .nursing-treatment-notes .pn-vitals-grid[b-1wrgbv470u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .nursing-treatment-notes .pn-examination-grid[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-plan-grid[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-auth-card[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-bottom-actions[b-1wrgbv470u] {
        padding: 10px 16px;
    }
}


/* =========================================================
   RESPONSIVE - 520px
   ========================================================= */

@media (max-width: 520px) {

    .nursing-treatment-notes .pn-title-area[b-1wrgbv470u] {
        align-items: flex-start;
    }

    .nursing-treatment-notes .pn-title-icon[b-1wrgbv470u] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .nursing-treatment-notes .pn-title-area h1[b-1wrgbv470u] {
        font-size: 18px;
    }

    .nursing-treatment-notes .pn-header-actions[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: 1fr;
    }

        .nursing-treatment-notes .pn-header-actions .pn-btn[b-1wrgbv470u] {
            width: 100%;
        }

    .nursing-treatment-notes .pn-patient-card[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-patient-item[b-1wrgbv470u] {
        border-right: 0 !important;
        border-bottom: 1px solid var(--nt-border);
    }

        .nursing-treatment-notes .pn-patient-item:last-child[b-1wrgbv470u] {
            border-bottom: 0;
        }

    .nursing-treatment-notes .pn-vitals-grid[b-1wrgbv470u] {
        grid-template-columns: 1fr;
    }

    .nursing-treatment-notes .pn-section-body[b-1wrgbv470u] {
        padding: 13px;
    }

    .nursing-treatment-notes .pn-section-header[b-1wrgbv470u] {
        padding: 12px 13px;
    }

    .nursing-treatment-notes .pn-bottom-actions[b-1wrgbv470u] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .nursing-treatment-notes .pn-bottom-actions .pn-btn:last-child[b-1wrgbv470u] {
            grid-column: 1 / -1;
        }
}
/* /Pages/IPD/OTNotes.razor.rz.scp.css */
/* CSS for OTNotes component */
/* =========================================================
   OT NOTES / SURGERY NOTES
   OTNotes.razor.css
   ========================================================= */

.ot-notes[b-ypno1qcr8l] {
    --ot-primary: #6d4aff;
    --ot-primary-dark: #5635d9;
    --ot-primary-soft: #f3f0ff;
    --ot-success: #159570;
    --ot-success-dark: #117c60;
    --ot-text: #25304a;
    --ot-muted: #7b8499;
    --ot-border: #e4e7ef;
    --ot-bg: #f6f7fb;
    --ot-white: #ffffff;
    --ot-danger: #d9534f;
    width: 100%;
    min-height: 100vh;
    background: var(--ot-bg);
    color: var(--ot-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}


    /* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

    .ot-notes *[b-ypno1qcr8l],
    .ot-notes *[b-ypno1qcr8l]::before,
    .ot-notes *[b-ypno1qcr8l]::after {
        box-sizing: border-box;
    }


    /* =========================================================
   PAGE HEADER
   ========================================================= */

    .ot-notes .pn-page-header[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        background: var(--ot-white);
        border-bottom: 1px solid var(--ot-border);
    }


    .ot-notes .pn-title-area[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }


    .ot-notes .pn-title-icon[b-ypno1qcr8l] {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--ot-primary-soft);
        color: var(--ot-primary);
    }


        .ot-notes .pn-title-icon svg[b-ypno1qcr8l] {
            width: 25px;
            height: 25px;
            display: block;
        }


    .ot-notes .pn-title-area h1[b-ypno1qcr8l] {
        margin: 0;
        color: var(--ot-text);
        font-size: 21px;
        line-height: 1.3;
        font-weight: 700;
    }


    .ot-notes .pn-title-area p[b-ypno1qcr8l] {
        margin: 4px 0 0;
        color: var(--ot-muted);
        font-size: 13px;
        line-height: 1.4;
    }


    .ot-notes .pn-header-actions[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;
    }


    /* =========================================================
   BUTTONS
   ========================================================= */

    .ot-notes .pn-btn[b-ypno1qcr8l] {
        min-height: 38px;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid var(--ot-border);
        border-radius: 8px;
        background: #fff;
        color: #465066;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }


        .ot-notes .pn-btn svg[b-ypno1qcr8l] {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            display: block;
        }


        .ot-notes .pn-btn:hover[b-ypno1qcr8l] {
            background: #fafaff;
            border-color: #c9cde0;
        }


        .ot-notes .pn-btn:active[b-ypno1qcr8l] {
            transform: translateY(1px);
        }


    .ot-notes .pn-btn-primary[b-ypno1qcr8l] {
        background: var(--ot-primary);
        border-color: var(--ot-primary);
        color: #fff;
    }


        .ot-notes .pn-btn-primary:hover[b-ypno1qcr8l] {
            background: var(--ot-primary-dark);
            border-color: var(--ot-primary-dark);
        }


    .ot-notes .pn-btn-success[b-ypno1qcr8l] {
        background: var(--ot-success);
        border-color: var(--ot-success);
        color: #fff;
    }


        .ot-notes .pn-btn-success:hover[b-ypno1qcr8l] {
            background: var(--ot-success-dark);
            border-color: var(--ot-success-dark);
        }


    /* Small button used for Add Specimen / Add Implant */

    .ot-notes .pn-btn-small[b-ypno1qcr8l] {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
    }


    /* =========================================================
   PATIENT SUMMARY
   ========================================================= */

    .ot-notes .pn-patient-card[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(130px, 1fr));
        gap: 0;
        margin: 16px 24px;
        background: var(--ot-white);
        border: 1px solid var(--ot-border);
        border-radius: 12px;
        overflow: hidden;
    }


    .ot-notes .pn-patient-main[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 18px;
        border-right: 1px solid var(--ot-border);
    }


    .ot-notes .pn-patient-avatar[b-ypno1qcr8l] {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ot-primary-soft);
        color: var(--ot-primary);
        font-size: 14px;
        font-weight: 700;
    }


    .ot-notes .pn-patient-main strong[b-ypno1qcr8l] {
        display: block;
        color: var(--ot-text);
        font-size: 14px;
        font-weight: 700;
    }


    .ot-notes .pn-patient-main span[b-ypno1qcr8l] {
        display: block;
        margin-top: 3px;
        color: var(--ot-muted);
        font-size: 12px;
    }


    .ot-notes .pn-patient-item[b-ypno1qcr8l] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 13px 15px;
        border-right: 1px solid var(--ot-border);
    }


        .ot-notes .pn-patient-item:last-child[b-ypno1qcr8l] {
            border-right: 0;
        }


        .ot-notes .pn-patient-item label[b-ypno1qcr8l] {
            margin-bottom: 4px;
            color: var(--ot-muted);
            font-size: 11px;
            font-weight: 500;
        }


        .ot-notes .pn-patient-item strong[b-ypno1qcr8l] {
            color: var(--ot-text);
            font-size: 12px;
            font-weight: 650;
        }


    /* =========================================================
   MAIN WORKSPACE
   ========================================================= */

    .ot-notes .pn-workspace[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 0 24px 90px;
    }


    .ot-notes .pn-content[b-ypno1qcr8l] {
        min-width: 0;
    }


    /* =========================================================
   SIDEBAR
   ========================================================= */

    .ot-notes .pn-sidebar[b-ypno1qcr8l] {
        position: sticky;
        top: 18px;
        background: var(--ot-white);
        border: 1px solid var(--ot-border);
        border-radius: 12px;
        overflow: hidden;
        z-index: 5;
    }


    .ot-notes .pn-sidebar-title[b-ypno1qcr8l] {
        padding: 14px 16px;
        background: #fbfbfe;
        border-bottom: 1px solid var(--ot-border);
        color: var(--ot-text);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }


    .ot-notes .pn-nav[b-ypno1qcr8l] {
        padding: 7px;
    }


        .ot-notes .pn-nav a[b-ypno1qcr8l] {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 39px;
            padding: 8px 10px;
            margin-bottom: 2px;
            border-radius: 7px;
            color: #626b80;
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 550;
            transition: background .15s ease, color .15s ease;
        }


            .ot-notes .pn-nav a:last-child[b-ypno1qcr8l] {
                margin-bottom: 0;
            }


            .ot-notes .pn-nav a svg[b-ypno1qcr8l] {
                width: 17px;
                height: 17px;
                flex: 0 0 17px;
                display: block;
                stroke-width: 1.8;
            }


            .ot-notes .pn-nav a:hover[b-ypno1qcr8l] {
                background: #f7f5ff;
                color: var(--ot-primary);
            }


            .ot-notes .pn-nav a.active[b-ypno1qcr8l] {
                background: var(--ot-primary-soft);
                color: var(--ot-primary);
                font-weight: 650;
            }


    /* =========================================================
   SECTIONS
   ========================================================= */

    .ot-notes .pn-section[b-ypno1qcr8l] {
        scroll-margin-top: 20px;
        margin-bottom: 16px;
        background: var(--ot-white);
        border: 1px solid var(--ot-border);
        border-radius: 12px;
        overflow: hidden;
    }


        .ot-notes .pn-section:last-child[b-ypno1qcr8l] {
            margin-bottom: 0;
        }


    .ot-notes .pn-section-header[b-ypno1qcr8l] {
        min-height: 68px;
        padding: 13px 18px;
        display: flex;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid var(--ot-border);
    }


    .ot-notes .pn-section-heading[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        gap: 11px;
    }


    .ot-notes .pn-section-icon[b-ypno1qcr8l] {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--ot-primary-soft);
        color: var(--ot-primary);
    }


        .ot-notes .pn-section-icon svg[b-ypno1qcr8l] {
            width: 18px;
            height: 18px;
            display: block;
        }


    .ot-notes .pn-section-heading h2[b-ypno1qcr8l] {
        margin: 0;
        color: var(--ot-text);
        font-size: 15px;
        font-weight: 700;
    }


    .ot-notes .pn-section-heading span[b-ypno1qcr8l] {
        display: block;
        margin-top: 3px;
        color: var(--ot-muted);
        font-size: 11.5px;
    }


    .ot-notes .pn-section-body[b-ypno1qcr8l] {
        padding: 18px;
    }


    /* =========================================================
   FORM GRID
   ========================================================= */

    .ot-notes .pn-form-grid[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }


    .ot-notes .pn-field[b-ypno1qcr8l] {
        min-width: 0;
    }


    .ot-notes .pn-field-full[b-ypno1qcr8l] {
        grid-column: 1 / -1;
    }


    .ot-notes .pn-field label[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
        color: #4d566b;
        font-size: 12px;
        font-weight: 600;
    }


    .ot-notes .pn-required[b-ypno1qcr8l] {
        color: var(--ot-danger);
        font-weight: 700;
    }


    .ot-notes .pn-input[b-ypno1qcr8l],
    .ot-notes .pn-select[b-ypno1qcr8l],
    .ot-notes .pn-textarea[b-ypno1qcr8l] {
        width: 100%;
        border: 1px solid #dfe2ea;
        border-radius: 7px;
        background: #fff;
        color: var(--ot-text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }


    .ot-notes .pn-input[b-ypno1qcr8l],
    .ot-notes .pn-select[b-ypno1qcr8l] {
        height: 39px;
        padding: 8px 11px;
    }


    .ot-notes .pn-textarea[b-ypno1qcr8l] {
        min-height: 90px;
        padding: 10px 11px;
        line-height: 1.5;
        resize: vertical;
    }


        .ot-notes .pn-input[b-ypno1qcr8l]::placeholder,
        .ot-notes .pn-textarea[b-ypno1qcr8l]::placeholder {
            color: #a8adba;
        }


        .ot-notes .pn-input:focus[b-ypno1qcr8l],
        .ot-notes .pn-select:focus[b-ypno1qcr8l],
        .ot-notes .pn-textarea:focus[b-ypno1qcr8l] {
            border-color: var(--ot-primary);
            box-shadow: 0 0 0 3px rgba(109, 74, 255, .08);
        }


    .ot-notes .pn-input:read-only[b-ypno1qcr8l] {
        background: #f7f8fb;
    }


    /* =========================================================
   UNITS
   ========================================================= */

    .ot-notes .pn-vital-unit[b-ypno1qcr8l] {
        margin-left: auto;
        color: #969dad;
        font-size: 10px;
        font-weight: 500;
    }


    /* =========================================================
   SUB SECTIONS
   ========================================================= */

    .ot-notes .ot-subsection[b-ypno1qcr8l] {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--ot-border);
    }


        .ot-notes .ot-subsection:first-child[b-ypno1qcr8l] {
            margin-top: 0;
        }


    .ot-notes .ot-subsection-title[b-ypno1qcr8l] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }


        .ot-notes .ot-subsection-title > span[b-ypno1qcr8l] {
            color: var(--ot-text);
            font-size: 12.5px;
            font-weight: 700;
        }


    /* =========================================================
   TABLE
   ========================================================= */

    .ot-notes .pn-table-wrap[b-ypno1qcr8l] {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--ot-border);
        border-radius: 9px;
    }


    .ot-notes .pn-table[b-ypno1qcr8l] {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
        font-size: 12px;
    }


        .ot-notes .pn-table th[b-ypno1qcr8l] {
            padding: 11px 12px;
            background: #f7f7fb;
            border-bottom: 1px solid var(--ot-border);
            color: #687187;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }


        .ot-notes .pn-table td[b-ypno1qcr8l] {
            padding: 11px 12px;
            border-bottom: 1px solid #eef0f4;
            color: #4e586d;
            vertical-align: middle;
        }


        .ot-notes .pn-table tbody tr:last-child td[b-ypno1qcr8l] {
            border-bottom: 0;
        }


        .ot-notes .pn-table tbody tr:hover[b-ypno1qcr8l] {
            background: #fbfbfd;
        }


    /* =========================================================
   AUTHENTICATION
   ========================================================= */

    .ot-notes .pn-auth-card[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
        align-items: center;
        gap: 15px;
        padding: 15px;
        background: #fafbfe;
        border: 1px solid var(--ot-border);
        border-radius: 9px;
    }


    .ot-notes .pn-auth-item[b-ypno1qcr8l] {
        min-width: 0;
    }


        .ot-notes .pn-auth-item label[b-ypno1qcr8l] {
            display: block;
            margin-bottom: 4px;
            color: var(--ot-muted);
            font-size: 11px;
        }


        .ot-notes .pn-auth-item strong[b-ypno1qcr8l] {
            display: block;
            color: var(--ot-text);
            font-size: 12.5px;
            font-weight: 650;
            overflow: hidden;
            text-overflow: ellipsis;
        }


    /* =========================================================
   STATUS BADGE
   ========================================================= */

    .ot-notes .pn-status-badge[b-ypno1qcr8l] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: #fff5df;
        border: 1px solid #f3dfb2;
        border-radius: 20px;
        color: #9a6c13;
        font-size: 11px;
        font-weight: 650;
        white-space: nowrap;
    }


    .ot-notes .pn-status-dot[b-ypno1qcr8l] {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: #d89c22;
    }


    /* =========================================================
   BOTTOM ACTION BAR
   ========================================================= */

    .ot-notes .pn-bottom-actions[b-ypno1qcr8l] {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--ot-border);
        box-shadow: 0 -4px 15px rgba(30, 40, 70, .05);
        backdrop-filter: blur(8px);
    }


/* =========================================================
   SMOOTH ANCHOR NAVIGATION
   ========================================================= */

.ot-notes[b-ypno1qcr8l] {
    scroll-behavior: smooth;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    .ot-notes .pn-patient-card[b-ypno1qcr8l] {
        grid-template-columns: 1.5fr repeat(2, 1fr);
    }


    .ot-notes .pn-patient-main[b-ypno1qcr8l] {
        grid-row: span 2;
    }


    .ot-notes .pn-patient-item:nth-last-child(-n + 2)[b-ypno1qcr8l] {
        border-top: 1px solid var(--ot-border);
    }


    .ot-notes .pn-auth-card[b-ypno1qcr8l] {
        grid-template-columns: repeat(2, 1fr);
    }


        .ot-notes .pn-auth-card > div:last-child[b-ypno1qcr8l] {
            grid-column: 1 / -1;
        }
}


/* =========================================================
   992px
   ========================================================= */

@media (max-width: 992px) {

    .ot-notes .pn-page-header[b-ypno1qcr8l] {
        align-items: flex-start;
        flex-direction: column;
    }


    .ot-notes .pn-header-actions[b-ypno1qcr8l] {
        width: 100%;
        justify-content: flex-start;
    }


    .ot-notes .pn-workspace[b-ypno1qcr8l] {
        grid-template-columns: 1fr;
    }


    .ot-notes .pn-sidebar[b-ypno1qcr8l] {
        position: relative;
        top: auto;
    }


    .ot-notes .pn-sidebar-title[b-ypno1qcr8l] {
        display: none;
    }


    .ot-notes .pn-nav[b-ypno1qcr8l] {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding: 8px;
    }


        .ot-notes .pn-nav a[b-ypno1qcr8l] {
            flex: 0 0 auto;
            margin: 0;
            white-space: nowrap;
        }


    .ot-notes .pn-form-grid[b-ypno1qcr8l] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width: 768px) {

    .ot-notes .pn-page-header[b-ypno1qcr8l] {
        padding: 16px;
    }


    .ot-notes .pn-patient-card[b-ypno1qcr8l] {
        margin: 12px 16px;
        grid-template-columns: 1fr 1fr;
    }


    .ot-notes .pn-patient-main[b-ypno1qcr8l] {
        grid-column: 1 / -1;
        grid-row: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ot-border);
    }


    .ot-notes .pn-patient-item[b-ypno1qcr8l] {
        border-bottom: 1px solid var(--ot-border);
    }


        .ot-notes .pn-patient-item:nth-child(even)[b-ypno1qcr8l] {
            border-right: 0;
        }


    .ot-notes .pn-workspace[b-ypno1qcr8l] {
        padding: 0 16px 90px;
    }


    .ot-notes .pn-form-grid[b-ypno1qcr8l] {
        grid-template-columns: 1fr;
    }


    .ot-notes .pn-field-full[b-ypno1qcr8l] {
        grid-column: auto;
    }


    .ot-notes .pn-section-body[b-ypno1qcr8l] {
        padding: 14px;
    }


    .ot-notes .pn-section-header[b-ypno1qcr8l] {
        padding: 12px 14px;
    }


    .ot-notes .pn-auth-card[b-ypno1qcr8l] {
        grid-template-columns: 1fr;
    }


        .ot-notes .pn-auth-card > div:last-child[b-ypno1qcr8l] {
            grid-column: auto;
        }


    .ot-notes .pn-bottom-actions[b-ypno1qcr8l] {
        padding: 10px 16px;
    }
}


/* =========================================================
   520px
   ========================================================= */

@media (max-width: 520px) {

    .ot-notes .pn-title-area[b-ypno1qcr8l] {
        align-items: flex-start;
    }


    .ot-notes .pn-title-icon[b-ypno1qcr8l] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .ot-notes .pn-title-area h1[b-ypno1qcr8l] {
        font-size: 18px;
    }


    .ot-notes .pn-header-actions[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }


        .ot-notes .pn-header-actions .pn-btn[b-ypno1qcr8l] {
            width: 100%;
        }


    .ot-notes .pn-patient-card[b-ypno1qcr8l] {
        grid-template-columns: 1fr;
    }


    .ot-notes .pn-patient-item[b-ypno1qcr8l] {
        border-right: 0 !important;
        border-bottom: 1px solid var(--ot-border);
    }


        .ot-notes .pn-patient-item:last-child[b-ypno1qcr8l] {
            border-bottom: 0;
        }


    .ot-notes .pn-section-heading[b-ypno1qcr8l] {
        align-items: flex-start;
    }


        .ot-notes .pn-section-heading h2[b-ypno1qcr8l] {
            font-size: 14px;
        }


        .ot-notes .pn-section-heading span[b-ypno1qcr8l] {
            font-size: 10.5px;
        }


    .ot-notes .pn-bottom-actions[b-ypno1qcr8l] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


        .ot-notes .pn-bottom-actions .pn-btn:last-child[b-ypno1qcr8l] {
            grid-column: 1 / -1;
        }


    .ot-notes .ot-subsection-title[b-ypno1qcr8l] {
        align-items: flex-start;
        flex-direction: column;
    }


        .ot-notes .ot-subsection-title .pn-btn[b-ypno1qcr8l] {
            width: 100%;
        }
}
/* /Pages/IPD/ProgressNotes.razor.rz.scp.css */
/* =========================================================
   PROGRESS NOTES - COMPLETE SCOPED CSS
   ========================================================= */

.ipd-progress-notes[b-mvj0phw65n] {
    width: 100%;
    min-height: 100vh;
    background: #f5f6fa;
    color: #25283a;
    font-family: "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}

    .ipd-progress-notes *[b-mvj0phw65n],
    .ipd-progress-notes *[b-mvj0phw65n]::before,
    .ipd-progress-notes *[b-mvj0phw65n]::after {
        box-sizing: border-box;
    }


    /* =========================
   HEADER
   ========================= */

    .ipd-progress-notes .pn-page-header[b-mvj0phw65n] {
        width: 100%;
        min-height: 68px;
        padding: 12px 20px;
        background: #ffffff;
        border-bottom: 1px solid #e2e4eb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .ipd-progress-notes .pn-title-area[b-mvj0phw65n] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ipd-progress-notes .pn-title-icon[b-mvj0phw65n] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eeeafd;
        color: #5b4bb7;
        border-radius: 9px;
    }

        .ipd-progress-notes .pn-title-icon svg[b-mvj0phw65n] {
            width: 20px;
            height: 20px;
            display: block;
        }

    .ipd-progress-notes .pn-title-area h1[b-mvj0phw65n] {
        margin: 0;
        font-size: 19px;
        line-height: 1.2;
        font-weight: 700;
        color: #292c3c;
    }

    .ipd-progress-notes .pn-title-area p[b-mvj0phw65n] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #7b8090;
    }


    /* =========================
   HEADER BUTTONS
   ========================= */

    .ipd-progress-notes .pn-header-actions[b-mvj0phw65n] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ipd-progress-notes .pn-btn[b-mvj0phw65n] {
        height: 36px;
        padding: 0 14px;
        border: 1px solid #dfe1e8;
        border-radius: 7px;
        background: #ffffff;
        color: #3d4050;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
    }

        .ipd-progress-notes .pn-btn svg[b-mvj0phw65n] {
            width: 15px;
            height: 15px;
            display: block;
        }

    .ipd-progress-notes .pn-btn-primary[b-mvj0phw65n] {
        background: #5b4bb7;
        color: #ffffff;
        border-color: #5b4bb7;
    }

        .ipd-progress-notes .pn-btn-primary:hover[b-mvj0phw65n] {
            background: #49399d;
            color: #ffffff;
        }

    .ipd-progress-notes .pn-btn-success[b-mvj0phw65n] {
        background: #2f9365;
        color: #ffffff;
        border-color: #2f9365;
    }


    /* =========================
   PATIENT CARD
   ========================= */

    .ipd-progress-notes .pn-patient-card[b-mvj0phw65n] {
        margin: 18px 20px 0;
        background: #ffffff;
        border: 1px solid #e1e3ea;
        border-radius: 10px;
        padding: 14px 17px;
        display: grid;
        grid-template-columns: 1.6fr repeat(4, 1fr);
        gap: 15px;
        align-items: center;
    }

    .ipd-progress-notes .pn-patient-main[b-mvj0phw65n] {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .ipd-progress-notes .pn-patient-avatar[b-mvj0phw65n] {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eeeafd;
        color: #5b4bb7;
        font-size: 13px;
        font-weight: 700;
    }

    .ipd-progress-notes .pn-patient-main strong[b-mvj0phw65n] {
        display: block;
        font-size: 14px;
        color: #292c3c;
    }

    .ipd-progress-notes .pn-patient-main span[b-mvj0phw65n] {
        display: block;
        margin-top: 3px;
        color: #858998;
        font-size: 11px;
    }

    .ipd-progress-notes .pn-patient-item label[b-mvj0phw65n] {
        display: block;
        margin-bottom: 4px;
        color: #8a8e9d;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .ipd-progress-notes .pn-patient-item strong[b-mvj0phw65n] {
        font-size: 12px;
        color: #353849;
    }


    /* =========================
   WORKSPACE
   ========================= */

    .ipd-progress-notes .pn-workspace[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: 215px minmax(0, 1fr);
        gap: 18px;
        padding: 18px 20px 90px;
    }


    /* =========================
   SIDEBAR
   ========================= */

    .ipd-progress-notes .pn-sidebar[b-mvj0phw65n] {
        position: sticky;
        top: 82px;
        align-self: start;
        background: #ffffff;
        border: 1px solid #e1e3ea;
        border-radius: 10px;
        padding: 9px;
    }

    .ipd-progress-notes .pn-sidebar-title[b-mvj0phw65n] {
        padding: 8px 9px 9px;
        color: #8a8e9d;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .ipd-progress-notes .pn-nav[b-mvj0phw65n] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .ipd-progress-notes .pn-nav a[b-mvj0phw65n] {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 9px 10px;
            border-radius: 6px;
            color: #646878;
            background: transparent;
            text-decoration: none;
            font-size: 12px;
            font-weight: 500;
            transition: .15s ease;
        }

            .ipd-progress-notes .pn-nav a svg[b-mvj0phw65n] {
                width: 15px;
                height: 15px;
                margin-right: 8px;
                flex-shrink: 0;
                display: block;
            }

            .ipd-progress-notes .pn-nav a:hover[b-mvj0phw65n] {
                background: #f1effd;
                color: #5b4bb7;
            }

            .ipd-progress-notes .pn-nav a.active[b-mvj0phw65n] {
                background: #eeeafd;
                color: #5b4bb7;
                font-weight: 600;
            }


    /* =========================
   CONTENT
   ========================= */

    .ipd-progress-notes .pn-content[b-mvj0phw65n] {
        width: 100%;
        min-width: 0;
    }


    /* =========================
   SECTION
   ========================= */

    .ipd-progress-notes .pn-section[b-mvj0phw65n] {
        width: 100%;
        margin-bottom: 16px;
        background: #ffffff;
        border: 1px solid #e1e3ea;
        border-radius: 10px;
        overflow: hidden;
        scroll-margin-top: 90px;
    }

    .ipd-progress-notes .pn-section-header[b-mvj0phw65n] {
        min-height: 52px;
        padding: 10px 16px;
        border-bottom: 1px solid #e6e7ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ipd-progress-notes .pn-section-heading[b-mvj0phw65n] {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .ipd-progress-notes .pn-section-icon[b-mvj0phw65n] {
        width: 29px;
        height: 29px;
        border-radius: 7px;
        background: #eeeafd;
        color: #5b4bb7;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .ipd-progress-notes .pn-section-icon svg[b-mvj0phw65n] {
            width: 15px;
            height: 15px;
            display: block;
        }

    .ipd-progress-notes .pn-section-heading h2[b-mvj0phw65n] {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: #303344;
    }

    .ipd-progress-notes .pn-section-heading span[b-mvj0phw65n] {
        display: block;
        margin-top: 2px;
        color: #8a8e9d;
        font-size: 10px;
    }

    .ipd-progress-notes .pn-section-body[b-mvj0phw65n] {
        padding: 16px;
    }


    /* =========================
   FORM GRID
   ========================= */

    .ipd-progress-notes .pn-form-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .ipd-progress-notes .pn-form-grid-4[b-mvj0phw65n] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ipd-progress-notes .pn-field[b-mvj0phw65n] {
        min-width: 0;
    }

    .ipd-progress-notes .pn-field-full[b-mvj0phw65n] {
        grid-column: 1 / -1;
    }

    .ipd-progress-notes .pn-field label[b-mvj0phw65n] {
        display: block;
        margin-bottom: 5px;
        color: #555a6d;
        font-size: 11px;
        font-weight: 600;
    }

    .ipd-progress-notes .pn-required[b-mvj0phw65n] {
        color: #d95368;
    }


    /* =========================
   INPUT
   ========================= */

    .ipd-progress-notes .pn-input[b-mvj0phw65n],
    .ipd-progress-notes .pn-select[b-mvj0phw65n],
    .ipd-progress-notes .pn-textarea[b-mvj0phw65n] {
        width: 100%;
        border: 1px solid #dcdfe7;
        background: #ffffff;
        color: #303344;
        border-radius: 6px;
        outline: none;
        font-family: inherit;
        font-size: 12px;
    }

    .ipd-progress-notes .pn-input[b-mvj0phw65n],
    .ipd-progress-notes .pn-select[b-mvj0phw65n] {
        height: 36px;
        padding: 0 10px;
    }

    .ipd-progress-notes .pn-textarea[b-mvj0phw65n] {
        min-height: 90px;
        padding: 9px 10px;
        resize: vertical;
        line-height: 1.5;
    }

        .ipd-progress-notes .pn-input:focus[b-mvj0phw65n],
        .ipd-progress-notes .pn-select:focus[b-mvj0phw65n],
        .ipd-progress-notes .pn-textarea:focus[b-mvj0phw65n] {
            border-color: #5b4bb7;
            box-shadow: 0 0 0 3px rgba(91, 75, 183, .08);
        }

        .ipd-progress-notes .pn-input[b-mvj0phw65n]::placeholder,
        .ipd-progress-notes .pn-textarea[b-mvj0phw65n]::placeholder {
            color: #a6a9b5;
        }


    /* =========================
   VITALS
   ========================= */

    .ipd-progress-notes .pn-vitals-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .ipd-progress-notes .pn-vital[b-mvj0phw65n] {
        padding: 10px;
        background: #fafafd;
        border: 1px solid #e1e3ea;
        border-radius: 8px;
    }

        .ipd-progress-notes .pn-vital label[b-mvj0phw65n] {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
            color: #777c8d;
            font-size: 10px;
            font-weight: 600;
        }

    .ipd-progress-notes .pn-vital-unit[b-mvj0phw65n] {
        color: #a0a3ae;
        font-size: 9px;
    }


    /* =========================
   STATUS
   ========================= */

    .ipd-progress-notes .pn-status-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .ipd-progress-notes .pn-status-box label[b-mvj0phw65n] {
        display: block;
        margin-bottom: 5px;
        color: #555a6d;
        font-size: 11px;
        font-weight: 600;
    }


    /* =========================
   EXAMINATION
   ========================= */

    .ipd-progress-notes .pn-examination-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ipd-progress-notes .pn-exam-item[b-mvj0phw65n] {
        padding: 11px;
        border: 1px solid #e1e3ea;
        background: #fafafd;
        border-radius: 7px;
    }

        .ipd-progress-notes .pn-exam-item label[b-mvj0phw65n] {
            display: block;
            margin-bottom: 6px;
            color: #777c8d;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
        }


    /* =========================
   TABLE
   ========================= */

    .ipd-progress-notes .pn-table-wrap[b-mvj0phw65n] {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #e1e3ea;
        border-radius: 7px;
    }

    .ipd-progress-notes .pn-table[b-mvj0phw65n] {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
    }

        .ipd-progress-notes .pn-table th[b-mvj0phw65n] {
            padding: 9px 10px;
            background: #f7f7fa;
            border-bottom: 1px solid #e1e3ea;
            color: #737889;
            font-size: 10px;
            font-weight: 700;
            text-align: left;
            text-transform: uppercase;
        }

        .ipd-progress-notes .pn-table td[b-mvj0phw65n] {
            padding: 10px;
            border-bottom: 1px solid #eeeeF2;
            color: #454959;
            font-size: 12px;
        }

        .ipd-progress-notes .pn-table tr:last-child td[b-mvj0phw65n] {
            border-bottom: 0;
        }

        .ipd-progress-notes .pn-table tr:hover td[b-mvj0phw65n] {
            background: #fafaff;
        }

    .ipd-progress-notes .pn-result-normal[b-mvj0phw65n] {
        color: #2f9365;
        font-weight: 600;
    }

    .ipd-progress-notes .pn-result-abnormal[b-mvj0phw65n] {
        color: #d95368;
        font-weight: 600;
    }


    /* =========================
   DIAGNOSIS
   ========================= */

    .ipd-progress-notes .pn-diagnosis-list[b-mvj0phw65n] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ipd-progress-notes .pn-diagnosis-row[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: 36px 1fr 150px;
        gap: 10px;
        align-items: center;
        padding: 8px;
        border: 1px solid #e1e3ea;
        background: #fafafd;
        border-radius: 7px;
    }

    .ipd-progress-notes .pn-diagnosis-number[b-mvj0phw65n] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #eeeafd;
        color: #5b4bb7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
    }


    /* =========================
   TREATMENT
   ========================= */

    .ipd-progress-notes .pn-treatment-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }


    /* =========================
   PLAN
   ========================= */

    .ipd-progress-notes .pn-plan-grid[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ipd-progress-notes .pn-plan-item[b-mvj0phw65n] {
        padding: 12px;
        border: 1px solid #e1e3ea;
        border-radius: 8px;
        background: #fafafd;
    }

    .ipd-progress-notes .pn-plan-title[b-mvj0phw65n] {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 8px;
        color: #4f5466;
        font-size: 11px;
        font-weight: 700;
    }

        .ipd-progress-notes .pn-plan-title svg[b-mvj0phw65n] {
            width: 15px;
            height: 15px;
            color: #5b4bb7;
        }


    /* =========================
   DOCTOR NOTE
   ========================= */

    .ipd-progress-notes .pn-doctor-note[b-mvj0phw65n] {
        padding: 13px 15px;
        border-left: 3px solid #5b4bb7;
        background: #faf9ff;
        border-radius: 0 7px 7px 0;
    }


    /* =========================
   AUTHENTICATION
   ========================= */

    .ipd-progress-notes .pn-auth-card[b-mvj0phw65n] {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 15px;
        align-items: center;
        padding: 14px;
        background: #fafafa;
        border: 1px solid #e1e3ea;
        border-radius: 8px;
    }

    .ipd-progress-notes .pn-auth-item label[b-mvj0phw65n] {
        display: block;
        margin-bottom: 4px;
        color: #888c9a;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .ipd-progress-notes .pn-auth-item strong[b-mvj0phw65n] {
        color: #3d4050;
        font-size: 12px;
    }

    .ipd-progress-notes .pn-status-badge[b-mvj0phw65n] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        border-radius: 20px;
        background: #eaf7f0;
        color: #2f9365;
        font-size: 10px;
        font-weight: 700;
    }

    .ipd-progress-notes .pn-status-dot[b-mvj0phw65n] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }


    /* =========================
   BOTTOM ACTIONS
   ========================= */

    .ipd-progress-notes .pn-bottom-actions[b-mvj0phw65n] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        min-height: 58px;
        padding: 10px 20px;
        background: #ffffff;
        border-top: 1px solid #e1e3ea;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }


/* =========================
   SMOOTH SCROLL
   ========================= */

html[b-mvj0phw65n] {
    scroll-behavior: smooth;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

    .ipd-progress-notes .pn-patient-card[b-mvj0phw65n] {
        grid-template-columns: repeat(3, 1fr);
    }

    .ipd-progress-notes .pn-vitals-grid[b-mvj0phw65n] {
        grid-template-columns: repeat(3, 1fr);
    }

    .ipd-progress-notes .pn-form-grid-4[b-mvj0phw65n] {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================
   TABLET / SMALL LAPTOP
   ========================= */

@media (max-width: 850px) {

    .ipd-progress-notes .pn-workspace[b-mvj0phw65n] {
        grid-template-columns: 1fr;
    }

    .ipd-progress-notes .pn-sidebar[b-mvj0phw65n] {
        position: sticky;
        top: 68px;
        z-index: 30;
        overflow-x: auto;
    }

    .ipd-progress-notes .pn-sidebar-title[b-mvj0phw65n] {
        display: none;
    }

    .ipd-progress-notes .pn-nav[b-mvj0phw65n] {
        flex-direction: row;
        width: max-content;
    }

        .ipd-progress-notes .pn-nav a[b-mvj0phw65n] {
            white-space: nowrap;
        }

    .ipd-progress-notes .pn-status-grid[b-mvj0phw65n],
    .ipd-progress-notes .pn-treatment-grid[b-mvj0phw65n] {
        grid-template-columns: 1fr;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    .ipd-progress-notes .pn-page-header[b-mvj0phw65n] {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .ipd-progress-notes .pn-header-actions[b-mvj0phw65n] {
        width: 100%;
    }

        .ipd-progress-notes .pn-header-actions .pn-btn[b-mvj0phw65n] {
            flex: 1;
        }

    .ipd-progress-notes .pn-patient-card[b-mvj0phw65n] {
        margin: 12px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ipd-progress-notes .pn-workspace[b-mvj0phw65n] {
        padding: 12px 12px 80px;
    }

    .ipd-progress-notes .pn-form-grid[b-mvj0phw65n],
    .ipd-progress-notes .pn-form-grid-4[b-mvj0phw65n],
    .ipd-progress-notes .pn-examination-grid[b-mvj0phw65n],
    .ipd-progress-notes .pn-plan-grid[b-mvj0phw65n] {
        grid-template-columns: 1fr;
    }

    .ipd-progress-notes .pn-vitals-grid[b-mvj0phw65n] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ipd-progress-notes .pn-diagnosis-row[b-mvj0phw65n] {
        grid-template-columns: 32px 1fr;
    }

        .ipd-progress-notes .pn-diagnosis-row > :last-child[b-mvj0phw65n] {
            grid-column: 2;
        }

    .ipd-progress-notes .pn-auth-card[b-mvj0phw65n] {
        grid-template-columns: 1fr;
    }

    .ipd-progress-notes .pn-bottom-actions[b-mvj0phw65n] {
        padding: 8px 10px;
    }

        .ipd-progress-notes .pn-bottom-actions .pn-btn[b-mvj0phw65n] {
            flex: 1;
        }
}


/* =========================
   SMALL MOBILE
   ========================= */

@media (max-width: 400px) {

    .ipd-progress-notes .pn-vitals-grid[b-mvj0phw65n] {
        grid-template-columns: 1fr;
    }

    .ipd-progress-notes .pn-section-body[b-mvj0phw65n] {
        padding: 12px;
    }

    .ipd-progress-notes .pn-btn[b-mvj0phw65n] {
        padding: 0 9px;
    }
}
/* /Pages/IPD/WardBedDrawer.razor.rz.scp.css */
/* =========================================================
   TRIGGER BUTTON
   ========================================================= */
.ipd-field .req[b-zs1s6py3om] {
    color: #ef4444;
    margin-left: 2px;
}

.drawer-trigger[b-zs1s6py3om] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px dashed #f87171;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--primary);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
}

    .drawer-trigger:hover[b-zs1s6py3om] {
        border-color: var(--primary);
        background: var(--surface);
    }

    .drawer-trigger .placeholder[b-zs1s6py3om] {
        color: var(--primary);
    }

    .drawer-trigger .trigger-value[b-zs1s6py3om] {
        color: var(--ink);
    }

/* =========================================================
   DRAWER OVERLAY + PANEL
   ========================================================= */
.drawer-overlay[b-zs1s6py3om] {
    position: fixed;
    top: var(--hms-topbar-height, 60px);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

.drawer-panel[b-zs1s6py3om] {
    position: fixed;
    top: var(--hms-topbar-height, 60px);
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .1);
    animation: slideIn-b-zs1s6py3om .3s ease-out;
}

@keyframes slideIn-b-zs1s6py3om {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
.drawer-header[b-zs1s6py3om] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
    flex-shrink: 0;
}
    .drawer-header h3[b-zs1s6py3om] {
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
    }

.back-btn[b-zs1s6py3om] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: background .15s;
}

    .back-btn:hover[b-zs1s6py3om] {
        background: var(--surface-muted);
    }

.confirm-btn[b-zs1s6py3om] {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}

    .confirm-btn:hover[b-zs1s6py3om] {
        opacity: .9;
    }

.header-spacer[b-zs1s6py3om] {
    width: 80px;
    display: inline-block;
}

.drawer-body[b-zs1s6py3om] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--surface);
}

.field-label[b-zs1s6py3om] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}

/* =========================================================
   SEARCHABLE SELECT (Ward step)
   ========================================================= */
.searchable-select[b-zs1s6py3om] {
    position: relative;
}

.searchable-input[b-zs1s6py3om] {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .searchable-input:focus[b-zs1s6py3om] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-soft);
    }

.select-chevron[b-zs1s6py3om] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    pointer-events: none;
}

.select-dropdown[b-zs1s6py3om] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
    z-index: 10;
    padding: 4px;
}

.select-option[b-zs1s6py3om] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .15s;
}

    .select-option:hover[b-zs1s6py3om] {
        background: var(--surface-muted);
    }

    .select-option.disabled[b-zs1s6py3om] {
        cursor: not-allowed;
        opacity: .55;
    }

        .select-option.disabled:hover[b-zs1s6py3om] {
            background: transparent;
        }

.opt-name[b-zs1s6py3om] {
    color: var(--ink);
    font-weight: 500;
}

.opt-count[b-zs1s6py3om] {
    font-size: 12.5px;
    font-weight: 600;
}

    .opt-count.bad[b-zs1s6py3om] {
        color: #dc2626;
    }

    .opt-count.good[b-zs1s6py3om] {
        color: #16a34a;
    }

.select-empty[b-zs1s6py3om] {
    padding: 14px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px;
}

/* =========================================================
   ROOM GRID (Step 2)
   ========================================================= */
.room-grid[b-zs1s6py3om] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.room-item[b-zs1s6py3om] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

    .room-item:hover[b-zs1s6py3om] {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(15,23,42,.05);
    }

.room-number[b-zs1s6py3om] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.room-beds[b-zs1s6py3om] {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 4px;
}

/* =========================================================
   STATUS CHIPS + BED GRID (Step 3)
   ========================================================= */
.status-chips[b-zs1s6py3om] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.chip[b-zs1s6py3om] {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}

.chip-available[b-zs1s6py3om] {
    color: #15803d;
    background: #dcfce7;
    border-color: #bbf7d0;
}

    .chip-available:hover[b-zs1s6py3om], .chip-available.active[b-zs1s6py3om] {
        background: #bbf7d0;
        border-color: #86efac;
    }

.chip-occupied[b-zs1s6py3om] {
    color: #c2410c;
    background: #ffedd5;
    border-color: #fed7aa;
}

    .chip-occupied:hover[b-zs1s6py3om], .chip-occupied.active[b-zs1s6py3om] {
        background: #fed7aa;
        border-color: #fdba74;
    }

.chip-blocked[b-zs1s6py3om] {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

    .chip-blocked:hover[b-zs1s6py3om], .chip-blocked.active[b-zs1s6py3om] {
        background: #fecaca;
        border-color: #fca5a5;
    }

.bed-panel[b-zs1s6py3om] {
    background: #f7f5ff;
    border-radius: 12px;
    padding: 16px;
}

.bed-grid[b-zs1s6py3om] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bed-item[b-zs1s6py3om] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

    .bed-item.selectable[b-zs1s6py3om] {
        cursor: pointer;
    }

        .bed-item.selectable:hover[b-zs1s6py3om] {
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
        }

    .bed-item.selected[b-zs1s6py3om] {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

    .bed-item.disabled[b-zs1s6py3om] {
        opacity: .55;
        cursor: not-allowed;
        color: var(--ink-soft);
    }

.bed-radio[b-zs1s6py3om] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    background: transparent;
}

.bed-item.selected .bed-radio[b-zs1s6py3om] {
    border-color: var(--primary);
}

    .bed-item.selected .bed-radio[b-zs1s6py3om]::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--primary);
    }

.bed-label[b-zs1s6py3om] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-results[b-zs1s6py3om] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: var(--ink-soft);
    font-size: 13px;
}


/* =========================================================
   WARD & BED SELECTOR BUTTON
   ========================================================= */

.ipd-ward-bed-btn[b-zs1s6py3om] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px; /* Matches the height of your other inputs */
    padding: 0 16px;
    /* Dashed purple border */
    border: 1.5px dashed #7c6cf0;
    border-radius: 999px; /* Pill shape */
    /* Light purple background */
    background: #f4f2ff;
    /* Purple text */
    color: #5B4FE5;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .ipd-ward-bed-btn:hover[b-zs1s6py3om] {
        background: #ebe8ff;
        border-color: #5B4FE5;
    }

    .ipd-ward-bed-btn:active[b-zs1s6py3om] {
        transform: scale(0.99);
    }

    .ipd-ward-bed-btn:focus-visible[b-zs1s6py3om] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.2);
    }
.drawer-steps[b-zs1s6py3om] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 6px;
    justify-content: center;
}

.step[b-zs1s6py3om] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #9ca3af;
}

    .step .step-dot[b-zs1s6py3om] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
        color: #6b7280;
        font-weight: 600;
        font-size: 12px;
    }

    .step.active .step-dot[b-zs1s6py3om] {
        background: #6d5bd0; /* your primary */
        color: #fff;
    }

    .step.done .step-dot[b-zs1s6py3om] {
        background: #d1fae5;
        color: #047857;
    }

    .step.active .step-label[b-zs1s6py3om] {
        color: #6d5bd0;
        font-weight: 600;
    }

    .step.done .step-label[b-zs1s6py3om] {
        color: #047857;
    }

.step-line[b-zs1s6py3om] {
    flex: 0 0 24px;
    height: 2px;
    background: #e5e7eb;
    margin-top: -12px;
}

    .step-line.done[b-zs1s6py3om] {
        background: #10b981;
    }
/* Room selection highlight */
.room-item.selected[b-zs1s6py3om] {
    border: 2px solid #6d5bd0;
    background: #f4f1ff;
    color: #6d5bd0;
    font-weight: 600;
}

/* Bed selection highlight (if not already styled) */
.bed-item.selected[b-zs1s6py3om] {
    border: 2px solid #6d5bd0;
    background: #f4f1ff;
    color: #6d5bd0;
    font-weight: 600;
}
.drawer-steps[b-zs1s6py3om] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 6px;
}

.step[b-zs1s6py3om] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #9ca3af;
    transition: color 0.15s;
}

    .step:disabled[b-zs1s6py3om],
    .step.disabled[b-zs1s6py3om] {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .step .step-dot[b-zs1s6py3om] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
        color: #6b7280;
        font-weight: 600;
        font-size: 12px;
        transition: background 0.15s, color 0.15s;
    }

    .step.active .step-dot[b-zs1s6py3om] {
        background: #6d5bd0;
        color: #fff;
    }

    .step.done .step-dot[b-zs1s6py3om] {
        background: #d1fae5;
        color: #047857;
    }

    .step.active .step-label[b-zs1s6py3om] {
        color: #6d5bd0;
        font-weight: 600;
    }

    .step.done .step-label[b-zs1s6py3om] {
        color: #047857;
    }

    .step:hover:not(.active) .step-dot[b-zs1s6py3om] {
        background: #e5e7eb;
    }

.step-line[b-zs1s6py3om] {
    flex: 0 0 24px;
    height: 2px;
    background: #e5e7eb;
    margin-top: -12px;
}

    .step-line.done[b-zs1s6py3om] {
        background: #10b981;
    }
/* /Pages/Master/HospitalSettings.razor.rz.scp.css */
.hosp-page[b-wvs0yvrzf6] {
    --primary: #2F6FED;
    --primary-soft: #E8F0FF;
    --primary-dark: #2059C9;
    --ink: #101827;
    --ink-soft: #5C6579;
    --border: #D7DDE8;
    --surface: #FFFFFF;
    --surface-muted: #F1F4F9;
    --page-bg: #EEF1F7;
    --rose-600: #E11D48;
    --emerald-600: #059669;
    --radius-lg: 14px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .05), 0 10px 24px rgba(16, 24, 39, .08);
    width: 100%;
    margin: 0 auto;
    padding: 16px 24px 32px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
    background: var(--page-bg);
}

    .hosp-page *[b-wvs0yvrzf6] {
        box-sizing: border-box;
    }

    .hosp-page h3[b-wvs0yvrzf6], .hosp-page h4[b-wvs0yvrzf6] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
        margin: 0;
    }

/* =========================================================
   PAGE HEADER
   ========================================================= */

.hosp-page-header[b-wvs0yvrzf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.hosp-page-header-title[b-wvs0yvrzf6] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .hosp-page-header-title h3[b-wvs0yvrzf6] {
        font-size: 20px;
        font-weight: 800;
    }

    .hosp-page-header-title p[b-wvs0yvrzf6] {
        margin: 3px 0 0;
        font-size: 13px;
        color: var(--ink-soft);
    }

/* =========================================================
   ICON BADGE
   ========================================================= */

.hosp-icon-badge[b-wvs0yvrzf6] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.hosp-icon-badge-lg[b-wvs0yvrzf6] {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 26px;
    border-radius: 15px;
}

/* =========================================================
   CARDS
   ========================================================= */

.hosp-card[b-wvs0yvrzf6] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}

.hosp-card-header[b-wvs0yvrzf6] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.hosp-card-header-row[b-wvs0yvrzf6] {
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: none;
    margin-bottom: 14px;
    padding-bottom: 0;
}

.hosp-card-header h4[b-wvs0yvrzf6] {
    font-size: 16.5px;
    font-weight: 800;
}

.hosp-card-header p[b-wvs0yvrzf6] {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* =========================================================
   SECTIONS / GRID
   Wider grid, fewer wasted gutters than a plain 2-col layout.
   ========================================================= */

.hosp-section[b-wvs0yvrzf6] {
    margin-bottom: 4px;
}

.hosp-grid[b-wvs0yvrzf6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
}

.hosp-span-2[b-wvs0yvrzf6] {
    grid-column: span 2;
}

/* =========================================================
   IDENTITY ROW (logo + name/tagline)
   ========================================================= */

.hosp-identity-row[b-wvs0yvrzf6] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.hosp-identity-fields[b-wvs0yvrzf6] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}

.hosp-logo-upload[b-wvs0yvrzf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.hosp-logo-preview[b-wvs0yvrzf6] {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid var(--primary-soft);
    background: var(--surface-muted);
}

.hosp-upload-btn[b-wvs0yvrzf6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px dashed var(--primary);
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}

    .hosp-upload-btn:hover[b-wvs0yvrzf6] {
        background: #dde9ff;
    }

/* =========================================================
   FIELDS / INPUTS
   ========================================================= */

.hosp-field label[b-wvs0yvrzf6] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
}

.hosp-req[b-wvs0yvrzf6] {
    color: var(--rose-600);
}

.hosp-input-group[b-wvs0yvrzf6] {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

    .hosp-input-group:focus-within[b-wvs0yvrzf6] {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
    }

.hosp-input-icon[b-wvs0yvrzf6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    border-right: 1px solid var(--border);
    color: var(--ink);
    font-size: 16px;
}

.hosp-input-icon-top[b-wvs0yvrzf6] {
    align-items: flex-start;
    padding-top: 12px;
}

.hosp-input[b-wvs0yvrzf6] {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    border: none;
    border-radius: 0;
    padding: 0 14px;
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
}

    .hosp-input[b-wvs0yvrzf6]::placeholder {
        color: #9AA3B2;
    }

    .hosp-input:focus[b-wvs0yvrzf6] {
        box-shadow: none;
    }

.hosp-textarea-group[b-wvs0yvrzf6] {
    height: auto;
    align-items: stretch;
}

.hosp-textarea[b-wvs0yvrzf6] {
    resize: vertical;
    min-height: 88px;
    padding: 11px 14px;
    line-height: 1.5;
}

/* =========================================================
   TOGGLES (Configuration)
   Chips instead of bare checkboxes, matching the registration
   page's modern-check pattern.
   ========================================================= */

.hosp-toggle-row[b-wvs0yvrzf6] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.hosp-toggle-chip[b-wvs0yvrzf6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .hosp-toggle-chip input[b-wvs0yvrzf6] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .hosp-toggle-chip .mdi[b-wvs0yvrzf6] {
        font-size: 17px;
    }

    .hosp-toggle-chip .hosp-toggle-slider[b-wvs0yvrzf6] {
        width: 32px;
        height: 18px;
        min-width: 32px;
        border-radius: 999px;
        background: #D6DAE3;
        position: relative;
        transition: background .15s ease;
    }

        .hosp-toggle-chip .hosp-toggle-slider[b-wvs0yvrzf6]::before {
            content: "";
            position: absolute;
            width: 13px;
            height: 13px;
            left: 3px;
            top: 2.5px;
            background: #fff;
            border-radius: 50%;
            transition: transform .15s ease;
        }

    .hosp-toggle-chip input:checked + .hosp-toggle-slider[b-wvs0yvrzf6] {
        background: var(--primary);
    }

        .hosp-toggle-chip input:checked + .hosp-toggle-slider[b-wvs0yvrzf6]::before {
            transform: translateX(14px);
        }

    .hosp-toggle-chip:has(input:checked)[b-wvs0yvrzf6] {
        border-color: transparent;
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

/* =========================================================
   ACTIONS / BUTTONS
   ========================================================= */

.hosp-actions[b-wvs0yvrzf6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.hosp-btn[b-wvs0yvrzf6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .hosp-btn .mdi[b-wvs0yvrzf6] {
        font-size: 16px;
    }

    .hosp-btn:hover[b-wvs0yvrzf6] {
        transform: translateY(-1px);
    }

    .hosp-btn.btn-primary[b-wvs0yvrzf6] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgba(47, 111, 237, .28);
    }

        .hosp-btn.btn-primary:hover[b-wvs0yvrzf6] {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .hosp-btn.btn-outline-primary[b-wvs0yvrzf6] {
        background: var(--surface);
        border-color: var(--primary);
        color: var(--primary);
    }

        .hosp-btn.btn-outline-primary:hover[b-wvs0yvrzf6] {
            background: var(--primary-soft);
        }

.hosp-btn-sm[b-wvs0yvrzf6] {
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
}

/* =========================================================
   SEARCH (list card header)
   ========================================================= */

.hosp-search-group[b-wvs0yvrzf6] {
    width: 280px;
}

/* =========================================================
   TABLE
   ========================================================= */

.hosp-table-wrap[b-wvs0yvrzf6] {
    overflow-x: auto;
}

.hosp-table[b-wvs0yvrzf6] {
    width: 100%;
    border-collapse: collapse;
}

    .hosp-table thead th[b-wvs0yvrzf6] {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ink-soft);
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .hosp-table tbody td[b-wvs0yvrzf6] {
        padding: 12px 14px;
        font-size: 13.5px;
        color: var(--ink);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .hosp-table tbody tr:hover[b-wvs0yvrzf6] {
        background: var(--surface-muted);
    }

.hosp-col-center[b-wvs0yvrzf6] {
    text-align: center;
}

.hosp-table-logo[b-wvs0yvrzf6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-muted);
}

.hosp-table-subtitle[b-wvs0yvrzf6] {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.hosp-feature-badges[b-wvs0yvrzf6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hosp-feature-badge[b-wvs0yvrzf6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

    .hosp-feature-badge .mdi[b-wvs0yvrzf6] {
        font-size: 12px;
    }

.hosp-empty-row[b-wvs0yvrzf6] {
    text-align: center;
    padding: 32px 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}

    .hosp-empty-row .mdi[b-wvs0yvrzf6] {
        display: block;
        font-size: 28px;
        margin-bottom: 8px;
        color: var(--border);
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hosp-grid[b-wvs0yvrzf6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .hosp-identity-fields[b-wvs0yvrzf6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .hosp-page[b-wvs0yvrzf6] {
        padding: 14px 10px 24px;
    }

    .hosp-grid[b-wvs0yvrzf6] {
        grid-template-columns: 1fr;
    }

    .hosp-span-2[b-wvs0yvrzf6] {
        grid-column: span 1;
    }

    .hosp-identity-row[b-wvs0yvrzf6] {
        flex-direction: column;
        align-items: stretch;
    }

    .hosp-search-group[b-wvs0yvrzf6] {
        width: 100%;
    }

    .hosp-actions[b-wvs0yvrzf6] {
        flex-direction: column-reverse;
    }

    .hosp-btn[b-wvs0yvrzf6] {
        width: 100%;
    }
}
/* /Pages/Master/Masters.razor.rz.scp.css */
/*
    master page css - clean and minimal styles for doctor master module, including page layout, cards, forms, tables, and responsive design.
*/

/* ==========================================
   MASTER DASHBOARD
========================================== */

.master-page-title[b-2foeylq70l] {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.master-page-subtitle[b-2foeylq70l] {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ==========================================
   GRID
   One continuous grid — wider tracks and a
   larger gap so the page reads as spacious
   rather than cramped, with room to add more
   tiles later without needing to shrink these.
========================================== */

.master-dashboard[b-2foeylq70l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}

/* ==========================================
   CARD
========================================== */

.master-card[b-2foeylq70l] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 10px;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

    .master-card:hover[b-2foeylq70l],
    .master-card:focus-visible[b-2foeylq70l] {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(15,23,42,.10);
        border-color: #2563eb;
    }

    .master-card:focus-visible[b-2foeylq70l] {
        outline: none;
    }

/* ==========================================
   ICON
========================================== */

.master-card-top[b-2foeylq70l] {
    margin-bottom: 16px;
}

.master-icon[b-2foeylq70l] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ==========================================
   TITLE
========================================== */

.master-card-title[b-2foeylq70l] {
    flex: 1;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

/* ==========================================
   FOOTER
========================================== */

.master-card-footer[b-2foeylq70l] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 600;
}

.master-card-footer-arrow[b-2foeylq70l] {
    transition: transform .18s ease;
}

.master-card:hover .master-card-footer-arrow[b-2foeylq70l],
.master-card:focus-visible .master-card-footer-arrow[b-2foeylq70l] {
    transform: translateX(3px);
}

/* ==========================================
   COLOR VARIANTS
========================================== */

.master-card:nth-child(1) .master-icon[b-2foeylq70l] {
    background: #eff6ff;
}

.master-card:nth-child(2) .master-icon[b-2foeylq70l] {
    background: #ecfdf5;
}

.master-card:nth-child(3) .master-icon[b-2foeylq70l] {
    background: #fef3c7;
}

.master-card:nth-child(4) .master-icon[b-2foeylq70l] {
    background: #f3e8ff;
}

.master-card:nth-child(5) .master-icon[b-2foeylq70l] {
    background: #ecfeff;
}

.master-card:nth-child(6) .master-icon[b-2foeylq70l] {
    background: #fee2e2;
}

.master-card:nth-child(7) .master-icon[b-2foeylq70l] {
    background: #dcfce7;
}

.master-card:nth-child(8) .master-icon[b-2foeylq70l] {
    background: #dbeafe;
}

.master-card:nth-child(9) .master-icon[b-2foeylq70l] {
    background: #fef9c3;
}

.master-card:nth-child(10) .master-icon[b-2foeylq70l] {
    background: #ede9fe;
}

.master-card:nth-child(11) .master-icon[b-2foeylq70l] {
    background: #fae8ff;
}

.master-card:nth-child(12) .master-icon[b-2foeylq70l] {
    background: #e0f2fe;
}

.master-card:nth-child(13) .master-icon[b-2foeylq70l] {
    background: #fef2f2;
}

.master-card:nth-child(14) .master-icon[b-2foeylq70l] {
    background: #f0fdf4;
}

.master-card:nth-child(15) .master-icon[b-2foeylq70l] {
    background: #fff7ed;
}

.master-card:nth-child(16) .master-icon[b-2foeylq70l] {
    background: #eef2ff;
}

/* ==========================================
   ACTIVE STATE
========================================== */

.master-card.active[b-2foeylq70l] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

/* ==========================================
   SCROLLBAR
========================================== */

.master-dashboard[b-2foeylq70l]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.master-dashboard[b-2foeylq70l]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1400px) {
    .master-dashboard[b-2foeylq70l] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .master-dashboard[b-2foeylq70l] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .master-dashboard[b-2foeylq70l] {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .master-dashboard[b-2foeylq70l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .master-card[b-2foeylq70l] {
        min-height: 148px;
        padding: 20px;
    }

    .master-icon[b-2foeylq70l] {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .master-dashboard[b-2foeylq70l] {
        grid-template-columns: 1fr;
    }

    .master-card[b-2foeylq70l] {
        min-height: auto;
    }

    .master-page-title[b-2foeylq70l] {
        font-size: 22px;
    }
}

.master-home[b-2foeylq70l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.master-home-header[b-2foeylq70l] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.045);
}

.master-home-icon[b-2foeylq70l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #5146d8;
    background: #efedff;
    border-radius: 12px;
    font-size: 21px;
}

.master-home-header h1[b-2foeylq70l] {
    margin: 0;
    color: #172033;
    font-size: 18px;
    font-weight: 750;
}

.master-home-header p[b-2foeylq70l] {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12.5px;
}

.master-home-count[b-2foeylq70l] {
    margin-left: auto;
    padding: 6px 10px;
    color: #5146d8;
    background: #efedff;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.master-home .master-dashboard[b-2foeylq70l] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 225px), 1fr));
    align-items: stretch;
    gap: 14px;
}

.master-home .master-card[b-2foeylq70l] {
    align-items: flex-start;
    min-height: 168px;
    padding: 16px;
    border-color: #e4e8ef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.035);
    text-align: left;
}

.master-home .master-card:hover[b-2foeylq70l],
.master-home .master-card:focus-visible[b-2foeylq70l] {
    border-color: #aaa4f0;
    box-shadow: 0 10px 24px rgba(31,35,70,.09);
    transform: translateY(-2px);
}

.master-home .master-icon[b-2foeylq70l] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 11px;
    font-size: 22px;
}

.master-home .master-card-title[b-2foeylq70l] {
    width: 100%;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
}

.master-home .master-card-footer[b-2foeylq70l] {
    width: 100%;
    padding-top: 10px;
    color: #5146d8;
    font-size: 11.5px;
}

@media (max-width: 640px) {
    .master-home-header[b-2foeylq70l] {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 14px;
    }

    .master-home-count[b-2foeylq70l] {
        margin-left: 55px;
    }

    .master-home .master-dashboard[b-2foeylq70l] {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    .master-home .master-card[b-2foeylq70l] {
        min-height: 150px;
        padding: 13px;
    }
}

@media (max-width: 420px) {
    .master-home .master-dashboard[b-2foeylq70l] {
        grid-template-columns: 1fr;
    }

    .master-home-count[b-2foeylq70l] {
        margin-left: 0;
    }
}
/* /Pages/Master/PathologyMaster.razor.rz.scp.css */
/* =========================================================
   PATHOLOGY MASTER
   Drop this beside PathologyMaster.razor.

   The component already uses Bootstrap utility classes. This scoped layer
   standardises the module with the patient screens: purple primary actions,
   quiet neutral surfaces, consistent control heights and MDI icons.
   ========================================================= */

/*.pathology-master-page {
    --pathology-primary: var(--hms-primary, #5b4fe5);
    --pathology-primary-dark: #3d33b0;
    --pathology-primary-soft: var(--hms-primary-soft, #edebff);
    --pathology-ink: var(--hms-ink, #101827);
    --pathology-muted: #667085;
    --pathology-border: var(--hms-border, #e2e6ed);
    --pathology-page: #f2f3fa;
    --pathology-surface: #fff;
    --pathology-surface-muted: #f8f9fc;
    --pathology-danger: #e11d48;
    --pathology-danger-soft: #ffe4e9;
    --pathology-success: #059669;
    --pathology-success-soft: #d1fae5;
    --pathology-warning: #d97706;
    --pathology-warning-soft: #fef3c7;
    --pathology-radius-lg: 18px;
    --pathology-radius-md: 13px;
    --pathology-radius-sm: 9px;
    --pathology-shadow: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    min-height: calc(100vh - var(--hms-topbar-height, 64px));
    padding: 20px 24px 28px;
    background: var(--pathology-page);
    color: var(--pathology-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

    .pathology-master-page h3,
    .pathology-master-page h5,
    .pathology-master-page strong {
        color: var(--pathology-ink);
    }

    .pathology-master-page .mdi {
        line-height: 1;
        vertical-align: -1px;
    }

    .pathology-master-page .page-header {
        align-items: flex-end;
        gap: 18px;
        margin-bottom: 18px;
    }

    .pathology-master-page .breadcrumb-text {
        margin-bottom: 6px;
        color: var(--pathology-primary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .pathology-master-page .page-title {
        color: var(--pathology-ink);
        font-size: 22px;
        font-weight: 750;
        letter-spacing: -.02em;
    }

        .pathology-master-page .page-title .mdi {
            color: var(--pathology-primary);
        }

    .pathology-master-page .page-subtitle {
        margin-top: 6px;
        color: var(--pathology-muted);
        font-size: 13px;
    }

    .pathology-master-page .page-header-actions,
    .pathology-master-page .action-buttons,
    .pathology-master-page .drawer-footer {
        align-items: center;
    }

        .pathology-master-page .page-header-actions .btn,
        .pathology-master-page .content-card-header .btn,
        .pathology-master-page .drawer-footer .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 38px;
            border-radius: var(--pathology-radius-sm);
            font-size: 13px;
            font-weight: 650;
            line-height: 1;
            transition: transform .15s ease, background .15s ease, border-color .15s ease;
        }

    .pathology-master-page .btn-primary {
        background: var(--pathology-primary);
        border-color: var(--pathology-primary);
        box-shadow: 0 4px 12px rgba(91, 79, 229, .22);
    }

        .pathology-master-page .btn-primary:hover {
            background: var(--pathology-primary-dark);
            border-color: var(--pathology-primary-dark);
            transform: translateY(-1px);
        }

    .pathology-master-page .btn-light {
        color: var(--pathology-ink);
        background: var(--pathology-surface);
        border-color: var(--pathology-border) !important;
    }*/

    /* The eight master areas stay aligned and scroll as one unit on narrow views. */
    /*.pathology-master-page .master-tabs {
        display: grid;
        grid-template-columns: repeat(8, minmax(118px, 1fr));
        gap: 5px;
        margin-bottom: 16px;
        padding: 6px;
        border: 1px solid var(--pathology-border);
        border-radius: var(--pathology-radius-md);
        background: var(--pathology-surface);
        box-shadow: var(--pathology-shadow);
        overflow-x: auto;
    }

    .pathology-master-page .master-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 8px 12px;
        border: 0;
        border-radius: var(--pathology-radius-sm);
        color: var(--pathology-muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.15;
        white-space: nowrap;
        transition: background .15s ease, color .15s ease;
    }

        .pathology-master-page .master-tab:hover {
            background: var(--pathology-surface-muted);
            color: var(--pathology-primary);
        }

        .pathology-master-page .master-tab.active {
            background: var(--pathology-primary-soft);
            color: var(--pathology-primary);
            box-shadow: inset 0 0 0 1px rgba(91, 79, 229, .08);
        }

        .pathology-master-page .master-tab .mdi {
            flex: 0 0 auto;
            font-size: 17px;
        }

    .pathology-master-page .content-card {
        border: 1px solid var(--pathology-border);
        border-radius: var(--pathology-radius-lg);
        background: var(--pathology-surface);
        box-shadow: var(--pathology-shadow);
    }

    .pathology-master-page .content-card-header {
        min-height: 76px;
        padding: 16px 20px;
        border-bottom-color: var(--pathology-border);
    }

    .pathology-master-page .content-title {
        margin: 0;
        font-size: 16px;
        font-weight: 750;
    }

    .pathology-master-page .content-subtitle {
        margin: 5px 0 0;
        color: var(--pathology-muted);
        font-size: 12px;
    }

    .pathology-master-page .filter-panel {
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        border-bottom-color: var(--pathology-border);
        background: var(--pathology-surface-muted);
    }

    .pathology-master-page .search-box {
        min-width: 220px;
    }

        .pathology-master-page .search-box i {
            top: 10px;
            left: 13px;
            color: var(--pathology-muted);
            font-size: 17px;
        }

        .pathology-master-page .search-box input,
        .pathology-master-page .filter-select,
        .pathology-master-page .drawer-body .form-control,
        .pathology-master-page .drawer-body .form-select,
        .pathology-master-page .parameter-modal-body .form-control,
        .pathology-master-page .parameter-modal-body .form-select {
            min-height: 38px;
            border: 1px solid var(--pathology-border);
            border-radius: var(--pathology-radius-sm);
            color: var(--pathology-ink);
            font-size: 13px;
        }

            .pathology-master-page .search-box input:focus,
            .pathology-master-page .filter-select:focus,
            .pathology-master-page .drawer-body .form-control:focus,
            .pathology-master-page .drawer-body .form-select:focus,
            .pathology-master-page .parameter-modal-body .form-control:focus,
            .pathology-master-page .parameter-modal-body .form-select:focus {
                border-color: var(--pathology-primary);
                box-shadow: 0 0 0 3px var(--pathology-primary-soft);
            }

    .pathology-master-page .pathology-table {
        color: var(--pathology-ink);
        font-size: 13px;
    }

        .pathology-master-page .pathology-table th {
            padding: 12px 16px;
            border-bottom: 1px solid var(--pathology-border);
            background: var(--pathology-surface-muted);
            color: var(--pathology-muted);
            font-size: 10px;
            letter-spacing: .05em;
            white-space: nowrap;
        }

        .pathology-master-page .pathology-table td {
            padding: 13px 16px;
            border-color: #f0f1f7;
            vertical-align: middle;
        }

        .pathology-master-page .pathology-table tbody tr:hover {
            background: var(--pathology-surface-muted);
        }

    .pathology-master-page .test-name {
        font-weight: 700;
    }

    .pathology-master-page .test-short-name,
    .pathology-master-page .content-subtitle,
    .pathology-master-page .table-footer {
        color: var(--pathology-muted);
    }

    .pathology-master-page .code-badge,
    .pathology-master-page .test-count-badge {
        border: 1px solid var(--pathology-border);
        background: var(--pathology-surface-muted);
        color: var(--pathology-ink);
        font-weight: 700;
    }

    .pathology-master-page .test-count-badge {
        border-color: #d9d4ff;
        background: var(--pathology-primary-soft);
        color: var(--pathology-primary);
    }

    .pathology-master-page .status-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }

        .pathology-master-page .status-badge.active {
            background: var(--pathology-success-soft);
            color: var(--pathology-success);
        }

        .pathology-master-page .status-badge.inactive {
            background: #eef0f4;
            color: var(--pathology-muted);
        }

    .pathology-master-page .icon-btn,
    .pathology-master-page .sample-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--pathology-border);
        border-radius: 8px;
        background: var(--pathology-surface);
        color: var(--pathology-muted);
        transition: all .15s ease;
    }

        .pathology-master-page .icon-btn:hover,
        .pathology-master-page .sample-action:hover {
            border-color: var(--pathology-primary);
            background: var(--pathology-primary-soft);
            color: var(--pathology-primary);
        }

        .pathology-master-page .icon-btn.danger:hover {
            border-color: var(--pathology-danger);
            background: var(--pathology-danger-soft);
            color: var(--pathology-danger);
        }

    .pathology-master-page .table-footer {
        min-height: 58px;
        border-top-color: var(--pathology-border);
        font-size: 12px;
    }

    .pathology-master-page .page-btn {
        border-color: var(--pathology-border);
        border-radius: 8px;
        color: var(--pathology-ink);
    }

        .pathology-master-page .page-btn.active {
            border-color: var(--pathology-primary);
            background: var(--pathology-primary);
        }*/

    /* Cards used by sample types and units. */
    /*.pathology-master-page .sample-type-card,
    .pathology-master-page .master-small-card {
        min-height: 78px;
        border-color: var(--pathology-border);
        border-radius: var(--pathology-radius-md);
        box-shadow: 0 1px 2px rgba(16, 24, 39, .02);
    }

        .pathology-master-page .sample-type-card:hover,
        .pathology-master-page .master-small-card:hover {
            border-color: #c9c3ff;
            background: #fcfbff;
            box-shadow: 0 6px 16px rgba(91, 79, 229, .08);
            transform: translateY(-1px);
        }

    .pathology-master-page .sample-icon,
    .pathology-master-page .master-small-icon,
    .pathology-master-page .empty-parameter-icon {
        background: var(--pathology-primary-soft);
        color: var(--pathology-primary);
    }*/

    /* Keep the editor layers independent from page content and contain scrolling. */
    /*.pathology-master-page .drawer-backdrop,
    .pathology-master-page .parameter-modal-backdrop {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        background: rgba(16, 24, 39, .42);
        overscroll-behavior: contain;
        z-index: 2000;
    }

    .pathology-master-page .parameter-modal-backdrop {
        align-items: center;
        justify-content: center;
        padding: 20px;
        z-index: 2100;
    }

    .pathology-master-page .pathology-drawer {
        position: relative;
        width: min(560px, 100vw);
        height: 100%;
        border-left: 1px solid var(--pathology-border);
        background: var(--pathology-surface);
        box-shadow: -12px 0 32px rgba(16, 24, 39, .14);
    }

    .pathology-master-page .parameter-modal {
        width: min(700px, 100%);
        max-height: min(90vh, 860px);
        border: 1px solid var(--pathology-border);
        border-radius: var(--pathology-radius-lg);
        box-shadow: 0 24px 70px rgba(16, 24, 39, .2);
    }

    .pathology-master-page .drawer-header,
    .pathology-master-page .parameter-modal-header {
        min-height: 76px;
        padding: 16px 22px;
        border-bottom-color: var(--pathology-border);
    }

        .pathology-master-page .drawer-header h5,
        .pathology-master-page .parameter-modal-header h5 {
            margin: 0;
            font-size: 16px;
            font-weight: 750;
        }

        .pathology-master-page .drawer-header small,
        .pathology-master-page .parameter-modal-header small {
            display: block;
            max-width: 420px;
            margin-top: 5px;
            color: var(--pathology-muted);
            font-size: 12px;
            line-height: 1.45;
        }

    .pathology-master-page .drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--pathology-muted);
    }

        .pathology-master-page .drawer-close:hover {
            border-color: var(--pathology-danger-soft);
            background: var(--pathology-danger-soft);
            color: var(--pathology-danger);
        }

    .pathology-master-page .drawer-body,
    .pathology-master-page .parameter-modal-body {
        padding: 22px;
        overscroll-behavior: contain;
    }

    .pathology-master-page .form-section {
        margin-bottom: 22px;
        padding-bottom: 22px;
        border-bottom-color: var(--pathology-border);
    }

    .pathology-master-page .section-title {
        margin-bottom: 14px;
        color: var(--pathology-ink);
        font-size: 13px;
        font-weight: 750;
    }

    .pathology-master-page .form-label {
        margin-bottom: 6px;
        color: var(--pathology-ink);
        font-size: 12px;
        font-weight: 650;
    }

    .pathology-master-page .required {
        color: var(--pathology-danger);
    }

    .pathology-master-page .active-toggle,
    .pathology-master-page .parameter-option {
        border-radius: var(--pathology-radius-sm);
    }

    .pathology-master-page .active-toggle {
        padding: 12px 14px;
        border: 1px solid var(--pathology-border);
        background: var(--pathology-surface-muted);
    }

        .pathology-master-page .active-toggle small {
            margin-top: 3px;
            color: var(--pathology-muted);
        }

    .pathology-master-page .form-check-input:checked {
        border-color: var(--pathology-primary);
        background-color: var(--pathology-primary);
    }

    .pathology-master-page .drawer-footer {
        min-height: 72px;
        padding: 14px 22px;
        border-top-color: var(--pathology-border);
        background: var(--pathology-surface);
    }*/

    /* The original snapshot contains an accidental nested duplicate parameter
   block in the test drawer. The second block is the complete one. */
    /*.pathology-master-page .pathology-drawer .drawer-body > .form-section:nth-child(3) > .form-section:first-child {
        display: none;
    }

@media (max-width: 1100px) {
    .pathology-master-page .master-tabs {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .pathology-master-page {
        padding: 12px;
    }

        .pathology-master-page .page-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .pathology-master-page .page-header-actions,
        .pathology-master-page .page-header-actions .btn {
            width: 100%;
        }

            .pathology-master-page .page-header-actions .btn {
                flex: 1;
            }

        .pathology-master-page .master-tabs {
            grid-template-columns: repeat(8, minmax(145px, 1fr));
        }

        .pathology-master-page .content-card-header,
        .pathology-master-page .filter-panel,
        .pathology-master-page .table-footer {
            align-items: stretch;
            flex-direction: column;
        }

        .pathology-master-page .filter-select {
            width: 100%;
        }

        .pathology-master-page .drawer-body,
        .pathology-master-page .parameter-modal-body {
            padding: 16px;
        }
}*/
/* /Pages/Master/ServicesMaster.razor.rz.scp.css */
/* /Pages/OPD/OPDConsultationDesign.razor.rz.scp.css */
.consult-proto-workspace[b-l29ijajg71] {
    background-color: #F1F5F9;
    color: #1e293b;
    min-height: 100vh;
    font-size: 15px;
}

    .consult-proto-workspace *[b-l29ijajg71] {
        box-sizing: border-box;
    }

.consult-proto-container[b-l29ijajg71] {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 1.75rem;
}

.muted[b-l29ijajg71] {
    color: crimson;
    font-weight: 500;
}

/* ---- top bar ---- */
.consult-topbar[b-l29ijajg71] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.topbar-left[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-back[b-l29ijajg71] {
    background: #eef2ff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #4338ca;
}

    .icon-back:hover[b-l29ijajg71] {
        background: #e0e7ff;
    }

.patient-chip[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-avatar[b-l29ijajg71] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}

    .patient-avatar.sm[b-l29ijajg71] {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

.patient-chip-name[b-l29ijajg71] {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
    margin: 0;
}

.patient-chip-meta[b-l29ijajg71] {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0 0;
}

.topbar-right[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* =========================================================
   TOPBAR ACTION BUTTONS
   ========================================================= */

.topbar-btn[b-l29ijajg71] {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .topbar-btn i[b-l29ijajg71] {
        font-size: 17px;
        line-height: 1;
    }

.topbar-btn-vitals[b-l29ijajg71] {
    background: #ffffff;
    border-color: #2563eb;
    color: #2563eb;
}

    .topbar-btn-vitals:hover[b-l29ijajg71] {
        background: #eff6ff;
        border-color: #1d4ed8;
        color: #1d4ed8;
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
        transform: translateY(-1px);
    }

.topbar-btn-preview[b-l29ijajg71] {
    background: #ffffff;
    color: #7c3aed;
}

    .topbar-btn-preview:hover[b-l29ijajg71] {
        background: #f5f3ff;
        border-color: #6d28d9;
        color: #6d28d9;
        box-shadow: 0 3px 8px rgba(124, 58, 237, 0.12);
        transform: translateY(-1px);
    }

.topbar-btn-complete[b-l29ijajg71] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

    .topbar-btn-complete:hover[b-l29ijajg71] {
        background: #15803d;
        border-color: #15803d;
        box-shadow: 0 3px 8px rgba(22, 163, 74, 0.18);
        transform: translateY(-1px);
    }

.topbar-btn:active[b-l29ijajg71] {
    transform: translateY(0);
}

.topbar-btn:focus-visible[b-l29ijajg71] {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .topbar-right[b-l29ijajg71] {
        gap: 6px;
    }

    .topbar-btn[b-l29ijajg71] {
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }

        .topbar-btn i[b-l29ijajg71] {
            font-size: 16px;
        }
}


/* ---- layout ---- */
/* Trimmed top padding so the toolbar sits closer to the page edge
   instead of leaving unused white space above it. */
.consult-proto-main[b-l29ijajg71] {
    padding: 0.5rem 1.25rem 1.25rem;
}


/* ---- shared card bits still used by icon-badge etc ---- */
.card-title[b-l29ijajg71] {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.icon-badge[b-l29ijajg71] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.badge-rose[b-l29ijajg71] {
    background: #ffe4e6;
    color: #be123c;
}

.badge-preview[b-l29ijajg71] {
    background: #f5f3ff;
    color: #6d28d9;
}

.link-action[b-l29ijajg71] {
    background: none;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    color: #94a3b8;
}

    .link-action:hover[b-l29ijajg71], .link-action.danger:hover[b-l29ijajg71] {
        color: #dc2626;
        text-decoration: underline;
    }

/* ---- section-header "Clear" button (replaces the old +Add pattern
        on free-text sections: Symptoms, Examinations, Diagnosis, Advice) ---- */
.clear-action[b-l29ijajg71] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .clear-action i[b-l29ijajg71] {
        font-size: 14px;
        line-height: 1;
    }

    .clear-action:hover[b-l29ijajg71] {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #b91c1c;
    }

    .clear-action:focus-visible[b-l29ijajg71] {
        outline: 2px solid rgba(220, 38, 38, 0.35);
        outline-offset: 2px;
    }


/* ---- type-in tag inputs (kept for anything still using this pattern) ---- */
.tag-input-row[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tag-input-row .form-input[b-l29ijajg71] {
        flex: 1;
    }

.btn-add[b-l29ijajg71] {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 0.45rem;
    cursor: pointer;
    border: none;
    color: #fff;
    white-space: nowrap;
    font-family: inherit;
}

.btn-add-blue[b-l29ijajg71] {
    background: #2563eb;
}

    .btn-add-blue:hover[b-l29ijajg71] {
        background: #1d4ed8;
    }

.btn-add-violet[b-l29ijajg71] {
    background: #7c3aed;
}

    .btn-add-violet:hover[b-l29ijajg71] {
        background: #6d28d9;
    }

.btn-add-green[b-l29ijajg71] {
    background: #059669;
}

    .btn-add-green:hover[b-l29ijajg71] {
        background: #047857;
    }

.btn-add-amber[b-l29ijajg71] {
    background: #d97706;
}

    .btn-add-amber:hover[b-l29ijajg71] {
        background: #b45309;
    }

.btn-add-teal[b-l29ijajg71] {
    background: #0d9488;
}

    .btn-add-teal:hover[b-l29ijajg71] {
        background: #0f766e;
    }

.chip-row[b-l29ijajg71] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.chip[b-l29ijajg71] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 7px 5px 11px;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.chip-blue[b-l29ijajg71] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.chip-violet[b-l29ijajg71] {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.chip-amber[b-l29ijajg71] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.chip-x[b-l29ijajg71] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
    line-height: 1;
    color: inherit;
    opacity: .7;
}

    .chip-x:hover[b-l29ijajg71] {
        opacity: 1;
    }

.chip-suggest[b-l29ijajg71] {
    cursor: pointer;
    background: #fff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 9999px;
}

    .chip-suggest:hover[b-l29ijajg71] {
        background: #f5f3ff;
    }

.empty-hint[b-l29ijajg71] {
    font-size: 12.5px;
    color: crimson;
    font-style: italic;
}

/* ---- differential diagnosis toggle ---- */
.differential-toggle[b-l29ijajg71] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
    border-radius: 0.5rem;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

    .differential-toggle:hover[b-l29ijajg71] {
        background: #ffe4e6;
    }

.chevron[b-l29ijajg71] {
    transition: transform .2s ease;
}

    .chevron.open[b-l29ijajg71] {
        transform: rotate(180deg);
    }

.differential-panel[b-l29ijajg71] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 3px 0 3px;
}

/* ---- generic form bits ---- */
.field[b-l29ijajg71] {
    margin-top: 9px;
}

    .field label[b-l29ijajg71], .field-grid label[b-l29ijajg71] {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 4px;
    }

.field-grid[b-l29ijajg71] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .field-grid.cols-2[b-l29ijajg71] {
        grid-template-columns: 1fr 1fr;
    }
}

.form-input[b-l29ijajg71], textarea.form-input[b-l29ijajg71], select.form-input[b-l29ijajg71] {
    width: 100%;
    font-size: 13.5px;
    padding: 8px 11px;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    outline: none;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-input:focus[b-l29ijajg71] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

textarea.form-input[b-l29ijajg71] {
    resize: vertical;
    min-height: 38px;
}

/* Bigger free-text areas for Symptoms / Examinations / Diagnosis / Advice
   so there's real room to write, replacing the old single-line + chip UI. */
.rx-textarea[b-l29ijajg71] {
    min-height: 92px;
    line-height: 1.55;
    resize: vertical;
}

.stack-list[b-l29ijajg71] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-row[b-l29ijajg71] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .inline-row .form-input[b-l29ijajg71] {
        flex: 1;
    }

/* Investigation rows: test name stays a short input, remarks becomes a
   proper multi-line textarea so there's space to write instructions. */
.investigation-row[b-l29ijajg71] {
    align-items: flex-start;
}

    .investigation-row .investigation-name[b-l29ijajg71] {
        flex: 0 0 220px;
    }

    .investigation-row .investigation-remarks[b-l29ijajg71] {
        flex: 1;
        min-height: 54px;
        line-height: 1.5;
        resize: vertical;
    }

@media (max-width: 640px) {
    .investigation-row[b-l29ijajg71] {
        flex-wrap: wrap;
    }

        .investigation-row .investigation-name[b-l29ijajg71] {
            flex: 1 1 100%;
        }
}

.table-wrap[b-l29ijajg71] {
    overflow-x: auto;
}

table.data-table[b-l29ijajg71] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13.5px;
}

    table.data-table thead tr[b-l29ijajg71] {
        background: #f0fdf4;
        border-top: 1px solid #bbf7d0;
        border-bottom: 1px solid #bbf7d0;
    }

    table.data-table th[b-l29ijajg71] {
        padding: 8px 10px;
        color: #166534;
        font-weight: 700;
        white-space: nowrap;
    }

    table.data-table td[b-l29ijajg71] {
        padding: 6px 8px;
        border-bottom: 1px solid #f1f5f9;
    }

    table.data-table tbody tr:last-child td[b-l29ijajg71] {
        border-bottom: none;
    }

    table.data-table tbody tr:hover td[b-l29ijajg71] {
        background: #f8fafc;
    }

    table.data-table input[b-l29ijajg71] {
        width: 100%;
        padding: 7px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 13.5px;
        font-family: inherit;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        table.data-table input:focus[b-l29ijajg71] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

.col-center[b-l29ijajg71] {
    text-align: center;
}

.icon-btn-danger[b-l29ijajg71] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #ef4444;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 12.5px;
    border-radius: 6px;
}

    .icon-btn-danger:hover[b-l29ijajg71] {
        background: #fee2e2;
        color: #b91c1c;
    }


/* =========================================================
   PRESCRIPTION "PAPER" CANVAS — toolbar + shell
   ========================================================= */
.canvas-toolbar[b-l29ijajg71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 9px 14px;
    margin-bottom: 12px;
}

.canvas-toolbar-title[b-l29ijajg71] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-toolbar-right[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-tab[b-l29ijajg71] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 5px 12px;
    border-radius: 6px;
}

.letterhead-select[b-l29ijajg71] {
    width: auto !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* Trimmed vertical padding so the canvas doesn't add extra scroll height
   on top of what its sections already need. */
.rx-canvas[b-l29ijajg71] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    padding: 1.15rem 1.5rem 1.35rem;
    position: relative;
    overflow: hidden;
}

.rx-canvas-corner[b-l29ijajg71] {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #0f766e, #14b8a6 60%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.rx-canvas-header[b-l29ijajg71] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    z-index: 1;
    padding-left: 64px;
}

.rx-canvas-hospital-block[b-l29ijajg71] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rx-canvas-logo[b-l29ijajg71] {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #f1f5f9;
    color: #0f766e;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
}

    .rx-canvas-logo img[b-l29ijajg71] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rx-canvas-hospital h2[b-l29ijajg71] {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
}

.rx-canvas-address[b-l29ijajg71] {
    font-size: 14px;
    color: black;
    margin: 3px 0 0 0;
    max-width: 360px;
}

.rx-canvas-contact[b-l29ijajg71] {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0 0;
}

.rx-canvas-doctors[b-l29ijajg71] {
    text-align: right;
    font-size: 13px;
    color: #1e293b;
}

.rx-canvas-divider[b-l29ijajg71] {
    height: 2px;
    background: #0f172a;
    margin: 12px 0 11px 0;
}
/* =========================================================
   PATIENT INFO ROW — header strip
   Label small + muted, value bold + dark. Same single row.
   ========================================================= */

.rx-canvas-patient-row[b-l29ijajg71] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    padding-bottom: 11px;
    border-bottom: 1px dashed #cbd5e1;
    font-size: 14px;
    color: #0f172a;
}

/* Each label + value pair — inline, side by side */
.rx-info-item[b-l29ijajg71] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

/* Small, muted, uppercase label */
.rx-info-label[b-l29ijajg71] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: crimson;
}

/* Bold, dark value */
.rx-info-value[b-l29ijajg71] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.rx-canvas-body[b-l29ijajg71] {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
}

.rx-canvas-rx-symbol[b-l29ijajg71] {
    font-size: 26px;
    font-weight: 800;
    color: #0f766e;
    margin: 4px 0 4px 0;
}


/* =========================================================
   SINGLE FULL-WIDTH EDITABLE PRESCRIPTION CANVAS
   (body now holds the live clinical form fields, replacing
   the old separate left-side input cards + right preview)
   ========================================================= */

.rx-canvas-editable[b-l29ijajg71] {
    margin: 0 auto;
}

/* Trimmed per-section padding (was 18px top/bottom) to cut cumulative
   vertical whitespace across the ~7 sections on the page. */
.rx-section[b-l29ijajg71] {
    padding: 13px 0;
    border-bottom: 1px dashed #e2e8f0;
}

    .rx-section:first-child[b-l29ijajg71] {
        padding-top: 4px;
    }

    .rx-section:last-of-type[b-l29ijajg71] {
        border-bottom: none;
    }

.rx-section-head[b-l29ijajg71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.rx-section-label[b-l29ijajg71] {
    font-weight: 800;
    color: #0f172a;
    font-size: 14px;
    letter-spacing: .01em;
}

.rx-section-label-full[b-l29ijajg71] {
    font-weight: 600;
    color: black;
    font-size: 14px;
    margin-left: 4px;
}

.rx-section-meds[b-l29ijajg71] {
    border-bottom: 1px dashed #e2e8f0;
}

.rx-med-table-editable .col-num[b-l29ijajg71] {
    width: 34px;
    text-align: center;
    color: #94a3b8;
    font-weight: 700;
}

.rx-canvas-signature[b-l29ijajg71] {
    position: static;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    font-size: 12.5px;
    color: #1e293b;
}

@media (max-width: 700px) {
    .rx-canvas[b-l29ijajg71] {
        padding: 1.1rem 1.1rem 1.25rem;
    }

    .rx-canvas-header[b-l29ijajg71] {
        flex-direction: column;
        gap: 10px;
        padding-left: 0;
    }

    .rx-canvas-corner[b-l29ijajg71] {
        display: none;
    }

    .rx-canvas-doctors[b-l29ijajg71] {
        text-align: left;
    }

    .rx-section-head[b-l29ijajg71] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}


/* =========================================================
   SUMMARY SCREEN — ported from the consultation drawer's
   summary-layout (left: actions, right: document-style rx
   preview). Same classes/behaviour as the drawer component,
   so this is a drop-in match once the pages sit side by side.
   ========================================================= */
.section-header-block[b-l29ijajg71] {
    margin-bottom: 1.25rem;
}

.section-title[b-l29ijajg71] {
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
}

.opd-subtitle[b-l29ijajg71] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.summary-layout[b-l29ijajg71] {
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .summary-layout[b-l29ijajg71] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SUMMARY ACTIONS — both buttons in one row, right-aligned
   ========================================================= */

.summary-actions[b-l29ijajg71] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* push both buttons to the right */
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Base button — sizing + icon/label alignment only.
   Colors come from Bootstrap's .btn-primary. */
.summary-action-btn[b-l29ijajg71] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex: 0 1 auto;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .summary-action-btn .mdi[b-l29ijajg71] {
        font-size: 17px;
        line-height: 1;
        flex-shrink: 0;
    }

    .summary-action-btn:hover[b-l29ijajg71] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, .28);
    }

    .summary-action-btn:active[b-l29ijajg71] {
        transform: translateY(0);
    }

.summary-action-label[b-l29ijajg71] {
    white-space: nowrap;
}

/* Responsive — stack full width on mobile */
@media (max-width: 640px) {
    .summary-actions[b-l29ijajg71] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-action-btn[b-l29ijajg71] {
        width: 100%;
    }
}

.summary-action-chevron[b-l29ijajg71] {
    color: #94a3b8;
    font-size: 18px;
}

.summary-whatsapp-card[b-l29ijajg71] {
    padding: 16px;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.summary-whatsapp-row[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.summary-whatsapp-icon[b-l29ijajg71] {
    display: flex;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 17px;
}

.summary-whatsapp-label[b-l29ijajg71] {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

.summary-whatsapp-number[b-l29ijajg71] {
    margin: 1px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.summary-whatsapp-btn[b-l29ijajg71] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(22, 163, 74, .3);
    transition: box-shadow .15s ease, transform .1s ease;
}

    .summary-whatsapp-btn:hover[b-l29ijajg71] {
        box-shadow: 0 4px 14px rgba(22, 163, 74, .4);
        transform: translateY(-1px);
    }

.summary-success-banner[b-l29ijajg71] {
    padding: 18px;
    border-radius: 0.85rem;
    background: linear-gradient(160deg, #0f172a, #1e1b4b);
    color: #fff;
}

.summary-success-icon[b-l29ijajg71] {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 15px;
    margin-bottom: 10px;
}

.summary-success-title[b-l29ijajg71] {
    margin: 0 0 5px;
    font-size: 14.5px;
    font-weight: 800;
}

.summary-success-text[b-l29ijajg71] {
    margin: 0 0 15px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #cbd5e1;
}

.summary-success-btn[b-l29ijajg71] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #1e1b4b;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

    .summary-success-btn:hover[b-l29ijajg71] {
        background: #e0e7ff;
    }

.summary-preview[b-l29ijajg71] {
    min-width: 0;
}

.summary-preview-label[b-l29ijajg71] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.rx-doc-card[b-l29ijajg71] {
    padding: 1.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #fff;
}

.rx-doc-header[b-l29ijajg71] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.rx-doc-doctor-name[b-l29ijajg71] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #4338ca;
}

.rx-doc-line[b-l29ijajg71] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #64748b;
}

.rx-doc-logo[b-l29ijajg71] {
    display: flex;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(67, 56, 202, .3);
    overflow: hidden;
}

    .rx-doc-logo img[b-l29ijajg71] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 13px;
    }

.rx-doc-clinic[b-l29ijajg71] {
    text-align: right;
}

.rx-doc-clinic-name[b-l29ijajg71] {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.rx-doc-divider[b-l29ijajg71] {
    height: 1px;
    margin: 16px 0;
    background: #e2e8f0;
}

.rx-patient-row[b-l29ijajg71] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .rx-patient-row[b-l29ijajg71] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rx-label[b-l29ijajg71] {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
}

.rx-value[b-l29ijajg71] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
}

.rx-section-title[b-l29ijajg71] {
    margin: 20px 0 9px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4338ca;
}

.rx-med-table[b-l29ijajg71] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rx-med-table th[b-l29ijajg71],
    .rx-med-table td[b-l29ijajg71] {
        padding: 9px 11px;
        border: 1px solid #e2e8f0;
        text-align: left;
        color: #1e293b;
    }

    .rx-med-table th[b-l29ijajg71] {
        background: #f8fafc;
        font-weight: 700;
        color: #475569;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.rx-block[b-l29ijajg71] {
    margin: 7px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #334155;
    white-space: pre-wrap;
}

.rx-block-label[b-l29ijajg71] {
    font-weight: 700;
    color: #1e293b;
}

.rx-notes-block[b-l29ijajg71] {
    margin: 5px 0 0;
    padding: 14px 16px;
    border-radius: 0.65rem;
    background: #fffefb;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 23px, #eef1f6 23px, #eef1f6 24px);
    font-size: 13.5px;
    line-height: 24px;
    color: #334155;
    white-space: pre-wrap;
}

@media print {
    body *[b-l29ijajg71] {
        visibility: hidden;
    }

    #printable-prescription[b-l29ijajg71], #printable-prescription *[b-l29ijajg71] {
        visibility: visible;
    }

    #printable-prescription[b-l29ijajg71] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}


/* =========================================================
   VITALS / PREVIEW MODAL DIALOGS
   ========================================================= */
.modal-overlay[b-l29ijajg71] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal-dialog-box[b-l29ijajg71] {
    background: #fff;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    border-radius: 0.85rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Vitals dialog — sized up per request; more room for the fields
   that will be added here later. */
    .modal-dialog-box.modal-lg[b-l29ijajg71] {
        max-width: 780px;
        min-height: 480px;
    }

    /* Preview dialog — the biggest of the three, since it hosts the
   full rx-doc-card review template. */
    .modal-dialog-box.modal-xl[b-l29ijajg71] {
        max-width: 960px;
        max-height: 92vh;
    }

.modal-dialog-header[b-l29ijajg71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

    .modal-dialog-header .card-title[b-l29ijajg71] {
        margin: 0;
    }

.modal-close-btn[b-l29ijajg71] {
    background: #f1f5f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

    .modal-close-btn:hover[b-l29ijajg71] {
        background: #e2e8f0;
        color: #1e293b;
    }

.modal-dialog-body[b-l29ijajg71] {
    padding: 16px 18px;
    overflow-y: auto;
}

.modal-dialog-footer[b-l29ijajg71] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.field-grid.cols-4[b-l29ijajg71] {
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .field-grid.cols-4[b-l29ijajg71] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .field-grid.cols-4[b-l29ijajg71] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.form-input.readonly[b-l29ijajg71] {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}


/* =========================================================
   STATE CARDS — no-visit / loading / error
   (page now has real states the prototype didn't need)
   ========================================================= */
.state-card[b-l29ijajg71] {
    max-width: 1040px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
    padding: 2rem;
    text-align: center;
}

.state-card-danger[b-l29ijajg71] {
    border-color: #fecaca;
    background: #fef2f2;
}

.state-title[b-l29ijajg71] {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

    .state-title.danger[b-l29ijajg71] {
        color: #b91c1c;
    }

.state-text[b-l29ijajg71] {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #64748b;
}

.spinner[b-l29ijajg71] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-l29ijajg71 .7s linear infinite;
    vertical-align: -3px;
    margin-right: 6px;
}

@keyframes spin-b-l29ijajg71 {
    to {
        transform: rotate(360deg);
    }
}

.vitals-drawer-overlay[b-l29ijajg71] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 100;
    display: flex;
    justify-content: flex-end;
}

.vitals-drawer[b-l29ijajg71] {
    background: #fff;
    width: 100%;
    max-width: 460px;
    height: 100vh;
    box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-l29ijajg71 .22s ease-out;
}

@keyframes slideInRight-b-l29ijajg71 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.vitals-drawer-header[b-l29ijajg71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vitals-drawer-body[b-l29ijajg71] {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}

.vitals-drawer-footer[b-l29ijajg71] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .vitals-drawer[b-l29ijajg71] {
        max-width: 100%;
    }
}

.rx-tpl-toolbar-actions[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   PDF-STYLE CONSULTATION PREVIEW TEMPLATE (rx-tpl-*)
   Full-width on screen, single contained page on print.
   ========================================================= */

.rx-tpl-workspace[b-l29ijajg71] {
    background: #eef1f6;
}

.rx-tpl-toolbar[b-l29ijajg71] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.rx-tpl-toolbar-title[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
}

    .rx-tpl-toolbar-title i[b-l29ijajg71] {
        font-size: 20px;
        color: #4338ca;
    }

.rx-tpl-readonly-badge[b-l29ijajg71] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 4px;
}

    .rx-tpl-readonly-badge i[b-l29ijajg71] {
        font-size: 13px;
    }

.rx-tpl-print-btn[b-l29ijajg71] {
    box-shadow: 0 3px 10px rgba(22, 163, 74, .25);
}

/* ---- shell: full width on screen ---- */
.rx-tpl-shell[b-l29ijajg71] {
    width: 100%;
    padding: 0px 20px 48px;
}

.rx-tpl-page[b-l29ijajg71] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
    padding: 20px 44px 28px;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.5;
}

/* ---- header ---- */
.rx-tpl-header[b-l29ijajg71] {
    display: grid;
    grid-template-columns: 1fr 68px 1fr;
    align-items: flex-start;
    gap: 16px;
}

.rx-tpl-doctor-name[b-l29ijajg71] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #7c3aed;
}

.rx-tpl-hospital-name[b-l29ijajg71] {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
    text-align: right;
}

.rx-tpl-line[b-l29ijajg71] {
    margin: 1px 0;
    font-size: 12px;
    color: #475569;
}

    .rx-tpl-line i[b-l29ijajg71] {
        font-size: 12px;
        color: #94a3b8;
        margin-right: 2px;
    }

.rx-tpl-reg-line[b-l29ijajg71] {
    color: #64748b;
}

.rx-tpl-address[b-l29ijajg71] {
    text-align: right;
    max-width: 300px;
    margin-left: auto;
}

.rx-tpl-logo[b-l29ijajg71] {
    height: 58px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    overflow: hidden;
    justify-self: center;
    box-shadow: 0 4px 14px rgba(67, 56, 202, .28);
    flex-shrink: 0;
}

    .rx-tpl-logo img[b-l29ijajg71] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rx-tpl-hospital-block[b-l29ijajg71] {
    text-align: right;
}

.rx-tpl-rule[b-l29ijajg71] {
    height: 2px;
    background: #0f172a;
    margin: 14px 0 16px;
}

/* ---- patient info strip: icon chips instead of a plain grid ---- */
.rx-tpl-info-strip[b-l29ijajg71] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
}

.rx-tpl-info-chip[b-l29ijajg71] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 190px;
    min-width: 170px;
    padding: 4px 10px 4px 0;
}

    .rx-tpl-info-chip i[b-l29ijajg71] {
        font-size: 17px;
        color: #4338ca;
        margin-top: 1px;
        flex-shrink: 0;
    }

.rx-tpl-info-label[b-l29ijajg71] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
}

.rx-tpl-info-value[b-l29ijajg71] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
}

/* ---- generic sections with a left accent bar ---- */
.rx-tpl-section[b-l29ijajg71] {
    margin-bottom: 14px;
    padding-left: 13px;
    border-left: 3px solid #e2e8f0;
}

.rx-tpl-section-nobreak[b-l29ijajg71] {
    break-inside: avoid;
    page-break-inside: avoid;
}

.rx-tpl-inline-block[b-l29ijajg71] {
    margin: 0 0 5px;
    font-size: 13px;
}

.rx-tpl-block-title[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #4338ca;
}

    .rx-tpl-block-title i[b-l29ijajg71] {
        font-size: 15px;
    }

/* ---- two-column layout for advice + investigation ---- */
.rx-tpl-two-col[b-l29ijajg71] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* ---- medicine table ---- */
.rx-tpl-med-table[b-l29ijajg71] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .rx-tpl-med-table th[b-l29ijajg71],
    .rx-tpl-med-table td[b-l29ijajg71] {
        border: 1px solid #e2e8f0;
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
    }

    .rx-tpl-med-table th[b-l29ijajg71] {
        background: #f8fafc;
        font-weight: 700;
        color: #334155;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .rx-tpl-med-table tbody tr[b-l29ijajg71] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

        .rx-tpl-med-table tbody tr:nth-child(even) td[b-l29ijajg71] {
            background: #fafbfd;
        }

    .rx-tpl-med-table .col-sno[b-l29ijajg71] {
        width: 34px;
        text-align: center;
        color: #94a3b8;
        font-weight: 700;
    }

.rx-tpl-med-name[b-l29ijajg71] {
    font-weight: 700;
    color: #1e293b;
}

/* ---- numbered lists (advices / investigation) ---- */
.rx-tpl-numbered-list[b-l29ijajg71] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
}

.rx-tpl-notes[b-l29ijajg71] {
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 0.5rem;
    font-size: 13px;
    white-space: pre-wrap;
    color: #334155;
}

/* ---- footer: qr + signature ---- */
.rx-tpl-footer-row[b-l29ijajg71] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed #cbd5e1;
    break-inside: avoid;
    page-break-inside: avoid;
}

.rx-tpl-qr-block[b-l29ijajg71] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rx-tpl-qr-img[b-l29ijajg71] {
    width: 60px;
    height: 60px;
}

.rx-tpl-qr-caption[b-l29ijajg71] {
    margin: 0;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.4;
}

.rx-tpl-signature-block[b-l29ijajg71] {
    text-align: right;
    font-size: 12px;
}

.rx-tpl-signature-line[b-l29ijajg71] {
    margin: 0 0 2px;
    color: #cbd5e1;
    font-size: 13px;
}

.rx-tpl-signature-name[b-l29ijajg71] {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}

/* ---- bottom contact bar ---- */
.rx-tpl-bottom-bar[b-l29ijajg71] {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 10.5px;
    color: #94a3b8;
}

/* =========================================================
   PRINT — single contained page, no leftover blank space
   ========================================================= */
@page {
    size: A4;
    margin: 10mm 12mm;
}

@media print {
    /* Neutralise the full-viewport wrapper heights so the
       browser doesn't reserve a blank extra page around the
       absolutely-positioned #printable-prescription element. */
    html[b-l29ijajg71], body[b-l29ijajg71] {
        height: auto !important;
        margin: 0 !important;
        background: #fff !important;
    }

    .consult-proto-workspace[b-l29ijajg71],
    .rx-tpl-workspace[b-l29ijajg71] {
        min-height: 0 !important;
        height: auto !important;
        background: #fff !important;
    }

    .rx-tpl-toolbar[b-l29ijajg71] {
        display: none !important;
    }

    .rx-tpl-shell[b-l29ijajg71] {
        padding: 0 !important;
        width: auto !important;
    }

    /* This selector (class + id) outranks the site-wide
       #printable-prescription rule so it wins without touching
       that shared global rule used elsewhere. */
    .rx-tpl-page#printable-prescription[b-l29ijajg71] {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 11.5px !important;
    }

    .rx-tpl-info-strip[b-l29ijajg71],
    .rx-tpl-section[b-l29ijajg71],
    .rx-tpl-med-table[b-l29ijajg71],
    .rx-tpl-two-col[b-l29ijajg71],
    .rx-tpl-footer-row[b-l29ijajg71] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 900px) {
    .rx-tpl-shell[b-l29ijajg71] {
        padding: 20px 16px 36px;
    }
    .rx-tpl-corner[b-l29ijajg71] {
        display: none;
    }

    .rx-tpl-header[b-l29ijajg71] {
        padding-left: 0;
    }

    .rx-tpl-page[b-l29ijajg71] {
        padding: 24px 20px 22px;
    }

    .rx-tpl-header[b-l29ijajg71] {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .rx-tpl-hospital-block[b-l29ijajg71],
    .rx-tpl-hospital-name[b-l29ijajg71],
    .rx-tpl-address[b-l29ijajg71] {
        text-align: left;
        margin-left: 0;
    }

    .rx-tpl-logo[b-l29ijajg71] {
        justify-self: start;
    }

    .rx-tpl-two-col[b-l29ijajg71] {
        grid-template-columns: 1fr;
    }

    .rx-tpl-footer-row[b-l29ijajg71] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .rx-tpl-signature-block[b-l29ijajg71] {
        text-align: left;
    }
}


/* ---- corner accent + rounded card, matching the editable canvas header ---- */
.rx-tpl-page[b-l29ijajg71] {
    position: relative;
    overflow: hidden;
    border-radius: 0.7rem; /* was square-cornered before */
}

.rx-tpl-corner[b-l29ijajg71] {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #0f766e, #14b8a6 60%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 0;
}

.rx-tpl-header[b-l29ijajg71] {
    position: relative;
    z-index: 1;
    padding-left: 74px; /* clears the corner triangle, same idea as rx-canvas-header's 64px */
}


/* /Pages/OPD/PatientSearchForConsultation.razor.rz.scp.css */
/* =========================================================
   PATIENT SEARCH - MAIN LAYOUT
========================================================= */

.patient-search[b-0m6ilsqvem] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}


/* =========================================================
   SEARCH SECTION
========================================================= */

.patient-search-box-wrapper[b-0m6ilsqvem] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.patient-search-box[b-0m6ilsqvem] {
    display: flex;
    width: 100%;
    height: 46px; /* Slightly taller for better appearance */
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .patient-search-box:focus-within[b-0m6ilsqvem] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.08);
    }


/* SEARCH ICON */

.search-icon[b-0m6ilsqvem] {
    display: inline-flex;
    width: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 20px;
}


/* SEARCH INPUT */

.patient-search-input[b-0m6ilsqvem] {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #1e293b;
    font-size: 14px;
    font-weight: 500;
}

    .patient-search-input[b-0m6ilsqvem]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }


/* CLEAR BUTTON */

.search-action-btn[b-0m6ilsqvem] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin-right: 6px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s ease;
}

    .search-action-btn:hover[b-0m6ilsqvem] {
        background: #f1f5f9;
        color: #1e293b;
    }


/* =========================================================
   FILTER
========================================================= */

.patient-search-filter-wrapper[b-0m6ilsqvem] {
    flex: 0 0 180px;
}

.patient-search-filter[b-0m6ilsqvem] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .patient-search-filter:focus[b-0m6ilsqvem] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.08);
    }


/* =========================================================
   SEARCH SUGGESTIONS
========================================================= */

.patient-search-suggestions[b-0m6ilsqvem] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 2000;
    overflow: hidden;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    animation: dropdown-pop-b-0m6ilsqvem 0.15s ease-out;
}

@keyframes dropdown-pop-b-0m6ilsqvem {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

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


/* SUGGESTIONS HEADING */

.patient-suggestions-heading[b-0m6ilsqvem] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f1f4f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
}


/* =========================================================
   ACTION MODE SUGGESTIONS
========================================================= */

.patient-search-suggestions--actions[b-0m6ilsqvem] {
    padding: 4px;
}

.patient-suggestion-row[b-0m6ilsqvem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    transition: background 0.15s ease;
    border-bottom: 1px solid #f1f4f9;
}

    .patient-suggestion-row:last-child[b-0m6ilsqvem] {
        border-bottom: none;
    }

    .patient-suggestion-row:hover[b-0m6ilsqvem] {
        background: #f8fafc;
    }

    .patient-suggestion-row .patient-suggestion-content[b-0m6ilsqvem] {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 14px;
        flex: 1;
    }

.patient-suggestion-text[b-0m6ilsqvem] {
    min-width: 0;
    flex: 1;
}


/* AVATAR */

.patient-avatar-icon[b-0m6ilsqvem] {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 22px;
}


/* PATIENT NAME */

.patient-suggestion-row .patient-name[b-0m6ilsqvem] {
    color: #1e293b;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* GENDER + AGE */

.patient-meta-inline[b-0m6ilsqvem] {
    margin-left: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}


/* PATIENT DETAILS */

.patient-suggestion-row .patient-details[b-0m6ilsqvem] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
    flex-wrap: wrap;
}

    .patient-suggestion-row .patient-details .mdi[b-0m6ilsqvem] {
        margin-right: 2px;
        font-size: 14px;
        vertical-align: -1px;
        color: #94a3b8;
    }

.patient-detail-sep[b-0m6ilsqvem] {
    color: #cbd5e1;
}


/* =========================================================
   PATIENT ACTION BUTTONS - BOOTSTRAP STYLED
========================================================= */

.patient-suggestion-actions[b-0m6ilsqvem] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* View Profile - Bootstrap btn-outline-primary style */
.btn-view-profile[b-0m6ilsqvem] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid #0d6efd;
    background: transparent;
    color: #0d6efd;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-view-profile .mdi[b-0m6ilsqvem] {
        font-size: 16px;
        line-height: 1;
    }

    .btn-view-profile:hover[b-0m6ilsqvem] {
        background: #0d6efd;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    }

    .btn-view-profile:active[b-0m6ilsqvem] {
        transform: translateY(0);
        box-shadow: none;
    }

/* Consult - Bootstrap btn-success style */
.btn-start-consult[b-0m6ilsqvem] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 22px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid #198754;
    background: #198754;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.2);
}

    .btn-start-consult .mdi[b-0m6ilsqvem] {
        font-size: 16px;
        line-height: 1;
    }

    .btn-start-consult:hover[b-0m6ilsqvem] {
        background: #157347;
        border-color: #157347;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(25, 135, 84, 0.3);
    }

    .btn-start-consult:active[b-0m6ilsqvem] {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn-view-profile:focus-visible[b-0m6ilsqvem],
    .btn-start-consult:focus-visible[b-0m6ilsqvem] {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }


/* =========================================================
   DEFAULT SUGGESTION ROW (no action buttons)
========================================================= */

.patient-suggestion-item[b-0m6ilsqvem] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f4f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .patient-suggestion-item:last-child[b-0m6ilsqvem] {
        border-bottom: none;
    }

    .patient-suggestion-item:hover[b-0m6ilsqvem] {
        background: #f8fafc;
    }

    .patient-suggestion-item .patient-name[b-0m6ilsqvem] {
        color: #1e293b;
        font-size: 14px;
        font-weight: 650;
    }

    .patient-suggestion-item .patient-details[b-0m6ilsqvem] {
        display: flex;
        gap: 8px;
        margin-top: 3px;
        color: #64748b;
        font-size: 13px;
        flex-wrap: wrap;
    }


/* =========================================================
   EMPTY RESULT
========================================================= */

.patient-search-empty[b-0m6ilsqvem] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

    .patient-search-empty .mdi[b-0m6ilsqvem] {
        font-size: 36px;
        color: #cbd5e1;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {
    .patient-search-filter-wrapper[b-0m6ilsqvem] {
        flex: 0 0 160px;
    }
}

@media (max-width: 768px) {
    .patient-search[b-0m6ilsqvem] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .patient-search-box-wrapper[b-0m6ilsqvem] {
        flex: 1 0 100%;
    }

    .patient-search-filter-wrapper[b-0m6ilsqvem] {
        flex: 1 0 100%;
    }

    .patient-suggestion-row[b-0m6ilsqvem] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .patient-suggestion-actions[b-0m6ilsqvem] {
        justify-content: flex-end;
        width: 100%;
    }

    .btn-view-profile[b-0m6ilsqvem],
    .btn-start-consult[b-0m6ilsqvem] {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .patient-search-box[b-0m6ilsqvem] {
        height: 42px;
    }

    .patient-search-filter[b-0m6ilsqvem] {
        height: 42px;
        font-size: 13px;
    }

    .patient-suggestion-row[b-0m6ilsqvem] {
        padding: 12px;
    }

        .patient-suggestion-row .patient-suggestion-content[b-0m6ilsqvem] {
            gap: 10px;
        }

    .patient-avatar-icon[b-0m6ilsqvem] {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .patient-suggestion-row .patient-name[b-0m6ilsqvem] {
        font-size: 13.5px;
    }

    .patient-suggestion-row .patient-details[b-0m6ilsqvem] {
        font-size: 12px;
    }

    .btn-view-profile[b-0m6ilsqvem],
    .btn-start-consult[b-0m6ilsqvem] {
        height: 34px;
        font-size: 12px;
        padding: 0 12px;
        min-width: 80px;
    }

        .btn-view-profile .mdi[b-0m6ilsqvem],
        .btn-start-consult .mdi[b-0m6ilsqvem] {
            font-size: 14px;
        }

    .patient-suggestion-actions[b-0m6ilsqvem] {
        gap: 6px;
    }
}
/* /Pages/OPD/StartWalkinConsultation.razor.rz.scp.css */
.walkin-page[b-2xj4dy6g1f] {
    background: #f4f7fb;
    min-height: 100vh;
}

.walkin-banner[b-2xj4dy6g1f] {
    display: flex;
    align-items: center;
    gap: 14px;
    /*    background: linear-gradient(135deg, #fde08a, #f6b93b);*/
    background: mediumspringgreen;
    padding: 20px 24px 46px;
    border-radius: 16px 16px 0 0;
}

.walkin-back-btn[b-2xj4dy6g1f] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    background: rgba(255,255,255,.6);
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    flex-shrink: 0;
}

    .walkin-back-btn:hover[b-2xj4dy6g1f] {
        background: rgba(255,255,255,.85);
    }

.walkin-banner h1[b-2xj4dy6g1f] {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: #1e293b;
}

.walkin-card[b-2xj4dy6g1f] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    margin: -30px 20px 0;
    box-shadow: 0 10px 26px rgba(15,23,42,.06);
    position: relative;
}

.walkin-label[b-2xj4dy6g1f] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.btn-add-new-patient[b-2xj4dy6g1f] {
    margin-top: 16px;
    border: 1px solid #2563eb;
    background: white;
    color: #2563eb;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .btn-add-new-patient:hover[b-2xj4dy6g1f] {
        background: #eff6ff;
    }

@media (max-width: 640px) {
    .walkin-card[b-2xj4dy6g1f] {
        margin: -24px 12px 0;
        padding: 18px;
    }

    .walkin-banner[b-2xj4dy6g1f] {
        padding: 18px 16px 40px;
    }

    .btn-add-new-patient[b-2xj4dy6g1f] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Patient/AllPatients.razor.rz.scp.css */
/* =========================================================
   PATIENT DIRECTORY  (/patients)
   Now matches the Appointment Manage page's layout pattern:
   no fixed page height, no internal scrollbox — the page
   grows with its content and the browser scrolls it. This is
   what makes the row-action dropdown behave correctly (it no
   longer has to be positioned inside a clipped/scrolling
   ancestor, so it never requires scrolling within the card
   to see it).
   ========================================================= */

.patients-page[b-w1l072h7rd] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --info-600: #0891B2;
    --info-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    display: flex;
    flex-direction: column;
    /* min-height, not height: the page grows with its content
       instead of clipping it into an internal scrollbox. */
    min-height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    padding: 0 0 8px;
    background: var(--page-bg);
    color: var(--ink);
}

    .patients-page h4[b-w1l072h7rd],
    .patients-page h5[b-w1l072h7rd] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

/* =========================================================
   CARD SHELL
   ========================================================= */

.patient-directory-card[b-w1l072h7rd] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    /* No overflow:hidden here — it would clip the row-action
       dropdown. Rounded corners are applied per-cell instead. */
    overflow: visible;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.modern-table-header[b-w1l072h7rd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    background: var(--surface);
}

.table-header-title[b-w1l072h7rd] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

    .table-header-title h4[b-w1l072h7rd] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
    }

.table-count[b-w1l072h7rd] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-muted);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* =========================================================
   SEARCH - Always Visible & Centered, icon on the right
   ========================================================= */

.table-header-search[b-w1l072h7rd] {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

.search-wrapper[b-w1l072h7rd] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon[b-w1l072h7rd] {
    position: absolute;
    right: 12px;
    left: auto;
    font-size: 18px;
    color: var(--ink-soft);
    pointer-events: none;
    z-index: 1;
}

.search-input[b-w1l072h7rd] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: 13px;
    color: var(--ink);
    transition: all 0.2s ease;
    outline: none;
}

    .search-input.has-clear[b-w1l072h7rd] {
        padding-right: 64px;
    }

    .search-input:focus[b-w1l072h7rd] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.1);
    }

    .search-input[b-w1l072h7rd]::placeholder {
        color: #94a3b8;
        font-size: 12.5px;
    }

.search-clear[b-w1l072h7rd] {
    position: absolute;
    right: 38px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    z-index: 1;
}

    .search-clear:hover[b-w1l072h7rd] {
        color: var(--rose-600);
        background: var(--rose-100);
    }

    .search-clear .mdi[b-w1l072h7rd] {
        font-size: 18px;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.table-header-actions[b-w1l072h7rd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

    .table-header-actions .btn[b-w1l072h7rd] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        border-width: 1px;
        transition: transform .15s ease, filter .15s ease;
    }

        .table-header-actions .btn .mdi[b-w1l072h7rd] {
            font-size: 15px;
            line-height: 1;
        }

        .table-header-actions .btn:hover[b-w1l072h7rd] {
            transform: translateY(-1px);
        }

    .table-header-actions .btn-register-patient[b-w1l072h7rd] {
        padding: 0 16px;
        font-weight: 700;
    }

/* =========================================================
   RESULTS AREA — no internal scroll; the page scrolls instead
   ========================================================= */

.patient-directory-body[b-w1l072h7rd] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.patient-table-scroll[b-w1l072h7rd] {
    /* was: overflow-y:auto + flex:1 1 auto (fixed-height scrollbox).
       Now flows naturally with the page — this is the key change
       that fixes the dropdown needing an inner scroll to reach. */
    overflow: visible;
}

.loader-row[b-w1l072h7rd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.spinner[b-w1l072h7rd] {
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: patients-spin-b-w1l072h7rd .7s linear infinite;
}

@keyframes patients-spin-b-w1l072h7rd {
    to {
        transform: rotate(360deg);
    }
}

.p-5.text-center[b-w1l072h7rd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

    .p-5.text-center .state-icon[b-w1l072h7rd] {
        font-size: 32px;
        color: var(--ink-soft);
        display: block;
        margin-bottom: 8px;
    }

        .p-5.text-center .state-icon.danger[b-w1l072h7rd] {
            color: var(--rose-600);
        }

    .p-5.text-center h5[b-w1l072h7rd] {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
    }

    .p-5.text-center p[b-w1l072h7rd] {
        color: var(--ink-soft);
        font-size: 13px;
        margin-bottom: 12px;
    }

    .p-5.text-center .text-muted[b-w1l072h7rd] {
        color: var(--ink-soft);
        font-size: 13px;
    }

/* =========================================================
   TABLE STRUCTURE  (::deep into HMSTable)
   Header is no longer sticky — with no internal scroll, a
   sticky header has nothing to stick against and can look odd.
   ========================================================= */

.patient-table-scroll[b-w1l072h7rd]  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.patient-table-scroll[b-w1l072h7rd]  thead th {
    text-align: left !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700 !important;
    color: var(--ink-soft) !important;
    background: var(--surface-muted) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
    vertical-align: middle !important;
}

    .patient-table-scroll[b-w1l072h7rd]  thead th:last-child {
        text-align: right !important;
    }

.patient-table-scroll[b-w1l072h7rd]  tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #F0F1F7 !important;
    vertical-align: middle !important;
    color: var(--ink);
}

.patient-table-scroll[b-w1l072h7rd]  tbody tr:last-child td {
    border-bottom: none !important;
}

    /* Round the last row's outer cells so the table still fits the
   card's rounded bottom without needing overflow:hidden. */
    .patient-table-scroll[b-w1l072h7rd]  tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--radius-lg);
    }

    .patient-table-scroll[b-w1l072h7rd]  tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--radius-lg);
    }

.patient-table-scroll[b-w1l072h7rd]  tbody tr:hover {
    background: var(--surface-muted);
}

/* =========================================================
   TABLE CELLS
   ========================================================= */

.patient-uhid[b-w1l072h7rd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

    .patient-uhid .mdi[b-w1l072h7rd] {
        font-size: 14px;
    }

.patient-mobile[b-w1l072h7rd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
}

    .patient-mobile .mdi[b-w1l072h7rd] {
        font-size: 15px;
        color: var(--ink-soft);
    }

.date-cell[b-w1l072h7rd],
.last-visit-cell[b-w1l072h7rd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

    .date-cell .mdi[b-w1l072h7rd],
    .last-visit-cell .mdi[b-w1l072h7rd] {
        font-size: 15px;
        color: var(--ink-soft);
    }

.text-muted[b-w1l072h7rd] {
    color: var(--ink-soft);
}

/* =========================================================
   ROW ACTIONS
   ========================================================= */

.tbl-act[b-w1l072h7rd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.category-cell[b-w1l072h7rd] {
    display: flex;
    align-items: center;
}

.tbl-act .btn[b-w1l072h7rd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    min-width: 92px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    border-width: 1px;
    transition: transform .15s ease, filter .15s ease;
}

    .tbl-act .btn .mdi[b-w1l072h7rd] {
        font-size: 16px;
        line-height: 1;
    }

    .tbl-act .btn:hover:not(:disabled)[b-w1l072h7rd] {
        transform: translateY(-1px);
    }

.tbl-act .btn-info[b-w1l072h7rd] {
    background: var(--info-600);
    border-color: var(--info-600);
    color: #fff;
}

    .tbl-act .btn-info:hover[b-w1l072h7rd] {
        filter: brightness(.92);
        color: #fff;
    }

.tbl-act .btn-secondary[disabled][b-w1l072h7rd] {
    opacity: .65;
    cursor: not-allowed;
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--ink-soft);
}

    .tbl-act .btn-secondary[disabled]:hover[b-w1l072h7rd] {
        transform: none;
    }

.tbl-act .btn-secondary[disabled][b-w1l072h7rd] {
    position: relative;
}

    .tbl-act .btn-secondary[disabled]:hover[b-w1l072h7rd]::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--ink);
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 20;
        box-shadow: 0 4px 12px rgba(16, 24, 39, .2);
    }

.action-more-btn.btn[b-w1l072h7rd] {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    min-width: 0;
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink-soft);
}

    .action-more-btn.btn:hover[b-w1l072h7rd] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
    }

.action-more-btn[b-w1l072h7rd]::after {
    display: none;
}

.action-more-btn .mdi[b-w1l072h7rd] {
    font-size: 18px;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

.tbl-act .badge[b-w1l072h7rd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

    .tbl-act .badge .mdi[b-w1l072h7rd] {
        font-size: 14px;
        line-height: 1;
    }

.tbl-act .badge-danger[b-w1l072h7rd] {
    background: var(--rose-100, #FFE4E9);
    color: var(--rose-600, #E11D48);
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.action-dropdown[b-w1l072h7rd] {
    position: relative;
    z-index: 5;
}

.patient-action-menu[b-w1l072h7rd] {
    min-width: 170px;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 16px 36px rgba(16, 24, 39, .14);
    z-index: 1060 !important;
}

    .patient-action-menu .patient-action-item[b-w1l072h7rd] {
        display: flex;
        width: 100%;
        min-height: 38px;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

        .patient-action-menu .patient-action-item .mdi[b-w1l072h7rd] {
            width: 18px;
            display: inline-flex;
            justify-content: center;
            font-size: 17px;
        }

    .patient-action-menu .action-view[b-w1l072h7rd] {
        color: var(--primary);
    }

        .patient-action-menu .action-view:hover[b-w1l072h7rd] {
            background: var(--primary-soft);
        }

    .patient-action-menu .action-edit[b-w1l072h7rd] {
        color: var(--amber-600);
    }

        .patient-action-menu .action-edit:hover[b-w1l072h7rd] {
            background: var(--amber-100);
        }

    .patient-action-menu .action-delete[b-w1l072h7rd] {
        color: var(--rose-600);
    }

        .patient-action-menu .action-delete:hover[b-w1l072h7rd] {
            background: var(--rose-100);
        }

/* =========================================================
   BADGES
   ========================================================= */

.badge[b-w1l072h7rd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
}

    .badge .mdi[b-w1l072h7rd] {
        font-size: 13px;
    }

.badge-success[b-w1l072h7rd] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.badge-warning[b-w1l072h7rd] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.badge-info[b-w1l072h7rd] {
    background: var(--info-100);
    color: var(--info-600);
}

.badge-danger[b-w1l072h7rd] {
    background: var(--rose-100);
    color: var(--rose-600);
}

.badge-secondary[b-w1l072h7rd] {
    background: var(--surface-muted);
    color: var(--ink-soft);
}

/* =========================================================
   PAGINATION — no longer inside a scrollbox, just flows below
   ========================================================= */

.patient-directory-body :deep(.pagination-bar)[b-w1l072h7rd],
.patient-directory-body > .pagination[b-w1l072h7rd],
.patient-directory-body[b-w1l072h7rd]  .pagination-wrapper {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background: var(--surface);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
    .modern-table-header[b-w1l072h7rd] {
        align-items: stretch;
        gap: 10px;
    }

    .table-header-search[b-w1l072h7rd] {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .table-header-actions[b-w1l072h7rd] {
        order: 2;
        justify-content: flex-start;
    }

    .table-header-title[b-w1l072h7rd] {
        order: 1;
    }
}

@media (max-width: 640px) {
    .patients-page[b-w1l072h7rd] {
        min-height: 0;
        padding: 10px 12px 6px;
    }

    .table-header-actions .btn span[b-w1l072h7rd] {
        display: none;
    }

    .table-header-actions .btn[b-w1l072h7rd] {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }

    .table-header-actions .btn-register-patient[b-w1l072h7rd] {
        width: auto;
        padding: 0 14px;
    }

        .table-header-actions .btn-register-patient span[b-w1l072h7rd] {
            display: inline;
        }

    .badge[b-w1l072h7rd] {
        padding: 4px 10px;
        font-size: 10.5px;
    }

    .search-input[b-w1l072h7rd] {
        font-size: 14px;
        height: 42px;
        padding: 0 38px 0 16px;
    }

        .search-input.has-clear[b-w1l072h7rd] {
            padding-right: 64px;
        }

    .search-icon[b-w1l072h7rd] {
        font-size: 20px;
        right: 14px;
    }
}

/* =========================================================
   DROPDOWN placement fine-tune (Popper flips above/below)
   ========================================================= */

.patient-action-menu[data-popper-placement^="bottom"][b-w1l072h7rd] {
    margin-top: 6px !important;
}

.patient-action-menu[data-popper-placement^="top"][b-w1l072h7rd] {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
/* /Pages/Patient/PatientHistory.razor.rz.scp.css */
/* =========================================================
   PATIENT HISTORY DIRECTORY  (/patients/history)
   ========================================================= */

.patient-history-page[b-wutwff68q8] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --page-bg: #F2F3FA;
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --sky-600: #0284C7;
    --sky-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --violet-600: #7C3AED;
    --violet-100: #EDE9FE;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - var(--hms-topbar-height, 64px) - 16px);
    min-height: 560px;
    padding: 20px 24px 4px;
    background: var(--page-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

    .patient-history-page h3[b-wutwff68q8],
    .patient-history-page h4[b-wutwff68q8],
    .patient-history-page h5[b-wutwff68q8] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

/* =========================================================
   PAGE HEADER
   ========================================================= */

.ph-page-header[b-wutwff68q8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ph-page-header-text h4[b-wutwff68q8] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ph-page-header-text span[b-wutwff68q8] {
    font-size: 13px;
    color: var(--ink-soft);
}

.ph-page-header-actions[b-wutwff68q8] {
    display: flex;
    gap: 10px;
}

.ph-btn.btn[b-wutwff68q8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-width: 1px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

    .ph-btn.btn:hover[b-wutwff68q8] {
        transform: translateY(-1px);
    }

    .ph-btn.btn:disabled[b-wutwff68q8] {
        opacity: .65;
        transform: none;
        cursor: not-allowed;
    }

.ph-btn-primary[b-wutwff68q8] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(91, 79, 229, .25);
}

    .ph-btn-primary:hover[b-wutwff68q8] {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

.ph-btn-outline[b-wutwff68q8] {
    color: var(--ink-soft);
    border: 1px solid var(--border);
    background: var(--surface);
}

    .ph-btn-outline:hover[b-wutwff68q8] {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--surface);
    }

/* =========================================================
   STAT CARDS
   ========================================================= */

.ph-stats-grid[b-wutwff68q8] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ph-stat-card[b-wutwff68q8] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
}

.ph-stat-icon[b-wutwff68q8] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

    .ph-stat-icon.blue[b-wutwff68q8] {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .ph-stat-icon.violet[b-wutwff68q8] {
        background: var(--violet-100);
        color: var(--violet-600);
    }

    .ph-stat-icon.green[b-wutwff68q8] {
        background: var(--emerald-100);
        color: var(--emerald-600);
    }

    .ph-stat-icon.orange[b-wutwff68q8] {
        background: var(--amber-100);
        color: var(--amber-600);
    }

    .ph-stat-icon.red[b-wutwff68q8] {
        background: var(--rose-100);
        color: var(--rose-600);
    }

.ph-stat-text[b-wutwff68q8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .ph-stat-text h3[b-wutwff68q8] {
        margin: 0;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.1;
    }

    .ph-stat-text span[b-wutwff68q8] {
        font-size: 11.5px;
        color: var(--ink-soft);
        font-weight: 600;
        white-space: nowrap;
    }

/* =========================================================
   DIRECTORY CARD SHELL
   ========================================================= */

.ph-directory-card[b-wutwff68q8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.ph-toolbar[b-wutwff68q8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.ph-toolbar-title[b-wutwff68q8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

    .ph-toolbar-title h4[b-wutwff68q8] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }

.ph-count-chip[b-wutwff68q8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-muted);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ph-toolbar-search[b-wutwff68q8] {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 460px;
    display: flex;
    justify-content: center;
}

.ph-search-wrapper[b-wutwff68q8] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.ph-search-icon[b-wutwff68q8] {
    position: absolute;
    right: 12px;
    font-size: 18px;
    color: var(--ink-soft);
    pointer-events: none;
}

.ph-search-input[b-wutwff68q8] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-muted);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: all .2s ease;
}

    .ph-search-input.has-clear[b-wutwff68q8] {
        padding-right: 64px;
    }

    .ph-search-input:focus[b-wutwff68q8] {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 3px var(--primary-soft);
    }

    .ph-search-input[b-wutwff68q8]::placeholder {
        color: #94a3b8;
        font-size: 12.5px;
    }

.ph-search-clear[b-wutwff68q8] {
    position: absolute;
    right: 38px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

    .ph-search-clear:hover[b-wutwff68q8] {
        color: var(--rose-600);
        background: var(--rose-100);
    }

.ph-toolbar-filters[b-wutwff68q8] {
    flex-shrink: 0;
}

.ph-filter-select[b-wutwff68q8] {
    height: 38px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23667085' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

    .ph-filter-select:focus[b-wutwff68q8] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-soft);
    }

/* =========================================================
   BODY / STATES
   ========================================================= */

.ph-directory-body[b-wutwff68q8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ph-loader-row[b-wutwff68q8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.spinner[b-wutwff68q8] {
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ph-spin-b-wutwff68q8 .7s linear infinite;
}

@keyframes ph-spin-b-wutwff68q8 {
    to {
        transform: rotate(360deg);
    }
}

.ph-empty-state[b-wutwff68q8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    text-align: center;
    padding: 20px;
}

.ph-state-icon[b-wutwff68q8] {
    font-size: 34px;
    color: var(--ink-soft);
    display: block;
    margin-bottom: 10px;
}

    .ph-state-icon.danger[b-wutwff68q8] {
        color: var(--rose-600);
    }

.ph-empty-state h5[b-wutwff68q8] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.ph-empty-state p[b-wutwff68q8] {
    color: var(--ink-soft);
    font-size: 13px;
    margin: 0 0 14px;
}

/* =========================================================
   TABLE
   ========================================================= */

.ph-table-scroll[b-wutwff68q8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

    .ph-table-scroll[b-wutwff68q8]::-webkit-scrollbar {
        width: 6px;
    }

    .ph-table-scroll[b-wutwff68q8]::-webkit-scrollbar-thumb {
        background: #CBD2E1;
        border-radius: 10px;
    }

.ph-table[b-wutwff68q8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .ph-table thead th[b-wutwff68q8] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
        color: var(--ink-soft);
        background: var(--surface-muted);
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

        .ph-table thead th.ph-th-action[b-wutwff68q8] {
            text-align: right;
        }

    .ph-table tbody td[b-wutwff68q8] {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F1F7;
        vertical-align: middle;
        color: var(--ink);
    }

    .ph-table tbody tr:last-child td[b-wutwff68q8] {
        border-bottom: none;
    }

.ph-row[b-wutwff68q8] {
    cursor: pointer;
    transition: background .15s ease;
}

    .ph-row:hover[b-wutwff68q8] {
        background: var(--surface-muted);
    }

/* ---- Patient cell ---- */

.ph-patient-cell[b-wutwff68q8] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.ph-avatar[b-wutwff68q8] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.avatar-male[b-wutwff68q8] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.avatar-female[b-wutwff68q8] {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.avatar-neutral[b-wutwff68q8] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.ph-patient-cell-text[b-wutwff68q8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .ph-patient-cell-text strong[b-wutwff68q8] {
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ph-patient-sub[b-wutwff68q8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
    white-space: nowrap;
}

.hp-chip[b-wutwff68q8] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.ph-contact-line[b-wutwff68q8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 12.5px;
}

    .ph-contact-line i[b-wutwff68q8] {
        color: var(--primary);
        font-size: 14px;
    }

.ph-td-sub[b-wutwff68q8] {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.ph-visit-count[b-wutwff68q8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.ph-td-action[b-wutwff68q8] {
    text-align: right;
}

.ph-action-btn[b-wutwff68q8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    height: 40px;
    padding: 7px 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .ph-action-btn:hover[b-wutwff68q8] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

/* ---- Badges ---- */

.badge[b-wutwff68q8] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-info[b-wutwff68q8] {
    background: var(--sky-100) !important;
    color: var(--sky-600) !important;
}

.badge-success[b-wutwff68q8] {
    background: var(--emerald-100) !important;
    color: var(--emerald-600) !important;
}

.badge-warning[b-wutwff68q8] {
    background: var(--amber-100) !important;
    color: var(--amber-600) !important;
}

.badge-danger[b-wutwff68q8] {
    background: var(--rose-100) !important;
    color: var(--rose-600) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .ph-stats-grid[b-wutwff68q8] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .ph-stats-grid[b-wutwff68q8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ph-toolbar[b-wutwff68q8] {
        flex-direction: column;
        align-items: stretch;
    }

    .ph-toolbar-search[b-wutwff68q8] {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .patient-history-page[b-wutwff68q8] {
        padding: 14px 10px 10px;
        height: auto;
        min-height: 0;
    }

    .ph-stats-grid[b-wutwff68q8] {
        grid-template-columns: 1fr;
    }

    .ph-page-header-actions[b-wutwff68q8] {
        flex-wrap: wrap;
    }

    .ph-patient-cell[b-wutwff68q8] {
        min-width: 0;
    }
}
/* /Pages/Patient/PatientHistoryDetail.razor.rz.scp.css */
/* =========================================================
   PATIENT HISTORY — DEDICATED SINGLE PATIENT PAGE
   /patients/history/{uhid}
   ========================================================= */

.patient-history-detail-page[b-tma60gredg] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --sky-600: #0284C7;
    --sky-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --violet-600: #7C3AED;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    margin: 0 auto;
    padding: 0 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

    .patient-history-detail-page h4[b-tma60gredg],
    .patient-history-detail-page h5[b-tma60gredg] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

/* =========================================================
   HEADER
   ========================================================= */

.phd-header-bar[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phd-back-btn[b-tma60gredg] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .phd-back-btn:hover[b-tma60gredg] {
        border-color: var(--primary);
        color: var(--primary);
    }

.phd-header-text[b-tma60gredg] {
    flex: 1;
}

    .phd-header-text h4[b-tma60gredg] {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .phd-header-text span[b-tma60gredg] {
        font-size: 13px;
        color: var(--ink-soft);
    }

.phd-header-actions[b-tma60gredg] {
    display: flex;
    gap: 10px;
}

.phd-btn.btn[b-tma60gredg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.phd-btn.btn-sm[b-tma60gredg],
.phd-btn.phd-btn-sm[b-tma60gredg] {
    height: 34px;
    padding: 0 13px;
    font-size: 12.5px;
}

.phd-btn.btn:hover[b-tma60gredg] {
    transform: translateY(-1px);
}

.phd-btn-primary[b-tma60gredg] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(91, 79, 229, .25);
}

    .phd-btn-primary:hover[b-tma60gredg] {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

.phd-btn-outline[b-tma60gredg] {
    color: var(--ink-soft);
    border: 1px solid var(--border);
    background: var(--surface);
}

    .phd-btn-outline:hover[b-tma60gredg] {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--surface);
    }

/* =========================================================
   HERO CARD
   ========================================================= */

.phd-hero-card[b-tma60gredg] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 18px 22px;
}

.phd-hero-main[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.phd-hero-left[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.phd-avatar[b-tma60gredg] {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
}

.avatar-male[b-tma60gredg] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.avatar-female[b-tma60gredg] {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.avatar-neutral[b-tma60gredg] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.phd-hero-name-row[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phd-hero-name[b-tma60gredg] {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.phd-status[b-tma60gredg] {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--emerald-100);
    color: var(--emerald-600);
}

    .phd-status.inactive[b-tma60gredg] {
        background: var(--rose-100);
        color: var(--rose-600);
    }

.phd-hero-meta[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.hp-chip[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.phd-hero-contact[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

    .phd-hero-contact i[b-tma60gredg] {
        color: var(--primary);
        margin-right: 3px;
    }

.phd-hero-stats[b-tma60gredg] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.phd-stat-pill[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    border: 1px solid var(--border);
}

    .phd-stat-pill strong[b-tma60gredg] {
        font-size: 18px;
        font-weight: 800;
        color: var(--primary);
        font-family: 'Sora', sans-serif;
    }

    .phd-stat-pill span[b-tma60gredg] {
        font-size: 10.5px;
        color: var(--ink-soft);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .phd-stat-pill.blue strong[b-tma60gredg] {
        color: var(--sky-600);
    }

    .phd-stat-pill.orange strong[b-tma60gredg] {
        color: var(--amber-600);
    }

    .phd-stat-pill.red strong[b-tma60gredg] {
        color: var(--rose-600);
    }

    .phd-stat-pill.green strong[b-tma60gredg] {
        color: var(--emerald-600);
    }

/* =========================================================
   TABS
   ========================================================= */

.phd-tabs-card[b-tma60gredg] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.phd-tabs-bar[b-tma60gredg] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    background: linear-gradient(180deg, var(--surface-muted), var(--surface));
}

    .phd-tabs-bar[b-tma60gredg]::-webkit-scrollbar {
        height: 4px;
    }

.phd-tab[b-tma60gredg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 18px 8px 10px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .phd-tab:hover[b-tma60gredg] {
        background: var(--surface);
        border-color: var(--border);
        transform: translateY(-1px);
    }

    .phd-tab.active[b-tma60gredg] {
        background: var(--surface);
        border-color: var(--border);
        box-shadow: 0 6px 16px rgba(16, 24, 39, .08);
    }

    .phd-tab[b-tma60gredg]::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -14px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: transparent;
        transition: background .15s ease;
    }

    .phd-tab.active[b-tma60gredg]::after {
        background: var(--primary);
    }

.phd-tab-icon[b-tma60gredg] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--surface-muted);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    transition: background .15s ease, color .15s ease;
}

.phd-tab.active .phd-tab-icon[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: transparent;
}

.phd-tab-copy[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.phd-tab-label[b-tma60gredg] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    transition: color .15s ease;
}

.phd-tab.active .phd-tab-label[b-tma60gredg] {
    color: var(--ink);
}

.phd-tab-meta[b-tma60gredg] {
    font-size: 10.5px;
    font-weight: 600;
    color: #9AA2B1;
}

/* ---- Per-tab accent colors : gives each section its own
   identity so it reads as distinct, not a repeated pill ---- */

.tab-visits.active .phd-tab-icon[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--violet-600);
}

.tab-visits.active[b-tma60gredg]::after {
    background: var(--violet-600);
}

.tab-appointments.active .phd-tab-icon[b-tma60gredg] {
    background: var(--sky-100);
    color: var(--sky-600);
}

.tab-appointments.active[b-tma60gredg]::after {
    background: var(--sky-600);
}

.tab-ipd.active .phd-tab-icon[b-tma60gredg] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.tab-ipd.active[b-tma60gredg]::after {
    background: var(--amber-600);
}

.tab-records.active .phd-tab-icon[b-tma60gredg] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.tab-records.active[b-tma60gredg]::after {
    background: var(--emerald-600);
}

.tab-billing.active .phd-tab-icon[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--primary);
}

.tab-billing.active[b-tma60gredg]::after {
    background: var(--primary);
}

.phd-tab-content[b-tma60gredg] {
    padding: 20px;
}

/* =========================================================
   VISIT SUMMARY TAB
   ========================================================= */

.phd-visits-layout[b-tma60gredg] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: flex-start;
}

.phd-visit-list[b-tma60gredg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.phd-visit-list-header[b-tma60gredg] {
    padding: 10px 14px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
}

.phd-visit-list-item[b-tma60gredg] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #EEF0F4;
    cursor: pointer;
    transition: background .15s ease;
}

    .phd-visit-list-item:last-child[b-tma60gredg] {
        border-bottom: none;
    }

    .phd-visit-list-item:hover[b-tma60gredg] {
        background: var(--surface-muted);
    }

    .phd-visit-list-item.active[b-tma60gredg] {
        background: var(--primary-soft);
    }

.phd-visit-list-date[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    text-align: center;
}

    .phd-visit-list-date strong[b-tma60gredg] {
        font-size: 15px;
        color: var(--ink);
    }

    .phd-visit-list-date span[b-tma60gredg] {
        font-size: 10.5px;
        color: var(--ink-soft);
    }

.phd-visit-list-info[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .phd-visit-list-info .badge[b-tma60gredg] {
        width: fit-content;
    }

.phd-visit-list-diag[b-tma60gredg] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phd-visit-list-doc[b-tma60gredg] {
    font-size: 11px;
    color: var(--ink-soft);
}

.phd-visit-detail[b-tma60gredg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.phd-visit-detail-header[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

    .phd-visit-detail-header h5[b-tma60gredg] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }

    .phd-visit-detail-header .text-muted[b-tma60gredg] {
        font-size: 12px;
    }

.phd-visit-detail-nav[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phd-nav-btn[b-tma60gredg] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .phd-nav-btn:disabled[b-tma60gredg] {
        opacity: .4;
        cursor: not-allowed;
    }

    .phd-nav-btn:not(:disabled):hover[b-tma60gredg] {
        border-color: var(--primary);
        color: var(--primary);
    }

.phd-nav-count[b-tma60gredg] {
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 600;
}

.phd-visit-detail-body[b-tma60gredg] {
    padding: 18px;
}

.phd-section[b-tma60gredg] {
    margin-bottom: 16px;
}

    .phd-section:last-child[b-tma60gredg] {
        margin-bottom: 0;
    }

.phd-section-label[b-tma60gredg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    font-weight: 700;
}

    .phd-section-label i[b-tma60gredg] {
        color: var(--primary);
        font-size: 14px;
    }

.phd-section p[b-tma60gredg] {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}

.phd-section-grid[b-tma60gredg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.phd-rx-table-wrap[b-tma60gredg] {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.phd-rx-table[b-tma60gredg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .phd-rx-table thead th[b-tma60gredg] {
        background: var(--surface-muted);
        text-align: left;
        padding: 9px 12px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ink-soft);
        font-weight: 700;
        border-bottom: 1px solid var(--border);
    }

    .phd-rx-table tbody td[b-tma60gredg] {
        padding: 10px 12px;
        border-bottom: 1px solid #EEF0F4;
        color: var(--ink);
        vertical-align: top;
    }

    .phd-rx-table tbody tr:last-child td[b-tma60gredg] {
        border-bottom: none;
    }

.phd-rx-composition[b-tma60gredg] {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* =========================================================
   GENERIC TABLE (Appointments / Billing)
   ========================================================= */

.phd-table-toolbar[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .phd-table-toolbar .text-muted[b-tma60gredg] {
        font-size: 12.5px;
    }

.phd-generic-table-wrap[b-tma60gredg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.phd-generic-table[b-tma60gredg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .phd-generic-table thead th[b-tma60gredg] {
        background: var(--surface-muted);
        text-align: left;
        padding: 10px 14px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ink-soft);
        font-weight: 700;
        border-bottom: 1px solid var(--border);
    }

    .phd-generic-table tbody td[b-tma60gredg] {
        padding: 12px 14px;
        border-bottom: 1px solid #EEF0F4;
        color: var(--ink);
    }

    .phd-generic-table tbody tr:last-child td[b-tma60gredg] {
        border-bottom: none;
    }

    .phd-generic-table tbody tr:hover td[b-tma60gredg] {
        background: var(--surface-muted);
    }

.phd-td-sub[b-tma60gredg] {
    font-size: 11px;
    margin-top: 2px;
}

.phd-td-action[b-tma60gredg] {
    text-align: right;
}

.phd-link-btn[b-tma60gredg] {
    border: none;
    background: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

    .phd-link-btn:hover[b-tma60gredg] {
        text-decoration: underline;
    }

/* =========================================================
   EMPTY STATE
   ========================================================= */

.phd-empty-state[b-tma60gredg] {
    text-align: center;
    padding: 48px 20px;
    color: var(--ink-soft);
}

    .phd-empty-state i[b-tma60gredg] {
        font-size: 34px;
        display: block;
        margin-bottom: 10px;
    }

    .phd-empty-state h5[b-tma60gredg] {
        margin: 0 0 4px;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink);
    }

    .phd-empty-state p[b-tma60gredg] {
        margin: 0;
        font-size: 12.5px;
    }

.phd-empty-inline[b-tma60gredg] {
    padding: 24px 10px;
}

/* =========================================================
   IPD TAB
   ========================================================= */

.phd-ipd-grid[b-tma60gredg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.phd-ipd-card[b-tma60gredg] {
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    transition: box-shadow .15s ease, transform .15s ease;
}

    .phd-ipd-card:hover[b-tma60gredg] {
        box-shadow: var(--shadow-card);
        transform: translateY(-1px);
    }

    .phd-ipd-card.status-admitted[b-tma60gredg] {
        border-left-color: var(--amber-600);
    }

    .phd-ipd-card.status-discharged[b-tma60gredg] {
        border-left-color: var(--emerald-600);
    }

.phd-ipd-card-top[b-tma60gredg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

.phd-ipd-icon[b-tma60gredg] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: var(--primary-soft);
    color: var(--primary);
}

.status-admitted .phd-ipd-icon[b-tma60gredg] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.status-discharged .phd-ipd-icon[b-tma60gredg] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.phd-ipd-card-title[b-tma60gredg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .phd-ipd-card-title strong[b-tma60gredg] {
        font-size: 13.5px;
        color: var(--ink);
    }

    .phd-ipd-card-title span[b-tma60gredg] {
        font-size: 11.5px;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.phd-ipd-stats[b-tma60gredg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 14px 16px;
}

.phd-ipd-stat[b-tma60gredg] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .phd-ipd-stat i[b-tma60gredg] {
        font-size: 16px;
        color: var(--primary);
        margin-top: 2px;
    }

    .phd-ipd-stat label[b-tma60gredg] {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-soft);
        font-weight: 700;
        margin-bottom: 2px;
    }

    .phd-ipd-stat strong[b-tma60gredg] {
        font-size: 12.5px;
        color: var(--ink);
        font-weight: 600;
    }

.phd-ipd-diagnosis[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

    .phd-ipd-diagnosis i[b-tma60gredg] {
        color: var(--rose-600);
        font-size: 15px;
    }

/* =========================================================
   MEDICAL RECORDS TAB
   ========================================================= */

.phd-records-grid[b-tma60gredg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.phd-record-card[b-tma60gredg] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 16px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

    .phd-record-card:hover[b-tma60gredg] {
        box-shadow: var(--shadow-card);
        border-color: #DBDFE8;
        transform: translateY(-1px);
    }

.phd-record-icon[b-tma60gredg] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-top: 1px;
}

.rec-blue[b-tma60gredg] {
    background: var(--sky-100);
    color: var(--sky-600);
}

.rec-purple[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--violet-600);
}

.rec-green[b-tma60gredg] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.rec-orange[b-tma60gredg] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.rec-gray[b-tma60gredg] {
    background: var(--surface-muted);
    color: var(--ink-soft);
}

.phd-record-body[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    flex: 1;
}

.phd-record-title-row[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .phd-record-title-row strong[b-tma60gredg] {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    .phd-record-title-row .badge[b-tma60gredg] {
        flex-shrink: 0;
    }

.phd-record-meta[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 500;
}

    .phd-record-meta i[b-tma60gredg] {
        font-size: 13px;
        color: var(--primary);
    }

.phd-record-notes[b-tma60gredg] {
    font-size: 11.5px;
    color: var(--ink-soft);
    font-style: italic;
    background: var(--surface-muted);
    border-left: 2px solid var(--border);
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
    line-height: 1.45;
}

.phd-record-actions[b-tma60gredg] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
}

.phd-icon-btn[b-tma60gredg] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13.5px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .phd-icon-btn:hover[b-tma60gredg] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-soft);
    }

/* =========================================================
   BILLING TAB
   ========================================================= */

.phd-billing-top[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.phd-billing-subtabs[b-tma60gredg] {
    display: flex;
    gap: 6px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}

.phd-subtab[b-tma60gredg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .phd-subtab.active[b-tma60gredg] {
        background: var(--surface);
        color: var(--primary);
        box-shadow: var(--shadow-card);
    }

.phd-billing-right[b-tma60gredg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phd-advance-chip[b-tma60gredg] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 999px;
}

.phd-billing-summary[b-tma60gredg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.phd-billing-summary-card[b-tma60gredg] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .phd-billing-summary-card span[b-tma60gredg] {
        font-size: 11.5px;
        color: var(--ink-soft);
        font-weight: 600;
    }

    .phd-billing-summary-card h3[b-tma60gredg] {
        margin: 0;
        font-size: 21px;
        font-weight: 800;
        color: var(--ink);
    }

    .phd-billing-summary-card.highlight[b-tma60gredg] {
        background: var(--primary-soft);
        border-color: var(--primary-soft);
    }

        .phd-billing-summary-card.highlight h3[b-tma60gredg] {
            color: var(--primary-dark);
        }

    .phd-billing-summary-card.green h3[b-tma60gredg] {
        color: var(--emerald-600);
    }

    .phd-billing-summary-card.orange h3[b-tma60gredg] {
        color: var(--amber-600);
    }

    .phd-billing-summary-card.red h3[b-tma60gredg] {
        color: var(--rose-600);
    }

/* =========================================================
   BADGES (shared)
   ========================================================= */

.badge[b-tma60gredg] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-info[b-tma60gredg] {
    background: var(--sky-100) !important;
    color: var(--sky-600) !important;
}

.badge-success[b-tma60gredg] {
    background: var(--emerald-100) !important;
    color: var(--emerald-600) !important;
}

.badge-warning[b-tma60gredg] {
    background: var(--amber-100) !important;
    color: var(--amber-600) !important;
}

.badge-danger[b-tma60gredg] {
    background: var(--rose-100) !important;
    color: var(--rose-600) !important;
}

.badge-secondary[b-tma60gredg] {
    background: var(--surface-muted) !important;
    color: var(--ink-soft) !important;
}

/* =========================================================
   UPLOAD MEDICAL RECORD — DRAWER
   ========================================================= */

.phd-drawer-backdrop[b-tma60gredg] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --rose-600: #E11D48;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 39, .45);
    display: flex;
    justify-content: flex-end;
    z-index: 1050;
    animation: phdFadeIn-b-tma60gredg .15s ease-out;
}

.phd-drawer-panel[b-tma60gredg] {
    width: 460px;
    max-width: 92vw;
    height: 100%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 50px rgba(16, 24, 39, .25);
    animation: phdSlideIn-b-tma60gredg .18s ease-out;
}

.phd-drawer-header[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

    .phd-drawer-header h5[b-tma60gredg] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

.phd-drawer-close[b-tma60gredg] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 15px;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .phd-drawer-close:hover[b-tma60gredg] {
        border-color: var(--rose-600);
        color: var(--rose-600);
    }

.phd-drawer-body[b-tma60gredg] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phd-upload-dropzone[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px dashed var(--primary);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-dark);
    padding: 22px;
    cursor: pointer;
    text-align: center;
}

    .phd-upload-dropzone i[b-tma60gredg] {
        font-size: 24px;
    }

    .phd-upload-dropzone span[b-tma60gredg] {
        font-size: 13px;
        font-weight: 700;
    }

    .phd-upload-dropzone small[b-tma60gredg] {
        font-size: 11px;
        color: var(--ink-soft);
    }

.phd-upload-item[b-tma60gredg] {
    display: flex;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.phd-upload-thumb[b-tma60gredg] {
    width: 52px;
    height: 60px;
    min-width: 52px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rose-600);
    font-size: 22px;
}

.phd-upload-fields[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.phd-upload-filename[b-tma60gredg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .phd-upload-filename span[b-tma60gredg] {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.phd-upload-row[b-tma60gredg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.phd-field[b-tma60gredg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .phd-field label[b-tma60gredg] {
        font-size: 11px;
        font-weight: 600;
        color: var(--ink-soft);
    }

    .phd-field .req[b-tma60gredg] {
        color: var(--rose-600);
    }

.phd-select.form-select[b-tma60gredg],
.phd-select.form-control[b-tma60gredg] {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    padding: 0 10px;
}

.phd-textarea.form-control[b-tma60gredg] {
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    padding: 8px 10px;
    min-height: 60px;
    resize: vertical;
}

.phd-char-count[b-tma60gredg] {
    align-self: flex-end;
    font-size: 10.5px;
    color: var(--ink-soft);
}

.phd-drawer-footer[b-tma60gredg] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

@keyframes phdFadeIn-b-tma60gredg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes phdSlideIn-b-tma60gredg {
    from {
        transform: translateX(24px);
        opacity: 0;
    }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .phd-visits-layout[b-tma60gredg] {
        grid-template-columns: 260px 1fr;
    }

    .phd-billing-summary[b-tma60gredg] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .phd-visits-layout[b-tma60gredg] {
        grid-template-columns: 1fr;
    }

    .phd-section-grid[b-tma60gredg] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .patient-history-detail-page[b-tma60gredg] {
        padding: 14px 2px 20px;
    }

    .phd-hero-main[b-tma60gredg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .phd-hero-stats[b-tma60gredg] {
        width: 100%;
    }

    .phd-stat-pill[b-tma60gredg] {
        flex: 1;
    }

    .phd-header-actions[b-tma60gredg] {
        flex-wrap: wrap;
    }

    .phd-upload-row[b-tma60gredg] {
        grid-template-columns: 1fr;
    }

    .phd-billing-summary[b-tma60gredg] {
        grid-template-columns: 1fr;
    }

    .phd-drawer-panel[b-tma60gredg] {
        width: 100%;
    }
}
/* /Pages/Patient/PatientRegistration.razor.rz.scp.css */
/* =========================================================
   PATIENT REGISTRATION
   Single accent color system: everything keys off --primary
   (blue). No secondary violet/emerald accents.
   Layout is a fixed-height flex column (stepper -> scrollable
   body -> action bar) so the OUTER page never scrolls; only the
   active step's content area scrolls if it doesn't fit.
   ========================================================= */

.patient-reg-page[b-zhlo2aa4sj] {
    --primary: #2F6FED;
    --primary-soft: #E8F0FF;
    --primary-dark: #2059C9;
    --ink: #101827;
    --ink-soft: #5C6579;
    --border: #D7DDE8;
    --surface: #FFFFFF;
    --surface-muted: #F1F4F9;
    --page-bg: #EEF1F7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --radius-lg: 14px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .05), 0 10px 24px rgba(16, 24, 39, .08);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 24px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
    background: var(--page-bg);
    overflow: hidden;
}

    .patient-reg-page h3[b-zhlo2aa4sj],
    .patient-reg-page h4[b-zhlo2aa4sj] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
        margin: 0;
    }

    .patient-reg-page *[b-zhlo2aa4sj] {
        box-sizing: border-box;
    }

/* =========================================================
   STEPPER — number badge + icon + title/subtitle
   ========================================================= */

.patient-reg-stepper[b-zhlo2aa4sj] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 0 0 auto;
    margin-bottom: 16px;
}

.patient-reg-step[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.patient-reg-step-number[b-zhlo2aa4sj] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink-soft);
}

.patient-reg-step-icon[b-zhlo2aa4sj] {
    font-size: 24px;
    color: var(--ink-soft);
}

.patient-reg-step-text[b-zhlo2aa4sj] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.patient-reg-step-title[b-zhlo2aa4sj] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.patient-reg-step-subtitle[b-zhlo2aa4sj] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

.patient-reg-step.active[b-zhlo2aa4sj] {
    background: var(--primary-soft);
    border-color: transparent;
}

    .patient-reg-step.active .patient-reg-step-number[b-zhlo2aa4sj] {
        background: var(--primary);
        border-color: transparent;
        color: #fff;
    }

    .patient-reg-step.active .patient-reg-step-icon[b-zhlo2aa4sj],
    .patient-reg-step.active .patient-reg-step-title[b-zhlo2aa4sj] {
        color: var(--primary);
    }

.patient-reg-step.completed .patient-reg-step-number[b-zhlo2aa4sj] {
    background: var(--emerald-600);
    border-color: transparent;
    color: #fff;
}

/* =========================================================
   SCROLLABLE BODY
   The only element allowed to scroll. Keeps the stepper and
   action bar always visible ("non-scrollable page").
   ========================================================= */

.patient-reg-body[b-zhlo2aa4sj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* =========================================================
   CARDS
   ========================================================= */

.patient-reg-card[b-zhlo2aa4sj] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 25px 25px;
    box-shadow: var(--shadow-card);
    margin-bottom: 14px;
}

.patient-reg-card-header[b-zhlo2aa4sj] {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.patient-reg-card-header-row[b-zhlo2aa4sj] {
    display: flex;
    align-items: end;
    justify-content: end;
    gap: 12px;
    flex-wrap: wrap;
}

.patient-reg-card-header-title[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-reg-card-header h3[b-zhlo2aa4sj] {
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.patient-reg-card-header p[b-zhlo2aa4sj] {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.patient-reg-icon-badge[b-zhlo2aa4sj] {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.patient-reg-required-badge[b-zhlo2aa4sj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--rose-100);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .patient-reg-required-badge .mdi[b-zhlo2aa4sj] {
        font-size: 12px;
        color: var(--rose-600);
    }

.req-star[b-zhlo2aa4sj] {
    color: var(--rose-600);
}

/* =========================================================
   FIELDS
   ========================================================= */

.patient-reg-grid[b-zhlo2aa4sj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
}

    .patient-reg-grid.mt-20[b-zhlo2aa4sj] {
        margin-top: 18px;
    }

.patient-reg-field.span-2[b-zhlo2aa4sj] {
    grid-column: span 2;
}

.patient-reg-field label[b-zhlo2aa4sj] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
}

.patient-reg-helper-text[b-zhlo2aa4sj] {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.patient-reg-input[b-zhlo2aa4sj] {
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    background: var(--surface-muted);
    font-size: 13.5px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}

    .patient-reg-input[b-zhlo2aa4sj]::placeholder {
        color: #9AA3B2;
    }

    .patient-reg-input:focus[b-zhlo2aa4sj] {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
    }

select.patient-reg-input[b-zhlo2aa4sj] {
    cursor: pointer;
}

/* Single, unified error state (drop the old duplicate
   .input-error / .error-text classes entirely). */
.patient-reg-input.is-invalid[b-zhlo2aa4sj] {
    border-color: var(--rose-600);
    background: var(--rose-100);
}

.invalid-feedback[b-zhlo2aa4sj] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--rose-600);
    font-weight: 500;
}

/* =========================================================
   ICON / PREFIX / SUFFIX INPUT GROUP
   The group itself carries the border/radius/background now;
   the icon, prefix and suffix are real flex compartments with
   their own divider borders (matches the approved reference:
   icon box | prefix box | input, all in one bordered pill)
   rather than icons floating over a padded input.
   ========================================================= */

.patient-reg-input-group[b-zhlo2aa4sj] {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

    .patient-reg-input-group:focus-within[b-zhlo2aa4sj] {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
    }

    .patient-reg-input-group.is-invalid[b-zhlo2aa4sj] {
        border-color: var(--rose-600);
        background: var(--rose-100);
    }

    .patient-reg-input-group .patient-reg-input[b-zhlo2aa4sj] {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        border: none;
        border-radius: 0;
        background: transparent;
    }

        .patient-reg-input-group .patient-reg-input:focus[b-zhlo2aa4sj] {
            box-shadow: none;
        }

.patient-reg-input-icon[b-zhlo2aa4sj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border-right: 1px solid var(--border);
    color: var(--ink);
    font-size: 17px;
}

/* "Years" chip on the Age field — filled compartment on the
   trailing edge, divided from the input by a border. */
.patient-reg-input-suffix[b-zhlo2aa4sj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-left: 1px solid var(--border);
    background: var(--surface-muted);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

/* "+91" chip on the Mobile Number field — sits between the
   icon compartment and the input, its own divided segment. */
.patient-reg-input-prefix[b-zhlo2aa4sj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

/* =========================================================
   GENDER TOGGLE BUTTONS
   Unselected buttons carry their gender's tint on icon/label
   (white bg, subtle border); the selected one gets a solid
   fill in that same color — matches the reference exactly.
   ========================================================= */

.patient-reg-gender-row[b-zhlo2aa4sj] {
    display: flex;
    gap: 8px;
    height: 44px;
}

.patient-reg-gender-btn[b-zhlo2aa4sj] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

    .patient-reg-gender-btn:hover:not(:disabled)[b-zhlo2aa4sj] {
        transform: translateY(-1px);
    }

    .patient-reg-gender-btn:disabled[b-zhlo2aa4sj] {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

    .patient-reg-gender-btn.male[b-zhlo2aa4sj] {
        color: var(--primary);
    }

    .patient-reg-gender-btn.female[b-zhlo2aa4sj] {
        color: var(--rose-600);
    }

    .patient-reg-gender-btn.other[b-zhlo2aa4sj] {
        color: var(--ink);
    }

    .patient-reg-gender-btn.male.selected[b-zhlo2aa4sj] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .patient-reg-gender-btn.female.selected[b-zhlo2aa4sj] {
        background: var(--rose-600);
        border-color: var(--rose-600);
        color: #fff;
    }

    .patient-reg-gender-btn.other.selected[b-zhlo2aa4sj] {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
    }

/* =========================================================
   PHOTO
   ========================================================= */

.patient-reg-photo[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.patient-reg-avatar[b-zhlo2aa4sj] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-soft);
    background: var(--surface-muted);
}

/* =========================================================
   SWITCHES  (insurance / PMJAY toggles)
   ========================================================= */

.patient-reg-switch-row[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.switch[b-zhlo2aa4sj] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

    .switch input[b-zhlo2aa4sj] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-zhlo2aa4sj] {
    position: absolute;
    inset: 0;
    background: #D6DAE3;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease;
}

    .slider[b-zhlo2aa4sj]::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform .15s ease;
        box-shadow: 0 1px 3px rgba(16, 24, 39, .25);
    }

.switch input:checked + .slider[b-zhlo2aa4sj] {
    background: var(--primary);
}

    .switch input:checked + .slider[b-zhlo2aa4sj]::before {
        transform: translateX(18px);
    }

.pmjay-section[b-zhlo2aa4sj] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

/* =========================================================
   BADGE ROW (Employee / VIP toggle chips)
   ========================================================= */

.patient-reg-badge-row[b-zhlo2aa4sj] {
    display: flex;
    gap: 14px;
    margin-top: 18px;
}

.modern-check[b-zhlo2aa4sj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .modern-check input[b-zhlo2aa4sj] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .modern-check .check-slider[b-zhlo2aa4sj] {
        width: 34px;
        height: 20px;
        min-width: 34px;
        border-radius: 999px;
        background: #D6DAE3;
        position: relative;
        transition: background .15s ease;
    }

        .modern-check .check-slider[b-zhlo2aa4sj]::before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform .15s ease;
        }

    .modern-check input:checked + .check-slider[b-zhlo2aa4sj] {
        background: var(--primary);
    }

        .modern-check input:checked + .check-slider[b-zhlo2aa4sj]::before {
            transform: translateX(14px);
        }

    .modern-check:has(input:checked)[b-zhlo2aa4sj] {
        border-color: transparent;
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

/* =========================================================
   MULTI-SELECT (Disabilities)
   ========================================================= */

.multi-select-dropdown[b-zhlo2aa4sj] {
    position: relative;
}

.multi-select-header[b-zhlo2aa4sj] {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

    .multi-select-header .placeholder[b-zhlo2aa4sj] {
        font-size: 13.5px;
        color: #9AA3B2;
    }

.dropdown-arrow[b-zhlo2aa4sj] {
    font-size: 13px;
    color: var(--ink-soft);
    display: inline-flex;
}

.selected-tags[b-zhlo2aa4sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.selected-tag[b-zhlo2aa4sj] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.multi-select-menu[b-zhlo2aa4sj] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 34px rgba(16, 24, 39, .14);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.multi-select-option[b-zhlo2aa4sj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
}

    .multi-select-option:hover[b-zhlo2aa4sj] {
        background: var(--surface-muted);
    }

    .multi-select-option input[b-zhlo2aa4sj] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.custom-check[b-zhlo2aa4sj] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, background .15s ease;
}

.multi-select-option input:checked + .custom-check[b-zhlo2aa4sj] {
    background: var(--primary);
    border-color: var(--primary);
}

    .multi-select-option input:checked + .custom-check[b-zhlo2aa4sj]::after {
        content: "✓";
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }

/* =========================================================
   FETCH-FROM-ABHA + QUICK START
   Two distinct tinted cards stacked with a gap — ABHA reads
   blue (primary-soft), Quick Start reads a neutral grey — per
   the approved reference, instead of one flat panel.
   ========================================================= */

.patient-reg-quickpanel[b-zhlo2aa4sj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 4px;
}

.patient-reg-abha-card[b-zhlo2aa4sj] {
    background: var(--primary-soft);
    border: 1px solid rgba(47, 111, 237, .22);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.patient-reg-quickstart-card[b-zhlo2aa4sj] {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.patient-reg-abha-row[b-zhlo2aa4sj],
.patient-reg-quickstart-row[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.patient-reg-abha-left[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .patient-reg-abha-left h4[b-zhlo2aa4sj] {
        font-size: 14.5px;
        font-weight: 700;
    }

    .patient-reg-abha-left p[b-zhlo2aa4sj] {
        margin: 2px 0 0;
        font-size: 12px;
        color: var(--ink-soft);
    }

/* "Fetch Details from ABHA" heading reads in primary blue in
   the approved design; "Quick Start" stays ink black. Scope
   the override to the ABHA row only. */
.patient-reg-abha-row .patient-reg-abha-left h4[b-zhlo2aa4sj] {
    color: var(--primary);
}

.patient-reg-abha-right[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.patient-reg-input-group.abha-lookup[b-zhlo2aa4sj] {
    width: 550px;
    background: var(--surface);
}

.patient-reg-abha-note[b-zhlo2aa4sj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--ink-soft);
}

    .patient-reg-abha-note .mdi[b-zhlo2aa4sj] {
        color: var(--primary);
        font-size: 15px;
        margin-top: 1px;
    }

.patient-reg-quick-buttons[b-zhlo2aa4sj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

    .patient-reg-quick-buttons .patient-reg-btn[b-zhlo2aa4sj] {
        min-width: 190px;
    }

/* =========================================================
   ACTIONS / BUTTONS
   Hierarchy: Next / Register / Fetch Details / Quick Start
   shortcuts are solid primary. Cancel and Save are outline —
   secondary actions that don't compete visually with the one
   primary action per row. Pinned to the bottom of the page.
   ========================================================= */

.patient-reg-actions[b-zhlo2aa4sj] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.patient-reg-btn[b-zhlo2aa4sj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}

    .patient-reg-btn .mdi[b-zhlo2aa4sj] {
        font-size: 16px;
    }

    .patient-reg-btn:hover:not(:disabled)[b-zhlo2aa4sj] {
        transform: translateY(-1px);
    }

    .patient-reg-btn:disabled[b-zhlo2aa4sj] {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .patient-reg-btn.btn-primary[b-zhlo2aa4sj] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgba(47, 111, 237, .28);
    }

        .patient-reg-btn.btn-primary:hover:not(:disabled)[b-zhlo2aa4sj] {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .patient-reg-btn.btn-outline-primary[b-zhlo2aa4sj] {
        background: var(--surface);
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: none;
    }

        .patient-reg-btn.btn-outline-primary:hover:not(:disabled)[b-zhlo2aa4sj] {
            background: var(--primary-soft);
        }

    .patient-reg-btn.btn-outline-danger[b-zhlo2aa4sj] {
        background: var(--surface);
        border-color: var(--rose-600);
        color: var(--rose-600);
        box-shadow: none;
    }

        .patient-reg-btn.btn-outline-danger:hover:not(:disabled)[b-zhlo2aa4sj] {
            background: var(--rose-100);
        }

/* =========================================================
   RESPONSIVE
   Below the enterprise/desktop breakpoint we drop the fixed,
   non-scrolling layout in favor of a normal scrolling page —
   trying to pin a 3-step form into one screen on a phone does
   more harm than good.
   ========================================================= */

@media (max-width: 1100px) {
    .patient-reg-abha-right[b-zhlo2aa4sj],
    .patient-reg-quick-buttons[b-zhlo2aa4sj] {
        width: 100%;
    }

    .patient-reg-input-group.abha-lookup[b-zhlo2aa4sj] {
        width: 100%;
        flex: 1 1 200px;
    }

    .patient-reg-quick-buttons .patient-reg-btn[b-zhlo2aa4sj] {
        flex: 1 1 auto;
        min-width: 200px;
    }
}

@media (max-width: 860px) {
    .patient-reg-page[b-zhlo2aa4sj] {
        height: auto;
        overflow: visible;
    }

    .patient-reg-body[b-zhlo2aa4sj] {
        overflow: visible;
    }

    .patient-reg-grid[b-zhlo2aa4sj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .patient-reg-page[b-zhlo2aa4sj] {
        padding: 14px 10px 10px;
    }

    .patient-reg-stepper[b-zhlo2aa4sj] {
        flex-direction: column;
        align-items: stretch;
    }

    .patient-reg-grid[b-zhlo2aa4sj] {
        grid-template-columns: 1fr;
    }

    .patient-reg-field.span-2[b-zhlo2aa4sj] {
        grid-column: span 1;
    }

    .patient-reg-gender-row[b-zhlo2aa4sj] {
        flex-direction: column;
        height: auto;
    }

    .patient-reg-abha-row[b-zhlo2aa4sj],
    .patient-reg-quickstart-row[b-zhlo2aa4sj] {
        flex-direction: column;
        align-items: stretch;
    }

    .patient-reg-abha-right[b-zhlo2aa4sj] {
        flex-direction: column;
        align-items: stretch;
    }

    .patient-reg-actions[b-zhlo2aa4sj] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .patient-reg-btn[b-zhlo2aa4sj] {
        width: 100%;
    }
}



.patient-reg-upload[b-zhlo2aa4sj] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.patient-reg-upload-preview[b-zhlo2aa4sj] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-soft);
}

.patient-reg-upload-btn[b-zhlo2aa4sj] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1.5px dashed var(--primary);
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .15s ease;
}

    .patient-reg-upload-btn:hover[b-zhlo2aa4sj] {
        background: #dde9ff;
    }

.patient-reg-actions[b-zhlo2aa4sj] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.patient-reg-actions-row[b-zhlo2aa4sj] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.patient-reg-actions-secondary[b-zhlo2aa4sj] {
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}

.patient-reg-actions .patient-reg-btn[b-zhlo2aa4sj] {
    padding: 0 16px;
    min-width: 0;
}
/* /Pages/Patient/Profile.razor.rz.scp.css */
/* =========================================================
   PATIENT PROFILE  (/patients/profile/{id})
   ========================================================= */

.patient-profile-page[b-papo4pu2h1] {
    --primary: var(--hms-primary, #5B4FE5);
    --primary-soft: var(--hms-primary-soft, #EDEBFF);
    --primary-dark: #3D33B0;
    --ink: var(--hms-ink, #101827);
    --ink-soft: #667085;
    --border: var(--hms-border, #E2E6ED);
    --surface: #FFFFFF;
    --surface-muted: #F8F9FC;
    --sky-600: #0284C7;
    --sky-100: #E0F2FE;
    --amber-600: #D97706;
    --amber-100: #FEF3C7;
    --rose-600: #E11D48;
    --rose-100: #FFE4E9;
    --emerald-600: #059669;
    --emerald-100: #D1FAE5;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 20px rgba(16, 24, 39, .06);
    margin: 0 auto;
    padding: 0 4px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
}

    .patient-profile-page h3[b-papo4pu2h1],
    .patient-profile-page h4[b-papo4pu2h1],
    .patient-profile-page h5[b-papo4pu2h1] {
        font-family: 'Sora', 'Inter', sans-serif;
        color: var(--ink);
    }

.pp-loading[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.spinner[b-papo4pu2h1] {
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: pp-spin-b-papo4pu2h1 .7s linear infinite;
}

@keyframes pp-spin-b-papo4pu2h1 {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   HEADER BAR
   ========================================================= */

.pp-header-bar[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-back-btn[b-papo4pu2h1] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .pp-back-btn:hover[b-papo4pu2h1] {
        border-color: var(--primary);
        color: var(--primary);
    }

.pp-header-text[b-papo4pu2h1] {
    flex: 1;
}

    .pp-header-text h4[b-papo4pu2h1] {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .pp-header-text span[b-papo4pu2h1] {
        font-size: 13px;
        color: var(--ink-soft);
    }

.pp-header-actions[b-papo4pu2h1] {
    display: flex;
    gap: 10px;
}

.pp-btn.btn[b-papo4pu2h1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

    .pp-btn.btn:hover[b-papo4pu2h1] {
        transform: translateY(-1px);
    }

.pp-btn.btn-primary[b-papo4pu2h1] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(91, 79, 229, .25);
}

    .pp-btn.btn-primary:hover[b-papo4pu2h1] {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

.pp-btn.btn-outline-secondary[b-papo4pu2h1] {
    color: var(--ink-soft);
    border-color: var(--border);
    background: var(--surface);
}

    .pp-btn.btn-outline-secondary:hover[b-papo4pu2h1] {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--surface);
    }

.pp-btn.btn-outline-primary[b-papo4pu2h1] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface);
}

    .pp-btn.btn-outline-primary:hover[b-papo4pu2h1] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

/* =========================================================
   CARD SHELL (generic)
   ========================================================= */

.pp-card[b-papo4pu2h1] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.pp-card-body[b-papo4pu2h1] {
    padding: 18px 20px;
}

/* =========================================================
   HERO
   ========================================================= */

.pp-hero-main[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pp-hero-left[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.pp-avatar[b-papo4pu2h1] {
    width: 78px;
    height: 78px;
    min-width: 78px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-soft);
    flex-shrink: 0;
}

.pp-avatar-fallback[b-papo4pu2h1] {
    width: 78px;
    height: 78px;
    min-width: 78px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 27px;
    flex-shrink: 0;
}

.avatar-male[b-papo4pu2h1] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.avatar-female[b-papo4pu2h1] {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.avatar-neutral[b-papo4pu2h1] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.pp-hero-info[b-papo4pu2h1] {
    min-width: 0;
}

.pp-hero-name-row[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pp-hero-name[b-papo4pu2h1] {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.pp-status[b-papo4pu2h1] {
    flex-shrink: 0;
    padding: 4px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--emerald-100);
    color: var(--emerald-600);
}

    .pp-status.inactive[b-papo4pu2h1] {
        background: var(--rose-100);
        color: var(--rose-600);
    }

.pp-hero-meta[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 13px;
    color: var(--ink-soft);
}

    .pp-hero-meta i[b-papo4pu2h1] {
        color: var(--primary);
    }

.pp-hero-contact[b-papo4pu2h1] {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

    .pp-hero-contact i[b-papo4pu2h1] {
        color: var(--primary);
        margin-right: 4px;
    }

.hp-chip[b-papo4pu2h1] {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.pp-hero-stats[b-papo4pu2h1] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pp-stat-pill[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 9px 15px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    border: 1px solid var(--border);
}

    .pp-stat-pill strong[b-papo4pu2h1] {
        font-size: 19px;
        font-weight: 800;
        color: var(--primary);
        font-family: 'Sora', sans-serif;
        line-height: 1.1;
    }

    .pp-stat-pill span[b-papo4pu2h1] {
        font-size: 10.5px;
        color: var(--ink-soft);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .pp-stat-pill.blue strong[b-papo4pu2h1] {
        color: var(--sky-600);
    }

    .pp-stat-pill.orange strong[b-papo4pu2h1] {
        color: var(--amber-600);
    }

    .pp-stat-pill.red strong[b-papo4pu2h1] {
        color: var(--rose-600);
    }

/* =========================================================
   TABS
   ========================================================= */

.pp-tabs-card[b-papo4pu2h1] {
    overflow: hidden;
}

.pp-tabs-bar[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    background: var(--surface-muted);
}

.pp-tab[b-papo4pu2h1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .pp-tab i[b-papo4pu2h1] {
        font-size: 15px;
    }

    .pp-tab:hover[b-papo4pu2h1] {
        background: var(--surface);
        color: var(--ink);
    }

    .pp-tab.active[b-papo4pu2h1] {
        background: var(--surface);
        color: var(--primary);
        box-shadow: var(--shadow-card);
    }

.pp-tab-count[b-papo4pu2h1] {
    background: var(--border);
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.pp-tab.active .pp-tab-count[b-papo4pu2h1] {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.pp-tab-content[b-papo4pu2h1] {
    padding: 20px;
}

/* =========================================================
   OVERVIEW SECTIONS
   ========================================================= */

.pp-section-grid[b-papo4pu2h1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pp-section-header[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

    .pp-section-header i[b-papo4pu2h1] {
        color: var(--primary);
        font-size: 17px;
    }

.pp-info-grid[b-papo4pu2h1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.pp-info-item[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .pp-info-item label[b-papo4pu2h1] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-soft);
        font-weight: 700;
    }

    .pp-info-item span[b-papo4pu2h1] {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
    }

/* =========================================================
   TIMELINE
   ========================================================= */

.pp-timeline[b-papo4pu2h1] {
    position: relative;
    padding-left: 4px;
}

.pp-timeline-item[b-papo4pu2h1] {
    display: grid;
    grid-template-columns: 56px 16px 1fr;
    align-items: center;
    gap: 4px;
    padding: 11px 0;
    position: relative;
}

    .pp-timeline-item[b-papo4pu2h1]::before {
        content: '';
        position: absolute;
        left: 63px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

    .pp-timeline-item:first-child[b-papo4pu2h1]::before {
        top: 50%;
    }

    .pp-timeline-item:last-child[b-papo4pu2h1]::before {
        bottom: 50%;
    }

.pp-timeline-date[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-right: 8px;
}

    .pp-timeline-date strong[b-papo4pu2h1] {
        font-size: 13px;
        color: var(--ink);
    }

    .pp-timeline-date span[b-papo4pu2h1] {
        font-size: 10.5px;
        color: var(--ink-soft);
    }

.pp-timeline-dot[b-papo4pu2h1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--border);
    z-index: 1;
    justify-self: center;
}

    .pp-timeline-dot.dot-blue[b-papo4pu2h1] {
        background: var(--sky-600);
    }

    .pp-timeline-dot.dot-orange[b-papo4pu2h1] {
        background: var(--amber-600);
    }

    .pp-timeline-dot.dot-red[b-papo4pu2h1] {
        background: var(--rose-600);
    }

.pp-timeline-content[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 10px;
}

.pp-timeline-main[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.pp-timeline-content .text-muted[b-papo4pu2h1] {
    font-size: 11.5px;
    color: var(--ink-soft);
}

.pp-timeline-footer[b-papo4pu2h1] {
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.pp-empty-state[b-papo4pu2h1] {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-soft);
}

    .pp-empty-state i[b-papo4pu2h1] {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
    }

    .pp-empty-state h5[b-papo4pu2h1] {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--ink);
    }

    .pp-empty-state p[b-papo4pu2h1] {
        margin: 0;
        font-size: 13px;
    }

/* =========================================================
   BADGES
   ========================================================= */

/* =========================================================
   TIMELINE — full-width horizontal rows
   ========================================================= */

.pp-timeline-list[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
}

.pp-timeline-row[b-papo4pu2h1] {
    display: grid;
    grid-template-columns: 96px 20px 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

    .pp-timeline-row:last-child[b-papo4pu2h1] {
        border-bottom: none;
    }

    .pp-timeline-row:hover[b-papo4pu2h1] {
        background: var(--surface-muted);
    }

/* ---- date column ---- */
.pp-timeline-row-date[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    text-align: right;
}

    .pp-timeline-row-date strong[b-papo4pu2h1] {
        font-size: 12.5px;
        color: var(--ink);
        white-space: nowrap;
    }

    .pp-timeline-row-date span[b-papo4pu2h1] {
        font-size: 11px;
        color: var(--ink-soft);
    }

/* ---- connector rail ---- */
.pp-timeline-row-rail[b-papo4pu2h1] {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

    .pp-timeline-row-rail[b-papo4pu2h1]::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

.pp-timeline-row:first-child .pp-timeline-row-rail[b-papo4pu2h1]::before {
    top: 50%;
}

.pp-timeline-row:last-child .pp-timeline-row-rail[b-papo4pu2h1]::before {
    bottom: 50%;
}

.pp-timeline-dot[b-papo4pu2h1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--border);
    z-index: 1;
    align-self: center;
}

    .pp-timeline-dot.dot-blue[b-papo4pu2h1] {
        background: var(--sky-600);
    }

    .pp-timeline-dot.dot-orange[b-papo4pu2h1] {
        background: var(--amber-600);
    }

    .pp-timeline-dot.dot-red[b-papo4pu2h1] {
        background: var(--rose-600);
    }

/* ---- body: fills all remaining width ---- */
.pp-timeline-row-body[b-papo4pu2h1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pp-timeline-row-top[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pp-timeline-row-title[b-papo4pu2h1] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-timeline-row-department[b-papo4pu2h1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-soft);
}

    .pp-timeline-row-department i[b-papo4pu2h1] {
        color: var(--primary);
        font-size: 14px;
    }

/* ---- status: pinned to the far right ---- */
.pp-timeline-row-status[b-papo4pu2h1] {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .pp-timeline-row[b-papo4pu2h1] {
        grid-template-columns: 64px 16px 1fr;
        row-gap: 6px;
    }

    .pp-timeline-row-date[b-papo4pu2h1] {
        text-align: left;
    }

    .pp-timeline-row-status[b-papo4pu2h1] {
        grid-column: 3 / 4;
        justify-self: start;
        margin-top: 2px;
    }
}

.badge[b-papo4pu2h1] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-info[b-papo4pu2h1] {
    background: var(--sky-100);
    color: var(--sky-600);
}

.badge-success[b-papo4pu2h1] {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.badge-warning[b-papo4pu2h1] {
    background: var(--amber-100);
    color: var(--amber-600);
}

.badge-danger[b-papo4pu2h1] {
    background: var(--rose-100);
    color: var(--rose-600);
}

.badge-secondary[b-papo4pu2h1] {
    background: var(--surface-muted);
    color: var(--ink-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
    .pp-section-grid[b-papo4pu2h1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .patient-profile-page[b-papo4pu2h1] {
        padding: 14px 2px 20px;
    }

    .pp-hero-main[b-papo4pu2h1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-hero-stats[b-papo4pu2h1] {
        width: 100%;
    }

    .pp-stat-pill[b-papo4pu2h1] {
        flex: 1;
    }

    .pp-info-grid[b-papo4pu2h1] {
        grid-template-columns: 1fr;
    }

    .pp-header-actions[b-papo4pu2h1] {
        flex: 1;
        flex-wrap: wrap;
    }

    .pp-btn.btn[b-papo4pu2h1] {
        flex: 1;
        justify-content: center;
    }

    .pp-timeline-item[b-papo4pu2h1] {
        grid-template-columns: 44px 14px 1fr;
    }
}
/* /Shared/ConfirmationModal.razor.rz.scp.css */
/* Scoped styles for ConfirmationModal component */

:root[b-fup9i0r3dp] {
    /* fallback variables if not defined in project */
    --modal-overlay-bg: rgba(15,23,42,0.45);
    --modal-backdrop-blur: 4px;
    --modal-max-width: 640px;
    --modal-radius: 12px;
    --modal-padding: 20px;
    --modal-border: #e6e9ee;
    --text-color: #1f2937;
    --muted-color: #6b7280;
    --danger-color: #e74c3c;
    --danger-bg: rgba(231,76,60,0.08);
}

.modal-overlay[b-fup9i0r3dp] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    z-index: 2147483647; /* very high to appear above app chrome */
    padding: 24px;
}

.modal-box[b-fup9i0r3dp] {
    width: 100%;
    max-width: var(--modal-max-width);
    background: #ffffff;
    border-radius: var(--modal-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,23,42,0.18);
    border: 1px solid rgba(16,24,40,0.06);
}

.modal-header[b-fup9i0r3dp] {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-title[b-fup9i0r3dp] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.modal-icon[b-fup9i0r3dp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--danger-color);
    flex: 0 0 44px;
}

.btn-close[b-fup9i0r3dp] {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--muted-color);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

.btn-close:hover[b-fup9i0r3dp] {
    background: rgba(0,0,0,0.04);
}

.modal-body[b-fup9i0r3dp] {
    padding: 16px 20px;
    color: var(--muted-color);
    font-size: 15px;
    line-height: 1.5;
}

.modal-footer[b-fup9i0r3dp] {
    padding: 14px 20px;
    border-top: 1px solid var(--modal-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.btn[b-fup9i0r3dp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-outline-secondary[b-fup9i0r3dp] {
    background: #ffffff;
    border: 1px solid rgba(16,24,40,0.08);
    color: var(--text-color);
}

.btn-outline-secondary:hover[b-fup9i0r3dp] {
    background: rgba(16,24,40,0.03);
}

.btn-danger[b-fup9i0r3dp] {
    /*background: var(--danger-color);*/
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(231,76,60,0.18);
}

.btn-danger:hover[b-fup9i0r3dp] {
    filter: brightness(0.96);
}

@media (max-width: 520px) {
    .modal-box[b-fup9i0r3dp] { max-width: calc(100% - 32px); border-radius: 10px; }
    .modal-title[b-fup9i0r3dp] { font-size: 18px; }
    .modal-body[b-fup9i0r3dp] { font-size: 14px; }
}