/* Employee Dashboard Styles */
/* Inspired by mockup-3-dashboard.html with modern card-based layout */
/* Updated with design tokens from SRS_EMP-F001 mockups */

/* ========================================
   DESIGN TOKENS & CSS VARIABLES
   ======================================== */

:root {
    /* Surface Colors */
    --surface-base: #F9FAFB;
    --surface-alt: #FFFFFF;
    --surface-elev-1: #FFFFFF;

    /* Text Colors */
    --text-primary: #1B1D22;
    --text-secondary: #5C5F66;

    /* UI Elements */
    --divider: #E5E7EB;

    /* Accent Colors */
    --accent-primary: #15B6A0;
    --accent-success: #26C281;
    --accent-warning: #FFB347;
    --accent-error: #F95F62;

    /* Layout */
    --bar-h: 64px;
    --drawer-w: 295px;
    --radius: 12px;
    --radius-sm: 8px;
    --sticky-gap: 8px;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Typography Scale */
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;

    /* Shadows */
    --shadow-1: 0 2px 4px rgba(16, 24, 40, 0.08);
    --shadow-2: 0 8px 16px rgba(16, 24, 40, 0.12);
    --shadow-3: 0 16px 24px rgba(16, 24, 40, 0.16);

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(21, 182, 160, 0.25);
}

.employee-dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

/* ========================================
   COLOR SCHEME THEMES
   ======================================== */

/* Default Purple Twilight Theme */
.theme-purple .employee-banner .banner-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Ocean Breeze Theme */
.theme-teal .employee-banner .banner-header {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) !important;
}

/* Sunset Glow Theme */
.theme-orange .employee-banner .banner-header {
    background: linear-gradient(135deg, #f46b45 0%, #eea849 100%) !important;
}

/* Midnight Navy Theme */
.theme-navy .employee-banner .banner-header {
    background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%) !important;
}

/* Rose Garden Theme */
.theme-rose .employee-banner .banner-header {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
}

/* Forest Green Theme */
.theme-forest .employee-banner .banner-header {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%) !important;
}

/* ========================================
   STICKY HEADER - NEW DESIGN
   ======================================== */

.sticky-header {
    position: sticky;
    top: calc(var(--bar-h) + var(--sticky-gap));
    z-index: 80;
    background: var(--surface-alt);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.sticky-header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background: var(--surface-base);
    z-index: -1;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-12);
    margin-bottom: var(--space-2);
}

.breadcrumbs a {
    color: var(--accent-primary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .muted {
    color: var(--text-secondary);
}

.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

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

.sticky-header .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E2F3F0;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #0E7F73;
    font-size: 18px;
}

.title-wrap {
    display: flex;
    flex-direction: column;
}

.sticky-header .page-title {
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--text-primary);
}

.sticky-header .subtitle {
    font-size: var(--fs-12);
    color: var(--text-secondary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--fs-14);
    cursor: pointer;
    border: 0;
    transition: all 0.2s ease;
}

.sticky-header .btn-primary {
    background: var(--accent-primary);
    color: #fff;
}

.sticky-header .btn-primary:hover {
    filter: brightness(1.08);
}

.sticky-header .btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--divider);
    height: 36px;
}

.sticky-header .btn-outline:hover {
    background: #F3F4F6;
}

/* ========================================
   STICKY STEPPER NAVIGATION
   ======================================== */

.stepper {
    position: sticky;
    top: calc(var(--bar-h) + var(--sticky-gap) + 100px);
    z-index: 60;
    background: var(--surface-base);
    padding: var(--space-3) 0 var(--space-3) 0;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--divider);
}

.stepper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background: var(--surface-base);
    z-index: -1;
}

.stepper-inner {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 6px;
    position: relative;
    z-index: 1;
}

.stepper .step {
    background: var(--surface-alt);
    border: 1px solid var(--divider);
    border-radius: 999px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--text-primary);
}

.stepper .step.active {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

.stepper .step:hover {
    background: #F3F4F6;
}

.stepper .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.stepper .badge-dot.ok {
    background: var(--accent-success);
}

.stepper .badge-dot.warn {
    background: var(--accent-warning);
}

.stepper .badge-dot.todo {
    background: #D1D5DB;
}

/* ========================================
   SIMPLIFIED CARD SECTIONS
   ======================================== */

section.card {
    background: var(--surface-alt);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-4);
    transition: all 0.2s ease;
}

