/* Dashboard Components - Vanilla CSS Utilities
 * Extracted from Phase 6 Modernization
 * Purpose: Reusable styles for dashboard modals, tables, grids, and controls
 * Status: Phase 6 Active
 */

/* ====== VARIABLES ====== */

:root {
    --primary: #0078d4;
    --primary-hover: #106ebe;
    --primary-pressed: #005a9e;
    --neutral-primary: #323130;
    --neutral-secondary: #605e5c;
    --neutral-tertiary: #8a8886;
    --neutral-light: #f3f2f1;
    --neutral-lighter: #faf9f8;
    --border: #c8c6c4;
    --border-light: #d0cccb;
    --success: #107c10;
    --warning: #ffb900;
    --error: #d42b1f;
    --error-light: #fed9cc;
    --white: #ffffff;
}

/* Ensure section anchors don't tuck under the Quick Access toolbar when scrolled into view */
[id^="kpiCharts"],
#pmChartRevenueTrend {
    scroll-margin-top: 96px;
}

/* Prevent fixed headers from creating an invisible click-blocking layer over dashboards */
.dashboard-header {
	pointer-events: none;
}

.dashboard-header a,
.dashboard-header button,
.dashboard-header input,
.dashboard-header select,
.dashboard-header textarea,
.dashboard-header [role="button"],
.dashboard-header .toolbar-control {
	pointer-events: auto;
}

/* Practice Mgmt KPI toolbar controls must always be clickable */
#queueCardContent .dashboard-toolbar,
#queueCardContent .dashboard-toolbar * {
	pointer-events: auto;
}

/* Queue card header should not block clicks intended for the toolbar below */
#queueCardContent .dashboard-header,
#queueCardContent .dashboard-header-content {
	pointer-events: none;
}

#queueCardContent .dashboard-header a,
#queueCardContent .dashboard-header button,
#queueCardContent .dashboard-header input,
#queueCardContent .dashboard-header select,
#queueCardContent .dashboard-header [role="button"] {
	pointer-events: auto;
}

/* Ensure the queue card header doesn't overlay subsequent toolbar/body areas */
#queueCardContent .dashboard-header {
	position: static;
}

/* KPI toolbar: prevent dropdown container from creating an invisible overlay that blocks clicks (e.g., Go button). */
.dashboard-toolbar .dropdown-container {
	position: relative;
	z-index: 10;
}

/* Ensure the Go button remains clickable even if other toolbar elements overlap */
.dashboard-toolbar #pmKpiGoBtn {
	position: relative;
	z-index: 20;
	pointer-events: auto;
}

.dashboard-toolbar .dropdown-container .fluent-dropdown-menu {
	position: absolute;
	right: 0;
}

/* If dropdown is hidden via display:none, it's already non-interactive; this also covers cases where visibility/opacity is used */
.dashboard-toolbar .fluent-dropdown-menu {
	pointer-events: none;
	display: none;
}

.dashboard-toolbar .fluent-dropdown-menu {
	pointer-events: none;
	display: none;
}

.dashboard-toolbar .dropdown-container.open .fluent-dropdown-menu,
.dashboard-toolbar .fluent-dropdown-menu.show,
.dashboard-toolbar .fluent-dropdown-menu.active {
	pointer-events: auto;
	display: block;
}

/* Hard override for the actual toast host element to escape any stacking contexts */
#alert-container {
    position: fixed !important;
    right: 60px !important;
    top: 90px !important;
    z-index: 2147483647 !important;
    isolation: isolate;
    transform: translateZ(0);
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
}

/* When a dashboard wrapper is present, align to its right edge */
body:has(.wip-card-wrapper) #alert-container {
    right: 60px !important;
}

/* When the right sidebar is open, keep toasts aligned with the dashboard's adjusted right edge */
body.sidebar-open #alert-container {
    right: 792px !important;
}

#alert-container .fluent-alert {
    pointer-events: auto;
}

/* If any parent/layout applies transforms, ensure container still paints on top */
body > #alert-container {
    position: fixed;
}

