.fsh-center-text {
    text-align: center !important;
}

.mud-button-filled {
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 1px 5px 0 rgb(0 0 0 / 10%) !important;
}

.mud-dialog {
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 10px 10px 0 rgb(0 0 0 / 5%) !important;
}

.mud-nav-link {
    white-space: normal !important;
    padding: 12px 16px 12px 38px;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-right: 3px solid var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.mud-table {
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.mud-card {
    margin-bottom: 20px !important;
}

#blazor-error-ui {
    color: var(--mud-palette-drawer-text);
    background: var(--mud-palette-drawer-background);
}

.mud-overlay-dark {
    backdrop-filter: blur(2px);
}

.mud-card-header .mud-card-header-avatar {
    margin-inline-end: 10px !important;
}

.mud-nav-link {
    padding: 12px 16px 12px 15px !important;
}

.mud-dialog-content {
    max-height: 75vh !important;
    overflow: auto !important;
}

.mud-grid-spacing-xs-3 {
    margin: 0px !important;
    margin-left: -12px !important;
}

.mud-table-toolbar {
    flex-wrap: wrap;
    margin-bottom: 20px !important;
}

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.fsh-nav-child {
    padding-left: 10px !important;
}

/* ========================================
   Dashboard Enhancements - Sprint 3
   ======================================== */

/* Stat Card Styles */
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.stat-card-warning {
    border-left: 4px solid var(--mud-palette-warning);
}

.stat-card-info {
    border-left: 4px solid var(--mud-palette-info);
}

.stat-card-error {
    border-left: 4px solid var(--mud-palette-error);
}

/* Priority Chip Animations */
.priority-chip {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.priority-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Pulse Animation for Overdue Indicators */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.1);
    }
}

.pulse-animation {
    animation: pulse 2s infinite ease-in-out;
}

/* Slower pulse for KPI icons */
@keyframes pulse-slow {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.7; 
    }
}

.pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
}

/* Fade In Animation */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Stagger Fade for Dashboard Grid */
.dashboard-stats-grid > div:nth-child(1) {
    animation: fadeIn 0.5s ease-out 0.1s backwards;
}

.dashboard-stats-grid > div:nth-child(2) {
    animation: fadeIn 0.5s ease-out 0.2s backwards;
}

.dashboard-stats-grid > div:nth-child(3) {
    animation: fadeIn 0.5s ease-out 0.3s backwards;
}

.dashboard-stats-grid > div:nth-child(4) {
    animation: fadeIn 0.5s ease-out 0.4s backwards;
}

/* Table Row Hover Enhancement */
.mud-table-row {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.mud-table-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

/* Loading Skeleton Animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Smooth transitions for all chips */
.mud-chip {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon animations */
.mud-icon {
    transition: transform 0.2s ease;
}

/* ========================================
   Glassmorphism Dashboard — Option B
   ======================================== */

/* Page background gradient (gives glass cards something to blur against) */
.dashboard-bg {
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-primary-rgb), 0.12) 0%,
        rgba(var(--mud-palette-secondary-rgb), 0.08) 50%,
        rgba(var(--mud-palette-tertiary-rgb), 0.10) 100%);
    border-radius: 20px;
    padding: 8px;
    min-height: 100vh;
}

.mud-dark .dashboard-bg {
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-primary-rgb), 0.18) 0%,
        rgba(10, 10, 20, 0.85) 50%,
        rgba(var(--mud-palette-secondary-rgb), 0.14) 100%);
}

/* Hero band header */
.dashboard-hero {
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-primary-rgb), 0.80) 0%,
        rgba(var(--mud-palette-secondary-rgb), 0.65) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 20px;
    color: #fff;
}

.dashboard-hero .mud-typography {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Glass KPI card */
.glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-dark .glass-card {
    background: rgba(30, 30, 44, 0.48);
    border-color: rgba(255, 255, 255, 0.10);
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.025);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
}

/* Watermark icon — faded large duplicate at bottom-right */
.glass-watermark {
    position: absolute !important;
    right: -10px;
    bottom: -10px;
    font-size: 88px !important;
    width: 88px !important;
    height: 88px !important;
    opacity: 0.08;
    pointer-events: none;
    line-height: 1;
}

/* KPI grid — auto-fill columns, no MudGrid needed */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

/* Staggered entrance animation */
@keyframes glassSlideIn {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.kpi-grid > .glass-card:nth-child(1) { animation: glassSlideIn 0.44s ease-out 0.05s backwards; }
.kpi-grid > .glass-card:nth-child(2) { animation: glassSlideIn 0.44s ease-out 0.12s backwards; }
.kpi-grid > .glass-card:nth-child(3) { animation: glassSlideIn 0.44s ease-out 0.19s backwards; }
.kpi-grid > .glass-card:nth-child(4) { animation: glassSlideIn 0.44s ease-out 0.26s backwards; }
.kpi-grid > .glass-card:nth-child(5) { animation: glassSlideIn 0.44s ease-out 0.33s backwards; }
.kpi-grid > .glass-card:nth-child(6) { animation: glassSlideIn 0.44s ease-out 0.40s backwards; }

/* Glass panel — lighter glass for section containers */
.glass-panel {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mud-dark .glass-panel {
    background: rgba(18, 18, 28, 0.42);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Skeleton glass card placeholder */
.glass-card-skeleton {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 16px;
    min-height: 110px;
}

/* ── HR Calendar Grid ── */
.hr-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.hr-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
    padding: 4px 0;
}

.hr-cal-day {
    min-height: 36px;
    border-radius: 6px;
    padding: 2px 3px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

.hr-cal-day:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.hr-cal-today {
    background: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
}

.hr-cal-holiday {
    background: rgba(var(--mud-palette-info-rgb), 0.10);
}

.hr-cal-has-events {
    cursor: pointer;
}

.hr-cal-daynum {
    font-size: 11px;
    display: block;
    text-align: center;
}

.hr-cal-todaynum {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.hr-cal-dots {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 8px;
}

.hr-cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.hr-cal-dot-birthday {
    background: var(--mud-palette-primary);
}

.hr-cal-dot-anniversary {
    background: var(--mud-palette-secondary);
}

.hr-cal-dot-appointment {
    background: var(--mud-palette-warning);
}

.hr-cal-dot-holiday {
    background: var(--mud-palette-info);
}

.e-appointment-approved {
    background-color: #2e7d32 !important;
    border-left: 4px solid #1b5e20 !important;
}

.e-appointment-recommended {
    background-color: #1976d2 !important;
    border-left: 4px solid #0d47a1 !important;
}

.e-appointment-reviewed {
    background-color: #9c27b0 !important;
    border-left: 4px solid #6a1b9a !important;
}

.e-appointment-pending {
    background-color: #ed6c02 !important;
    border-left: 4px solid #e65100 !important;
}

.e-appointment-cancelled {
    background-color: #d32f2f !important;
    border-left: 4px solid #b71c1c !important;
    opacity: 0.7;
}