section.card .card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
}

section.card .card-hd:hover {
    background: #FAFAFA;
}

section.card .card-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-16);
    color: var(--text-primary);
}

section.card .card-bd {
    padding: var(--space-4);
    display: none;
}

section.card.open .card-bd {
    display: block;
}

/* Tooltip Styles */
.tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--divider);
    color: var(--text-secondary);
    cursor: help;
}

.tip .material-icons {
    font-size: 16px;
}

.tooltip-content {
    position: absolute;
    top: 125%;
    left: 0;
    background: var(--surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--divider);
    border-radius: 8px;
    box-shadow: var(--shadow-2);
    min-width: 260px;
    max-width: 360px;
    padding: 10px 12px;
    font-size: var(--fs-13);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.tip:hover .tooltip-content,
.tip:focus .tooltip-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Form Field Styles for Simplified Sections */
section.card .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

section.card .row.full {
    grid-template-columns: 1fr;
}

section.card .field {
    display: flex;
    flex-direction: column;
}

section.card label {
    font-size: var(--fs-12);
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
}

/* Toast Notifications */
.toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: grid;
    gap: 12px;
    z-index: 500;
}

.toast {
    background: var(--surface-alt);
    border: 1px solid var(--divider);
    border-left: 4px solid var(--accent-success);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
}

/* ========================================
   EMPLOYEE BANNER - HERO SECTION
   ======================================== */

.employee-banner {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
}

.banner-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px 20px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner-header::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-section {
    flex-shrink: 0;
}