/* ====== DASHBOARD WRAPPER ====== */

.dashboard-container {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
}

/* ====== QUEUE DASHBOARD ====== */

.wip-card-wrapper {
    background: var(--white);
    border-radius: 12px; /* Fluent UI rounded corners on all sides */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: visible; /* Allow rounded corners to show - don't clip */
    border: 1px solid #f0f0f0;
    min-height: calc(100vh - 240px);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 120px !important; /* default: 60px (sidebar) + 60px spacing */
    top: 78px; /* 60px (header) + 18px (1/4 inch spacing) */
    bottom: 48px; /* ORIGINAL 1/2 inch (48px) spacing from footer */
    right: 60px !important; /* 60px (5/8 inch) from right viewport (matches left spacing) */
    width: calc(100vw - 180px) !important; /* viewport - 120px(left) - 60px(right) */
    margin: 0;
    box-sizing: border-box;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 950; /* Ensure dashboard wrapper renders above the fixed left gutter */
}

/* Patient Accounts only: account for gutter column (sidebar 60 + gutter 60 + spacing 60) */
body.has-pa-gutter .wip-card-wrapper {
    left: 396px !important; /* reduced gap between gutter and dashboard (another 24px) */
    width: calc(100vw - 456px) !important; /* 396px(left) + 60px(right) */
}

/* When right sidebar opens, adjust width to accommodate sidebar with extra spacing */
body.sidebar-open .wip-card-wrapper {
    right: 792px !important;
    width: calc(100vw - 912px) !important; /* viewport - 120px(left) - 792px(right) */
}

/* Patient Accounts only: right sidebar open width calc when gutter is present */
body.has-pa-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1188px) !important; /* 396px(left) + 792px(right) */
}

/* Scheduler only: account for gutter column (sidebar+gap + gutter + spacing) */
body.has-scheduler-gutter .wip-card-wrapper {
    left: 396px !important; /* reduced gap between gutter and dashboard (another 24px) */
    width: calc(100vw - 456px) !important; /* 396px(left) + 60px(right) */
}

/* Scheduler only: right sidebar open width calc when gutter is present */
body.has-scheduler-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1188px) !important; /* 396px(left) + 792px(right) */
}

/* Full expansion - dashboard hidden, panel slides to left edge */
body.sidebar-full .wip-card-wrapper {
    right: calc(100vw - 96px - 18px) !important;
    width: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.queue-card-content {
    background: var(--white);
    padding: 0;
    margin: 0;
    overflow: hidden; /* Handle overflow in content area instead */
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 12px; /* Match parent border-radius */
}

/* NewSettings pages: dashboard header title color override */
.dashboard-header-title {
    color: #323130 !important;
}

.dashboard-body {
    background: var(--white);
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Allow scrolling within dashboard body */
}

/* Ensure first card does not get pushed down by inherited margins (Telehealth PatientPortal regression). */
.dashboard-body > .content-card:first-child {
	margin-top: 0 !important;
}


/* ====== MODALS & OVERLAYS ====== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 600px;
    max-height: 80vh;
    background: white;
    z-index: 1000;
    border-radius: 12px;
    overflow-y: auto;
    animation: fadeIn 0.2s ease;
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, 0.132), 0 0.6px 1.8px rgba(0, 0, 0, 0.108);
    border: 1px solid var(--border-light);
}

.modal-overlay.active {
    display: block;
}

.modal-content {
    background: white;
    padding: 0;
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

.modal-backdrop.active {
    display: block;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--neutral-secondary);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 101;
    padding: 0;
}

.modal-close:hover {
    background: var(--neutral-lighter);
    color: var(--primary);
}

/* ====== HEADERS ====== */

.dashboard-header {
    background: white;
    padding: 24px 32px;
    border-radius: 8px 8px 0 0;
    border: none;
    box-shadow: none;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.dashboard-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.dashboard-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.dashboard-header-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 24px;
    flex-shrink: 0;
}

.dashboard-header-title {
    color: var(--primary);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.dashboard-header-subtitle {
    color: var(--neutral-secondary);
    font-size: 14px;
    margin: 4px 0 0 0;
}

/* ====== TOOLBARS ====== */

.dashboard-toolbar {
    background: white;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    border-left: none;
    border-right: none;
    border-radius: 0 0 0 0;
    margin: 0 0 24px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    position: relative;
    z-index: 2;
}

.toolbar-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.toolbar-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-primary);
    margin-right: 8px;
}

