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

/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-db8ujnvrzc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-db8ujnvrzc] {
    flex: 1;
}

.sidebar[b-db8ujnvrzc] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-db8ujnvrzc] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

/* Sidebar title under logo */
/* Logo container: stack icon above title for better containment */
.sidebar-header .logo[b-db8ujnvrzc] {
    flex-direction: column !important;
    align-items: center !important;
    gap: .4rem !important;
    width: 100%;
    padding: .6rem .75rem .55rem;
    box-sizing: border-box;
}

.sidebar-header .logo img[b-db8ujnvrzc] {
    /* Keep existing inline sizing but ensure it doesn't expand layout */
    flex-shrink: 0;
}

.sidebar-header .sidebar-app-title[b-db8ujnvrzc] {
    font-weight: 700;
    font-size: 0.9rem; /* slightly smaller to fit two lines */
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* allow up to 2 lines visually without cropping */
    display: block;
    padding: 0 .25rem;
}

/* Hide title when sidebar collapsed (icon-only mode) */
.sidebar.collapsed .sidebar-app-title[b-db8ujnvrzc] {
    display: none;
}

/* Ensure no focus ring on the title for click and keyboard */
.sidebar-header .sidebar-app-title:focus[b-db8ujnvrzc],
.sidebar-header .sidebar-app-title:focus-visible[b-db8ujnvrzc] {
    outline: none !important;
    box-shadow: none !important;
}

    .top-row[b-db8ujnvrzc]  a, .top-row[b-db8ujnvrzc]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-db8ujnvrzc]  a:hover, .top-row[b-db8ujnvrzc]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-db8ujnvrzc]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-db8ujnvrzc] {
        justify-content: space-between;
    }

    .top-row[b-db8ujnvrzc]  a, .top-row[b-db8ujnvrzc]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-db8ujnvrzc] {
        flex-direction: row;
    }

    .sidebar[b-db8ujnvrzc] {
        width: 250px;
        height: 100vh;
        /* position: sticky; */
        top: 0;
    }

    .top-row[b-db8ujnvrzc] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-db8ujnvrzc]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-db8ujnvrzc], article[b-db8ujnvrzc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-c7khol1siq] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-c7khol1siq] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-c7khol1siq] {
    font-size: 1.1rem;
}

.bi[b-c7khol1siq] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-c7khol1siq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-c7khol1siq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-c7khol1siq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-c7khol1siq] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-c7khol1siq] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-c7khol1siq] {
        padding-bottom: 1rem;
    }

    .nav-item[b-c7khol1siq]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-c7khol1siq]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-c7khol1siq]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-c7khol1siq] {
        display: none;
    }

    .collapse[b-c7khol1siq] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-c7khol1siq] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Sidebar section header styling for NavMenu */
.nav-menu-section-header[b-c7khol1siq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--muted, #6b7280);
    opacity: 0.95;
    padding: .25rem 1rem .25rem 1rem;
    margin-top: .25rem;
}