.employee-avatar {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffd89b, #19547b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Profile photo variant */
.employee-avatar-photo {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.employee-avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center;
    border-radius: 12px;
}

/* Avatar overlay for camera icon on hover */
.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.avatar-section:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay .mud-icon-root {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.info-section {
    flex: 1;
}

.employee-name {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.employee-position {
    font-size: 14px;
    opacity: 0.95;
    margin-bottom: 12px;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.tag {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.banner-stats {
    display: flex;
    gap: 16px;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
}

.stat-label {
    font-size: 11px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.banner-footer {
    background: rgba(0, 0, 0, 0.05);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: opacity 0.3s ease, max-height 0.4s ease;
    flex-wrap: wrap;
}

.completion-bar {
    width: 450px;
    flex-shrink: 0;
}

.completion-label {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 600;
}

.progress-container {
    background: #ecf0f1;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 6px;
    transition: width 0.6s ease;
}

.search-and-buttons-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
}

.action-buttons .mud-button-root {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

/* ========================================
   COMPACT HERO STATE (When Card Expanded)
   ======================================== */

.employee-banner.compact {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.employee-banner.compact .banner-header {
    padding: 12px 32px;
}

.employee-banner.compact .banner-content {
    gap: 16px;
}

.employee-banner.compact .employee-avatar {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}

.employee-banner.compact .employee-avatar-photo {
    width: 56px;
    height: 56px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}

.employee-banner.compact .employee-avatar-photo img {
    border-radius: 9px;
    object-fit: cover !important;
    object-position: center center;
}

.employee-banner.compact .employee-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}

.employee-position-compact {
    display: none;
}

.employee-banner.compact .employee-position,
.employee-banner.compact .tags,
.employee-banner.compact .banner-stats,
.employee-banner.compact .banner-footer {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.employee-banner.compact .employee-position-compact {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2px;
    font-weight: 500;
}

.compact-nav-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

/* ========================================
   EMPLOYEE SEARCH
   ======================================== */

/* Employee Search - Regular Mode */
.employee-search-regular {
    background: white !important;
    border-radius: 8px;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex-shrink: 0;
}

.employee-search-regular .mud-input-root {
    background: white;
}

/* Comprehensive width fix - target entire MudBlazor hierarchy */
.employee-search-regular .mud-input,
.employee-search-regular .mud-input-root,
.employee-search-regular .mud-input-control,
.employee-search-regular .mud-input-slot,
.employee-search-regular .mud-autocomplete,
.employee-search-regular .mud-input-control-input-container,
.employee-search-regular input[type="text"],
.employee-search-regular input.mud-input-root-text {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
}

/* Target the actual element with multiple classes (chained, no spaces) */
.employee-search-regular .mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.employee-search-regular .mud-input-slot {
    width: 100% !important;
}

/* Ensure input doesn't extend under the search icon */
.employee-search-regular .mud-input-adorned-end input {
    padding-right: 48px !important;
}

.employee-search-regular .mud-input-adornment-end {
    position: absolute !important;
    right: 8px !important;
    pointer-events: none !important;
}

/* Ensure internal form structure fills the container */
.employee-search-regular .mud-input-control,
.employee-search-regular form {
    display: flex !important;
    flex-direction: row !important;
}

/* Employee Search - Compact Mode */
.employee-search-compact {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    width: 250px !important;
}

.employee-search-compact .mud-input {
    color: white !important;
}

.employee-search-compact .mud-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.employee-search-compact .mud-input-adornment {
    color: white !important;
}

.employee-search-compact .mud-input-outlined {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.employee-search-compact .mud-input-outlined:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.employee-search-compact .mud-input-outlined.mud-input-adorned-start {
    padding-left: 8px;
}

/* Comprehensive width fix - target entire MudBlazor hierarchy */
.employee-search-compact .mud-input,
.employee-search-compact .mud-input-root,
.employee-search-compact .mud-input-control,
.employee-search-compact .mud-input-slot,
.employee-search-compact .mud-autocomplete,
.employee-search-compact .mud-input-control-input-container,
.employee-search-compact input[type="text"],
.employee-search-compact input.mud-input-root-text {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
}

/* Target the actual element with multiple classes (chained, no spaces) */
.employee-search-compact .mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.employee-search-compact .mud-input-slot {
    width: 100% !important;
}

/* Ensure input doesn't extend under the search icon */
.employee-search-compact .mud-input-adorned-end input {
    padding-right: 48px !important;
}

.employee-search-compact .mud-input-adornment-end {
    position: absolute !important;
    right: 8px !important;
    pointer-events: none !important;
}

/* Ensure internal form structure fills the container */
.employee-search-compact .mud-input-control,
.employee-search-compact form {
    display: flex !important;
    flex-direction: row !important;
}

/* ========================================
   KEYBOARD SHORTCUTS
   ======================================== */

/* Make main container keyboard-focusable without visible outline */
.employee-dashboard-container:focus {
    outline: none;
}

/* Underlined shortcut letters in card titles */
.category-title u {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.7);
    transition: text-decoration-color 0.2s ease;
}

/* Subtle animation on underline for better visibility */
.category-card:hover .category-title u {
    text-decoration-color: rgba(255, 255, 255, 1);
    text-decoration-thickness: 2.5px;
}

/* ========================================
   ALERTS SECTION
   ======================================== */

.alerts-section {
    margin-bottom: 20px;
}

.alert-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-left: 6px solid #e74c3c;
}

.alert-icon {
    font-size: 48px;
    flex-shrink: 0;
}

.alert-content h3 {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 6px;
    font-weight: 700;
}

.alert-content p {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

/* ========================================
   CATEGORY CARDS
   ======================================== */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.category-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring effect */
    cursor: pointer;
    position: relative;
    transform-origin: center top;
    order: 0; /* Default order for collapsed cards */
    display: flex;
    flex-direction: column;
}

.category-card:not(.expanded):hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

.category-card.expanded {
    grid-column: 1 / -1;
    cursor: default;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    /* CRITICAL: NO transforms allowed on expanded cards!
       CSS transforms create a new containing block for fixed-position descendants,
       which breaks MudBlazor dropdown positioning (dropdowns appear at bottom of page).
       See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
    transform: none !important;
    z-index: 10;
    /* DISABLED animation - it uses transforms which break dropdown positioning */
    /* animation: cardExpand 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */

    /* FIX: Allow MudBlazor popovers to render when card is expanded */
    overflow: visible !important;
}

.category-header {
    padding: 20px 20px;
    background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
    color: white;
    display: flex;
    align-items: center;
    gap: 16px;
}

.category-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.category-title {
    font-size: 18px;
    font-weight: 700;
    flex: 1;
}

.chevron-indicator {
    font-size: 24px;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.category-card.expanded .chevron-indicator {
    transform: rotate(180deg);
}

.category-body {
    padding: 20px;
    flex: 1;
}

.field-preview {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ecf0f1;
    gap: 16px;
}

.field-preview:last-child {
    border-bottom: none;
}

.field-name {
    font-size: 13px;
    color: #7f8c8d;
    font-weight: 600;
    flex-shrink: 0;
}

.field-val {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.category-footer {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #ecf0f1;
    text-align: center;
    margin-top: auto;
}

.view-all-link {
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* ========================================
   EXPANDABLE CARD CONTENT
   ======================================== */

.card-content-collapsed {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 0.3s ease, max-height 0.4s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.card-content-expanded {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.category-card.expanded .card-content-collapsed {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.category-card.expanded .card-content-expanded {
    opacity: 1;
    max-height: 5000px;
    overflow: visible;
    animation: contentFadeIn 0.5s ease 0.2s both;
}

.expanded-form-content {
    padding: 20px;
    background: #fafbfc;
}

.form-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e1e4e8;
    animation: sectionSlideIn 0.4s ease both;
}

.form-section:nth-child(1) { animation-delay: 0.3s; }
.form-section:nth-child(2) { animation-delay: 0.4s; }
.form-section:nth-child(3) { animation-delay: 0.5s; }
.form-section:nth-child(4) { animation-delay: 0.6s; }

.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.form-section-icon {
    font-size: 20px;
    color: var(--card-color-1);
}

.form-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-top: 2px solid #e1e4e8;
}

/* ========================================
   CARD COLOR SCHEMES - THEME-BASED
   ======================================== */

/* Purple Twilight Theme - Purple/Violet Variations */
.theme-purple .card-personal { --card-color-1: #8B7EEA; --card-color-2: #9B5FD9; }
.theme-purple .card-employment { --card-color-1: #667EEA; --card-color-2: #764BA2; }
.theme-purple .card-immigration { --card-color-1: #5A6FD9; --card-color-2: #6A4BC2; }
.theme-purple .card-taxinfo { --card-color-1: #6E7FEA; --card-color-2: #7E5BC2; }
.theme-purple .card-contact { --card-color-1: #7E7EEA; --card-color-2: #8E5FC9; }
.theme-purple .card-address { --card-color-1: #9E8EEA; --card-color-2: #AE6FD9; }
.theme-purple .card-banking { --card-color-1: #7A6FD9; --card-color-2: #8A5FD9; }
.theme-purple .card-compensation { --card-color-1: #6A70D9; --card-color-2: #7A50C9; }
.theme-purple .card-deductions { --card-color-1: #7A60D9; --card-color-2: #8A50C9; }
.theme-purple .card-benefits { --card-color-1: #8A70D9; --card-color-2: #9A60D9; }
.theme-purple .card-documents { --card-color-1: #4A5FD9; --card-color-2: #5A3BA2; }

/* Ocean Breeze Theme - Teal/Cyan Variations */
.theme-teal .card-personal { --card-color-1: #56CCF2; --card-color-2: #6DD5ED; }
.theme-teal .card-employment { --card-color-1: #2193B0; --card-color-2: #6DD5ED; }
.theme-teal .card-immigration { --card-color-1: #1E88A8; --card-color-2: #5CCBE3; }
.theme-teal .card-taxinfo { --card-color-1: #1AA8C8; --card-color-2: #5DD5EB; }
.theme-teal .card-contact { --card-color-1: #00B4DB; --card-color-2: #4DD5ED; }
.theme-teal .card-address { --card-color-1: #2FA3C0; --card-color-2: #7DE5F3; }
.theme-teal .card-banking { --card-color-1: #1895B8; --card-color-2: #5DD0E8; }
.theme-teal .card-compensation { --card-color-1: #1890B8; --card-color-2: #58C8E0; }
.theme-teal .card-deductions { --card-color-1: #1885B0; --card-color-2: #58C0D8; }
.theme-teal .card-benefits { --card-color-1: #1890B8; --card-color-2: #58C8E0; }
.theme-teal .card-documents { --card-color-1: #1A7D98; --card-color-2: #4CCBD3; }

/* Sunset Glow Theme - Orange/Coral Variations */
.theme-orange .card-personal { --card-color-1: #FF8A5B; --card-color-2: #FFA06E; }
.theme-orange .card-employment { --card-color-1: #F46B45; --card-color-2: #EEA849; }
.theme-orange .card-immigration { --card-color-1: #FF7A50; --card-color-2: #FF9E6B; }
.theme-orange .card-taxinfo { --card-color-1: #F96A48; --card-color-2: #EF9850; }
.theme-orange .card-contact { --card-color-1: #F85A3E; --card-color-2: #EE9840; }
.theme-orange .card-address { --card-color-1: #FF9A70; --card-color-2: #FFB888; }
.theme-orange .card-banking { --card-color-1: #F76C48; --card-color-2: #EDA045; }
.theme-orange .card-compensation { --card-color-1: #F76548; --card-color-2: #ED9845; }
.theme-orange .card-deductions { --card-color-1: #F76048; --card-color-2: #ED9040; }
.theme-orange .card-benefits { --card-color-1: #F87048; --card-color-2: #EEA045; }
.theme-orange .card-documents { --card-color-1: #E55A35; --card-color-2: #DE8838; }

/* Midnight Navy Theme - Navy/Blue Variations */
.theme-navy .card-personal { --card-color-1: #2C5364; --card-color-2: #4A90E2; }
.theme-navy .card-employment { --card-color-1: #0F2027; --card-color-2: #2C5364; }
.theme-navy .card-immigration { --card-color-1: #1A3A4A; --card-color-2: #3D7AA0; }
.theme-navy .card-taxinfo { --card-color-1: #1C4A5C; --card-color-2: #3890C8; }
.theme-navy .card-contact { --card-color-1: #163545; --card-color-2: #3580C5; }
.theme-navy .card-address { --card-color-1: #224555; --card-color-2: #5AA0E8; }
.theme-navy .card-banking { --card-color-1: #1A4555; --card-color-2: #3A88D0; }
.theme-navy .card-compensation { --card-color-1: #1A3D50; --card-color-2: #3A78C0; }
.theme-navy .card-deductions { --card-color-1: #1A3848; --card-color-2: #3A70B8; }
.theme-navy .card-benefits { --card-color-1: #1A4555; --card-color-2: #3A88D0; }
.theme-navy .card-documents { --card-color-1: #0A1820; --card-color-2: #254555; }

/* Rose Garden Theme - Pink/Red Variations */
.theme-rose .card-personal { --card-color-1: #FF5E7A; --card-color-2: #FF7A8E; }
.theme-rose .card-employment { --card-color-1: #EB3349; --card-color-2: #F45C43; }
.theme-rose .card-immigration { --card-color-1: #E8284B; --card-color-2: #F24D3E; }
.theme-rose .card-taxinfo { --card-color-1: #EC3B4D; --card-color-2: #F75548; }
.theme-rose .card-contact { --card-color-1: #FF4E6A; --card-color-2: #FF6B50; }
.theme-rose .card-address { --card-color-1: #FF7A90; --card-color-2: #FF9A60; }
.theme-rose .card-banking { --card-color-1: #EA3A50; --card-color-2: #F55E46; }
.theme-rose .card-compensation { --card-color-1: #EA3548; --card-color-2: #F55645; }
.theme-rose .card-deductions { --card-color-1: #EA3040; --card-color-2: #F55040; }
.theme-rose .card-benefits { --card-color-1: #EA4050; --card-color-2: #F56048; }
.theme-rose .card-documents { --card-color-1: #D82340; --card-color-2: #E44C38; }

/* Forest Green Theme - Green/Emerald Variations */
.theme-forest .card-personal { --card-color-1: #3D8E68; --card-color-2: #71B280; }
.theme-forest .card-employment { --card-color-1: #134E5E; --card-color-2: #71B280; }
.theme-forest .card-immigration { --card-color-1: #1E6E70; --card-color-2: #5FA288; }
.theme-forest .card-taxinfo { --card-color-1: #257E6F; --card-color-2: #6FB288; }
.theme-forest .card-contact { --card-color-1: #2A7E6E; --card-color-2: #80C290; }
.theme-forest .card-address { --card-color-1: #4AA078; --card-color-2: #90D2A0; }
.theme-forest .card-banking { --card-color-1: #1D6E68; --card-color-2: #68A888; }
.theme-forest .card-compensation { --card-color-1: #1A6060; --card-color-2: #60A080; }
.theme-forest .card-deductions { --card-color-1: #1A5858; --card-color-2: #609878; }
.theme-forest .card-benefits { --card-color-1: #1A6060; --card-color-2: #60A880; }
.theme-forest .card-documents { --card-color-1: #0F3E4E; --card-color-2: #60A270; }

/* ========================================
   BANKING CARD SPECIFIC STYLES
   ======================================== */

/* Bank Accounts List Container */
.bank-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Individual Bank Account Card */
.bank-account-card {
    background: white;
    border: 2px solid #e1e4e8;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: move;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.bank-account-card:hover {
    border-color: var(--card-color-1, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.bank-account-card.inactive {
    opacity: 0.6;
    background: #f8f9fa;
    border-style: dashed;
}

.bank-account-card.inactive:hover {
    opacity: 0.8;
}

/* Drag Handle */
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #95a5a6;
    flex-shrink: 0;
    width: 24px;
    transition: color 0.2s ease;
}

.drag-handle:hover {
    color: var(--card-color-1, #667eea);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Account Content */
.account-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Account Header */
.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-nickname {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* Account Actions */
.account-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Account Details */
.account-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-number-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-label {
    font-size: 13px;
    color: #7f8c8d;
    font-weight: 600;
    flex-shrink: 0;
}

.account-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #2c3e50;
    font-weight: 600;
    letter-spacing: 1px;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    user-select: none;
}

.account-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.allocation-type {
    font-size: 14px;
    color: #34495e;
    font-weight: 600;
    background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    display: inline-block;
}

/* Remainder Badge */
.remainder-badge {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
}

/* No Accounts Message */
.no-accounts-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #95a5a6;
    gap: 16px;
}

.no-accounts-message .mud-icon-root {
    font-size: 64px;
    color: #bdc3c7;
}

.no-accounts-message p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

/* Bank Account Form */
.bank-account-form {
    background: #f8f9fa !important;
    border: 2px solid var(--card-color-1, #667eea) !important;
    animation: formSlideIn 0.4s ease both;
    margin-top: 16px;
}

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

/* Sortable.js Classes */
.sortable-ghost {
    opacity: 0.4;
    background: #ecf0f1;
}

.sortable-drag {
    opacity: 0.8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
}

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

@media (max-width: 1024px) {
    .employee-dashboard-container {
        padding: 16px;
    }

    .banner-header {
        padding: 32px 24px;
    }

    .banner-content {
        flex-direction: column;
        text-align: center;
    }

    .employee-name {
        font-size: 32px;
    }

    .banner-stats {
        justify-content: space-around;
        width: 100%;
    }

    .banner-footer {
        flex-direction: column;
        gap: 20px;
    }

    .completion-bar {
        max-width: 100%;
        width: 100%;
    }

    .action-buttons {
        width: 100%;
        justify-content: center;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .employee-avatar {
        width: 140px;
        height: 140px;
        font-size: 56px;
    }

    .employee-name {
        font-size: 28px;
    }

    .employee-position {
        font-size: 16px;
    }

    .banner-stats {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .stat {
        align-items: center;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .alert-card {
        flex-direction: column;
        text-align: center;
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardExpand {
    0% {
        transform: scale(0.95) translateY(-20px);
        opacity: 0.8;
    }
    60% {
        transform: scale(1.02) translateY(0);
    }
    100% {
        /* IMPORTANT: End with transform: none to allow fixed-position dropdowns to work.
           CSS transforms create a containing block that breaks MudBlazor popover positioning. */
        transform: none;
        opacity: 1;
    }
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.category-card {
    animation: fadeIn 0.5s ease-out;
}

.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }

/* ========================================
   COLOR SCHEME DIALOG
   ======================================== */

.color-scheme-card {
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.color-scheme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.color-scheme-card.selected {
    border: 3px solid #4caf50;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4);
}

/* ========================================
   THEME BUTTON TOP RIGHT
   ======================================== */

.theme-button-top-right {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.theme-button-top-right:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1);
}

/* ========================================
   COMPENSATION CARD STYLES (ECM-F001)
   ======================================== */

.current-compensation-highlight {
    margin-bottom: 20px;
}

.compensation-current-card {
    background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
    color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.current-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.current-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.9;
}

.primary-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.current-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.rate-display,
.code-display,
.effective-display {
    display: flex;
    flex-direction: column;
}

.rate-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.rate-frequency {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 4px;
}

.code-label,
.effective-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.code-value,
.effective-date {
    font-size: 16px;
    font-weight: 600;
}

/* Timeline Styles */
.compensation-timeline {
    position: relative;
    padding-left: 30px;
}

.compensation-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.compensation-timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 20px;
}

.timeline-dot {
    position: absolute;
    left: -20px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #667eea;
}

.timeline-dot.primary {
    background: #ffd700;
    box-shadow: 0 0 0 2px #ffd700, 0 0 8px rgba(255, 215, 0, 0.5);
}

.compensation-card-content {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.compensation-card-content:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.status-current .compensation-card-content {
    border-left: 4px solid #4caf50;
}

.status-future .compensation-card-content {
    border-left: 4px solid #2196f3;
}

.status-past .compensation-card-content {
    border-left: 4px solid #9e9e9e;
    opacity: 0.7;
}

.status-inactive .compensation-card-content {
    opacity: 0.5;
    background: #f5f5f5;
}

.compensation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.compensation-title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-badge-small {
    background: #ffd700;
    color: #333;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.compensation-status-badge {
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.compensation-status-badge.status-current {
    background: #4caf50;
    color: white;
}

.compensation-status-badge.status-future {
    background: #2196f3;
    color: white;
}

.compensation-status-badge.status-past {
    background: #9e9e9e;
    color: white;
}

.compensation-status-badge.status-inactive {
    background: #f5f5f5;
    color: #666;
}

.compensation-actions {
    display: flex;
    gap: 4px;
}

.compensation-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.detail-label {
    color: #757575;
    font-weight: 500;
}

.detail-value {
    color: #333;
}

.detail-value-large {
    color: #333;
    font-weight: 600;
    font-size: 18px;
}

.approval-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.approval-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.approval-badge.approved {
    background: #d4edda;
    color: #155724;
}

.approval-badge.rejected {
    background: #f8d7da;
    color: #721c24;
}

.overrides-indicator {
    margin-top: 12px;
    padding: 8px;
    background: #e3f2fd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1976d2;
}

.no-compensations-message {
    text-align: center;
    padding: 40px 20px;
    color: #757575;
}

.no-compensations-message p {
    margin-top: 12px;
    font-size: 14px;
}

/* Form Styles */
.compensation-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
}

/* ========================================
   COMPENSATION HISTORY DIALOG STYLES
   ======================================== */

.history-dialog-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
}

.history-item {
    border-left: 3px solid var(--mud-palette-primary, #594ae2);
    padding-left: 20px;
    padding-bottom: 16px;
    position: relative;
    transition: all 0.2s ease;
}

.history-item:hover {
    border-left-color: var(--mud-palette-secondary, #ff4081);
}

.history-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #594ae2);
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #594ae2);
    transition: all 0.2s ease;
}

.history-item:hover::before {
    background: var(--mud-palette-secondary, #ff4081);
    box-shadow: 0 0 0 2px var(--mud-palette-secondary, #ff4081);
}

.history-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.changed-by {
    display: inline-block;
    color: var(--mud-palette-text-secondary, #666);
    font-size: 0.875rem;
    font-style: italic;
}

.change-description {
    margin: 12px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(33, 150, 243, 0.04) 100%);
    border-left: 3px solid rgba(33, 150, 243, 0.5);
    border-radius: 4px;
    font-size: 0.95rem;
}

.snapshot-details {
    padding: 16px;
    background: var(--mud-palette-background-grey, #f5f5f5);
    border-radius: 6px;
    margin-top: 8px;
}

.no-history-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--mud-palette-text-secondary, #666);
}

.no-history-message .mud-icon-root {
    font-size: 4rem;
    opacity: 0.4;
}

/* Change type specific styling */
.change-type-created {
    border-left-color: var(--mud-palette-success, #4caf50);
}

.change-type-updated {
    border-left-color: var(--mud-palette-info, #2196f3);
}

.change-type-deleted {
    border-left-color: var(--mud-palette-error, #f44336);
}

.change-type-primary-set {
    border-left-color: var(--mud-palette-warning, #ff9800);
}

.change-type-primary-removed {
    border-left-color: var(--mud-palette-default, #9e9e9e);
}

/* ==========================================
   EMPLOYEE DASHBOARD V2 - LAYOUT FIXES
   Overflow handling moved to DynamicMainLayout.razor (line 374)
   ========================================== */

/* Container padding and structure */
.employee-dashboard-v2-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    min-height: calc(100vh - 64px) !important;
}

.employee-dashboard-v2-wrapper .employee-dashboard-container {
    padding: 68px 24px 24px 24px !important;  /* 24px base + 44px additional top padding */
    overflow: visible !important;
}

/* Sticky positioning - Now works because DynamicMainLayout.razor allows viewport scrolling
   Bobby's overflow:auto is conditionally overridden for this page only */
/* FIXED POSITIONING APPROACH - No overflow battles needed */

/* Z-INDEX HIERARCHY (Full stack - see dialog-overrides.css for dialog layers):
   - Dialog dropdowns: 10100 (above dialog when open)
   - Dialog container: 10000
   - Dialog backdrop: 9900
   - App bar: 2000
   - Drawer: 1900 (override MudBlazor's 1300)
   - Page headers: 1700 (above page dropdowns)
   - Quick nav: 1650
   - Page dropdowns: 1600 (below headers when no dialog open)
*/

/* Override MudBlazor's drawer z-index (1300) to be above page headers */
.mud-drawer {
    z-index: 1900 !important;
}

.employee-dashboard-v2-wrapper .mango-sticky-header,
section.mango-sticky-header {
    position: fixed !important;
    top: 72px !important;  /* 64px app bar + 8px gap */
    left: 0 !important;  /* Full width - drawer will push content */
    right: 0 !important;
    z-index: 1700 !important;  /* Above dropdowns (1600), below drawer (1900) */
    background: #F9FAFB !important;  /* Match page background */
    transition: left 0.3s ease !important;  /* Smooth transition when drawer opens/closes */
}

/* When drawer is open, shift header right */
.mud-drawer-open-persistent-left .employee-dashboard-v2-wrapper .mango-sticky-header,
.mud-drawer-open-persistent-left section.mango-sticky-header {
    left: var(--drawer-w) !important;  /* Drawer width */
}

/* Center the header content within the fixed container */
.employee-dashboard-v2-wrapper .mango-sticky-header > div,
section.mango-sticky-header > div {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.employee-dashboard-v2-wrapper .mango-quick-nav-wrapper,
div.mango-quick-nav-wrapper {
    position: fixed !important;
    top: 192px !important;  /* 72px + 120px header height */
    left: 0 !important;  /* Full width - drawer will push content */
    right: 0 !important;
    z-index: 1650 !important;  /* Above dropdowns (1600), below header (1700), below drawer (1900) */
    background: #F9FAFB !important;  /* Match page background */
    padding-bottom: 8px !important;  /* Visual spacing */
    transition: left 0.3s ease !important;  /* Smooth transition when drawer opens/closes */
}

/* When drawer is open, shift nav pills right */
.mud-drawer-open-persistent-left .employee-dashboard-v2-wrapper .mango-quick-nav-wrapper,
.mud-drawer-open-persistent-left div.mango-quick-nav-wrapper {
    left: var(--drawer-w) !important;  /* Drawer width */
}

/* Center the nav pills content within the fixed container */
.employee-dashboard-v2-wrapper .mango-quick-nav-wrapper > div,
div.mango-quick-nav-wrapper > div {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Add top margin to content so it doesn't hide under fixed headers */
.employee-dashboard-v2-wrapper .employee-dashboard-container {
    padding-top: 44px !important;  /* Add 44px top padding */
    margin-top: 218px !important;  /* Reduced by 50px total from original 268px */
}

.employee-dashboard-v2-wrapper .mango-stepper,
div.mango-stepper {
    position: sticky !important;
    top: 252px !important;  /* Below fixed elements */
    z-index: 60 !important;
}

/* Pills - use element.class selector for MAXIMUM specificity */
.employee-dashboard-v2-wrapper button.mango-nav-pill,
.mango-quick-nav button.mango-nav-pill {
    all: unset;  /* Reset ALL inherited styles */
    display: inline-flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;  /* Exact mockup value */
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1B1D22 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.employee-dashboard-v2-wrapper button.mango-nav-pill:hover,
.mango-quick-nav button.mango-nav-pill:hover {
    background: #F3F4F6 !important;
}

.employee-dashboard-v2-wrapper button.mango-nav-pill.active,
.mango-quick-nav button.mango-nav-pill.active {
    background: #15B6A0 !important;
    color: #FFFFFF !important;
    border-color: #15B6A0 !important;
}



.no-extra-padding .mud-input-control-input-container {
    padding: 0 !important;
}