.toolbar-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-control select,
.toolbar-control button {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
    font-size: 13px;
    color: var(--neutral-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-control select:hover,
.toolbar-control button:hover {
    border-color: var(--primary);
    background: #f5f5f5;
}

.toolbar-icon-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-icon-btn:hover {
    background-color: rgba(0, 120, 212, 0.1);
    color: var(--primary-hover);
}

.toolbar-icon-btn:active {
    transform: scale(0.95);
}

/* ====== HEADER (bell + profile) ====== */

/* Bell (and other header icon buttons): keep background transparent */
.nav-profile .toolbar-icon-btn {
    background: transparent;
}

.nav-profile .toolbar-icon-btn:hover {
    background: transparent;
}

.nav-profile .toolbar-icon-btn:active {
    background: transparent;
}

/* Profile button: keep background transparent */
.fluent-profile-btn {
    background: transparent;
}

.fluent-profile-btn:hover {
    background: transparent;
}

.fluent-profile-btn:active {
    background: transparent;
}

/* Shift header notification + profile cluster left by ~1/4 inch */
.nav-profile {
    margin-left: -24px;
}

/* ====== STATS CARDS ====== */

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.stat-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.132), 0 0.3px 0.9px rgba(0, 0, 0, 0.108);
    transition: all 0.2s ease;
    text-align: center;
    cursor: pointer;
}

.stat-card:hover {
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, 0.132), 0 0.6px 1.8px rgba(0, 0, 0, 0.108);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.stat-card.active {
    border-color: var(--primary);
    background: rgba(0, 120, 212, 0.05);
}

.stat-icon {
    font-size: 24px;
    color: var(--primary);
    opacity: 0.6;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-primary);
    margin: 8px 0;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====== DATA TABLES ====== */

.data-table {
    border: none; /* Remove outer table border */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0; /* Reduced from 16px to eliminate gap */
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    background-color: var(--neutral-light);
    border-bottom: 1px solid var(--border-light);
}

.data-table th {
    padding: 10px 12px; /* Reduced from 12px to 10px */
    text-align: left;
    font-weight: 600;
    color: var(--neutral-primary);
    user-select: none;
    position: relative;
}

.data-table th.sortable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.data-table th.sortable:hover {
    background-color: #ebe9e8;
}