/* Optional: slightly different tone in dark mode if a data-theme is used */
[data-theme="dark"] .nav-menu-section-header[b-c7khol1siq] {
    color: #9CA3AF; /* tailwind slate-400 */
    opacity: 1;
}
/* /Pages/AppointmentCalendar.razor.rz.scp.css */
/* Calendar Controls */
.calendar-controls[b-qgzi8fxwca] {
    background: var(--bg-primary, #f9fafb);
    padding: 1rem;
    border-radius: 8px;
}

.calendar-title[b-qgzi8fxwca] {
    min-width: 200px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

/* Month View - Calendar Grid */
.calendar-grid[b-qgzi8fxwca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

/* Layout wrapper for calendar + selected day details */
.calendar-layout[b-qgzi8fxwca] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.selected-day-details[b-qgzi8fxwca] {
    flex: 0 0 400px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    max-height: 700px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .selected-day-details[b-qgzi8fxwca] { margin-right: 0; }
[dir="ltr"] .selected-day-details[b-qgzi8fxwca] { margin-left: 0; }

.calendar-day-name[b-qgzi8fxwca] {
    padding: 0.75rem;
    text-align: center;
    background-color: var(--bg-secondary, #f3f4f6);
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-day[b-qgzi8fxwca] {
    min-height: 100px;
    height: 100%;
    background-color: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.calendar-day.today[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.08);
    border-color: #3b82f6;
}

.calendar-day.selected[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.12);
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

.calendar-day.other-month[b-qgzi8fxwca] {
    background: var(--bg-secondary, #f9fafb);
    opacity: 0.6;
}
.calendar-day.other-month .day-number[b-qgzi8fxwca] {
    color: var(--text-muted, #9ca3af);
}

.calendar-day:hover[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.05);
    cursor: pointer;
}

.day-header[b-qgzi8fxwca] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.day-number[b-qgzi8fxwca] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    font-size: 0.875rem;
}

.day-flags[b-qgzi8fxwca] {
    display: flex;
    gap: 4px;
}
.day-flag[b-qgzi8fxwca] {
    width: 10px;
    height: 10px;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.flag-scheduled[b-qgzi8fxwca] {
    background: var(--flag-scheduled-bg, #3b82f6);
}
.flag-action[b-qgzi8fxwca] {
    background: var(--flag-action-bg, #ef4444);
}

/* Status Colors */
.status-scheduled[b-qgzi8fxwca] { background: rgba(13,110,253,.12); border-left-color: #3b82f6; color: #1e40af; }
.status-completed[b-qgzi8fxwca] { background: rgba(16,185,129,.12); border-left-color: #10b981; color: #047857; }
.status-cancelled[b-qgzi8fxwca] { background: rgba(239,68,68,.12); border-left-color: #ef4444; color: #991b1b; }
.status-noshow[b-qgzi8fxwca] { background: rgba(245,158,11,.18); border-left-color: #f59e0b; color: #92400e; }
.status-default[b-qgzi8fxwca] { background: var(--bg-secondary, #f3f4f6); border-left-color: #6b7280; color: var(--text-primary, #1f2937); }

.selected-day-details h5[b-qgzi8fxwca] {
    color: var(--text-primary, #1f2937);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.appointments-list[b-qgzi8fxwca] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.appointment-detail-card[b-qgzi8fxwca] {
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}
.appointment-detail-card:hover[b-qgzi8fxwca] {
    transform: translateX(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.appointment-detail-card.status-scheduled[b-qgzi8fxwca] {
    background: var(--calendar-status-scheduled-bg, #eff6ff);
    border-left-color: #3b82f6;
}
.appointment-detail-card.status-completed[b-qgzi8fxwca] {
    background: var(--calendar-status-completed-bg, #ecfdf5);
    border-left-color: #10b981;
}
.appointment-detail-card.status-cancelled[b-qgzi8fxwca] {
    background: var(--calendar-status-cancelled-bg, #fef2f2);
    border-left-color: #ef4444;
}
.appointment-detail-card.status-noshow[b-qgzi8fxwca] {
    background: var(--calendar-status-noshow-bg, #fffbeb);
    border-left-color: #f59e0b;
}

/* Week View */
.week-view[b-qgzi8fxwca] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}
.week-header[b-qgzi8fxwca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-primary, #f9fafb);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}
.week-day-header[b-qgzi8fxwca] {
    padding: 1rem;
    text-align: center;
    border-right: 1px solid var(--border-color, #e5e7eb);
}
.week-day-header:last-child[b-qgzi8fxwca] {
    border-right: none;
}
.week-day-header.today[b-qgzi8fxwca] {
    background: #eff6ff;
}
.week-day-header .day-name[b-qgzi8fxwca] {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.week-day-header .day-number[b-qgzi8fxwca] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}
.week-day-header.today .day-number[b-qgzi8fxwca] {
    color: #3b82f6;
}
.week-body[b-qgzi8fxwca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 500px;
}
.week-day-column[b-qgzi8fxwca] {
    border-right: 1px solid #e5e7eb;
    padding: 0.5rem;
    position: relative;
}
.week-day-column:last-child[b-qgzi8fxwca] {
    border-right: none;
}
.week-appointment[b-qgzi8fxwca] {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    border-left: 3px solid;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 60px;
}
.week-appointment:hover[b-qgzi8fxwca] {
    transform: scale(1.02);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Day View */
.day-view[b-qgzi8fxwca] {
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}
.day-view h4[b-qgzi8fxwca] {
    color: var(--text-primary, #1f2937);
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    padding-bottom: .75rem;
}
.appointment-time-large[b-qgzi8fxwca] {
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 100px;
}
.appointment-time[b-qgzi8fxwca] { font-weight: 600; white-space: nowrap; }
.appointment-patient[b-qgzi8fxwca] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-more[b-qgzi8fxwca] { padding: .25rem .5rem; font-size: .75rem; color: #3b82f6; font-weight:500; cursor:pointer; text-align:center; border-radius:4px; }
.appointment-more:hover[b-qgzi8fxwca] { background:#eff6ff; }
.calendar-event .event-time[b-qgzi8fxwca] { color: var(--text-muted, #6b7280); }
.calendar-event .event-title[b-qgzi8fxwca] { color: var(--text-primary, #1f2937); }
.calendar-event .event-user[b-qgzi8fxwca] { color: var(--text-secondary, #6b7280); }

/* Dark Mode */
.dark-mode .calendar-header[b-qgzi8fxwca],
.dark-mode .week-header[b-qgzi8fxwca] {
    background: var(--bg-primary, #181c20) !important;
    border-color: var(--border-color, #23272b);
}
.dark-mode .calendar-day-name[b-qgzi8fxwca],
.dark-mode .week-day-header .day-name[b-qgzi8fxwca] {
    color: var(--dark-text-muted, #9ca3af);
}
.dark-mode .calendar-day[b-qgzi8fxwca] {
    background: var(--bg-primary, #181c20) !important;
    border-color: var(--border-color, #23272b);
}
.dark-mode .calendar-day.today[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.22) !important;
    border-color: #3b82f6;
}
.dark-mode .calendar-day.selected[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.28) !important;
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 2px #3b82f6;
}
.dark-mode .calendar-day.other-month[b-qgzi8fxwca] {
    background: var(--bg-secondary, #23272b) !important;
}
.dark-mode .calendar-day.other-month .day-number[b-qgzi8fxwca] {
    color: #9ca3af;
    opacity: .7;
}
.dark-mode .day-number[b-qgzi8fxwca],
.dark-mode .week-day-header .day-number[b-qgzi8fxwca] {
    color: var(--dark-text-primary, #f3f6fa);
}
.dark-mode .appointment-more[b-qgzi8fxwca] {
    color: #60a5fa;
}
.dark-mode .appointment-more:hover[b-qgzi8fxwca] {
    background: #1e3a5f;
}
.dark-mode .calendar-day:hover[b-qgzi8fxwca] {
    background: rgba(59,130,246,0.15) !important;
}
.dark-mode .flag-scheduled[b-qgzi8fxwca] { background: var(--dark-flag-scheduled-bg, #0d4d7a); }
.dark-mode .flag-action[b-qgzi8fxwca] { background: var(--dark-flag-action-bg, #7a0d0d); }
.dark-mode .week-day-column[b-qgzi8fxwca] { border-color: #23272b; }
.dark-mode .week-body[b-qgzi8fxwca] { background: var(--dark-bg-primary, #181c20); }
.dark-mode .week-day-header.today[b-qgzi8fxwca] { background: rgba(59,130,246,0.18) !important; }
.dark-mode .selected-day-details h5[b-qgzi8fxwca],
.dark-mode .day-view h4[b-qgzi8fxwca] {
    color: var(--dark-text-primary, #f3f6fa);
    border-color: #23272b;
}
.dark-mode .selected-day-details[b-qgzi8fxwca] {
    background: var(--bg-primary, #181c20) !important;
    border-color: var(--border-color, #23272b);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.dark-mode .appointment-details-large .fw-bold[b-qgzi8fxwca],
.dark-mode .appointment-time-large[b-qgzi8fxwca] {
    color: var(--dark-text-primary, #f3f6fa);
}
.dark-mode .appointment-item.status-scheduled[b-qgzi8fxwca],
.dark-mode .appointment-detail-card.status-scheduled[b-qgzi8fxwca],
.dark-mode .day-appointment-card.status-scheduled[b-qgzi8fxwca],
.dark-mode .week-appointment.status-scheduled[b-qgzi8fxwca] {
    background: #1e3a5f !important;
    border-left-color: #60a5fa;
    color: #e0f2fe !important;
}
.dark-mode .appointment-detail-card.status-scheduled *[b-qgzi8fxwca] {
    color: #e0f2fe !important;
}
.dark-mode .appointment-item.status-completed[b-qgzi8fxwca],
.dark-mode .appointment-detail-card.status-completed[b-qgzi8fxwca],
.dark-mode .day-appointment-card.status-completed[b-qgzi8fxwca],
.dark-mode .week-appointment.status-completed[b-qgzi8fxwca] {
    background: #064e3b !important;
    border-left-color: #34d399;
    color: #d1fae5 !important;
}
.dark-mode .appointment-detail-card.status-completed *[b-qgzi8fxwca] {
    color: #d1fae5 !important;
}
.dark-mode .appointment-item.status-cancelled[b-qgzi8fxwca],
.dark-mode .appointment-detail-card.status-cancelled[b-qgzi8fxwca],
.dark-mode .day-appointment-card.status-cancelled[b-qgzi8fxwca],
.dark-mode .week-appointment.status-cancelled[b-qgzi8fxwca] {
    background: #450a0a !important;
    border-left-color: #f87171;
    color: #fecaca !important;
}
.dark-mode .appointment-detail-card.status-cancelled *[b-qgzi8fxwca] {
    color: #fecaca !important;
}
.dark-mode .appointment-item.status-noshow[b-qgzi8fxwca],
.dark-mode .appointment-detail-card.status-noshow[b-qgzi8fxwca],
.dark-mode .day-appointment-card.status-noshow[b-qgzi8fxwca],
.dark-mode .week-appointment.status-noshow[b-qgzi8fxwca] {
    background: #451a03 !important;
    border-left-color: #fbbf24;
    color: #fde68a !important;
}
.dark-mode .appointment-detail-card.status-noshow *[b-qgzi8fxwca] {
    color: #fde68a !important;
}
.dark-mode .appointment-item.status-default[b-qgzi8fxwca],
.dark-mode .appointment-detail-card.status-default[b-qgzi8fxwca],
.dark-mode .day-appointment-card.status-default[b-qgzi8fxwca],
.dark-mode .week-appointment.status-default[b-qgzi8fxwca] {
    background: #1f2937 !important;
    border-left-color: #9ca3af;
    color: #e5e7eb !important;
}
.dark-mode .appointment-detail-card.status-default *[b-qgzi8fxwca] {
    color: #e5e7eb !important;
}
.dark-mode .appointment-item:hover[b-qgzi8fxwca],
.dark-mode .appointment-detail-card:hover[b-qgzi8fxwca],
.dark-mode .day-appointment-card:hover[b-qgzi8fxwca],
.dark-mode .week-appointment:hover[b-qgzi8fxwca] {
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    filter: brightness(1.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .calendar-layout[b-qgzi8fxwca] {
        flex-direction: column;
    }
    
    .selected-day-details[b-qgzi8fxwca] {
        flex: 1 1 auto;
        max-width: 100%;
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .calendar-day[b-qgzi8fxwca] {
        min-height: 80px;
        padding: 0.375rem;
    }
    
    .calendar-day-name[b-qgzi8fxwca] {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .day-number[b-qgzi8fxwca] {
        font-size: 0.75rem;
    }
    
    .selected-day-details[b-qgzi8fxwca] {
        padding: 0.75rem 1rem;
    }
}
/* /Pages/AppointmentDetail.razor.rz.scp.css */
/* Status Badge */
.status-badge[b-qzwzy3oqo3] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: capitalize;
    letter-spacing: 0.05em;
}

.status-scheduled[b-qzwzy3oqo3] {
    background: #dbeafe;
    color: #1e40af;
    border: 2px solid #3b82f6;
}

.status-completed[b-qzwzy3oqo3] {
    background: #d1fae5;
    color: #065f46;
    border: 2px solid #10b981;
}

.status-cancelled[b-qzwzy3oqo3] {
    background: #fee2e2;
    color: #991b1b;
    border: 2px solid #ef4444;
}

.status-no-show[b-qzwzy3oqo3] {
    background: #fef3c7;
    color: #92400e;
    border: 2px solid #f59e0b;
}

.status-default[b-qzwzy3oqo3] {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #9ca3af;
}

/* Details Grid */
.appointment-details-grid[b-qzwzy3oqo3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* Detail Cards */
.detail-card[b-qzwzy3oqo3] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.detail-card:hover[b-qzwzy3oqo3] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.detail-card.full-width[b-qzwzy3oqo3] {
    grid-column: 1 / -1;
}

.detail-card-header[b-qzwzy3oqo3] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.12) 100%);
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #1f2937);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 60px;
}

.detail-card-header i[b-qzwzy3oqo3] {
    color: #3b82f6;
    font-size: 1.125rem;
}

.detail-card-body[b-qzwzy3oqo3] {
    padding: 1.5rem;
    background: var(--bg-primary, #ffffff);
}

/* Detail Items */
.detail-item[b-qzwzy3oqo3] {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.detail-item:last-child[b-qzwzy3oqo3] {
    margin-bottom: 0;
    border-bottom: none;
}

.detail-item label[b-qzwzy3oqo3] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.detail-value[b-qzwzy3oqo3] {
    font-size: 1rem;
    color: var(--text-primary, #1f2937);
    font-weight: 500;
}

.detail-value a[b-qzwzy3oqo3] {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-value a:hover[b-qzwzy3oqo3] {
    color: #2563eb;
    text-decoration: underline;
}

.detail-text-content[b-qzwzy3oqo3] {
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Audit Info */
.audit-info .detail-card-body[b-qzwzy3oqo3] {
    background: var(--bg-primary);
}

.audit-grid[b-qzwzy3oqo3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .appointment-details-grid[b-qzwzy3oqo3] {
        grid-template-columns: 1fr;
    }

    .detail-card-header[b-qzwzy3oqo3] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .detail-card-body[b-qzwzy3oqo3] {
        padding: 1rem;
    }

    .audit-grid[b-qzwzy3oqo3] {
        grid-template-columns: 1fr;
    }

    .status-badge[b-qzwzy3oqo3] {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Dark Mode */
/* Ensure dark-mode selectors match whether class is on html, body, or a wrapper */
/* =================== Dark Mode Styles =================== */

.dark-mode .detail-card[b-qzwzy3oqo3] {
    background: #0d1117 !important;
    border-color: #30363d;
}

.dark-mode .detail-card-body[b-qzwzy3oqo3] {
    background: #0d1117;
}

.dark-mode .detail-card-header[b-qzwzy3oqo3] {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: #f9fafb;
    border-color: #374151;
}

.dark-mode .detail-card-header i[b-qzwzy3oqo3] {
    color: #60a5fa;
}

.dark-mode .detail-item label[b-qzwzy3oqo3] {
    color: #9ca3af;
}

.dark-mode .detail-item[b-qzwzy3oqo3] {
    border-bottom-color: #30363d;
}

.dark-mode .detail-value[b-qzwzy3oqo3] {
    color: #f3f4f6;
}

.dark-mode .detail-value a[b-qzwzy3oqo3] {
    color: #60a5fa;
}

.dark-mode .detail-value a:hover[b-qzwzy3oqo3] {
    color: #93c5fd;
}

.dark-mode .detail-text-content[b-qzwzy3oqo3] {
    color: #d1d5db;
}

.dark-mode .audit-info .detail-card-body[b-qzwzy3oqo3] {
    background: #0d1117;
}

.dark-mode .status-scheduled[b-qzwzy3oqo3] {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #3b82f6;
}

.dark-mode .status-completed[b-qzwzy3oqo3] {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #10b981;
}

.dark-mode .status-cancelled[b-qzwzy3oqo3] {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #ef4444;
}

.dark-mode .status-no-show[b-qzwzy3oqo3] {
    background: #78350f;
    color: #fde68a;
    border-color: #f59e0b;
}

.dark-mode .status-default[b-qzwzy3oqo3] {
    background: #374151;
    color: #d1d5db;
    border-color: #6b7280;
}

.dark-mode .page-section[b-qzwzy3oqo3] {
    /* background: #0d1117; */
}

.dark-mode .page-section .card-header[b-qzwzy3oqo3] {
    background: #0d1117 !important;
    border-bottom: 1px solid #30363d;
}

/* Remove hardcoded light backgrounds */

.detail-card[b-qzwzy3oqo3],
.page-section[b-qzwzy3oqo3] {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.detail-card .muted[b-qzwzy3oqo3],
.page-section .muted[b-qzwzy3oqo3] {
    color: var(--text-muted);
}

.detail-card .card-header[b-qzwzy3oqo3],
.page-section .card-header[b-qzwzy3oqo3] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.badge[b-qzwzy3oqo3] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
/* /Pages/NotFoundPage.razor.rz.scp.css */
.notfound-container[b-plcxcl20xu] {
    min-height: 60vh;
    padding: 3rem 1.5rem;
}

.notfound-illustration[b-plcxcl20xu] {
    position: relative;
}

.notfound-illustration i[b-plcxcl20xu] {
    animation: float-b-plcxcl20xu 3s ease-in-out infinite;
    display: inline-block;
}

/* Floating animation for compass icon */
@keyframes float-b-plcxcl20xu {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Ensure button text is visible in both themes */
.notfound-container .btn[b-plcxcl20xu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
}

.notfound-container .btn i[b-plcxcl20xu] {
    flex-shrink: 0;
}

.notfound-container .btn a[b-plcxcl20xu] {
    text-decoration: none;
}

/* Light mode button styles - solid buttons only */
html:not(.dark-mode) .notfound-container .btn-primary[b-plcxcl20xu],
html:not(.dark-mode) .notfound-container a.btn-primary[b-plcxcl20xu] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

html:not(.dark-mode) .notfound-container .btn-primary:hover[b-plcxcl20xu],
html:not(.dark-mode) .notfound-container a.btn-primary:hover[b-plcxcl20xu] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    opacity: 0.9;
}

html:not(.dark-mode) .notfound-container .btn-secondary[b-plcxcl20xu],
html:not(.dark-mode) .notfound-container .btn-outline-secondary[b-plcxcl20xu] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

html:not(.dark-mode) .notfound-container .btn-secondary:hover[b-plcxcl20xu],
html:not(.dark-mode) .notfound-container .btn-outline-secondary:hover[b-plcxcl20xu] {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #fff !important;
}

/* Dark mode button styles */
:global(.dark-mode) .notfound-container .btn-primary[b-plcxcl20xu],
:global(.dark-mode) .notfound-container a.btn-primary[b-plcxcl20xu] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

:global(.dark-mode) .notfound-container .btn-primary:hover[b-plcxcl20xu],
:global(.dark-mode) .notfound-container a.btn-primary:hover[b-plcxcl20xu] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    opacity: 0.9;
}

:global(.dark-mode) .notfound-container .btn-secondary[b-plcxcl20xu],
:global(.dark-mode) .notfound-container .btn-outline-secondary[b-plcxcl20xu] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

:global(.dark-mode) .notfound-container .btn-secondary:hover[b-plcxcl20xu],
:global(.dark-mode) .notfound-container .btn-outline-secondary:hover[b-plcxcl20xu] {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #fff !important;
}

/* Override dark mode link color for button anchors */
:global(.dark-mode) .notfound-container .btn-primary[b-plcxcl20xu],
:global(.dark-mode) .notfound-container a.btn-primary[b-plcxcl20xu] {
    color: #fff !important;
}

:global(.dark-mode) .notfound-container .btn-primary:hover[b-plcxcl20xu],
:global(.dark-mode) .notfound-container a.btn-primary:hover[b-plcxcl20xu] {
    color: #fff !important;
}

/* Responsive */
@media (max-width: 767.98px) {
    .notfound-container[b-plcxcl20xu] {
        min-height: 50vh;
        padding: 2rem 1rem;
    }

    .notfound-illustration i[b-plcxcl20xu] {
        font-size: 2rem !important;
    }

    .notfound-container h1[b-plcxcl20xu] {
        font-size: 1.5rem;
    }

    .notfound-container .lead[b-plcxcl20xu] {
        font-size: 1rem;
    }
}
/* /Pages/PatientDetail.razor.rz.scp.css */

.card-header[b-rhbpzvwmj8] {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-bottom: 2px solid var(--bs-primary);
    padding: 1rem 1.25rem;
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .card-header[b-rhbpzvwmj8] {
    background: rgba(var(--bs-primary-rgb), 0.15);
    border-color: var(--bs-primary);
}

.card[b-rhbpzvwmj8] {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: white;
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .card[b-rhbpzvwmj8] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: #1a1d23;
    border-color: #2d3139;
}

.card:hover[b-rhbpzvwmj8] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .card:hover[b-rhbpzvwmj8] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.nav-pills .nav-link[b-rhbpzvwmj8] {
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
}

.nav-pills .nav-link:hover[b-rhbpzvwmj8] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}



/* Active tab appearance */
:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .nav-pills .nav-link.active[b-rhbpzvwmj8] {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Light mode (default) */
.nav-pills .nav-link.active[b-rhbpzvwmj8] {
    color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.08);
}

.nav-pills .nav-link.active i[b-rhbpzvwmj8] {
    color: var(--bs-primary) !important;
}

.nav-pills .nav-link i[b-rhbpzvwmj8] {
    margin-right: 0.5rem;
}

:global([dir="rtl"]) .nav-pills .nav-link i[b-rhbpzvwmj8] {
    margin-right: 0;
    margin-left: 0.5rem;
}

.form-label[b-rhbpzvwmj8] {
    margin-bottom: 0.25rem;
    color: var(--bs-secondary);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .form-label[b-rhbpzvwmj8] {
    color: #a0a4a8;
}

.form-control-plaintext[b-rhbpzvwmj8] {
    padding: 0.375rem 0;
    margin-bottom: 0;
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .form-control-plaintext[b-rhbpzvwmj8] {
    color: #e9ecef;
}

.form-control-plaintext a[b-rhbpzvwmj8] {
    color: var(--bs-primary);
    text-decoration: none;
}

.form-control-plaintext a:hover[b-rhbpzvwmj8] {
    text-decoration: underline;
}

.badge[b-rhbpzvwmj8] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
}

.btn-sm[b-rhbpzvwmj8] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-sm:hover[b-rhbpzvwmj8] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.d-grid.gap-2 button[b-rhbpzvwmj8] {
    justify-content: flex-start;
}

.d-grid.gap-2 button i[b-rhbpzvwmj8] {
    margin-right: 0.5rem;
    width: 1.25rem;
}

:global([dir="rtl"]) .d-grid.gap-2 button[b-rhbpzvwmj8] {
    text-align: right;
}

:global([dir="rtl"]) .d-grid.gap-2 button i[b-rhbpzvwmj8] {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ===== Modern Quick Actions Buttons ===== */
.quick-actions-grid[b-rhbpzvwmj8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.quick-action-btn[b-rhbpzvwmj8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

:global([dir="rtl"]) .quick-action-btn[b-rhbpzvwmj8] {
    text-align: right;
}

.quick-action-btn[b-rhbpzvwmj8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    transition: width 0.3s ease;
}

:global([dir="rtl"]) .quick-action-btn[b-rhbpzvwmj8]::before {
    left: auto;
    right: 0;
}

.quick-action-icon[b-rhbpzvwmj8] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.quick-action-text[b-rhbpzvwmj8] {
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Primary Button (Book Appointment) */
.quick-action-primary[b-rhbpzvwmj8] {
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.quick-action-primary .quick-action-icon[b-rhbpzvwmj8] {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}

.quick-action-primary .quick-action-text[b-rhbpzvwmj8] {
    color: #0d6efd;
}

.quick-action-primary[b-rhbpzvwmj8]::before {
    background: #0d6efd;
}

.quick-action-primary:hover[b-rhbpzvwmj8] {
    background: rgba(13, 110, 253, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

:global([dir="rtl"]) .quick-action-primary:hover[b-rhbpzvwmj8] {
    transform: translateX(-4px);
}

.quick-action-primary:hover[b-rhbpzvwmj8]::before {
    width: 100%;
    opacity: 0.08;
}

.quick-action-primary:hover .quick-action-icon[b-rhbpzvwmj8] {
    transform: scale(1.05);
    background: rgba(13, 110, 253, 0.25);
}

/* Success Button (Add Medical Record) */
.quick-action-success[b-rhbpzvwmj8] {
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.quick-action-success .quick-action-icon[b-rhbpzvwmj8] {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.quick-action-success .quick-action-text[b-rhbpzvwmj8] {
    color: #198754;
}

.quick-action-success[b-rhbpzvwmj8]::before {
    background: #198754;
}

.quick-action-success:hover[b-rhbpzvwmj8] {
    background: rgba(25, 135, 84, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.2);
}

:global([dir="rtl"]) .quick-action-success:hover[b-rhbpzvwmj8] {
    transform: translateX(-4px);
}

.quick-action-success:hover[b-rhbpzvwmj8]::before {
    width: 100%;
    opacity: 0.08;
}

.quick-action-success:hover .quick-action-icon[b-rhbpzvwmj8] {
    transform: scale(1.05);
    background: rgba(25, 135, 84, 0.25);
}

/* Info Button (Add Prescription) */
.quick-action-info[b-rhbpzvwmj8] {
    background: rgba(13, 202, 240, 0.08);
    border: 1px solid rgba(13, 202, 240, 0.2);
}

.quick-action-info .quick-action-icon[b-rhbpzvwmj8] {
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
}

.quick-action-info .quick-action-text[b-rhbpzvwmj8] {
    color: #0dcaf0;
}

.quick-action-info[b-rhbpzvwmj8]::before {
    background: #0dcaf0;
}

.quick-action-info:hover[b-rhbpzvwmj8] {
    background: rgba(13, 202, 240, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.2);
}

:global([dir="rtl"]) .quick-action-info:hover[b-rhbpzvwmj8] {
    transform: translateX(-4px);
}

.quick-action-info:hover[b-rhbpzvwmj8]::before {
    width: 100%;
    opacity: 0.08;
}

.quick-action-info:hover .quick-action-icon[b-rhbpzvwmj8] {
    transform: scale(1.05);
    background: rgba(13, 202, 240, 0.25);
}

/* Warning Button (Upload Document) */
.quick-action-warning[b-rhbpzvwmj8] {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.quick-action-warning .quick-action-icon[b-rhbpzvwmj8] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.quick-action-warning .quick-action-text[b-rhbpzvwmj8] {
    color: #ffc107;
}

.quick-action-warning[b-rhbpzvwmj8]::before {
    background: #ffc107;
}

.quick-action-warning:hover[b-rhbpzvwmj8] {
    background: rgba(255, 193, 7, 0.15);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

:global([dir="rtl"]) .quick-action-warning:hover[b-rhbpzvwmj8] {
    transform: translateX(-4px);
}

.quick-action-warning:hover[b-rhbpzvwmj8]::before {
    width: 100%;
    opacity: 0.08;
}

.quick-action-warning:hover .quick-action-icon[b-rhbpzvwmj8] {
    transform: scale(1.05);
    background: rgba(255, 193, 7, 0.25);
}

/* Dark Mode Quick Actions */
:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-primary[b-rhbpzvwmj8] {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-primary:hover[b-rhbpzvwmj8] {
    background: rgba(13, 110, 253, 0.2);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-success[b-rhbpzvwmj8] {
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-success:hover[b-rhbpzvwmj8] {
    background: rgba(25, 135, 84, 0.2);
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-info[b-rhbpzvwmj8] {
    background: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-info:hover[b-rhbpzvwmj8] {
    background: rgba(13, 202, 240, 0.2);
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-warning[b-rhbpzvwmj8] {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.3);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .quick-action-warning:hover[b-rhbpzvwmj8] {
    background: rgba(255, 193, 7, 0.2);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

/* Quick stats hover effect */
.card-body > .d-flex.flex-column.gap-3 > div[b-rhbpzvwmj8] {
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.card-body > .d-flex.flex-column.gap-3 > div:hover[b-rhbpzvwmj8] {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .card-body > .d-flex.flex-column.gap-3 > div:hover[b-rhbpzvwmj8] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .text-muted[b-rhbpzvwmj8] {
    color: #a0a4a8 !important;
}

/* Alert styling */
.alert[b-rhbpzvwmj8] {
    border-radius: 8px;
}

:global(html.dark-mode)[b-rhbpzvwmj8], :global(body.dark-mode)[b-rhbpzvwmj8], :global(.dark-mode) .alert-warning[b-rhbpzvwmj8] {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .page-section[b-rhbpzvwmj8] {
        padding: 1rem;
    }

    .nav-pills .nav-link[b-rhbpzvwmj8] {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .card-header h2[b-rhbpzvwmj8] {
        font-size: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .nav-pills[b-rhbpzvwmj8] {
        flex-direction: column;
    }

    .nav-pills .nav-link[b-rhbpzvwmj8] {
        margin: 0.125rem 0;
    }

    .card-header[b-rhbpzvwmj8] {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card-header > div[b-rhbpzvwmj8] {
        width: 100%;
    }

    .card-header > div:last-child[b-rhbpzvwmj8] {
        margin-top: 0.75rem;
    }
}
/* /Pages/PatientHistory.razor.rz.scp.css */


.card-header[b-jxrtb88czm] {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-bottom: 2px solid var(--bs-primary);
    padding: 1rem 1.25rem;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .card-header[b-jxrtb88czm] {
    background: rgba(var(--bs-primary-rgb), 0.15);
    border-color: var(--bs-primary);
}

.card[b-jxrtb88czm] {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .card[b-jxrtb88czm] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: #1a1d23;
    border-color: #2d3139;
}

.nav-pills .nav-link[b-jxrtb88czm] {
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
}

.nav-pills .nav-link:hover[b-jxrtb88czm] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Active tab appearance */
:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .nav-pills .nav-link.active[b-jxrtb88czm] {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Light mode (default) */
.nav-pills .nav-link.active[b-jxrtb88czm] {
    color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.08);
}

.nav-pills .nav-link.active i[b-jxrtb88czm] {
    color: var(--bs-primary) !important;
}

/* Timeline Styles */
.timeline-container[b-jxrtb88czm] {
    position: relative;
    padding-right: 2rem;
}

:global([dir="rtl"]) .timeline-container[b-jxrtb88czm] {
    padding-right: 0;
    padding-left: 2rem;
}

.timeline-container[b-jxrtb88czm]::before {
    content: '';
    position: absolute;
    right: 0.625rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-success) 50%, var(--bs-info) 100%);
    border-radius: 2px;
}

:global([dir="rtl"]) .timeline-container[b-jxrtb88czm]::before {
    right: auto;
    left: 0.625rem;
}

.timeline-item[b-jxrtb88czm] {
    position: relative;
    margin-bottom: 2rem;
    padding-right: 2rem;
}

:global([dir="rtl"]) .timeline-item[b-jxrtb88czm] {
    padding-right: 0;
    padding-left: 2rem;
}

.timeline-marker[b-jxrtb88czm] {
    position: absolute;
    right: -1.25rem;
    top: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: white;
    border: 3px solid;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

:global([dir="rtl"]) .timeline-marker[b-jxrtb88czm] {
    right: auto;
    left: -1.25rem;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .timeline-marker[b-jxrtb88czm] {
    background: #1a1d23;
}

.timeline-appointment .timeline-marker[b-jxrtb88czm] {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.timeline-prescription .timeline-marker[b-jxrtb88czm] {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

.timeline-record .timeline-marker[b-jxrtb88czm] {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

.timeline-vitals .timeline-marker[b-jxrtb88czm] {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.timeline-content[b-jxrtb88czm] {
    transition: all 0.3s ease;
}

.timeline-content:hover[b-jxrtb88czm] {
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

:global([dir="rtl"]) .timeline-content:hover[b-jxrtb88czm] {
    transform: translateX(5px);
}

.timeline-content .card-body[b-jxrtb88czm] {
    padding: 1.25rem;
}

/* Vital Signs Cards */
.vital-signs[b-jxrtb88czm] {
    background: rgba(var(--bs-primary-rgb), 0.05);
    padding: 1rem;
    border-radius: 8px;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .vital-signs[b-jxrtb88czm] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.vital-sign-card[b-jxrtb88czm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .vital-sign-card[b-jxrtb88czm] {
    background: #2d3139;
    border-color: rgba(255, 255, 255, 0.1);
}

.vital-sign-card:hover[b-jxrtb88czm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.vital-sign-card i[b-jxrtb88czm] {
    font-size: 1.5rem;
}

.vital-sign-card small[b-jxrtb88czm] {
    display: block;
    font-size: 0.75rem;
}

.vital-sign-card .fw-bold[b-jxrtb88czm] {
    font-size: 1rem;
}

/* Badge Styles */
.badge[b-jxrtb88czm] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

/* Alert Styles */
.alert[b-jxrtb88czm] {
    border-radius: 8px;
    border: none;
}

.alert-info[b-jxrtb88czm] {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .alert-info[b-jxrtb88czm] {
    background: rgba(var(--bs-info-rgb), 0.15);
    color: #63c2de;
}

/* Filter Section */
.form-control[b-jxrtb88czm],
.form-select[b-jxrtb88czm] {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .form-control[b-jxrtb88czm],
:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .form-select[b-jxrtb88czm] {
    background-color: #2d3139;
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.form-control:focus[b-jxrtb88czm],
.form-select:focus[b-jxrtb88czm] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-label[b-jxrtb88czm] {
    margin-bottom: 0.25rem;
    color: var(--bs-secondary);
}

:global(html.dark-mode)[b-jxrtb88czm], :global(body.dark-mode)[b-jxrtb88czm], :global(.dark-mode) .form-label[b-jxrtb88czm] {
    color: #a0a4a8;
}

/* Button Styles */
.btn-sm[b-jxrtb88czm] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-sm:hover[b-jxrtb88czm] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .page-section[b-jxrtb88czm] {
        padding: 1rem;
    }

    .timeline-container[b-jxrtb88czm] {
        padding-right: 1.5rem;
    }

    :global([dir="rtl"]) .timeline-container[b-jxrtb88czm] {
        padding-right: 0;
        padding-left: 1.5rem;
    }

    .timeline-container[b-jxrtb88czm]::before {
        right: 0.5rem;
    }

    :global([dir="rtl"]) .timeline-container[b-jxrtb88czm]::before {
        right: auto;
        left: 0.5rem;
    }

    .timeline-item[b-jxrtb88czm] {
        padding-right: 1.5rem;
    }

    :global([dir="rtl"]) .timeline-item[b-jxrtb88czm] {
        padding-right: 0;
        padding-left: 1.5rem;
    }

    .timeline-marker[b-jxrtb88czm] {
        right: -1rem;
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    :global([dir="rtl"]) .timeline-marker[b-jxrtb88czm] {
        right: auto;
        left: -1rem;
    }

    .nav-pills[b-jxrtb88czm] {
        flex-direction: column;
    }

    .nav-pills .nav-link[b-jxrtb88czm] {
        margin: 0.125rem 0;
    }

    .card-header[b-jxrtb88czm] {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .vital-signs .row[b-jxrtb88czm] {
        flex-direction: column;
    }
}

/* Animation */
@keyframes slideInRight-b-jxrtb88czm {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft-b-jxrtb88czm {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-item[b-jxrtb88czm] {
    animation: slideInLeft-b-jxrtb88czm 0.5s ease-out;
}

:global([dir="rtl"]) .timeline-item[b-jxrtb88czm] {
    animation: slideInRight-b-jxrtb88czm 0.5s ease-out;
}
/* /Shared/Components/Loading.razor.rz.scp.css */
.hp-loading[b-7fr91ws1ak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--loading-foreground, #0b3b5a);
    font-size: 0.95rem;
}

/* Spinner (indeterminate) */
.hp-spinner[b-7fr91ws1ak] {
    width: var(--loading-spinner-size, 1rem);
    height: var(--loading-spinner-size, 1rem);
    border-radius: 50%;
    border: 2px solid var(--loading-bg, rgba(0,0,0,0.08));
    border-top-color: var(--loading-primary, #1b6ec2);
    animation: hp-spin-b-7fr91ws1ak 800ms linear infinite;
}

@keyframes hp-spin-b-7fr91ws1ak {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hp-loading-text[b-7fr91ws1ak] {
    color: var(--loading-foreground, #0b3b5a);
    font-size: 0.9rem;
}

/* Determinate progress bar */
.hp-progress[b-7fr91ws1ak] {
    width: 10rem;
    height: var(--loading-height, 0.5rem);
    background: var(--loading-track, rgba(0,0,0,0.06));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.hp-progress-bar[b-7fr91ws1ak] {
    height: 100%;
    background: linear-gradient(90deg, var(--loading-primary, #1b6ec2), var(--loading-accent, #59a3ff));
    transition: width 250ms ease;
}

/* Small responsive tweaks */
@media (max-width: 576px) {
    .hp-progress[b-7fr91ws1ak] { width: 7.5rem; }
}
/* /Shared/Components/LoadingOverlay.razor.rz.scp.css */
.hp-loading-overlay[b-col2n0e0yr] {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10500;
    transition: opacity 250ms ease, visibility 250ms ease, backdrop-filter 250ms ease;
    opacity: 0;
    visibility: hidden;
}

.hp-loading-overlay.show[b-col2n0e0yr] {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.hp-loading-overlay.finishing[b-col2n0e0yr] {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}

/* Modern glass-morphism panel */
.hp-loading-panel[b-col2n0e0yr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 140px;
    transform: scale(0.9);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-loading-overlay.show .hp-loading-panel[b-col2n0e0yr] {
    transform: scale(1);
}

.hp-loading-overlay.finishing .hp-loading-panel[b-col2n0e0yr] {
    transform: scale(0.85);
}

/* Dark mode glass-morphism */
.dark-mode .hp-loading-panel[b-col2n0e0yr] {
    background: rgba(17, 24, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Modern multi-ring spinner container */
.hp-spinner-container[b-col2n0e0yr] {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated gradient rings */
.hp-spinner-ring[b-col2n0e0yr] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3b82f6;
    border-right-color: #3b82f6;
    animation: hp-spin-b-col2n0e0yr 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.hp-spinner-ring-2[b-col2n0e0yr] {
    width: 75%;
    height: 75%;
    border-top-color: #22c55e;
    border-right-color: #22c55e;
    animation-duration: 1s;
    animation-direction: reverse;
}

/* Pulsing center dot */
.hp-spinner-pulse[b-col2n0e0yr] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    animation: hp-pulse-b-col2n0e0yr 1.5s ease-in-out infinite;
}

@keyframes hp-spin-b-col2n0e0yr {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes hp-pulse-b-col2n0e0yr {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.3);
        opacity: 1;
    }
}

.hp-overlay-text[b-col2n0e0yr] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.dark-mode .hp-overlay-text[b-col2n0e0yr] {
    color: #f3f4f6;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hp-loading-panel[b-col2n0e0yr] {
        transition: opacity 250ms ease;
    }
    .hp-spinner-ring[b-col2n0e0yr],
    .hp-spinner-pulse[b-col2n0e0yr] {
        animation: none !important;
    }
    .hp-spinner-ring[b-col2n0e0yr] {
        border-top-color: #3b82f6;
        border-right-color: #3b82f6;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}
/* /Shared/Components/PatientTabs.razor.rz.scp.css */
/* Remove focus/active borders and rings on patient tabs, including dark mode */
.patient-tabs .nav-link:focus[b-g5n5hqkc18],
.patient-tabs .nav-link:focus-visible[b-g5n5hqkc18],
.patient-tabs .nav-link:active[b-g5n5hqkc18] {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Keep active tab styling to color background, but avoid borders */
.patient-tabs .nav-link.active[b-g5n5hqkc18] {
    border-color: transparent !important;
}

/* Also ensure anchor default focus does not add any ring */
.patient-tabs a:focus[b-g5n5hqkc18],
.patient-tabs a:focus-visible[b-g5n5hqkc18] {
    outline: none !important;
    box-shadow: none !important;
}
/* /Shared/DataTable.razor.rz.scp.css */
/* Compact layout for page size selector (Show X Entries)
   Works for both LTR and RTL; keeps tight spacing and a narrow select width. */
.page-size-compact[b-pjcpakterh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem !important; /* override Bootstrap gap-2 for tighter spacing */
}

.page-size-compact .pagesize-prefix[b-pjcpakterh],
.page-size-compact .pagesize-suffix[b-pjcpakterh] {
    color: var(--muted, #6b7280);
    font-size: 0.85rem;
    line-height: 1;
}

/* Keep the select narrow and centered */
.page-size-compact .form-select.form-select-sm[b-pjcpakterh] {
    width: 64px; /* narrow */
    min-width: 64px;
    max-width: 72px;
    padding-inline: 0.4rem;
    text-align: center;
}

/* In RTL, keep numbers readable (left-to-right numerals) and center */
:global([dir="rtl"]) .page-size-compact .form-select.form-select-sm[b-pjcpakterh] {
    direction: ltr;
    text-align: center;
}

/* RTL: Flip the header column alignment 
   In AR mode: Search on right, Show entries on left */
.datatable-header .col-md-6:last-child[b-pjcpakterh] {
    /* Show entries column */
    text-align: right;
}

:global([dir="rtl"]) .datatable-header .col-md-6:first-child[b-pjcpakterh] {
    text-align: right;
}

:global([dir="rtl"]) .datatable-header .col-md-6:last-child[b-pjcpakterh] {
    text-align: left;
}

:global([dir="rtl"]) .datatable-header .col-md-6:last-child .d-flex[b-pjcpakterh] {
    justify-content: flex-start !important;
}
/* /Shared/GlobalSearch.razor.rz.scp.css */
/* Global Search Overlay */
/* Center overlay horizontally, keep near top */
.global-search-overlay[b-gia2e4ij5h] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--navbar-height, 64px) + 24px);
    animation: fadeIn-b-gia2e4ij5h 0.2s ease-out;
}

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

/* Search Container */
.global-search-container[b-gia2e4ij5h] {
    background: var(--gs-bg, #fff);
    border-radius: 12px;
    border: 1.5px solid var(--gs-border, #e9ecef);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: min(90%, 640px);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-gia2e4ij5h 0.3s ease-out;
    margin: 0 auto;
}

@keyframes slideDown-b-gia2e4ij5h {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Search Header */
.global-search-header[b-gia2e4ij5h] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    gap: 0.75rem;
}

.search-icon[b-gia2e4ij5h] {
    color: #6c757d;
    font-size: 1.25rem;
}

.global-search-input[b-gia2e4ij5h] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.125rem;
    color: #212529;
    background: transparent;
}

.global-search-input[b-gia2e4ij5h]::placeholder {
    color: #adb5bd;
}

.global-search-close[b-gia2e4ij5h] {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.global-search-close:hover[b-gia2e4ij5h] {
    background-color: #f8f9fa;
    color: #212529;
}

/* Search Body */
.global-search-body[b-gia2e4ij5h] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    min-height: 200px;
    max-height: 50vh;
}

.global-search-loading[b-gia2e4ij5h],
.global-search-empty[b-gia2e4ij5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.search-shortcuts[b-gia2e4ij5h] {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Search Category */
.search-category[b-gia2e4ij5h] {
    margin-bottom: 1rem;
}

.search-category-header[b-gia2e4ij5h] {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Search Result Item */
.search-result-item[b-gia2e4ij5h] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.search-result-item:hover[b-gia2e4ij5h],
.search-result-item.selected[b-gia2e4ij5h] {
    background-color: #f8f9fa;
    border-left-color: #0d6efd;
}

.result-icon[b-gia2e4ij5h] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #e7f1ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.result-content[b-gia2e4ij5h] {
    flex: 1;
    min-width: 0;
}

.result-title[b-gia2e4ij5h] {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subtitle[b-gia2e4ij5h] {
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-arrow[b-gia2e4ij5h] {
    color: #adb5bd;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-result-item:hover .result-arrow[b-gia2e4ij5h],
.search-result-item.selected .result-arrow[b-gia2e4ij5h] {
    opacity: 1;
}

/* Search Footer */
.global-search-footer[b-gia2e4ij5h] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.search-tips[b-gia2e4ij5h] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: #6c757d;
}

kbd[b-gia2e4ij5h] {
    background-color: var(--gs-kbd-bg, #f8f9fa);
    border: 1px solid var(--gs-kbd-border, #dee2e6);
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--gs-kbd-color, #212529);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Dark Mode Support */

/* Dark mode variables */
:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode)[b-gia2e4ij5h] {
    --gs-bg: #23272b;
    --gs-border: #495057;
    --gs-kbd-bg: #23272b;
    --gs-kbd-border: #495057;
    --gs-kbd-color: #e9ecef;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-container[b-gia2e4ij5h] {
    background: var(--gs-bg, #1a1d20);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-header[b-gia2e4ij5h] {
    border-bottom-color: #495057;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .search-icon[b-gia2e4ij5h] {
    color: #adb5bd;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-input[b-gia2e4ij5h] {
    color: #e9ecef;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-input[b-gia2e4ij5h]::placeholder {
    color: #6c757d;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-close[b-gia2e4ij5h] {
    color: #adb5bd;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-close:hover[b-gia2e4ij5h] {
    background-color: #2d3339;
    color: #e9ecef;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .search-category-header[b-gia2e4ij5h] {
    color: #adb5bd;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .search-result-item:hover[b-gia2e4ij5h],
:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .search-result-item.selected[b-gia2e4ij5h] {
    background-color: #2d3339;
    border-left-color: #0d6efd;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .result-icon[b-gia2e4ij5h] {
    background-color: rgba(13, 110, 253, 0.2);
    color: #4d9aff;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .result-title[b-gia2e4ij5h] {
    color: #e9ecef;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .result-subtitle[b-gia2e4ij5h] {
    color: #adb5bd;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .global-search-footer[b-gia2e4ij5h] {
    border-top-color: #495057;
    background-color: #212529;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .search-tips[b-gia2e4ij5h] {
    color: #adb5bd;
}

/* kbd dark mode now handled by variables above */

/* RTL Support */
:global([dir="rtl"]) .search-result-item[b-gia2e4ij5h] {
    border-left: none;
    border-right: 3px solid transparent;
}

:global([dir="rtl"]) .search-result-item:hover[b-gia2e4ij5h],
:global([dir="rtl"]) .search-result-item.selected[b-gia2e4ij5h] {
    border-right-color: #0d6efd;
}

:global([dir="rtl"]) .result-arrow[b-gia2e4ij5h] {
    transform: scaleX(-1);
}

/* In RTL, anchor towards left edge */
:global([dir="rtl"]) .global-search-overlay[b-gia2e4ij5h] {
    justify-content: flex-start;
}

:global([dir="rtl"]) .global-search-container[b-gia2e4ij5h] {
    margin-right: 0;
    margin-left: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .global-search-overlay[b-gia2e4ij5h] {
        padding-top: calc(var(--navbar-height, 56px) + 4px);
    }

    .global-search-container[b-gia2e4ij5h] {
        width: 96%;
        max-height: 80vh;
    }

    .global-search-header[b-gia2e4ij5h] {
        padding: 0.875rem 1rem;
    }

    .global-search-input[b-gia2e4ij5h] {
        font-size: 1rem;
    }

    .search-result-item[b-gia2e4ij5h] {
        padding: 0.625rem 1rem;
    }

    .result-icon[b-gia2e4ij5h] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .search-tips[b-gia2e4ij5h] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* Highlight matched text */
:global(.highlight)[b-gia2e4ij5h] {
    background-color: #fff3cd;
    color: #856404;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}

:global(.dark-mode .highlight)[b-gia2e4ij5h] {
    background-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* Show more button */
.show-more-btn[b-gia2e4ij5h] {
    width: 100%;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: #0d6efd;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.show-more-btn:hover[b-gia2e4ij5h] {
    background-color: #f8f9fa;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .show-more-btn[b-gia2e4ij5h] {
    color: #4d9aff;
}

:global(html.dark-mode)[b-gia2e4ij5h], :global(body.dark-mode)[b-gia2e4ij5h], :global(.dark-mode) .show-more-btn:hover[b-gia2e4ij5h] {
    background-color: #2d3339;
}
/* /Shared/NavbarSearch.razor.rz.scp.css */
/* Light Mode - Professional white/silver palette */
.navbar-search-wrapper[b-jflefaup8v]{position:relative;display:flex;align-items:center;flex:1;justify-content:center;}
.navbar-search-box[b-jflefaup8v]{position:relative;display:flex;align-items:center;background:#ffffff;border:1px solid #e5e7eb;border-radius:20px;padding:6px 12px;min-width:360px;max-width:720px;width:60%;opacity:.65;transition:all .22s ease;backdrop-filter:saturate(140%) blur(4px);}
.navbar-search-box:focus-within[b-jflefaup8v]{opacity:1;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none !important;}
.navbar-search-box:hover[b-jflefaup8v]{opacity:.85;}
.navbar-search-input[b-jflefaup8v]{flex:1;border:none;outline:none !important;background:transparent;color:#1f2937;padding:4px 8px;min-width:0;font-size:.95rem;line-height:1.5;}
.navbar-search-input:focus[b-jflefaup8v]{outline:none !important;box-shadow:none !important;}
.navbar-search-input[b-jflefaup8v]::placeholder{color:#6b7280;transition:color .25s ease;}
.navbar-search-box:focus-within .navbar-search-input[b-jflefaup8v]::placeholder{color:#9ca3af;}
.search-icon[b-jflefaup8v]{color:#6b7280;cursor:pointer;margin-inline-start:2px;margin-inline-end:8px;font-size:1rem;transition:color .25s ease, transform .25s ease;}
.navbar-search-box:focus-within .search-icon[b-jflefaup8v]{color:#3b82f6;transform:scale(1.05);} 
.clear-btn[b-jflefaup8v]{border:none;background:transparent;color:#6b7280;cursor:pointer;padding:4px 6px;margin-inline-start:4px;border-radius:4px;font-size:.9rem;transition:background-color .2s ease;outline:none !important;}
.clear-btn:hover[b-jflefaup8v]{background-color:#f3f4f6;}
.clear-btn:focus[b-jflefaup8v]{outline:none !important;box-shadow:none !important;}

/* Light Mode Results Panel - Professional white with subtle shadow */
.navbar-search-panel[b-jflefaup8v]{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:10000;width:min(92vw,600px);background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 20px 50px -10px rgba(0,0,0,.15),0 10px 25px -5px rgba(0,0,0,.1);padding:.75rem;max-height:70vh;overflow-y:auto;animation:fadeSlide-b-jflefaup8v .2s ease;}
@keyframes fadeSlide-b-jflefaup8v{from{opacity:0;transform:translateX(-50%) translateY(-6px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

.search-loading[b-jflefaup8v],.search-empty[b-jflefaup8v]{display:flex;align-items:center;justify-content:center;color:#6b7280;padding:2rem 1rem;font-size:.9rem;}

/* Result Groups - Better spacing and hierarchy */
.result-group[b-jflefaup8v]{margin-bottom:.75rem;}
.result-group:last-child[b-jflefaup8v]{margin-bottom:0;}
.group-header[b-jflefaup8v]{font-size:.7rem;font-weight:600;text-transform:uppercase;color:#6b7280;padding:.4rem .75rem;display:flex;gap:.5rem;align-items:center;letter-spacing:.5px;margin-bottom:.25rem;}

/* Light Mode Result Items - Professional silver hover */
.result-item[b-jflefaup8v]{display:flex;gap:.75rem;align-items:center;padding:.65rem .75rem;margin-bottom:.25rem;border-radius:10px;cursor:pointer;background-color:transparent;border:1px solid transparent;transition:all .15s ease;}
.result-item:hover[b-jflefaup8v]{background-color:#f9fafb;border-color:#e5e7eb;transform:translateX(2px);}
.result-item:active[b-jflefaup8v]{transform:scale(.985);} 

/* Icon styling - Professional blue gradient */
.icon[b-jflefaup8v]{width:38px;height:38px;min-width:38px;border-radius:10px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;box-shadow:0 2px 4px rgba(59,130,246,.1);}

/* Content area - Better typography and spacing */
.content[b-jflefaup8v]{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:.15rem;}
.title[b-jflefaup8v]{color:#1f2937;font-weight:600;font-size:.95rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.subtitle[b-jflefaup8v]{color:#6b7280;font-size:.82rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;}

/* Arrow indicator - More visible */
.arrow[b-jflefaup8v]{color:#9ca3af;opacity:0;font-size:.85rem;flex-shrink:0;transition:all .2s ease;}
.result-item:hover .arrow[b-jflefaup8v]{opacity:1;transform:translateX(2px);color:#3b82f6;}

/* Show more button */
.show-more[b-jflefaup8v]{color:#3b82f6;font-size:.85rem;font-weight:500;padding:.4rem .75rem;cursor:pointer;border-radius:6px;text-align:center;transition:background-color .15s ease;margin-top:.25rem;}
.show-more:hover[b-jflefaup8v]{background-color:#f9fafb;} 

/* Highlight matched text - Professional yellow */
:global(.highlight)[b-jflefaup8v]{background:#fef3c7;color:#92400e;padding:1px 4px;border-radius:3px;font-weight:700;box-shadow:0 0 0 1px rgba(251,191,36,.25) inset;}

/* RTL Support */
:global([dir="rtl"]) .navbar-search-panel[b-jflefaup8v]{left:50%;right:auto;transform:translateX(-50%);}
:global([dir="rtl"]) .arrow[b-jflefaup8v]{transform:scaleX(-1);}
:global([dir="rtl"]) .result-item:hover .arrow[b-jflefaup8v]{transform:scaleX(-1) translateX(-2px);}

/* Responsive Design */
@media(max-width:768px){
    .navbar-search-box[b-jflefaup8v]{min-width:240px;max-width:100%;width:100%;padding:5px 10px;}
    .navbar-search-panel[b-jflefaup8v]{width:95vw;max-height:60vh;}
    .result-item[b-jflefaup8v]{padding:.55rem .65rem;}
    .icon[b-jflefaup8v]{width:34px;height:34px;min-width:34px;font-size:.95rem;}
    .title[b-jflefaup8v]{font-size:.9rem;}
    .subtitle[b-jflefaup8v]{font-size:.8rem;}
}

@media(max-width:480px){
    .navbar-search-box[b-jflefaup8v]{min-width:200px;padding:4px 8px;}
    .navbar-search-input[b-jflefaup8v]{font-size:.9rem;}
    .search-icon[b-jflefaup8v]{font-size:.9rem;margin-inline-end:6px;}
    .icon[b-jflefaup8v]{width:32px;height:32px;min-width:32px;}
}

/* Dark Mode - Same color as dark mode background */
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-box[b-jflefaup8v]{background:#1a1d20;border-color:#3a3f44;opacity:.6;box-shadow:0 1px 0 rgba(0,0,0,.2) inset;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-box:focus-within[b-jflefaup8v]{background:#1a1d20;opacity:1;border-color:#0d6efd;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-input[b-jflefaup8v]{color:#e9ecef;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-input[b-jflefaup8v]::placeholder{color:#9ca3af;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .search-icon[b-jflefaup8v]{color:#9ca3af;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-box:focus-within .search-icon[b-jflefaup8v]{color:#0d6efd;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .clear-btn[b-jflefaup8v]{color:#9ca3af;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .clear-btn:hover[b-jflefaup8v]{background-color:rgba(255,255,255,0.08);}

/* Dark Mode Results Panel - Same as dark mode background */
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .navbar-search-panel[b-jflefaup8v]{background:#1a1d20;border-color:#3a3f44;box-shadow:0 18px 48px -8px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.3);}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .search-loading[b-jflefaup8v]{color:#adb5bd;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .search-empty[b-jflefaup8v]{color:#adb5bd;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .group-header[b-jflefaup8v]{color:#adb5bd;}

/* Dark Mode Result Items - Different color hover with white text */
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .result-item[b-jflefaup8v]{background-color:transparent;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .result-item:hover[b-jflefaup8v]{background-color:#2d3238;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .icon[b-jflefaup8v]{background:linear-gradient(135deg,rgba(13,110,253,.3),rgba(13,110,253,.2));color:#5ea4ff;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .title[b-jflefaup8v]{color:#ffffff;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .subtitle[b-jflefaup8v]{color:#adb5bd;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .arrow[b-jflefaup8v]{color:#6c757d;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .show-more[b-jflefaup8v]{color:#5ea4ff;}
:global(html.dark-mode)[b-jflefaup8v], :global(body.dark-mode)[b-jflefaup8v], :global(.dark-mode) .show-more:hover[b-jflefaup8v]{background-color:#2d3238;}
:global(.dark-mode .highlight)[b-jflefaup8v]{background:rgba(255,193,7,0.25);color:#ffc107;box-shadow:0 0 0 1px rgba(255,193,7,0.3) inset;}
:global([dir="rtl"]) .navbar-search-panel[b-jflefaup8v]{left:50%;right:auto;transform:translateX(-50%);}
@media(max-width:768px){.navbar-search-box[b-jflefaup8v]{min-width:200px;max-width:100%;width:100%;}.navbar-search-panel[b-jflefaup8v]{width:95vw;}}