/* 🎨 INDUSX EXECUTIVE NAVY THEME - UNIFIED HEADER DESIGN
   Ensures consistent Executive Navy gradient headers across ALL pages
   CRITICAL: All rules use !important to override conflicting themes */

/* ✨ EXECUTIVE NAVY BRAND COLORS */
:root {
    /* Executive Navy Color Palette */
    --indusx-navy-dark: #0B1220;      /* Deep navy for gradient start */
    --indusx-navy-primary: #1d3b8b;   /* Primary navy - matches root indus-primary */
    --indusx-navy-light: #2563EB;     /* Light navy/blue */
    --indusx-navy-accent: #1D4ED8;    /* Accent blue */
    --indusx-navy-text: #ffffff;      /* White text on navy */
    
    /* Executive Navy Gradients */
    --indusx-executive-gradient: linear-gradient(135deg, var(--indusx-navy-dark) 0%, #1E3A8A 25%, var(--indusx-navy-primary) 75%, var(--indusx-navy-accent) 100%);
    --indusx-executive-gradient-vertical: linear-gradient(180deg, var(--indusx-navy-dark) 0%, #1E3A8A 25%, var(--indusx-navy-primary) 75%, var(--indusx-navy-accent) 100%);
    --indusx-executive-gradient-reverse: linear-gradient(315deg, var(--indusx-navy-dark) 0%, #1E3A8A 25%, var(--indusx-navy-primary) 75%, var(--indusx-navy-accent) 100%);
}

/* 🎯 UNIFIED HEADER STYLING - ALL PAGES */

/* Primary Header Selectors - Executive Navy Gradient */
.indus-header,
.indus-header.e-appbar,
.e-appbar.indus-header,
.e-appbar[data-color-mode="Primary"],
.navbar,
.header-container,
.top-header,
.page-header {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    color: var(--indusx-navy-text) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(11, 18, 32, 0.15) !important;
    height: 60px !important;
    min-height: 60px !important;
}

/* Sidebar Header - Matching Executive Navy */
.indus-sidebar__header,
.sidebar-header {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    color: var(--indusx-navy-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 60px !important;
    min-height: 60px !important;
}

/* Header Content and Text Styling */
.indus-header .e-toolbar-items,
.indus-header .header-content,
.navbar .navbar-brand,
.navbar .nav-link,
.header-container h1,
.header-container h2,
.page-header h1,
.page-header .page-title {
    color: var(--indusx-navy-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Button styling within headers */
.indus-header .e-btn,
.navbar .btn,
.header-container .btn,
.page-header .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--indusx-navy-text) !important;
    backdrop-filter: blur(10px) !important;
}

.indus-header .e-btn:hover,
.navbar .btn:hover,
.header-container .btn:hover,
.page-header .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Icon styling within headers */
.indus-header i,
.navbar i,
.header-container i,
.page-header i,
.indus-sidebar__header i {
    color: var(--indusx-navy-text) !important;
    opacity: 0.9 !important;
}

.indus-header i:hover,
.navbar i:hover,
.header-container i:hover,
.page-header i:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* 🔧 SYNCFUSION SPECIFIC OVERRIDES */

/* Syncfusion AppBar - Force Executive Navy */
.e-appbar {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    color: var(--indusx-navy-text) !important;
}

.e-appbar.e-primary,
.e-appbar[data-color-mode="Primary"] {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
}

/* Syncfusion Toolbar within AppBar */
.e-appbar .e-toolbar,
.e-appbar .e-toolbar-items {
    background: transparent !important;
    color: var(--indusx-navy-text) !important;
}

.e-appbar .e-toolbar .e-toolbar-item {
    color: var(--indusx-navy-text) !important;
}

/* Syncfusion Navigation Menu */
.e-appbar .e-menu .e-menu-item {
    color: var(--indusx-navy-text) !important;
}

.e-appbar .e-menu .e-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 🎨 RESPONSIVE DESIGN - MOBILE HEADERS */
@media (max-width: 768px) {
    .indus-header,
    .navbar,
    .header-container,
    .page-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 1rem !important;
    }
    
    .indus-sidebar__header {
        height: 56px !important;
        min-height: 56px !important;
    }
}

/* 🔧 CRITICAL OVERRIDE - REMOVE CONFLICTING BACKGROUNDS */

/* Force remove any conflicting white/gray backgrounds from headers */
.indus-header *,
.navbar *,
.header-container *,
.page-header *,
.indus-sidebar__header * {
    background-image: none !important;
}

/* Ensure no other CSS can override these header styles */
.indus-header,
.indus-header.e-appbar,
.e-appbar.indus-header,
.e-appbar[data-color-mode="Primary"],
.navbar,
.header-container,
.top-header,
.page-header,
.indus-sidebar__header {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    background-color: var(--indusx-navy-primary) !important;
}

/* 🎯 LOGO AND BRAND STYLING */
.brand-logo,
.navbar-brand,
.header-logo {
    color: var(--indusx-navy-text) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.brand-logo:hover,
.navbar-brand:hover,
.header-logo:hover {
    color: var(--indusx-navy-text) !important;
    opacity: 0.9 !important;
}

/* 🎨 SUBTLE ANIMATIONS AND EFFECTS */
.indus-header,
.navbar,
.header-container,
.page-header,
.indus-sidebar__header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Gradient animation on hover (subtle) */
.indus-header:hover,
.navbar:hover,
.header-container:hover,
.page-header:hover {
    background-size: 120% 120% !important;
    animation: gradientShift 3s ease infinite !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 🔧 ACCESSIBILITY IMPROVEMENTS */
.indus-header,
.navbar,
.header-container,
.page-header,
.indus-sidebar__header {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .indus-header,
    .navbar,
    .header-container,
    .page-header,
    .indus-sidebar__header {
        border-bottom: 2px solid var(--indusx-navy-text) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .indus-header,
    .navbar,
    .header-container,
    .page-header,
    .indus-sidebar__header,
    .indus-header *,
    .navbar *,
    .header-container *,
    .page-header * {
        transition: none !important;
        animation: none !important;
    }
}

/* 🏗️ GRID HEADERS - EXECUTIVE NAVY THEME */

/* Syncfusion Grid Headers - All variations */
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-headercontent,
.e-grid .e-columnheader,
.e-gridheader,
.e-grid .e-header,
.e-grid .e-headertext {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    background-color: var(--indusx-navy-primary) !important;
    color: var(--indusx-navy-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Grid header row container */
.e-grid .e-gridheader,
.e-grid .e-headercontent .e-table,
.e-grid .e-columnheader table {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
}

/* Grid header cells hover and focus states */
.e-grid .e-headercell:hover,
.e-grid .e-headercelldiv:hover {
    background: var(--indusx-executive-gradient-reverse) !important;
    background-image: var(--indusx-executive-gradient-reverse) !important;
    color: var(--indusx-navy-text) !important;
}

/* Grid sorting icons in headers */
.e-grid .e-headercell .e-sortfilterdiv,
.e-grid .e-headercell .e-ascending,
.e-grid .e-headercell .e-descending,
.e-grid .e-headercell .e-icon-ascending,
.e-grid .e-headercell .e-icon-descending {
    color: var(--indusx-navy-text) !important;
    opacity: 0.9 !important;
}

/* Grid filter icons in headers */
.e-grid .e-headercell .e-filtermenudiv,
.e-grid .e-headercell .e-icon-filter,
.e-grid .e-headercell .e-filtericon {
    color: var(--indusx-navy-text) !important;
    opacity: 0.8 !important;
}

.e-grid .e-headercell .e-filtericon:hover {
    opacity: 1 !important;
}

/* DataGrid, DataForm, and other Syncfusion component headers */
.e-dataform .e-field-header,
.e-treegrid .e-headercell,
.e-pivotview .e-headercell,
.e-kanban .e-card-header,
.e-schedule .e-header-cells,
table.e-table thead th,
.table-header,
.grid-header,
[class*="header"][class*="grid"],
[class*="grid"][class*="header"] {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    background-color: var(--indusx-navy-primary) !important;
    color: var(--indusx-navy-text) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Custom table headers that might not use Syncfusion classes */
thead,
.thead,
th,
.th,
.table-head,
.data-header,
.list-header {
    background: var(--indusx-executive-gradient) !important;
    background-image: var(--indusx-executive-gradient) !important;
    background-color: var(--indusx-navy-primary) !important;
    color: var(--indusx-navy-text) !important;
    font-weight: 600 !important;
}

/* Ensure text in grid headers is always white */
.e-grid .e-headercell *,
.e-grid .e-headercelldiv *,
.e-grid .e-headercontent *,
thead *,
th *,
.table-header *,
.grid-header * {
    color: var(--indusx-navy-text) !important;
}

/* Grid header borders and separators */
.e-grid .e-headercell,
.e-grid.indus-grid-foundation .e-headercell {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Remove any conflicting backgrounds from grid headers */
.e-grid .e-headercell *:not(.e-ascending):not(.e-descending):not(.e-icon-ascending):not(.e-icon-descending):not(.e-filtericon) {
    background: transparent !important;
    background-image: none !important;
}