.data-table th .sort-icon {
    margin-left: 8px;
    color: var(--primary);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.data-table tbody tr {
    border-bottom: none;
    transition: all 0.15s ease;
    position: relative; /* Create positioning context for dropdowns */
}

.data-table tbody tr:hover {
    background-color: var(--neutral-lighter);
    z-index: 100; /* Lift row on hover to help dropdown visibility - increased from 10 */
}

.data-table tbody tr.active {
    background-color: rgba(0, 120, 212, 0.05);
    z-index: 100; /* Match hover state */
}

.data-table td {
    padding: 11px 12px;
    color: var(--neutral-primary);
    overflow: visible; /* Allow dropdown to overflow */
    position: relative; /* Create positioning context */
    border-top: none;
    border-bottom: none;
}

/* Specific styling for Actions column */
.data-table td:last-child {
    position: relative;
    z-index: 10; /* Higher than other cells */
}

.data-table a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.data-table a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ====== FORM CONTROLS ====== */

.form-control {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
    font-size: 13px;
    color: var(--neutral-primary);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.form-control:hover {
    border-color: var(--primary);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.form-control.is-invalid {
    border-color: var(--error);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(212, 43, 31, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-primary);
}

.form-group textarea.form-control {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.form-group select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23605e5c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group input[type="file"] {
    padding: 6px 8px;
    cursor: pointer;
}

/* ====== DROPDOWN MENUS ====== */

.dropdown-container {
    position: relative !important;
    display: inline-block !important;
}

/* Fluent dropdowns are used throughout the app (toolbar, row actions).
   Keep them absolute by default; individual grids with overflow issues should handle locally. */
.fluent-dropdown-menu {
    position: absolute !important;
    z-index: 10050 !important;
    display: none !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.10);
    padding: 6px 0;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
}

.fluent-dropdown-menu.active {
    display: block !important;
}

.fluent-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    font-size: 13px;
    color: var(--neutral-primary);
    text-decoration: none;
    white-space: nowrap;

    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.fluent-dropdown-item:hover {
    background: rgba(15, 108, 189, 0.08);
    color: #0f6cbd;
}

.fluent-dropdown-item i {
    width: 16px;
    color: #0f6cbd;
    text-align: center;
}

.fluent-dropdown-separator {
    height: 1px;
    background: #edebe9;
    margin: 6px 0;
}

/* Dark mode */
[data-theme="dark"] .fluent-dropdown-menu {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .fluent-dropdown-item {
    color: #e5e7eb;
}

[data-theme="dark"] .fluent-dropdown-item:hover {
    background: rgba(96, 165, 250, 0.10);
    color: #60a5fa;
}

[data-theme="dark"] .fluent-dropdown-item i {
    color: #60a5fa;
}

[data-theme="dark"] .fluent-dropdown-separator {
    background: #374151;
}

/* ====== ACTIONS DROPDOWN (Table Row Actions) ====== */

.actions-dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000; /* Ensure dropdown container is above table */
}

.actions-menu-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.actions-menu-btn:hover {
    background-color: rgba(0, 120, 212, 0.1);
    color: var(--primary-hover);
}

.actions-menu-btn:active {
    transform: scale(0.95);
}

.actions-dropdown .fluent-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15); /* Stronger shadow for visibility */
    min-width: 180px;
    z-index: 99999 !important; /* Maximum z-index to ensure it's always on top */
    padding: 4px 0;
}

.actions-dropdown .fluent-dropdown-menu.active {
    display: block;
}

.actions-dropdown .fluent-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 13px;
    color: var(--neutral-primary);
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.actions-dropdown .fluent-dropdown-item:hover {
    background-color: var(--neutral-light);
    color: var(--primary);
}

.actions-dropdown .fluent-dropdown-item:active {
    background-color: #edebe9;
}

.actions-dropdown .fluent-dropdown-item i {
    width: 16px;
    color: var(--primary);
    font-size: 13px;
    text-align: center;
}

.actions-dropdown .fluent-dropdown-item span {
    font-weight: 400;
}

/* ====== PAGINATION ====== */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px; /* Reduced from 16px to 12px */
    border: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 8px 8px;
    background: white;
    margin-top: 0; /* Ensure no top margin */
}

.pagination-info {
    font-size: 12px;
    color: var(--neutral-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    padding: 6px 10px; /* Reduced from 8px 12px */
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
    color: var(--primary);
    font-size: 12px; /* Reduced from 13px */
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: var(--primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-select {
    padding: 6px 10px; /* Reduced from 8px 12px */
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
    font-size: 12px; /* Reduced from 13px */
    cursor: pointer;
}

/* ====== GRID TOOLBAR ====== */

.grid-toolbar {
    background: white;
    padding: 12px 16px; /* Reduced from 16px to 12px */
    border: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light); /* Keep bottom border */
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Reduced from 16px to 12px */
    align-items: center;
    margin-bottom: 0;
    box-sizing: border-box;
}

.grid-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-toolbar-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-primary);
    white-space: nowrap;
}

.grid-control input[type="text"],
.grid-control select {
    padding: 6px 10px; /* Reduced from 8px 12px */
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 13px;
    background: white;
    color: var(--neutral-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.grid-control input[type="text"]:focus,
.grid-control select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.grid-control input[type="text"]::placeholder {
    color: var(--neutral-tertiary);
}

/* ====== DATA TABLE WRAPPER ====== */

.data-table-wrapper {
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    border-top: none; /* Remove top border to prevent double border with grid-toolbar */
    border-bottom: none; /* Remove bottom border to connect with pagination */
    border-radius: 0;
    overflow: visible; /* Changed from 'auto' to 'visible' to allow dropdowns to overflow */
    margin-bottom: 0; /* Remove margin to connect with pagination */
    background: white;
    box-shadow: none; /* Remove shadow since it's part of a larger container */
    position: relative; /* Create stacking context */
    z-index: 1; /* Base z-index */
}

/* Add scroll only to the table itself, not the wrapper */
.data-table {
    overflow-x: auto;
    border: none; /* Remove all borders from table itself */
    border-radius: 0;
    margin-bottom: 0; /* Remove margin to connect with pagination */
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

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

.empty-state {
    text-align: center;
    padding: 48px 32px;
    background: white;
    border: none; /* Remove border */
    border-radius: 8px;
    margin-bottom: 24px;
}

.empty-state-icon {
    font-size: 64px;
    color: var(--neutral-tertiary);
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: #0078d4;
    margin: 0 0 8px 0;
}

.empty-state-message {
    font-size: 13px;
    color: var(--neutral-secondary);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== QUEUE GRID STYLES ====== */

.queue-grid {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: white;
    box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.132);
}

.queue-grid thead {
    background-color: var(--neutral-light);
    border-bottom: 2px solid var(--border-light);
}

.queue-grid th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--neutral-primary);
    user-select: none;
    cursor: pointer;
    position: relative;
}

.queue-grid th:hover {
    background-color: #ebe9e8;
}

.queue-grid tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.15s ease;
    height: 44px;
}

.queue-grid tbody tr:hover {
    background-color: rgba(0, 120, 212, 0.02);
    border-left: 3px solid var(--primary);
    padding-left: 0;
}

.queue-grid tbody tr.active {
    background-color: rgba(0, 120, 212, 0.05);
    border-left: 3px solid var(--primary);
}

.queue-grid td {
    padding: 12px 16px;
    color: var(--neutral-primary);
    vertical-align: middle;
}

.queue-grid a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.queue-grid a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ====== QUEUE SETTINGS ====== */

.queue-settings-item {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: white;
}

.queue-settings-item:hover {
    background-color: var(--neutral-light);
    border-color: var(--border-light);
}

.queue-settings-item-checkbox,
.queue-settings-item-radio {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.queue-settings-item-content {
    flex: 1;
}

.queue-settings-item-title {
    font-weight: 600;
    color: var(--neutral-primary);
    margin: 0 0 4px 0;
    font-size: 13px;
}

.queue-settings-item-description {
    color: var(--neutral-secondary);
    margin: 0;
    font-size: 12px;
}

/* ====== ACTIVITY PANEL ====== */

.modal-section {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-light);
    background: white;
}

.modal-section:last-child {
    border-bottom: none;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-section-title i {
    font-size: 16px;
}

.settings-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-bottom: 8px;
    background: white;
}

.settings-item:last-child {
    margin-bottom: 0;
}

.settings-item:hover {
    background-color: var(--neutral-light);
}

.settings-item-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 120, 212, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-item:hover .settings-item-icon {
    background-color: rgba(0, 120, 212, 0.15);
    transform: scale(1.05);
}

.settings-item-content {
    flex: 1;
}

.settings-item-label {
    font-weight: 600;
    color: var(--neutral-primary);
    margin: 0;
    font-size: 13px;
}

.settings-item-desc {
    color: var(--neutral-secondary);
    margin: 4px 0 0 0;
    font-size: 12px;
}

/* ====== BUTTON STYLES ====== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

.btn-secondary {
    background-color: white;
    color: var(--neutral-primary);
    border-color: var(--border-light);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--neutral-lighter);
    border-color: var(--border);
}

.btn-secondary:active:not(:disabled) {
    background-color: var(--neutral-light);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

/* ====== ANIMATIONS ====== */

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

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ====== FLUENT UI ALERT COMPONENT ====== */

.fluent-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.5;
    animation: slideDown 0.3s ease;
    position: relative;
}

.fluent-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 2px;
}

.fluent-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fluent-alert-title {
    font-weight: 600;
    margin: 0;
    font-size: 13px;
}

.fluent-alert-message {
    margin: 0;
    font-size: 13px;
}

.fluent-alert-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fluent-alert-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Alert Variants */

.fluent-alert.alert-info {
    background-color: #f3f9fd;
    border-color: #c7e0f4;
    color: #004578;
}

.fluent-alert.alert-info .fluent-alert-icon {
    color: #0078d4;
}

.fluent-alert.alert-success {
    background-color: #f1faf1;
    border-color: #9fd89f;
    color: #0e5a0e;
}

.fluent-alert.alert-success .fluent-alert-icon {
    color: #107c10;
}

.fluent-alert.alert-warning {
    background-color: #fff9f5;
    border-color: #fde7c7;
    color: #6c4a00;
}

.fluent-alert.alert-warning .fluent-alert-icon {
    color: #ffb900;
}

.fluent-alert.alert-error {
    background-color: #fdf3f4;
    border-color: #eeacb2;
    color: #6e0811;
}

.fluent-alert.alert-error .fluent-alert-icon {
    color: #d13438;
}

/* Alert Sizes */

.fluent-alert.alert-sm {
    padding: 8px 12px;
    font-size: 12px;
}

.fluent-alert.alert-sm .fluent-alert-icon {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

.fluent-alert.alert-lg {
    padding: 16px 20px;
    font-size: 14px;
}

.fluent-alert.alert-lg .fluent-alert-icon {
    width: 24px;
    height: 24px;
    font-size: 18px;
}

/* Alert Actions */

.fluent-alert-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.fluent-alert-action {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid;
    background: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fluent-alert.alert-info .fluent-alert-action {
    border-color: #0078d4;
    color: #0078d4;
}

.fluent-alert.alert-info .fluent-alert-action:hover {
    background-color: #0078d4;
    color: white;
}

.fluent-alert.alert-success .fluent-alert-action {
    border-color: #107c10;
    color: #107c10;
}

.fluent-alert.alert-success .fluent-alert-action:hover {
    background-color: #107c10;
    color: white;
}

.fluent-alert.alert-warning .fluent-alert-action {
    border-color: #ffb900;
    color: #6c4a00;
}

.fluent-alert.alert-warning .fluent-alert-action:hover {
    background-color: #ffb900;
    color: #6c4a00;
}

.fluent-alert.alert-error .fluent-alert-action {
    border-color: #d13438;
    color: #d13438;
}

.fluent-alert.alert-error .fluent-alert-action:hover {
    background-color: #d13438;
    color: white;
}

/* Alert Container (for positioning in header) */

.alert-container {
    position: fixed;
    right: 20px;
    top: 90px;
    /* Put toasts above any fixed dashboard/right-panel stacking contexts */
    z-index: 2147483647;
    isolation: isolate;
    max-width: 520px;
    width: min(520px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* let clicks pass through except the close button */
}

.alert-container .fluent-alert {
    pointer-events: auto;
}

/* Inline alert (for dashboard header) */

.dashboard-header-alert {
    margin-left: auto;
    max-width: 350px;
}

/* ====== FLUENT UI TABS ====== */

.tabs-container {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 24px;
    background: white;
    padding: 0 16px;
}

.tab-button {
    position: relative;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--neutral-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-button:hover {
    color: var(--primary);
    background-color: rgba(0, 120, 212, 0.05);
}

.tab-button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tab-button i {
    font-size: 16px;
}

.tab-content-container {
    background: white;
}

.tab-content {
    display: none;
    padding: 20px 16px;
    background: white;
    border-radius: 8px;
}

.tab-content.active {
    display: block;
}

/* ====== FLUENT UI TABS DARK MODE ====== */

[data-theme="dark"] .tabs-container {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .tab-button {
    color: #d1d5db !important;
}

[data-theme="dark"] .tab-button:hover {
    color: #60a5fa !important;
    background-color: rgba(75, 163, 245, 0.1) !important;
}

[data-theme="dark"] .tab-button.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}

[data-theme="dark"] .tab-content {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

/* User/System Admin grid header alignment */
.data-table thead th {
    text-align: left;
}

.data-table thead th[style*="text-align: center"] {
    text-align: center;
}

/* Fluent-style ellipsis action button for System Admin grids */
.data-table .btn-ellipsis {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    /* Fluent brand blue */
    color: var(--brand-foreground-link, #0f6cbd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.data-table .btn-ellipsis:hover {
    background: color-mix(in srgb, var(--brand-foreground-link, #0f6cbd) 8%, transparent);
    border-color: color-mix(in srgb, var(--brand-foreground-link, #0f6cbd) 35%, transparent);
}

.data-table .btn-ellipsis:active {
    background: color-mix(in srgb, var(--brand-foreground-link, #0f6cbd) 14%, transparent);
}

.data-table .btn-ellipsis:focus-visible {
    outline: 2px solid var(--brand-stroke-1-rest, #0f6cbd);
    outline-offset: 2px;
}

.data-table .btn-ellipsis i {
    font-size: 14px;
    line-height: 1;
}

.data-table {
    border-collapse: collapse;
    border-spacing: 0;
}

.dashboard-header-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 24px;
    flex-shrink: 0;
}

[data-theme="dark"] .dashboard-header-icon {
    background: transparent !important;
    border: 1px solid #374151 !important;
    color: #60a5fa !important;
}

/* Telehealth only: account for gutter column (sidebar+gap + gutter + spacing) */
body.has-telehealth-gutter .wip-card-wrapper {
    left: 444px !important; /* 120px (sidebar+gap) + 288px (gutter) + 36px (spacing) */
    width: calc(100vw - 504px) !important; /* 444px(left) + 60px(right) */
}

/* Telehealth only: right sidebar open width calc when gutter is present */
body.has-telehealth-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1212px) !important; /* 420px(left) + 792px(right) */
}

/* Decrease left padding/offset for the NewSettings dashboard when the Settings gutter is present */
body.has-settings-gutter .wip-card-wrapper {
    left: 396px !important; /* match Patient Accounts spacing */
    width: calc(100vw - 456px) !important; /* 396px(left) + 60px(right) */
}

body.has-settings-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1188px) !important; /* 396px(left) + 792px(right) */
}

/* Decrease left padding/offset for the NewServices dashboard when the Services gutter is present */
body.has-services-gutter .wip-card-wrapper {
    left: 396px !important; /* match Patient Accounts spacing */
    width: calc(100vw - 456px) !important; /* 396px(left) + 60px(right) */
}

body.has-services-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1188px) !important; /* 396px(left) + 792px(right) */
}

/* Left gutter should remain below the main card wrapper to avoid overlap */
.sidebar-gutter {
    z-index: 900;
}

/* KPI only: match Scheduler gutter placement */
body.has-kpi-gutter .wip-card-wrapper {
    left: 396px !important;
    width: calc(100vw - 456px) !important;
}

body.has-kpi-gutter.sidebar-open .wip-card-wrapper {
    width: calc(100vw - 1188px) !important;
}

/* Header search: Fluent grey icon + remove dark border */
.header-search-container .fluent-search-box .search-icon {
    color: #605e5c;
}

.header-search-container .fluent-search-input {
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
}

.header-search-container .fluent-search-input:focus {
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
}

/* KPI chart header info icon */
.kpi-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid #d2d0ce;
    color: #8a8886;
    background: #f3f2f1;
    font-size: 10px;
    line-height: 1;
    margin-left: 6px;
    cursor: help;
    user-select: none;
}

[data-theme="dark"] .kpi-info-icon {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}