/**
 * KoreaSewa Standard Header Styles - SINGLE SOURCE OF TRUTH
 * ===========================================================
 * 
 * CRITICAL: This is the ONLY CSS file for header styling.
 * All header styles are defined here and used across ALL pages.
 * 
 * ✅ FUTURE-PROOF FEATURES:
 * - Conflict-free CSS with maximum specificity
 * - No duplicate rules (DRY principle)
 * - Proper namespace isolation (koreasewa- prefix)
 * - Sticky navbar optimized (no containment)
 * - Universal support (all pages)
 * - Professional documentation
 * 
 * MODULE SYSTEM:
 * - Header is modularized with conflict prevention
 * - Each module is isolated and namespaced
 * - CSS isolation enforced to prevent page conflicts
 * - All classes use koreasewa- prefix for namespacing
 * - Header Coordinator manages JavaScript initialization
 * 
 * Standard Header Structure (IDENTICAL on ALL pages):
 * - Notice Board: Top banner with notices (if enabled)
 * - Main Header Row:
 *   * Left: Sidebar toggle button + Logo ("KS" circle + "Korea Sewa" text + tagline)
 *   * Center: Search Bar (centered search input with magnifying glass icon)
 *   * Right: Notification bell icon (order: 1) + User menu/avatar (order: 2)
 * - Navigation Row: Dynamic navigation items (ALWAYS visible on ALL pages including home)
 * - Login Button: Blue-to-red gradient button in navigation bar (when not authenticated)
 * 
 * Features:
 * - Responsive design with horizontal scrolling on mobile
 * - Smaller sizes on mobile devices
 * - Smooth touch scrolling
 * - Professional code standards
 * - Navigation bar ALWAYS VISIBLE on ALL pages for consistency
 * - Consistent across ALL pages (home, news, library, etc.)
 * - Conflict prevention system
 * - CSS isolation and module boundaries
 * 
 * DO NOT create duplicate header CSS files.
 * DO NOT override header styles in page-specific CSS files.
 * DO NOT use generic class names (.header, .navbar, .search) - use koreasewa- prefix.
 * 
 * Version: 6.2.0 - Professional Header with Right-Side Top Notifications
 * Last Updated: 2025-12-19
 * 
 * ✅ NOTIFICATION POSITION: Right side, top (before user menu/login)
 * ✅ ORDER: Notification Bell (1) → User Menu/Login (2)
 * 
 * ✅ STICKY NAVBAR IMPROVEMENTS:
 * - Removed CSS containment that breaks sticky positioning
 * - Optimized overflow settings for sticky navbar
 * - Enhanced header main row for sticky compatibility
 * - Professional documentation for sticky navbar support
 * 
 * RECENT IMPROVEMENTS:
 * - Notification bell icon positioned on right side (before user menu)
 * - Enhanced CSS organization with better documentation
 * - Improved flexbox ordering for header actions
 * - Better accessibility attributes and ARIA labels
 * 
 * STANDARDIZATION COMPLETED:
 * - Removed ALL CSS rules that hide navigation/login on home pages
 * - Navigation bar now ALWAYS visible on ALL pages for consistent UX
 * - Login button always visible when user is not authenticated
 * - Header structure is identical across all pages
 * - No page-specific hiding rules - single standard header everywhere
 * 
 * STICKY NAVBAR OPTIMIZATION:
 * - Header uses position: sticky for top-level sticky behavior
 * - Navbar uses position: sticky with calculated top offset
 * - All parent containers have overflow: visible (required for sticky)
 * - CSS containment removed (breaks sticky positioning)
 * - Professional scroll detection with shadow effects
 * 
 * Improvements: 
 * - Single header base definition with maximum specificity
 * - Universal rules for all header elements (work on ALL pages)
 * - Explicit user menu visibility rules
 * - Complete protection against any CSS loaded after header.css
 * - DRY principle enforced - no duplicate code
 * - Navigation bar hidden on home page permanently
 */

/* ============================================================================
   HEADER MODULE CONFLICT PREVENTION
   ============================================================================
   These rules ensure header modules are isolated from page-specific CSS
   and prevent conflicts across all pages.
   ============================================================================ */

/* 1. CSS Isolation Context - Create new stacking context */
/* ⚠️ CRITICAL: Do NOT use containment on header - it breaks sticky navbar positioning! */
/* Containment creates a new containing block that prevents sticky positioning from working */

/* CRITICAL: Set default header height CSS variable for navbar sticky positioning */
:root {
    --header-main-row-height: 80px;
    --calculated-header-height: 80px;
}
/* Enhanced isolation for header - prevents page CSS conflicts */
#koreasewa-header.koreasewa-header-isolated,
.koreasewa-header.koreasewa-header-isolated,
#koreasewa-header[data-header-isolated="true"],
.koreasewa-header[data-header-isolated="true"] {
    /* Use isolation for stacking context, but NOT containment */
    isolation: isolate !important;
    /* contain: layout style paint !important; - REMOVED: Breaks sticky navbar */
    contain: none !important; /* CRITICAL: No containment for sticky to work */
    /* Prevent page CSS from affecting header */
    box-sizing: border-box !important;
}

/* Fallback for headers without isolation class */
.koreasewa-header {
    /* Use isolation for stacking context, but NOT containment */
    isolation: isolate !important;
    /* contain: layout style paint !important; - REMOVED: Breaks sticky navbar */
    contain: none !important; /* CRITICAL: No containment for sticky to work */
}

/* Child elements can use isolation but NOT containment - scoped to header */
#koreasewa-header *,
.koreasewa-header * {
    /* Only use isolation if needed for stacking, but avoid containment */
    isolation: inherit;
    contain: none !important; /* CRITICAL: No containment on children - breaks sticky */
    /* Prevent page CSS from affecting header children */
    box-sizing: border-box !important;
}

/* 2. Module Boundary Enforcement */
/* ⚠️ CRITICAL: Do NOT use containment - it breaks sticky navbar positioning! */
.koreasewa-header-module {
    position: relative;
    z-index: inherit;
    isolation: isolate;
    /* contain: layout style paint; - REMOVED: Breaks sticky navbar */
    contain: none !important; /* CRITICAL: No containment for sticky to work */
}

/* 3. Prevent Generic Selector Conflicts - Removed empty selector */

/* 4. Protect Module Components - All header sub-components */
/* ⚠️ CRITICAL: Do NOT use containment on sub-components - breaks sticky navbar */
.koreasewa-header [class*="koreasewa-"] {
    box-sizing: border-box;
    isolation: inherit;
    /* contain: layout style paint; - REMOVED: Breaks sticky navbar */
    contain: none !important; /* CRITICAL: No containment for sticky to work */
}

/* 5. Prevent Page-Specific Overrides - Maximum Specificity */
html body .koreasewa-header,
html body .koreasewa-header * {
    /* Inherit isolation from parent */
    isolation: inherit;
}

/* ============================================================================
   HEADER BASE - UNIVERSAL (ALL PAGES) - SINGLE DEFINITION
   ============================================================================
   CRITICAL: This is the ONLY base definition for .koreasewa-header.
   Maximum specificity to override any page-specific CSS conflicts.
   ============================================================================ */
/* ============================================================================
   HEADER BASE - UNIVERSAL (ALL PAGES) - SINGLE DEFINITION
   ============================================================================
   CRITICAL: This is the ONLY base definition for .koreasewa-header.
   Maximum specificity to override any page-specific CSS conflicts.
   ============================================================================ */
html body .koreasewa-header,
html body header.koreasewa-header,
html body #koreasewa-header,
body .koreasewa-header,
header.koreasewa-header,
.koreasewa-header {
    /* Base styling */
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: 0 2px 4px var(--header-shadow) !important;
    
    /* Positioning - Sticky at top */
    position: -webkit-sticky !important; /* Safari support */
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-header, 1000) !important;
    
    /* Width - Full viewport */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    
    /* Spacing */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Overflow - CRITICAL: Allow dropdowns to be visible AND allow sticky children */
    /* Sticky positioning requires overflow: visible on parent */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* CRITICAL: Ensure header doesn't clip sticky navbar */
    clip: auto !important;
    clip-path: none !important;
    
    /* Visibility - Always visible on all pages */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    
    /* Sticky behavior enhancements */
    transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
    will-change: transform, box-shadow !important;
}

/* ============================================================================
   STICKY HEADER - ENHANCED SCROLL BEHAVIOR
   ============================================================================
   Future-proof sticky header with enhanced shadow on scroll
   ============================================================================ */

/* Enhanced shadow when scrolled */
.koreasewa-header.header-scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    background: var(--header-bg, #ffffff) !important;
}

/* Smooth transition for scroll state */
.koreasewa-header.header-scrolled,
.koreasewa-header:not(.header-scrolled) {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile optimizations for sticky header */
@media (max-width: 767.98px) {
    .koreasewa-header {
        /* Ensure sticky works on mobile */
        position: sticky !important;
        top: 0 !important;
        /* CRITICAL: Do NOT use transform - it creates containing block that breaks sticky navbar */
        /* -webkit-transform: translateZ(0); - REMOVED: Breaks sticky navbar */
        /* transform: translateZ(0); - REMOVED: Breaks sticky navbar */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* CRITICAL: Ensure overflow is visible for sticky navbar to work */
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .koreasewa-header.header-scrolled {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
    .koreasewa-header {
        position: sticky !important;
        top: 0 !important;
    }
}

/* Desktop - ensure sticky works */
@media (min-width: 992px) {
    .koreasewa-header {
        position: sticky !important;
        top: 0 !important;
    }
}

/* Performance optimization: Header visible class to avoid inline styles */
.koreasewa-header.header-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Stacking context for dropdowns */
    /* CRITICAL: Do NOT use CSS containment on header - it can break sticky navbar positioning! */
    /* isolation: isolate !important; - Removed: Can interfere with sticky children */
    /* contain: layout style paint !important; - REMOVED: Creates containing block that breaks sticky navbar */
    overflow: visible !important;
    
    /* Performance */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Transitions */
    transition: margin-left 0.3s ease, width 0.3s ease, top 0.3s ease;
}

/* Ensure all header parts are visible on home page */
html body .koreasewa-header *,
html body header.koreasewa-header *,
body .koreasewa-header *,
body.home .koreasewa-header *,
body.homepage .koreasewa-header *,
.koreasewa-header * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force header main row visibility on home page */
html body .koreasewa-header .koreasewa-header-main-row,
html body header.koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row,
body.home .koreasewa-header .koreasewa-header-main-row,
body.homepage .koreasewa-header .koreasewa-header-main-row,
.koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    /* CRITICAL: Allow dropdowns and sticky children to be visible */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Force header navigation visibility on home page */
html body .koreasewa-header .koreasewa-header-navigation,
html body header.koreasewa-header .koreasewa-header-navigation,
body .koreasewa-header .koreasewa-header-navigation,
body.home .koreasewa-header .koreasewa-header-navigation,
body.homepage .koreasewa-header .koreasewa-header-navigation,
.koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

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

.koreasewa-header {
    --header-bg: #ffffff;
    --header-border: rgba(0, 0, 0, 0.08);
    --header-shadow: rgba(0, 0, 0, 0.04);
    --header-text: #212529;
    --header-text-muted: #6c757d;
    --action-hover: rgba(0, 0, 0, 0.05);
    --action-active: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .koreasewa-header,
[data-bs-theme="dark"] .koreasewa-header {
    --header-bg: #1a1a1a;
    --header-border: rgba(255, 255, 255, 0.1);
    --header-shadow: rgba(0, 0, 0, 0.3);
    --header-text: #e0e0e0;
    --header-text-muted: #adb5bd;
    --action-hover: rgba(255, 255, 255, 0.1);
    --action-active: rgba(255, 255, 255, 0.15);
}

/* Header base definition removed - consolidated above with maximum specificity */

/* Adjust header position when notice board is visible */
body:has(.header-notice-board.show) .koreasewa-header {
    top: var(--notice-board-height, 48px);
}

/* Fallback for browsers without :has() support */
.header-notice-board.show ~ .koreasewa-header {
    top: var(--notice-board-height, 48px);
}

/* ============================================================================
   LIBRARY PAGES - HEADER POSITIONING WITH NOTICE BOARD
   ============================================================================
   CRITICAL: Ensure header properly adjusts when notice board is visible
   on library pages. Library pages have specific CSS that might conflict,
   so we add explicit rules with maximum specificity.
   ============================================================================ */
/* Adjust header position when notice board is visible on library pages */
body.library-home-page:has(.header-notice-board.show) .koreasewa-header,
body[class*="library"]:has(.header-notice-board.show) .koreasewa-header,
body.library-home-page:has(.header-notice-board:not(.hidden):not(.force-hidden)) .koreasewa-header,
body[class*="library"]:has(.header-notice-board:not(.hidden):not(.force-hidden)) .koreasewa-header {
    top: var(--notice-board-height, 48px) !important;
}

/* Fallback for browsers without :has() support - library pages */
body.library-home-page .header-notice-board.show ~ .koreasewa-header,
body[class*="library"] .header-notice-board.show ~ .koreasewa-header,
body.library-home-page .header-notice-board:not(.hidden):not(.force-hidden) ~ .koreasewa-header,
body[class*="library"] .header-notice-board:not(.hidden):not(.force-hidden) ~ .koreasewa-header {
    top: var(--notice-board-height, 48px) !important;
}

/* Ensure header maintains proper positioning on library pages */
body.library-home-page .koreasewa-header,
body[class*="library"] .koreasewa-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}


/* ============================================================================
   SINGLE STANDARD: KOREASEWA- PREFIXED CLASSES ONLY (DRY PRINCIPLE)
   ============================================================================
   All old class definitions removed - using only koreasewa- prefixed classes.
   This ensures single standard approach with no conflicts.
   
   CRITICAL: All generic class names are scoped to #koreasewa-header to prevent
   conflicts with page-specific CSS. This ensures header styles never affect
   page content and page styles never affect the header.
   ============================================================================ */

/* Scoped to header only - prevents conflicts with page CSS */
#koreasewa-header .action-btn,
.koreasewa-header .action-btn,
#koreasewa-header [class*="action-btn"],
.koreasewa-header [class*="action-btn"] {
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--header-text);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    text-decoration: none;
    position: relative;
    height: 38px;
}

#koreasewa-header .action-btn:hover,
.koreasewa-header .action-btn:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    text-decoration: none;
    color: var(--header-text);
}

#koreasewa-header .action-btn:active,
.koreasewa-header .action-btn:active {
    background: var(--action-active);
}

#koreasewa-header .action-btn i,
.koreasewa-header .action-btn i {
    font-size: 1rem;
}

#koreasewa-header .action-label,
.koreasewa-header .action-label {
    font-weight: 500;
}

/* Theme Toggle - Scoped to header */
#koreasewa-header .theme-btn,
.koreasewa-header .theme-btn {
    padding: 0.5rem;
    width: 38px;
    justify-content: center;
}

#koreasewa-header .theme-icon-light,
.koreasewa-header .theme-icon-light,
#koreasewa-header .theme-icon-dark,
.koreasewa-header .theme-icon-dark {
    transition: opacity 0.2s ease;
}

[data-theme="dark"] #koreasewa-header .theme-icon-light,
[data-bs-theme="dark"] #koreasewa-header .theme-icon-light,
[data-theme="dark"] .koreasewa-header .theme-icon-light,
[data-bs-theme="dark"] .koreasewa-header .theme-icon-light {
    display: none;
}

[data-theme="dark"] #koreasewa-header .theme-icon-dark,
[data-bs-theme="dark"] #koreasewa-header .theme-icon-dark,
[data-theme="dark"] .koreasewa-header .theme-icon-dark,
[data-bs-theme="dark"] .koreasewa-header .theme-icon-dark {
    display: block !important;
}


/* User Avatar - Scoped to header */
#koreasewa-header .user-btn,
.koreasewa-header .user-btn {
    padding: 0.25rem;
    width: 38px;
    height: 38px;
    justify-content: center;
    border-radius: 50%;
}

#koreasewa-header .user-avatar,
.koreasewa-header .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ============================================================================
   LOGIN BUTTON - CONSISTENT ACROSS ALL PAGES
   ============================================================================
   CRITICAL: All pages use .koreasewa-login-btn with standard gradient.
   Old .login-btn styles are kept for backward compatibility but should not be used.
   ============================================================================ */

/* Legacy .login-btn styles - DEPRECATED, use .koreasewa-login-btn instead */
/* Kept for backward compatibility only - SCOPED to header to prevent conflicts */
#koreasewa-header .login-btn,
.koreasewa-header .login-btn,
#koreasewa-header .koreasewa-header-action .login-btn,
.koreasewa-header .koreasewa-header-action .login-btn,
#koreasewa-header .navbar-auth .login-btn,
.koreasewa-header .navbar-auth .login-btn,
#koreasewa-header .navbar-auth a.login-btn,
.koreasewa-header .navbar-auth a.login-btn,
#koreasewa-header .koreasewa-header-right .login-btn,
.koreasewa-header .koreasewa-header-right .login-btn {
    /* Use same gradient as .koreasewa-login-btn for consistency */
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 500;
}

#koreasewa-header .login-btn:hover,
.koreasewa-header .login-btn:hover {
    background: linear-gradient(135deg, #0052cc 0%, #cc0000 100%) !important;
    color: white !important;
    text-decoration: none !important;
}

#koreasewa-header .login-btn:focus,
.koreasewa-header .login-btn:focus {
    outline: 2px solid #0066ff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 255, 0.25) !important;
}

#koreasewa-header .login-btn:active,
.koreasewa-header .login-btn:active {
    background: linear-gradient(135deg, #0047b3 0%, #b30000 100%) !important;
    color: white !important;
}

/* Language Switcher Integration - Professional Dropdown */
.koreasewa-header-action .language-switcher {
    position: relative;
    z-index: var(--z-header-controls, 1003);
}

.koreasewa-header-action .language-switcher-dropdown {
    position: relative;
}

/* Language Switcher Trigger Button */
.koreasewa-header-action .language-switcher-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    color: var(--header-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    height: 38px;
    min-width: 100px;
    justify-content: space-between;
}

.koreasewa-header-action .language-switcher-trigger:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    color: var(--header-text);
}

.koreasewa-header-action .language-switcher-trigger:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.koreasewa-header-action .language-switcher-trigger[aria-expanded="true"] {
    background: var(--action-active);
    border-color: var(--bs-primary);
}

.koreasewa-header-action .language-switcher-trigger .language-flag {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.koreasewa-header-action .language-switcher-trigger .language-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.koreasewa-header-action .language-switcher-trigger .language-switcher-arrow {
    font-size: 0.625rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.koreasewa-header-action .language-switcher-trigger[aria-expanded="true"] .language-switcher-arrow {
    transform: rotate(180deg);
}

/* Language Switcher Dropdown Menu */
.koreasewa-header-action .language-switcher-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 180px;
    max-width: 250px;
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    z-index: var(--z-header-dropdown, 1004);
    max-height: 300px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: visibility 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.koreasewa-header-action .language-switcher-menu.show,
.koreasewa-header-action .language-switcher-menu[aria-hidden="false"] {
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(0);
    animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .koreasewa-header-action .language-switcher-menu,
[data-bs-theme="dark"] .koreasewa-header-action .language-switcher-menu {
    background: var(--header-bg);
    border-color: var(--header-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.koreasewa-header-action .language-switcher-menu.show,
.koreasewa-header-action .language-switcher-menu[style*="display: block"] {
    display: block;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Bootstrap Dropdown Integration */
.koreasewa-header-action .language-switcher .dropdown-menu {
    min-width: 180px;
    max-width: 250px;
    padding: 0.5rem 0;
    border: 1px solid var(--header-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: var(--header-bg);
    margin-top: 0.5rem;
    display: none !important; /* Ensure hidden by default */
}

.koreasewa-header-action .language-switcher .dropdown-menu.show {
    display: block !important;
}

[data-theme="dark"] .koreasewa-header-action .language-switcher .dropdown-menu,
[data-bs-theme="dark"] .koreasewa-header-action .language-switcher .dropdown-menu {
    background: var(--header-bg);
    border-color: var(--header-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Ensure all dropdown menus are hidden by default, but allow Bootstrap to show them */
.koreasewa-header-action .dropdown-menu:not(.show) {
    display: none;
}

.koreasewa-header-action .dropdown-menu.show {
    display: block;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Language Switcher Menu Items */
.koreasewa-header-action .language-switcher-item {
    margin: 0;
    padding: 0;
}

.koreasewa-header-action .language-switcher-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    text-align: left;
    font-weight: 500;
}

.koreasewa-header-action .language-switcher-option:hover {
    background: var(--action-hover);
    color: var(--header-text);
}

.koreasewa-header-action .language-switcher-option:focus {
    outline: 2px solid #0066ff;
    outline-offset: -2px;
}

.koreasewa-header-action .language-switcher-option .language-flag {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.koreasewa-header-action .language-switcher-option .language-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active Language Indicator */
.koreasewa-header-action .language-switcher-option[data-language].active {
    background: var(--action-active);
    color: var(--bs-primary);
    font-weight: 600;
}

.koreasewa-header-action .language-switcher-option[data-language].active::after {
    content: '✓';
    margin-left: auto;
    color: var(--bs-primary);
    font-weight: 700;
}

/* Minimal Style (Fallback) */
.koreasewa-header-action .language-switcher-minimal {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.koreasewa-header-action .language-switcher-flag {
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    padding: 0.5rem;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.koreasewa-header-action .language-switcher-flag:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
}

.koreasewa-header-action .language-switcher-flag.active {
    background: var(--action-active);
    border-color: var(--bs-primary);
}

.koreasewa-header-action .language-flag {
    font-size: 1rem;
    line-height: 1;
}



/* User Menu Integration */
.koreasewa-header-action .navbar-auth {
    display: flex;
    align-items: center;
    position: relative;
}

.koreasewa-header-action .navbar-auth .dropdown {
    position: relative;
}

.koreasewa-header-action .user-menu-btn,
.koreasewa-header-action .login-btn {
    height: 38px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    min-width: auto;
}

/* Login button in header-action - use standard gradient (DRY principle) */
/* Note: Base login button styles use gradient - this ensures consistency */
/* DRY: No duplicate styles - uses same gradient as .koreasewa-login-btn */
.koreasewa-header-action .login-btn {
    /* Use standard gradient - same as .koreasewa-login-btn */
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    color: white !important;
    border: none !important;
}

.koreasewa-header-action .login-btn:hover {
    background: linear-gradient(135deg, #0052cc 0%, #cc0000 100%) !important;
    color: white !important;
    text-decoration: none !important;
}

.koreasewa-header-action .user-menu-btn {
    background: transparent;
    border: 1px solid var(--header-border);
    color: #764ba2 !important; /* Purple color for user icon */
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    cursor: pointer;
}

.koreasewa-header-action .user-menu-btn:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    color: #5a3a7a !important; /* Darker purple on hover */
}

.koreasewa-header-action .user-menu-btn:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* User Avatar Small (in button) */
.user-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.user-name-text {
    font-weight: 500;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-icon {
    font-size: 0.875rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.user-menu-btn:hover .user-menu-icon {
    opacity: 1;
}

/* User Dropdown Menu - REMOVED */
/* User menu now directly opens settings panel - no dropdown needed */
/* All dropdown-related CSS removed for cleaner code */

/* ============================================================================
   KS NOTIFICATIONS MODULE - BELL ICON WITH DROPDOWN
   ============================================================================
   Professional notification system with bell icon and dropdown menu.
   Integrated with KS Notifications service.
   ============================================================================ */

/* Notifications Container */
.koreasewa-notifications-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    overflow: visible !important; /* CRITICAL: Ensure dropdown is not clipped by parent overflow */
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: var(--z-header-controls, 1003) !important; /* Ensure container is above navbar */
}

/* Notifications Bell Button */
.koreasewa-notifications-btn {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    color: var(--header-text);
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    transition: all 0.2s ease;
    font-size: 1.125rem !important; /* Changed from 0 to show icon */
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
}

.koreasewa-notifications-btn:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    color: var(--header-text);
}

.koreasewa-notifications-btn:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.koreasewa-notifications-btn[aria-expanded="true"] {
    background: var(--action-active);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Bell Icon - Must override button font-size: 0 */
.koreasewa-notifications-icon {
    font-size: 1.125rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important; /* Don't block clicks on button */
}

/* Ensure icon is visible inside button (override button's font-size: 0) */
.koreasewa-notifications-btn .koreasewa-notifications-icon,
.koreasewa-notifications-btn i.koreasewa-notifications-icon,
.koreasewa-notifications-btn i.bi-bell {
    font-size: 1.125rem !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

/* Notification Badge */
.koreasewa-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.375rem;
    background: #ff0000;
    color: white;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    z-index: 1;
    border: 2px solid var(--header-bg);
    pointer-events: none !important; /* Don't block clicks on button */
}

.koreasewa-notifications-badge-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure badge is visible when not hidden - maximum specificity */
.koreasewa-notifications-badge:not(.koreasewa-notifications-badge-hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.koreasewa-notifications-badge-count {
    display: block;
}

/* Notifications Dropdown */
/* Notification Dropdown - Hidden by Default, Shows with .show class or aria-hidden="false" */
.koreasewa-notifications-dropdown,
html body .koreasewa-notifications-dropdown,
body .koreasewa-notifications-dropdown,
#koreasewa-notifications-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto !important; /* CRITICAL: Don't let CSS calculate left - use auto */
    width: 360px;
    max-width: calc(100vw - 2rem);
    max-height: 500px;
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--z-user-notifications, 1999) !important; /* Above navbar (998) and header (1000) */
    display: none !important; /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
    /* CRITICAL: Ensure dropdown is not clipped by parent overflow */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Notification Dropdown - Show State (Maximum Specificity) */
html body .koreasewa-notifications-dropdown[aria-hidden="false"],
html body .koreasewa-notifications-dropdown.show,
html body .koreasewa-notifications-dropdown.koreasewa-notifications-dropdown-open,
body .koreasewa-notifications-dropdown[aria-hidden="false"],
body .koreasewa-notifications-dropdown.show,
body .koreasewa-notifications-dropdown.koreasewa-notifications-dropdown-open,
.koreasewa-notifications-dropdown[aria-hidden="false"],
.koreasewa-notifications-dropdown.show,
.koreasewa-notifications-dropdown.koreasewa-notifications-dropdown-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: flex !important;
    pointer-events: auto !important;
    z-index: var(--z-user-notifications, 1999) !important; /* Above navbar (998) and header (1000) */
    left: auto !important; /* CRITICAL: Ensure left is auto when visible */
    right: 0 !important; /* Ensure right alignment */
    /* CRITICAL: Override any conflicting styles - use absolute by default, fixed when needed (handled by JS) */
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
}

/* Dropdown Header */
.koreasewa-notifications-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--header-border);
    flex-shrink: 0;
}

.koreasewa-notifications-dropdown-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--header-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.koreasewa-notifications-dropdown-title i {
    font-size: 1.125rem;
}

.koreasewa-notifications-dropdown-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--header-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.125rem;
    line-height: 1;
}

.koreasewa-notifications-dropdown-close:hover {
    background: var(--action-hover);
    color: var(--header-text);
}

/* Loading State */
.koreasewa-notifications-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--header-text-muted);
    text-align: center;
}

.koreasewa-notifications-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--header-border);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Professional fade-in animation for dropdown */
@keyframes notificationDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Apply animation when dropdown opens */
.ks_header_notification_dropdown[aria-hidden="false"],
.ks_header_notification_dropdown.ks_header_notification_dropdown_open,
.ks_header_notification_dropdown.show {
    animation: notificationDropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Notification item enter animation */
@keyframes notificationItemSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ks_header_notification_item {
    animation: notificationItemSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

/* Stagger animation for multiple items */
.ks_header_notification_item:nth-child(1) { animation-delay: 0.05s; }
.ks_header_notification_item:nth-child(2) { animation-delay: 0.1s; }
.ks_header_notification_item:nth-child(3) { animation-delay: 0.15s; }
.ks_header_notification_item:nth-child(4) { animation-delay: 0.2s; }
.ks_header_notification_item:nth-child(5) { animation-delay: 0.25s; }
.ks_header_notification_item:nth-child(n+6) { animation-delay: 0.3s; }

.koreasewa-notifications-loading p {
    margin: 0;
    font-size: 0.875rem;
}

.koreasewa-notifications-loading-hidden {
    display: none !important;
}

/* Empty State */
.koreasewa-notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--header-text-muted);
    text-align: center;
}

.koreasewa-notifications-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.koreasewa-notifications-empty p {
    margin: 0;
    font-size: 0.875rem;
}

.koreasewa-notifications-empty-hidden {
    display: none !important;
}

/* Notifications List */
.koreasewa-notifications-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
    padding: 0.5rem 0;
}

.koreasewa-notifications-list::-webkit-scrollbar {
    width: 6px;
}

.koreasewa-notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.koreasewa-notifications-list::-webkit-scrollbar-thumb {
    background: var(--header-border);
    border-radius: 3px;
}

.koreasewa-notifications-list::-webkit-scrollbar-thumb:hover {
    background: var(--header-text-muted);
}

/* Notification Item */
.koreasewa-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--header-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.koreasewa-notification-item:last-child {
    border-bottom: none;
}

.koreasewa-notification-item:hover {
    background: var(--action-hover);
}

.koreasewa-notification-item.unread {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.koreasewa-notification-item.unread:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Notification Icon */
.koreasewa-notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    color: white;
}

.koreasewa-notification-icon.info {
    background: #0066ff;
}

.koreasewa-notification-icon.success {
    background: #28a745;
}

.koreasewa-notification-icon.warning {
    background: #ffc107;
    color: #000;
}

.koreasewa-notification-icon.error {
    background: #dc3545;
}

/* Notification Content */
.koreasewa-notification-content {
    flex: 1;
    min-width: 0;
}

.koreasewa-notification-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--header-text);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Public Notification Badge */
.koreasewa-notification-public-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: #007BFF;
    color: white;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.koreasewa-notification-message {
    font-size: 0.8125rem;
    color: var(--header-text-muted);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.koreasewa-notification-time {
    font-size: 0.75rem;
    color: var(--header-text-muted);
    margin-top: 0.25rem;
}

/* Notification Actions */
.koreasewa-notification-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.koreasewa-notification-action-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--header-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.koreasewa-notification-action-btn:hover {
    background: var(--action-hover);
    color: var(--header-text);
}

/* Dropdown Footer */
.koreasewa-notifications-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--header-border);
    flex-shrink: 0;
}

.koreasewa-notifications-view-all {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.koreasewa-notifications-view-all:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.koreasewa-notifications-mark-all-read {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--header-text-muted);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.koreasewa-notifications-mark-all-read:hover {
    color: var(--header-text);
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .koreasewa-notifications-dropdown {
        width: calc(100vw - 1rem);
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }
    
    .koreasewa-notifications-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}

/* ============================================================================
   KS HEADER NOTIFICATION MODULE - BELL ICON WITH DROPDOWN
   ============================================================================
   Professional notification system for header with bell icon and dropdown.
   Uses ks_header_notification_* prefix for future-proof naming.
   ============================================================================ */

/* Notification Header Container - MAXIMUM SPECIFICITY */
html body .koreasewa-header-right .ks_header_notification_container,
html body .koreasewa-header-right #ks_header_notification_container,
html body .koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
body .koreasewa-header-right .ks_header_notification_container,
body .koreasewa-header-right #ks_header_notification_container,
body .koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
.koreasewa-header-right .ks_header_notification_container,
.koreasewa-header-right #ks_header_notification_container,
.koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
html body .ks_header_notification_container,
body .ks_header_notification_container,
.ks_header_notification_container,
#ks_header_notification_container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: var(--z-header-controls, 1003) !important;
    /* CRITICAL: Ensure dropdown is not clipped by parent overflow */
    isolation: isolate !important;
    contain: none !important;
    clip-path: none !important;
    /* CRITICAL: Ensure notification icon stays in its container (right side) - FIRST */
    order: 1 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Ensure ALL parent containers don't clip the dropdown - MAXIMUM SPECIFICITY */
html body .koreasewa-header-right,
html body .koreasewa-header-action,
html body .ks_header_action,
body .koreasewa-header-right,
body .koreasewa-header-action,
body .ks_header_action,
.koreasewa-header-right,
.koreasewa-header-action,
.ks_header_action {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
}

/* Ensure header itself doesn't clip */
html body .koreasewa-header,
body .koreasewa-header,
.koreasewa-header {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Notification Header Button - Enhanced Styling */
.ks_header_notification_btn {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; /* Slightly larger */
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0.5rem;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.1); /* More visible border */
    border-radius: 8px; /* More rounded */
    color: #495057; /* Professional gray */
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.125rem !important;
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ks_header_notification_btn:hover {
    background: rgba(0, 123, 255, 0.08); /* Light blue hover */
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px); /* Slight lift */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.ks_header_notification_btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.ks_header_notification_btn[aria-expanded="true"] {
    background: rgba(0, 123, 255, 0.12); /* Active state */
    border-color: #007bff;
    color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
}

/* Bell Icon */
.ks_header_notification_icon {
    font-size: 1.125rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
}

/* Notification Badge - Enhanced Styling */
.ks_header_notification_badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); /* Professional red gradient */
    color: white;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 700; /* Bolder */
    line-height: 1;
    z-index: 1;
    border: 2.5px solid #ffffff; /* White border for contrast */
    pointer-events: none !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.01em;
}

.ks_header_notification_badge_hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ks_header_notification_badge:not(.ks_header_notification_badge_hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ks_header_notification_badge_count {
    display: block;
}

/* Notification Dropdown - PORTAL PATTERN (Moved to body) */
/* MAXIMUM SPECIFICITY - Works when dropdown is in body or container */
/* PROFESSIONAL UI - Enhanced styling for modern, polished appearance */
html body .ks_header_notification_dropdown,
body .ks_header_notification_dropdown,
body > .ks_header_notification_dropdown,
.ks_header_notification_dropdown,
#ks_header_notification_dropdown {
    position: fixed !important;
    width: 400px !important; /* Slightly wider for better readability */
    max-width: calc(100vw - 2rem) !important;
    max-height: 600px !important;
    /* SOLID BACKGROUND - Professional opaque white/light background */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    /* Enhanced border and shadow for depth */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important; /* More rounded for modern look */
    /* Professional shadow with multiple layers for depth */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04) !important;
    z-index: 999999 !important; /* MAXIMUM z-index */
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.95) !important;
    /* Smooth, professional transitions */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s ease,
                box-shadow 0.25s ease !important;
    /* CRITICAL: Create new stacking context */
    isolation: isolate !important;
    will-change: transform, opacity !important;
    contain: none !important;
    clip-path: none !important;
    clip: auto !important;
    /* Ensure it's not affected by any parent */
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure solid background - no transparency */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dropdown Show State - MAXIMUM SPECIFICITY */
/* Works when in body (portal) or in container */
html body .ks_header_notification_dropdown[aria-hidden="false"],
html body .ks_header_notification_dropdown.ks_header_notification_dropdown_open,
html body .ks_header_notification_dropdown.show,
html body > .ks_header_notification_dropdown[aria-hidden="false"],
html body > .ks_header_notification_dropdown.ks_header_notification_dropdown_open,
html body > .ks_header_notification_dropdown.show,
body .ks_header_notification_dropdown[aria-hidden="false"],
body .ks_header_notification_dropdown.ks_header_notification_dropdown_open,
body .ks_header_notification_dropdown.show,
body > .ks_header_notification_dropdown[aria-hidden="false"],
body > .ks_header_notification_dropdown.ks_header_notification_dropdown_open,
body > .ks_header_notification_dropdown.show,
.ks_header_notification_dropdown[aria-hidden="false"],
.ks_header_notification_dropdown.ks_header_notification_dropdown_open,
.ks_header_notification_dropdown.show,
#ks_header_notification_dropdown[aria-hidden="false"],
#ks_header_notification_dropdown.ks_header_notification_dropdown_open,
#ks_header_notification_dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    display: flex !important;
    pointer-events: auto !important;
    z-index: 999999 !important; /* MAXIMUM z-index */
    position: fixed !important;
    /* SOLID BACKGROUND when visible */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    /* Enhanced shadow when visible */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04) !important;
    /* JavaScript controls top/left/right via inline styles */
}

/* Dropdown Header - Professional Styling */
.ks_header_notification_dropdown_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem; /* More padding for breathing room */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* Subtle border */
    flex-shrink: 0;
    /* SOLID BACKGROUND for header */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    /* Subtle gradient for depth */
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%) !important;
    border-radius: 16px 16px 0 0; /* Match dropdown border radius */
}

.ks_header_notification_dropdown_title {
    margin: 0;
    font-size: 1.125rem; /* Slightly larger for prominence */
    font-weight: 700; /* Bolder for better hierarchy */
    color: #1a1a1a; /* Darker for better contrast */
    display: flex;
    align-items: center;
    gap: 0.625rem; /* Better spacing */
    letter-spacing: -0.01em; /* Tighter letter spacing for modern look */
}

.ks_header_notification_dropdown_title i {
    font-size: 1.25rem;
    color: #007bff; /* Primary blue */
    background: rgba(0, 123, 255, 0.1); /* Subtle background */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.ks_header_notification_dropdown_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Slightly larger for better touch target */
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6c757d; /* Professional gray */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

.ks_header_notification_dropdown_close:hover {
    background: rgba(0, 0, 0, 0.05); /* Subtle hover background */
    color: #1a1a1a; /* Darker on hover */
    transform: scale(1.05); /* Slight scale for feedback */
}

.ks_header_notification_dropdown_close:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.08);
}

/* Loading State - Professional Spinner */
.ks_header_notification_loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: #6c757d;
    text-align: center;
    min-height: 250px;
    background: #ffffff !important;
}

.ks_header_notification_loading_hidden {
    display: none !important;
}

.ks_header_notification_loading_spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 123, 255, 0.1);
    border-top-color: #007bff;
    border-right-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 1.25rem;
    position: relative;
}

.ks_header_notification_loading_spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(0, 123, 255, 0.2);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite reverse;
}

.ks_header_notification_loading p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6c757d;
    letter-spacing: 0.01em;
}

/* Empty State - Professional Empty State */
.ks_header_notification_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: #6c757d;
    text-align: center;
    min-height: 250px;
    background: #ffffff !important;
}

.ks_header_notification_empty_hidden {
    display: none !important;
}

.ks_header_notification_empty i {
    font-size: 4rem;
    margin-bottom: 1.25rem;
    opacity: 0.3;
    color: #adb5bd;
    background: rgba(173, 181, 189, 0.1);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ks_header_notification_empty p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6c757d;
    letter-spacing: 0.01em;
}

/* Notifications List - Enhanced Scrollbar */
.ks_header_notification_list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 450px;
    padding: 0.75rem 0; /* More padding */
    display: block !important;
    visibility: visible !important;
    /* SOLID BACKGROUND for list */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Ensure list is visible when dropdown is open */
.ks_header_notification_dropdown[aria-hidden="false"] .ks_header_notification_list,
.ks_header_notification_dropdown.show .ks_header_notification_list,
.ks_header_notification_dropdown.ks_header_notification_dropdown_open .ks_header_notification_list {
    display: block !important;
    visibility: visible !important;
}

.ks_header_notification_list::-webkit-scrollbar {
    width: 8px; /* Slightly wider for better usability */
}

.ks_header_notification_list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    margin: 0.5rem 0;
}

.ks_header_notification_list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

.ks_header_notification_list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
    background-clip: padding-box;
}

/* Notification Item - Professional Styling */
.ks_header_notification_item {
    display: flex !important;
    align-items: flex-start;
    gap: 1rem; /* More spacing between icon and content */
    padding: 1rem 1.5rem; /* More padding for better touch targets */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04); /* Subtle border */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions */
    text-decoration: none;
    color: inherit;
    visibility: visible !important;
    opacity: 1 !important;
    /* SOLID BACKGROUND for items */
    background: #ffffff !important;
    background-color: #ffffff !important;
    position: relative;
    /* Add subtle hover effect */
    border-left: 3px solid transparent; /* Reserve space for unread indicator */
    /* Better focus state for accessibility */
    outline: none;
}

.ks_header_notification_item:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
    border-radius: 4px;
}

.ks_header_notification_item:focus:not(:focus-visible) {
    outline: none;
}

.ks_header_notification_item:last-child {
    border-bottom: none;
}

.ks_header_notification_item:hover {
    background: #f8f9fa !important; /* Light gray hover */
    background-color: #f8f9fa !important;
    transform: translateX(2px); /* Slight slide effect */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04); /* Subtle shadow on hover */
}

.ks_header_notification_item.unread {
    background: linear-gradient(to right, rgba(0, 123, 255, 0.06) 0%, #ffffff 5%) !important;
    background-color: rgba(0, 123, 255, 0.04) !important;
    border-left: 4px solid #007bff !important; /* Thicker, more prominent indicator */
    padding-left: calc(1.5rem - 4px); /* Adjust padding for thicker border */
    position: relative;
}

.ks_header_notification_item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #007bff, #0056b3);
    border-radius: 0 2px 2px 0;
}

.ks_header_notification_item.unread:hover {
    background: linear-gradient(to right, rgba(0, 123, 255, 0.1) 0%, #f8f9fa 5%) !important;
    background-color: rgba(0, 123, 255, 0.08) !important;
    transform: translateX(3px); /* More pronounced slide for unread */
}

.ks_header_notification_item.read {
    opacity: 0.75; /* Slightly faded for read items */
}

.ks_header_notification_item.read:hover {
    opacity: 1; /* Full opacity on hover */
}

/* Notification Icon Wrapper */
.ks_header_notification_icon_wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 10px;
    color: #007bff;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.ks_header_notification_item.unread .ks_header_notification_icon_wrapper {
    background: rgba(0, 123, 255, 0.15);
    color: #0056b3;
}

.ks_header_notification_item:hover .ks_header_notification_icon_wrapper {
    background: rgba(0, 123, 255, 0.2);
    transform: scale(1.05);
}

.ks_header_notification_item.read .ks_header_notification_icon_wrapper {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    opacity: 0.7;
}

/* Notification Content - Enhanced Typography */
.ks_header_notification_content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ks_header_notification_message {
    font-size: 0.9375rem; /* Slightly larger for readability */
    font-weight: 500; /* Medium weight for better readability */
    color: #1a1a1a; /* Darker for better contrast */
    margin: 0;
    line-height: 1.6; /* Better line height for readability */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Allow 3 lines for longer messages */
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em; /* Tighter spacing */
}

.ks_header_notification_item.unread .ks_header_notification_message {
    font-weight: 600; /* Bolder for unread */
    color: #212529; /* Even darker for unread */
}

.ks_header_notification_date {
    font-size: 0.8125rem; /* Slightly larger */
    color: #6c757d; /* Professional gray */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 400;
}

.ks_header_notification_date::before {
    content: '•';
    color: #adb5bd;
    font-size: 0.5rem;
}

/* Dropdown Footer - Professional Action Buttons */
.ks_header_notification_dropdown_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem; /* More padding */
    border-top: 1px solid rgba(0, 0, 0, 0.06); /* Subtle border */
    flex-shrink: 0;
    /* SOLID BACKGROUND for footer */
    background: linear-gradient(to top, #ffffff 0%, #fafafa 100%) !important;
    background-color: #ffffff !important;
    border-radius: 0 0 16px 16px; /* Match dropdown border radius */
}

.ks_header_notification_view_all {
    font-size: 0.875rem;
    font-weight: 600; /* Bolder */
    color: #007bff; /* Primary blue */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem; /* Button-like padding */
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: 1px solid transparent;
}

.ks_header_notification_view_all:hover {
    color: #0056b3; /* Darker blue on hover */
    background: rgba(0, 123, 255, 0.08); /* Subtle background */
    border-color: rgba(0, 123, 255, 0.2);
    transform: translateY(-1px); /* Slight lift */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.ks_header_notification_view_all:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 123, 255, 0.2);
}

.ks_header_notification_view_all i {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.ks_header_notification_view_all:hover i {
    transform: translateX(2px); /* Arrow slides on hover */
}

.ks_header_notification_mark_all_read {
    font-size: 0.875rem;
    font-weight: 600; /* Bolder for prominence */
    color: #6c757d; /* Professional gray */
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
    padding: 0.5rem 1rem; /* Button-like padding */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.ks_header_notification_mark_all_read:hover {
    color: #495057; /* Darker on hover */
    background: #f8f9fa; /* Light background */
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px); /* Slight lift */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ks_header_notification_mark_all_read:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.ks_header_notification_mark_all_read::before {
    content: '✓';
    font-size: 0.875rem;
    color: #28a745; /* Green checkmark */
    font-weight: 700;
}

/* Responsive Design for Notification Header */
@media (max-width: 767.98px) {
    .ks_header_notification_dropdown {
        width: calc(100vw - 1rem);
        right: 0.5rem !important;
        left: 0.5rem !important;
        max-width: none;
    }
    
    .ks_header_notification_btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}

/* Dark Mode Support - Professional Dark Theme */
[data-theme="dark"] .ks_header_notification_dropdown,
[data-bs-theme="dark"] .ks_header_notification_dropdown,
[data-theme="dark"] .ks_header_notification_dropdown[aria-hidden="false"],
[data-bs-theme="dark"] .ks_header_notification_dropdown[aria-hidden="false"] {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 
                0 4px 12px rgba(0, 0, 0, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.2) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .ks_header_notification_dropdown_header,
[data-bs-theme="dark"] .ks_header_notification_dropdown_header {
    background: linear-gradient(to bottom, #1e1e1e 0%, #1a1a1a 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .ks_header_notification_dropdown_footer,
[data-bs-theme="dark"] .ks_header_notification_dropdown_footer {
    background: linear-gradient(to top, #1e1e1e 0%, #1a1a1a 100%) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .ks_header_notification_item,
[data-bs-theme="dark"] .ks_header_notification_item {
    background: #1e1e1e !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .ks_header_notification_item:hover,
[data-bs-theme="dark"] .ks_header_notification_item:hover {
    background: #252525 !important;
}

[data-theme="dark"] .ks_header_notification_item.unread,
[data-bs-theme="dark"] .ks_header_notification_item.unread {
    background: linear-gradient(to right, rgba(0, 123, 255, 0.15) 0%, #1e1e1e 5%) !important;
    border-left-color: #007bff !important;
}

[data-theme="dark"] .ks_header_notification_message,
[data-bs-theme="dark"] .ks_header_notification_message {
    color: #f0f0f0 !important;
}

[data-theme="dark"] .ks_header_notification_date,
[data-bs-theme="dark"] .ks_header_notification_date {
    color: #adb5bd !important;
}

[data-theme="dark"] .ks_header_notification_view_all,
[data-bs-theme="dark"] .ks_header_notification_view_all {
    color: #4dabf7 !important;
}

[data-theme="dark"] .ks_header_notification_view_all:hover,
[data-bs-theme="dark"] .ks_header_notification_view_all:hover {
    background: rgba(77, 171, 247, 0.15) !important;
    border-color: rgba(77, 171, 247, 0.3) !important;
}

[data-theme="dark"] .ks_header_notification_mark_all_read,
[data-bs-theme="dark"] .ks_header_notification_mark_all_read {
    color: #adb5bd !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .ks_header_notification_mark_all_read:hover,
[data-bs-theme="dark"] .ks_header_notification_mark_all_read:hover {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .ks_header_notification_dropdown_header,
[data-bs-theme="dark"] .ks_header_notification_dropdown_header,
[data-theme="dark"] .ks_header_notification_dropdown_footer,
[data-bs-theme="dark"] .ks_header_notification_dropdown_footer,
[data-theme="dark"] .ks_header_notification_list,
[data-bs-theme="dark"] .ks_header_notification_list {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .ks_header_notification_item,
[data-bs-theme="dark"] .ks_header_notification_item {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .ks_header_notification_item.unread,
[data-bs-theme="dark"] .ks_header_notification_item.unread {
    background: rgba(0, 123, 255, 0.15) !important;
    background-color: rgba(0, 123, 255, 0.15) !important;
}

/* Dark Mode Support */
[data-theme="dark"] .koreasewa-notifications-dropdown,
[data-bs-theme="dark"] .koreasewa-notifications-dropdown {
    background: var(--header-bg);
    border-color: var(--header-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive User Menu */
@media (max-width: 767.98px) {
    .user-name-text {
        display: none;
    }

    .user-menu-btn {
        padding: 0.25rem;
        width: 38px;
        justify-content: center;
    }
    
    /* User dropdown removed - button now directly opens settings panel */
    
    /* Ensure header is full width on mobile (sidebar is overlay) */
    .koreasewa-header {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Tablet responsive adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet responsive styles for search bar */
    .koreasewa-header-center {
        max-width: 500px;
    }

    .koreasewa-search-input-wrapper {
        height: 40px;
    }

    .koreasewa-search-input {
        font-size: 0.875rem;
        padding: 0.4375rem 0.625rem 0.4375rem 2.25rem;
    }

    .koreasewa-search-icon {
        font-size: 0.9375rem;
    }

    .koreasewa-search-btn {
        padding: 0.4375rem 0.625rem;
        min-width: 40px;
    }
    /* Header should account for 72px sidebar */
    .koreasewa-header {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        transition: margin-left var(--transition-speed, 0.3s) ease,
                    width var(--transition-speed, 0.3s) ease;
    }
}

/* Desktop responsive adjustments */
@media (min-width: 992px) {
    /* Header adjusts based on sidebar state - handled by sidebar.css */
    /* This ensures header is responsive to sidebar open/closed/compact states */
}

/* Visually Hidden for Screen Readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

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

/* Old media queries removed - using single standard koreasewa- classes only */

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Accessibility - Single standard */
.koreasewa-sidebar-toggle-btn:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .koreasewa-header {
        transition: margin-left 0.3s ease, width 0.3s ease;
    }
    .koreasewa-sidebar-toggle-btn {
        transition: none;
    }
}

/* ============================================================================
   DROPDOWN PROTECTION
   ============================================================================ */

/* Ensure header parent doesn't break positioning */
body,
html {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Ensure main content doesn't clip header or dropdowns */
/* CRITICAL: For sticky positioning to work, parent containers must NOT have overflow: hidden/auto/scroll */
.main-content,
.content-wrapper,
main#main-content {
    overflow: visible !important;
    overflow-x: hidden !important; /* Allow horizontal scroll prevention but not vertical */
    overflow-y: visible !important;
    position: relative;
    isolation: auto !important;
    contain: none !important; /* No containment - breaks sticky positioning */
    clip-path: none !important;
}

/* CRITICAL: Ensure header and navbar parents don't break sticky positioning */
html,
body {
    /* Allow sticky positioning - only prevent horizontal overflow */
    overflow-x: hidden !important;
    overflow-y: visible !important; /* CRITICAL: Must be visible for sticky to work */
    contain: none !important; /* No containment on html/body - breaks sticky */
}

/* Header dropdown protection - ensure dropdowns are not clipped */
.koreasewa-header-action {
    position: relative;
    z-index: var(--z-header-controls, 1003) !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.koreasewa-header-action .dropdown,
.navbar-auth .dropdown {
    position: relative !important;
    z-index: var(--z-header-dropdown, 1004) !important;
    overflow: visible !important;
}

/* Notification system removed - hide all notification containers */
.koreasewa-header-action .navbar-notifications,
.koreasewa-header-notifications,
.koreasewa-nav-notifications {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Notification dropdown menu - above hero slider */
.navbar-notifications .notification-dropdown,
.navbar-notifications .dropdown-menu,
.koreasewa-notification-dropdown,
html body .navbar-notifications .notification-dropdown,
body .navbar-notifications .notification-dropdown,
body.home .navbar-notifications .notification-dropdown,
body.homepage .navbar-notifications .notification-dropdown {
    z-index: var(--z-user-notifications, 1999) !important;
    position: fixed !important;
    overflow: visible !important;
    isolation: isolate !important;
    contain: none !important;
    clip-path: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: visibility 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Show notification dropdown when active */
.navbar-notifications .notification-dropdown.show,
.navbar-notifications .dropdown-menu.show,
.koreasewa-notification-dropdown.show,
.koreasewa-notifications-dropdown[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hero slider - below header and dropdowns */
.ks-hero-slider-wrapper,
.hero-slider-section,
.hero-slider-frame,
.hero-slider,
[data-hero-slider="true"],
[data-hero-component="standalone"] {
    z-index: 1 !important;
    position: relative !important;
    isolation: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    clip-path: none !important;
}

/* ============================================================================
   HEADER VISIBILITY ENFORCEMENT - ALL PAGES
   ============================================================================ */

/* Ensure parent containers don't clip header on home page */
html body.home,
html body.homepage,
body.home,
body.homepage {
    overflow-x: visible !important;
}

html body.home .main-content,
html body.homepage .main-content,
body.home .main-content,
body.homepage .main-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Hide search bar container only if it has a hidden class */
.koreasewa-header-center.hidden,
.koreasewa-header-center[style*="display: none"],
.koreasewa-header-center[style*="display:none"] {
    display: none !important;
}

/* Settings panel z-index - Use professional z-index system */
.settings-overlay {
    z-index: var(--z-overlay-backdrop, 5001) !important;
}

.settings-panel,
.settings-panel.show {
    z-index: var(--z-user-settings, 4002) !important;
}

/* ============================================================================
   SINGLE STANDARD: KOREASEWA- PREFIXED CLASSES ONLY (DRY PRINCIPLE)
   ============================================================================
   All header styles now use koreasewa- prefixed classes exclusively.
   Old class names removed - single standard approach for future-proof code.
   ============================================================================ */

/* ============================================================================
   MAIN HEADER ROW - Logo | Search | User Menu
   ============================================================================
   CRITICAL FOR STICKY NAVBAR:
   - MUST have overflow: visible (allows sticky navbar to work)
   - MUST NOT use CSS containment (breaks sticky positioning)
   - MUST be positioned relatively (not absolute/fixed)
   - Height is used by JavaScript to calculate navbar sticky top position
   ============================================================================ */
/* IMPROVED: Universal rules for ALL pages - ensure header-main-row doesn't break sticky */
.koreasewa-header-main-row,
html body .koreasewa-header-main-row,
html body .koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row,
body.home .koreasewa-header-main-row,
body.homepage .koreasewa-header-main-row,
body.ks_home .koreasewa-header .koreasewa-header-main-row,
body.ks_news .koreasewa-header .koreasewa-header-main-row,
body.ks_library .koreasewa-header .koreasewa-header-main-row,
body.ks_language .koreasewa-header .koreasewa-header-main-row,
body.ks_event .koreasewa-header .koreasewa-header-main-row,
body.ks_exam .koreasewa-header .koreasewa-header-main-row,
.koreasewa-header .koreasewa-header-main-row {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5rem;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 80px;
    gap: 1.5rem;
    box-sizing: border-box;
    position: relative !important; /* CRITICAL: Relative positioning for sticky navbar */
    flex-wrap: nowrap !important;
    /* CRITICAL: Overflow must be visible for sticky navbar to work */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* CRITICAL: No containment - breaks sticky positioning */
    contain: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* CRITICAL: Ensure proper flexbox layout - row direction */
    flex-direction: row !important;
    /* CRITICAL: Ensure proper alignment */
    align-items: center !important;
    /* CRITICAL: No transforms that create containing blocks */
    transform: none !important;
    -webkit-transform: none !important;
    /* CRITICAL: No isolation that might interfere */
    isolation: auto !important;
}

/* ============================================================================
   HEADER LEFT SECTION - Sidebar Toggle & Logo
   ============================================================================
   This section contains:
   - Sidebar toggle button (hamburger menu)
   - Logo/Brand (KS circle + "Korea Sewa" text)
   
   CRITICAL RULES:
   - MUST stay on the left side (margin-right: auto)
   - MUST allow dropdowns to be visible (overflow: visible)
   ============================================================================ */
.koreasewa-header-left,
/* ============================================================================
   HEADER LEFT SECTION - Hamburger Menu + Logo ONLY
   ============================================================================
   CRITICAL: This section contains ONLY:
   - Sidebar toggle button (hamburger menu)
   - Logo
   
   MUST NOT contain: Notifications, User menu, or any other elements
   ============================================================================ */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-left,
html body .koreasewa-header .koreasewa-header-left,
html body .koreasewa-header-left,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-left,
body .koreasewa-header .koreasewa-header-left,
body .koreasewa-header-left,
body.home .koreasewa-header-left,
body.homepage .koreasewa-header-left,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-left,
.koreasewa-header .koreasewa-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    order: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* CRITICAL: Allow dropdowns to be visible */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* CRITICAL: FORCE left positioning - stay on LEFT side */
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    /* CRITICAL: Left section only contains sidebar toggle and logo */
    position: relative !important;
    /* CRITICAL: Prevent any positioning that might move it to right */
    left: 0 !important;
    right: auto !important;
    float: none !important;
    clear: none !important;
    transform: none !important;
    flex-direction: row !important;
}

/* Toggle button - Single standard - Maximum specificity */
html body .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
html body .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle,
html body.home .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
html body.homepage .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
body .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
body .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle,
body.home .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
body.homepage .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
.koreasewa-sidebar-toggle-btn,
#koreasewa-sidebar-toggle {
    background: transparent !important;
    border: 1px solid var(--header-border) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    color: var(--header-text) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.25rem !important;
    position: relative !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    user-select: none !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    -webkit-touch-callout: none !important;
    /* CRITICAL: Order - first on left side (before logo) */
    order: 0 !important;
}

.koreasewa-sidebar-toggle-btn:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    transform: scale(1.05);
}

.koreasewa-sidebar-toggle-btn:active {
    background: var(--action-active);
    transform: scale(0.95);
}

.koreasewa-sidebar-toggle-btn:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Menu icon - Single standard */
.koreasewa-menu-icon-btn .koreasewa-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 22px;
    height: 16px;
    position: relative;
}

.koreasewa-menu-icon-line {
    width: 100%;
    height: 2.5px;
    background: var(--header-text);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    position: absolute;
    left: 0;
}

.koreasewa-menu-icon-line:nth-child(1) {
    top: 0;
}

.koreasewa-menu-icon-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.koreasewa-menu-icon-line:nth-child(3) {
    bottom: 0;
}

.koreasewa-sidebar-toggle-btn:hover .koreasewa-menu-icon-line {
    background: var(--bs-primary);
}

.koreasewa-sidebar-toggle-btn:hover .koreasewa-menu-icon-line:nth-child(1) {
    transform: translateY(1px);
}

.koreasewa-sidebar-toggle-btn:hover .koreasewa-menu-icon-line:nth-child(2) {
    transform: translateY(-50%) scaleX(1.1);
}

.koreasewa-sidebar-toggle-btn:hover .koreasewa-menu-icon-line:nth-child(3) {
    transform: translateY(-1px);
}

.koreasewa-sidebar-toggle-btn[aria-expanded="true"] .koreasewa-menu-icon-line {
    background: var(--bs-primary);
}

.koreasewa-sidebar-toggle-btn[aria-expanded="true"] .koreasewa-menu-icon-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.koreasewa-sidebar-toggle-btn[aria-expanded="true"] .koreasewa-menu-icon-line:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.koreasewa-sidebar-toggle-btn[aria-expanded="true"] .koreasewa-menu-icon-line:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* Logo - Single standard - Maximum specificity */
html body .koreasewa-header .koreasewa-header-left .koreasewa-header-logo,
body .koreasewa-header .koreasewa-header-left .koreasewa-header-logo,
.koreasewa-header-logo {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    text-decoration: none !important;
    color: var(--header-text) !important;
    transition: all 0.2s ease !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    /* CRITICAL: Order - after sidebar toggle (order: 1) */
    order: 1 !important;
    opacity: 1 !important;
}

.koreasewa-header-logo:hover {
    opacity: 0.9;
    text-decoration: none;
    color: var(--header-text);
    transform: translateX(2px);
}

.koreasewa-logo-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Professional: Ensure logo is always visible */
    visibility: visible !important;
    opacity: 1 !important;
}

.koreasewa-header-logo:hover .koreasewa-logo-circle {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   LOGO STYLES - CONSISTENT ACROSS ALL PAGES
   ============================================================================
   CRITICAL: Logo must be identical on ALL pages (home, news, library, etc.).
   - Circular gradient logo (blue to red gradient)
   - "K" in blue, "S" in red
   - "Korea Sewa" title with tagline
   Using !important to ensure no page-specific CSS can override these styles.
   ============================================================================ */

/* Force consistent logo on all pages - override any page-specific styles */
html body .koreasewa-header .koreasewa-logo-circle,
html body.home .koreasewa-header .koreasewa-logo-circle,
html body.homepage .koreasewa-header .koreasewa-logo-circle,
body .koreasewa-header .koreasewa-logo-circle,
body.home .koreasewa-header .koreasewa-logo-circle,
body.homepage .koreasewa-header .koreasewa-logo-circle,
.koreasewa-header .koreasewa-logo-circle,
.koreasewa-logo-circle {
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}
/* Logo letters - Maximum specificity */
html body .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
html body.home .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
html body.homepage .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
body .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
body.home .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
body.homepage .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-k,
.koreasewa-logo-circle .koreasewa-logo-k,
.koreasewa-logo-k {
    color: #0066ff !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    z-index: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 102, 255, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

html body .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
html body.home .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
html body.homepage .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
body .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
body.home .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
body.homepage .koreasewa-header .koreasewa-logo-circle .koreasewa-logo-s,
.koreasewa-logo-circle .koreasewa-logo-s,
.koreasewa-logo-s {
    color: #ff0000 !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    z-index: 1 !important;
    text-shadow: 0 1px 2px rgba(255, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.koreasewa-logo-text,
html body .koreasewa-logo-text,
body .koreasewa-logo-text,
body.home .koreasewa-logo-text,
body.homepage .koreasewa-logo-text {
    display: flex !important;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.koreasewa-logo-title,
html body .koreasewa-logo-title,
body .koreasewa-logo-title,
body.home .koreasewa-logo-title,
body.homepage .koreasewa-logo-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--header-text);
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.02em;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.koreasewa-logo-tagline,
html body .koreasewa-logo-tagline,
body .koreasewa-logo-tagline,
body.home .koreasewa-logo-tagline,
body.homepage .koreasewa-logo-tagline {
    font-size: 0.8125rem;
    color: var(--header-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Center section - Search Bar - ALWAYS VISIBLE ON ALL PAGES - Maximum specificity */
html body .koreasewa-header .koreasewa-header-center,
body .koreasewa-header .koreasewa-header-center,
.koreasewa-header .koreasewa-header-center,
.koreasewa-header-center {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-width: 0 !important;
    max-width: 500px !important;
    /* Professional: Ensure search bar is always visible and properly centered */
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
    /* Professional: Prevent layout conflicts */
    position: relative !important;
    width: 100% !important;
    padding: 0 0.5rem !important;
}

/* Force search bar visibility on home page and all pages - Maximum specificity */
body .koreasewa-header-center,
.home-page .koreasewa-header-center,
.homepage-content-wrapper ~ .koreasewa-header-center,
.koreasewa-header .koreasewa-header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Desktop: Slightly larger search bar */
@media (min-width: 992px) {
    .koreasewa-header-center {
        max-width: 500px;
        padding: 0 1rem;
    }

    .koreasewa-search-input-wrapper {
        height: 40px;
    }

    .koreasewa-search-input {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    }

    .koreasewa-search-icon {
        font-size: 0.9375rem;
        left: 0.75rem;
    }

    .koreasewa-search-btn {
        padding: 0.5rem 1rem;
        min-width: 60px;
        font-size: 0.875rem;
    }
}

/* Compact Professional Search Bar Styling - ALWAYS VISIBLE - Maximum Specificity */
html body .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
html body .koreasewa-header-center .koreasewa-search-bar,
html body.homepage .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
html body.home .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
body .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
body .koreasewa-header-center .koreasewa-search-bar,
body.homepage .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
body.home .koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
.koreasewa-header .koreasewa-header-center .koreasewa-search-bar,
.koreasewa-header-center .koreasewa-search-bar,
.koreasewa-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-header-center .search-form,
html body .koreasewa-header-center .search-form,
html body.homepage .koreasewa-header .koreasewa-header-center .search-form,
html body.home .koreasewa-header .koreasewa-header-center .search-form,
body .koreasewa-header .koreasewa-header-center .search-form,
body .koreasewa-header-center .search-form,
body.homepage .koreasewa-header .koreasewa-header-center .search-form,
body.home .koreasewa-header .koreasewa-header-center .search-form,
.koreasewa-header .koreasewa-header-center .search-form,
.koreasewa-header-center .search-form,
.koreasewa-search-bar .search-form {
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Search Input Wrapper - Compact Professional Design - Maximum Specificity */
html body .koreasewa-header .koreasewa-search-input-wrapper,
html body .koreasewa-header-center .koreasewa-search-input-wrapper,
html body .koreasewa-search-bar .koreasewa-search-input-wrapper,
body .koreasewa-header .koreasewa-search-input-wrapper,
body .koreasewa-header-center .koreasewa-search-input-wrapper,
body .koreasewa-search-bar .koreasewa-search-input-wrapper,
.koreasewa-header .koreasewa-search-input-wrapper,
.koreasewa-header-center .koreasewa-search-input-wrapper,
.koreasewa-search-bar .koreasewa-search-input-wrapper,
.koreasewa-search-input-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: var(--header-bg) !important;
    background-color: var(--header-bg) !important;
    background-image: none !important;
    border: 1px solid var(--header-border) !important;
    border-radius: 6px !important;
    height: 38px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    /* Prevent brand consistency from overriding */
    box-shadow: none !important;
}

html body .koreasewa-header .koreasewa-search-input-wrapper:focus-within,
html body .koreasewa-header-center .koreasewa-search-input-wrapper:focus-within,
html body .koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within,
body .koreasewa-header .koreasewa-search-input-wrapper:focus-within,
body .koreasewa-header-center .koreasewa-search-input-wrapper:focus-within,
body .koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within,
.koreasewa-header .koreasewa-search-input-wrapper:focus-within,
.koreasewa-header-center .koreasewa-search-input-wrapper:focus-within,
.koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within,
.koreasewa-search-input-wrapper:focus-within {
    border-color: #0066ff !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1) !important;
    /* Override any brand consistency focus styles */
}

/* Search Icon Inside Input (Left) - Compact - Maximum Specificity */
html body .koreasewa-header .koreasewa-search-icon,
html body .koreasewa-header-center .koreasewa-search-icon,
html body .koreasewa-search-bar .koreasewa-search-icon,
html body .koreasewa-search-input-wrapper .koreasewa-search-icon,
body .koreasewa-header .koreasewa-search-icon,
body .koreasewa-header-center .koreasewa-search-icon,
body .koreasewa-search-bar .koreasewa-search-icon,
body .koreasewa-search-input-wrapper .koreasewa-search-icon,
.koreasewa-header .koreasewa-search-icon,
.koreasewa-header-center .koreasewa-search-icon,
.koreasewa-search-bar .koreasewa-search-icon,
.koreasewa-search-input-wrapper .koreasewa-search-icon,
.koreasewa-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--header-text-muted) !important;
    font-size: 0.9375rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
html body .koreasewa-header-center .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
html body .koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
body .koreasewa-header .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
body .koreasewa-header-center .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
body .koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
.koreasewa-header .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
.koreasewa-header-center .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
.koreasewa-search-bar .koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon,
.koreasewa-search-input-wrapper:focus-within .koreasewa-search-icon {
    color: #0066ff !important;
}

/* Search Input Field - Compact Professional - Maximum Specificity */
html body .koreasewa-header .koreasewa-search-input,
html body .koreasewa-header-center .koreasewa-search-input,
html body .koreasewa-search-bar .koreasewa-search-input,
html body .koreasewa-search-input-wrapper .koreasewa-search-input,
body .koreasewa-header .koreasewa-search-input,
body .koreasewa-header-center .koreasewa-search-input,
body .koreasewa-search-bar .koreasewa-search-input,
body .koreasewa-search-input-wrapper .koreasewa-search-input,
.koreasewa-header .koreasewa-search-input,
.koreasewa-header-center .koreasewa-search-input,
.koreasewa-search-bar .koreasewa-search-input,
.koreasewa-search-input-wrapper .koreasewa-search-input,
.koreasewa-search-input {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--header-text) !important;
    transition: all 0.2s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    /* Prevent brand consistency from overriding */
    box-shadow: none !important;
    outline: none !important;
}

html body .koreasewa-header .koreasewa-search-input:focus,
html body .koreasewa-header-center .koreasewa-search-input:focus,
html body .koreasewa-search-bar .koreasewa-search-input:focus,
html body .koreasewa-search-input-wrapper .koreasewa-search-input:focus,
body .koreasewa-header .koreasewa-search-input:focus,
body .koreasewa-header-center .koreasewa-search-input:focus,
body .koreasewa-search-bar .koreasewa-search-input:focus,
body .koreasewa-search-input-wrapper .koreasewa-search-input:focus,
.koreasewa-header .koreasewa-search-input:focus,
.koreasewa-header-center .koreasewa-search-input:focus,
.koreasewa-search-bar .koreasewa-search-input:focus,
.koreasewa-search-input-wrapper .koreasewa-search-input:focus,
.koreasewa-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    /* Let wrapper handle focus styling */
}

.koreasewa-search-input::placeholder {
    color: var(--header-text-muted);
    opacity: 0.6;
}

/* Search Button (Right) - Compact Professional - Maximum Specificity */
html body .koreasewa-header .koreasewa-search-btn,
html body .koreasewa-header-center .koreasewa-search-btn,
html body .koreasewa-search-bar .koreasewa-search-btn,
html body .koreasewa-search-input-wrapper .koreasewa-search-btn,
body .koreasewa-header .koreasewa-search-btn,
body .koreasewa-header-center .koreasewa-search-btn,
body .koreasewa-search-bar .koreasewa-search-btn,
body .koreasewa-search-input-wrapper .koreasewa-search-btn,
.koreasewa-header .koreasewa-search-btn,
.koreasewa-header-center .koreasewa-search-btn,
.koreasewa-search-bar .koreasewa-search-btn,
.koreasewa-search-input-wrapper .koreasewa-search-btn,
.koreasewa-search-btn {
    border: none !important;
    border-left: 1px solid var(--header-border) !important;
    padding: 0.5rem 0.875rem !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--header-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    min-width: 55px !important;
    height: 100% !important;
    white-space: nowrap !important;
    /* Prevent brand consistency from overriding */
    box-shadow: none !important;
}

.koreasewa-search-btn:hover {
    background: rgba(0, 102, 255, 0.08);
    color: #0066ff;
}

.koreasewa-search-btn:active {
    background: rgba(0, 102, 255, 0.12);
    transform: scale(0.98);
}

.koreasewa-search-btn:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(0, 102, 255, 0.2);
}

.koreasewa-search-btn span {
    line-height: 1;
}

/* ============================================================================
   CRITICAL: PROTECT HEADER SEARCH BAR FROM LIBRARY PAGE CSS OVERRIDES
   ============================================================================
   Maximum specificity rules to ensure header search bar is NEVER affected
   by any page-specific CSS, including library page CSS.
   ============================================================================ */
html body .koreasewa-header .koreasewa-search-bar,
html body .koreasewa-header .koreasewa-search-input-wrapper,
html body .koreasewa-header .koreasewa-search-input,
html body .koreasewa-header .koreasewa-search-icon,
html body .koreasewa-header .koreasewa-search-btn,
html body.library-home-page .koreasewa-header .koreasewa-search-bar,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper,
html body.library-home-page .koreasewa-header .koreasewa-search-input,
html body.library-home-page .koreasewa-header .koreasewa-search-icon,
html body.library-home-page .koreasewa-header .koreasewa-search-btn,
body .koreasewa-header .koreasewa-search-bar,
body .koreasewa-header .koreasewa-search-input-wrapper,
body .koreasewa-header .koreasewa-search-input,
body .koreasewa-header .koreasewa-search-icon,
body .koreasewa-header .koreasewa-search-btn,
body.library-home-page .koreasewa-header .koreasewa-search-bar,
body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper,
body.library-home-page .koreasewa-header .koreasewa-search-input,
body.library-home-page .koreasewa-header .koreasewa-search-icon,
body.library-home-page .koreasewa-header .koreasewa-search-btn {
    /* Prevent any library CSS from affecting header search bar */
    all: unset !important;
    display: revert !important;
    visibility: revert !important;
    opacity: revert !important;
}

/* Re-apply header search bar styles with maximum specificity */
/* CRITICAL: Protect header search bar from ALL library page CSS */
html body .koreasewa-header .koreasewa-search-bar,
html body.library-home-page .koreasewa-header .koreasewa-search-bar,
html body[class*="library"] .koreasewa-header .koreasewa-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-search-input-wrapper,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper,
html body[class*="library"] .koreasewa-header .koreasewa-search-input-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: var(--header-bg) !important;
    background-color: var(--header-bg) !important;
    border: 1px solid var(--header-border) !important;
    border-radius: 6px !important;
    height: 38px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

html body .koreasewa-header .koreasewa-search-input,
html body.library-home-page .koreasewa-header .koreasewa-search-input,
html body[class*="library"] .koreasewa-header .koreasewa-search-input {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--header-text) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

html body .koreasewa-header .koreasewa-search-icon,
html body.library-home-page .koreasewa-header .koreasewa-search-icon,
html body[class*="library"] .koreasewa-header .koreasewa-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--header-text-muted) !important;
    font-size: 0.9375rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-search-btn,
html body.library-home-page .koreasewa-header .koreasewa-search-btn,
html body[class*="library"] .koreasewa-header .koreasewa-search-btn {
    border: none !important;
    border-left: 1px solid var(--header-border) !important;
    padding: 0.5rem 0.875rem !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--header-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    min-width: 55px !important;
    height: 100% !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

/* ============================================================================
   CRITICAL: PROTECT HEADER FROM GENERIC FORM/BUTTON SELECTORS
   ============================================================================
   Prevent any generic .form-control, .btn, .btn-primary selectors from
   affecting header search bar elements. This includes library page CSS.
   ============================================================================ */
html body .koreasewa-header .koreasewa-search-input-wrapper .form-control,
html body .koreasewa-header .koreasewa-search-input-wrapper input,
html body .koreasewa-header .koreasewa-search-input-wrapper input[type="search"],
html body .koreasewa-header .koreasewa-search-bar .form-control,
html body .koreasewa-header .koreasewa-search-bar input,
html body .koreasewa-header .koreasewa-search-bar input[type="search"],
html body .koreasewa-header .koreasewa-search-input-wrapper .btn,
html body .koreasewa-header .koreasewa-search-input-wrapper .btn-primary,
html body .koreasewa-header .koreasewa-search-input-wrapper .btn-sm,
html body .koreasewa-header .koreasewa-search-bar .btn,
html body .koreasewa-header .koreasewa-search-bar .btn-primary,
html body .koreasewa-header .koreasewa-search-bar .btn-sm,
html body .koreasewa-header .koreasewa-search-btn,
html body .koreasewa-header .koreasewa-search-btn.btn,
html body .koreasewa-header .koreasewa-search-btn.btn-primary,
html body .koreasewa-header .koreasewa-search-btn.btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .form-control,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper input,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper input[type="search"],
html body.library-home-page .koreasewa-header .koreasewa-search-bar .form-control,
html body.library-home-page .koreasewa-header .koreasewa-search-bar input,
html body.library-home-page .koreasewa-header .koreasewa-search-bar input[type="search"],
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-btn,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn-sm,
html body .koreasewa-header .koreasewa-search-input-wrapper .input-group,
html body .koreasewa-header .koreasewa-search-bar .input-group,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .input-group,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .input-group,
html body[class*="library"] .koreasewa-header .koreasewa-search-input-wrapper .input-group,
html body[class*="library"] .koreasewa-header .koreasewa-search-bar .input-group {
    /* Override any generic form/button/input-group styles from library CSS */
    all: unset !important;
    display: revert !important;
    min-height: revert !important;
    min-width: revert !important;
    padding: revert !important;
    touch-action: revert !important;
    -webkit-tap-highlight-color: revert !important;
}

/* Re-apply correct styles for header search input */
html body .koreasewa-header .koreasewa-search-input-wrapper .form-control,
html body .koreasewa-header .koreasewa-search-input-wrapper input,
html body .koreasewa-header .koreasewa-search-input-wrapper input[type="search"],
html body .koreasewa-header .koreasewa-search-bar .form-control,
html body .koreasewa-header .koreasewa-search-bar input,
html body .koreasewa-header .koreasewa-search-bar input[type="search"] {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--header-text) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Re-apply correct styles for header search button */
html body .koreasewa-header .koreasewa-search-input-wrapper .btn,
html body .koreasewa-header .koreasewa-search-input-wrapper .btn-primary,
html body .koreasewa-header .koreasewa-search-input-wrapper .btn-sm,
html body .koreasewa-header .koreasewa-search-bar .btn,
html body .koreasewa-header .koreasewa-search-bar .btn-primary,
html body .koreasewa-header .koreasewa-search-bar .btn-sm,
html body .koreasewa-header .koreasewa-search-btn,
html body .koreasewa-header .koreasewa-search-btn.btn,
html body .koreasewa-header .koreasewa-search-btn.btn-primary,
html body .koreasewa-header .koreasewa-search-btn.btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-input-wrapper .btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-bar .btn-sm,
html body.library-home-page .koreasewa-header .koreasewa-search-btn,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn-primary,
html body.library-home-page .koreasewa-header .koreasewa-search-btn.btn-sm {
    border: none !important;
    border-left: 1px solid var(--header-border) !important;
    padding: 0.5rem 0.875rem !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--header-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    min-width: 55px !important;
    min-height: auto !important;
    height: 100% !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    touch-action: auto !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Legacy support for old structure */
.koreasewa-header-center .input-group {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.koreasewa-header-center .form-control {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--header-border);
    background: var(--header-bg);
    color: var(--header-text);
    transition: all 0.2s ease;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    box-sizing: border-box;
}

.koreasewa-header-center .form-control:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    outline: none;
}

.koreasewa-header-center .btn-outline-secondary {
    border-radius: 8px;
    border: 1px solid var(--header-border);
    padding: 0.5rem 0.75rem;
    background: var(--header-bg);
    color: var(--header-text);
    transition: all 0.2s ease;
}

.koreasewa-header-center .btn-outline-secondary:hover {
    background: var(--action-hover);
    border-color: var(--header-border);
    color: var(--header-text);
}

/* Navigation - Separate row below main header */
.koreasewa-header-navigation,
html body .koreasewa-header-navigation,
body .koreasewa-header-navigation,
body.home .koreasewa-header-navigation,
body.homepage .koreasewa-header-navigation {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-top: 1px solid var(--header-border);
    background: var(--header-bg) !important; /* Ensure background when sticky */
    padding: 0;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    /* CRITICAL: Do NOT set position: static - it breaks sticky positioning */
    /* Position is set by header_sticky_navbar.css for sticky behavior */
    /* position: static !important; - REMOVED: Breaks sticky navbar */
    /* Ensure navbar maintains background when sticky */
    backdrop-filter: blur(10px); /* Subtle blur for modern look */
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================================================
   STICKY NAVBAR MODULE - Professional Django Standard
   ============================================================================
   CRITICAL: Sticky positioning for navigation bar.
   Stays at top when scrolling with smooth transitions and shadow effects.
   Futureproof, professional, and performance optimized.
   
   ✅ UNIVERSAL STICKY NAVBAR - Works on ALL pages (not just home page)
   ✅ Enabled by default on all pages that use base_unified.html
   ✅ Professional scroll detection with shadow effects
   ✅ Responsive and mobile-optimized
   
   IMPORTANT NOTES ABOUT STICKY POSITIONING:
   - DO NOT use CSS containment (contain property) on sticky elements or their parents
     Containment creates a new containing block that breaks sticky positioning
   - Ensure all parent containers have overflow: visible (not hidden/auto/scroll)
   - Sticky positioning requires the element's containing block to have scrollable height
   - Avoid isolation: isolate on parent containers when possible
   - Works universally on ALL pages - no page-specific restrictions
   ============================================================================ */

/* Navbar container - maintains proper layout */
.koreasewa-nav-container {
    position: relative;
    z-index: 1;
}

.koreasewa-nav-container,
html body .koreasewa-nav-container,
body .koreasewa-nav-container,
body.home .koreasewa-nav-container,
body.homepage .koreasewa-nav-container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 1rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    gap: 1rem;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box;
}

.koreasewa-nav-menu,
html body .koreasewa-nav-menu,
body .koreasewa-nav-menu,
body.home .koreasewa-nav-menu,
body.homepage .koreasewa-nav-menu {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    position: relative;
}

.koreasewa-nav-menu::-webkit-scrollbar {
    display: none;
}

/* Login Button in Navigation Row - Always visible on all pages */
.koreasewa-nav-login,
html body .koreasewa-nav-login,
body .koreasewa-nav-login {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    margin-left: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   LOGIN BUTTON - CONSISTENT ACROSS ALL PAGES
   ============================================================================
   CRITICAL: Login button must have identical styling on ALL pages including
   homepage, news, library, and all other pages.
   Using !important to override any page-specific CSS that might change styling.
   ============================================================================ */
/* Login Button - STANDARD styling on ALL pages including home page - Maximum specificity */
html body .koreasewa-header .koreasewa-nav-login .koreasewa-login-btn,
html body .koreasewa-nav-login .koreasewa-login-btn,
body .koreasewa-header .koreasewa-nav-login .koreasewa-login-btn,
body .koreasewa-nav-login .koreasewa-login-btn,
.koreasewa-header .koreasewa-nav-login .koreasewa-login-btn,
.koreasewa-nav-login .koreasewa-login-btn,
.koreasewa-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.5rem !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important; /* STANDARD gradient - matches logo */
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.2) !important;
    /* Professional: Ensure login button is always visible and matches logo styling */
    visibility: visible !important;
    opacity: 1 !important;
    /* Professional: Consistent with logo gradient theme */
    position: relative !important;
    overflow: hidden !important;
}

.koreasewa-login-btn i {
    font-size: 1rem;
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

.koreasewa-login-btn:hover {
    background: linear-gradient(135deg, #0052cc 0%, #cc0000 100%) !important; /* STANDARD hover gradient */
    color: white !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 102, 255, 0.3);
}

.koreasewa-login-btn:hover i {
    opacity: 1;
}

.koreasewa-login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.2);
}

.koreasewa-nav-menu-item {
    margin: 0;
    padding: 0;
}

.koreasewa-nav-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    color: var(--header-text);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    flex-shrink: 0;
    touch-action: manipulation;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}

/* Enhanced: Focus styles for keyboard navigation */
.koreasewa-nav-menu-link:focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Enhanced: Hover state with smooth animation */
.koreasewa-nav-menu-link:hover {
    background: var(--action-hover);
    color: var(--header-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced: Active (clicked/pressed) state - resets hover transform during click */
.koreasewa-nav-menu-link:active {
    transform: translateY(0);
    box-shadow: none;
    transition: transform 0.1s ease;
}

/* Enhanced: In-view indicator for intersection observer */
.koreasewa-nav-menu-link.koreasewa-in-view {
    opacity: 1;
}

/* Enhanced: Smooth appearance animation for nav items */
@keyframes navItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.koreasewa-nav-menu-item {
    animation: navItemFadeIn 0.3s ease-out backwards;
}

.koreasewa-nav-menu-item:nth-child(1) { animation-delay: 0.05s; }
.koreasewa-nav-menu-item:nth-child(2) { animation-delay: 0.1s; }
.koreasewa-nav-menu-item:nth-child(3) { animation-delay: 0.15s; }
.koreasewa-nav-menu-item:nth-child(4) { animation-delay: 0.2s; }
.koreasewa-nav-menu-item:nth-child(5) { animation-delay: 0.25s; }
.koreasewa-nav-menu-item:nth-child(6) { animation-delay: 0.3s; }
.koreasewa-nav-menu-item:nth-child(7) { animation-delay: 0.35s; }
.koreasewa-nav-menu-item:nth-child(8) { animation-delay: 0.4s; }

/* ============================================================================
   ACTIVE NAVIGATION LINK - CONSISTENT ACROSS ALL PAGES
   ============================================================================
   CRITICAL: Active navigation link styling must be identical on ALL pages.
   Using !important to ensure no page-specific CSS can override these styles.
   ============================================================================ */
/* Active navigation link - Maximum specificity to prevent conflicts */
html body .koreasewa-nav-menu-link.koreasewa-active,
body .koreasewa-nav-menu-link.koreasewa-active,
.koreasewa-nav-menu-link.koreasewa-active,
.koreasewa-nav-menu-link.active {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(255, 0, 0, 0.1) 100%) !important; /* STANDARD active background */
    color: var(--header-text) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
    font-weight: 600 !important;
    position: relative !important;
}

html body .koreasewa-nav-menu-link.koreasewa-active::after,
body .koreasewa-nav-menu-link.koreasewa-active::after,
.koreasewa-nav-menu-link.koreasewa-active::after,
.koreasewa-nav-menu-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #0066ff 0%, #ff0000 100%) !important; /* STANDARD active underline gradient */
    border-radius: 2px 2px 0 0 !important;
    z-index: 1 !important;
    animation: underlineSlideIn 0.3s ease-out !important;
}

/* Enhanced: Smooth underline animation */
@keyframes underlineSlideIn {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 60%;
        opacity: 1;
    }
}

/* Enhanced: Active link pulse animation (subtle) */
.koreasewa-nav-menu-link.koreasewa-active {
    animation: activePulse 2s ease-in-out infinite;
}

@keyframes activePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0);
    }
}

.koreasewa-nav-menu-link i {
    font-size: 1.125rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.koreasewa-nav-menu-link:hover i,
.koreasewa-nav-menu-link.koreasewa-active i {
    opacity: 1;
}

.koreasewa-nav-menu-text {
    font-weight: inherit;
    letter-spacing: 0.01em;
}

/* Enhanced: Badge/Indicator support */
.koreasewa-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9px;
    margin-left: 0.375rem;
    white-space: nowrap;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.koreasewa-nav-menu-link:hover .koreasewa-nav-badge {
    transform: scale(1.1);
}

.koreasewa-nav-menu-link.koreasewa-active .koreasewa-nav-badge {
    animation: badgePulse 0.3s ease-out;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Enhanced: Dropdown icon support */
.koreasewa-nav-dropdown-icon {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-left: 0.25rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.koreasewa-nav-menu-link:hover .koreasewa-nav-dropdown-icon {
    opacity: 1;
}

.koreasewa-nav-menu-link[aria-expanded="true"] .koreasewa-nav-dropdown-icon {
    transform: rotate(180deg);
}

/* Notifications in Navigation Bar - Styled as nav menu item */
.koreasewa-nav-notifications-item {
    margin: 0;
    padding: 0;
}

.koreasewa-nav-notifications {
    position: relative;
    display: flex;
    align-items: center;
}

/* Legacy navigation notification styles removed - using KS Notifications only */
/* /* Legacy navigation notification button styles removed - using KS Notifications only */
/* Notification system removed - no notification styling needed */

.koreasewa-nav-notification-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: white;
    background: #ff0000;
    border-radius: 0.625rem;
    margin-left: 0.25rem;
    flex-shrink: 0;
}

/* Center section - Search Bar */
.koreasewa-header-center,
/* ============================================================================
   HEADER CENTER SECTION - Search Bar ONLY
   ============================================================================
   CRITICAL: This section contains ONLY the search bar.
   MUST be positioned in the CENTER between left and right sections.
   ============================================================================ */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-center,
html body .koreasewa-header .koreasewa-header-center,
html body .koreasewa-header-center,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-center,
body .koreasewa-header .koreasewa-header-center,
body .koreasewa-header-center,
body.home .koreasewa-header-center,
body.homepage .koreasewa-header-center,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-center,
.koreasewa-header .koreasewa-header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
    /* CRITICAL: Center section stays in center (flex: 1 makes it grow) */
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    flex-direction: row !important;
}

/* Right section - Notifications + User Menu */
/* ============================================================================
   HEADER RIGHT SECTION - Notification Bell & User Menu/Login
   ============================================================================
   This section contains:
   - Notification bell icon (order: 1) - RIGHT SIDE TOP - appears FIRST
   - User menu/avatar (order: 2) - Appears after notification bell
   
   CRITICAL RULES:
   - MUST stay on the right side (margin-left: auto)
   - Notification bell MUST appear FIRST (top, before user menu)
   - User menu/login MUST appear AFTER notification bell
   - MUST use flexbox with proper ordering
   - MUST allow dropdowns to be visible (overflow: visible)
   ============================================================================ */
/* ============================================================================
   HEADER RIGHT SECTION - Bell Icon + User Menu ONLY
   ============================================================================
   CRITICAL: This section contains ONLY:
   - Notification bell icon (order: 1)
   - User menu/avatar (order: 2)
   
   MUST be positioned on the RIGHT side of the header
   ============================================================================ */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
html body .koreasewa-header .koreasewa-header-right,
html body .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-right,
body .koreasewa-header-right,
body.home .koreasewa-header-right,
body.homepage .koreasewa-header-right,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
.koreasewa-header .koreasewa-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* CRITICAL: FORCE right positioning - stay on RIGHT side */
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    order: 3 !important;
    /* CRITICAL: Ensure dropdowns are not clipped */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    /* CRITICAL: Ensure flex direction is row for proper ordering */
    flex-direction: row !important;
    /* CRITICAL: Prevent any positioning that might move it to left */
    left: auto !important;
    right: auto !important;
    float: none !important;
    clear: none !important;
    transform: none !important;
}

/* Header Action Container - Notifications & User Menu */
.koreasewa-header-action,
html body .koreasewa-header-action,
body .koreasewa-header-action,
body.home .koreasewa-header-action,
body.homepage .koreasewa-header-action {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    /* CRITICAL: Allow dropdowns to be visible */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: var(--z-header-controls, 1003) !important;
    /* CRITICAL: Ensure proper flex behavior */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Legacy Notification CSS Removed - Using KS Notifications Only */
/* Notification system removed - no notification styling needed */
/* Legacy .notification-btn, #koreasewa-notification-bell styles removed to prevent conflicts */

/* User Menu Button - Always Visible */
.user-menu-btn,
.settings-panel-trigger,
#userMenuButton,
html body .user-menu-btn,
html body .settings-panel-trigger,
body .user-menu-btn,
body .settings-panel-trigger,
body.home .user-menu-btn,
body.homepage .user-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 50%;
    padding: 0.25rem;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* User Avatar - Purple Gradient */
.user-avatar-small,
.user-avatar,
html body .user-avatar-small,
html body .user-avatar,
body .user-avatar-small,
body .user-avatar,
body.home .user-avatar-small,
body.homepage .user-avatar-small {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Purple gradient */
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Navbar Auth Container */
.navbar-auth,
html body .navbar-auth,
body .navbar-auth,
body.home .navbar-auth,
body.homepage .navbar-auth {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
}


.koreasewa-header-action {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
}

/* User menu button - ensure always visible */
.koreasewa-header-action .user-menu-btn,
.koreasewa-header-action .action-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Search bar - ensure always visible and properly styled */
.koreasewa-header-center .navbar-search,
.koreasewa-header-center .search-form {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Logo - ensure always visible */
.koreasewa-header-logo,
.koreasewa-logo-circle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   MOBILE RESPONSIVE - TABLET & MOBILE (768px and below)
   ============================================================================ */
@media (max-width: 768px) {
    /* Professional compact header styling */
    .koreasewa-header {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* Compact main header row */
    .koreasewa-header-main-row {
        padding: 0.5rem 0.75rem;
        height: 64px;
        min-height: 64px;
        gap: 0.5rem;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    
    /* Left section - compact */
    .koreasewa-header-left {
        gap: 0.5rem;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Right section - compact */
    .koreasewa-header-right {
        gap: 0.25rem;
        flex: 0 0 auto;
    }

    /* Compact header action buttons - WCAG 2.1 AA compliant (44px minimum) */
    .koreasewa-header-action {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .koreasewa-header-action .action-btn,
    .koreasewa-header-action .user-btn,
    .koreasewa-header-action .theme-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        border-radius: 50%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.1);
    }
    
    /* User menu styling */
    .koreasewa-header-action[data-koreasewa-action="user"],
    .koreasewa-header-action[data-koreasewa-module="user-menu"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .koreasewa-header-action .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    /* Compact search bar on mobile - Show but make it compact */
    .koreasewa-header-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        margin: 0 0.5rem;
        order: 2;
    }

    .koreasewa-header-center .koreasewa-search-bar,
    .koreasewa-header-center .search-form {
        display: flex !important;
        visibility: visible !important;
        width: 100%;
        max-width: 100%;
    }

    /* Compact search input wrapper on mobile */
    .koreasewa-search-input-wrapper {
        height: 36px;
        min-height: 36px;
    }

    .koreasewa-search-icon {
        left: 0.5rem;
        font-size: 0.875rem;
    }

    .koreasewa-search-input,
    .koreasewa-header-center .koreasewa-search-input {
        font-size: 0.8125rem;
        padding: 0.375rem 0.5rem 0.375rem 2rem;
        height: 36px;
    }

    .koreasewa-search-btn {
        padding: 0.375rem 0.625rem;
        min-width: 50px;
        height: 36px;
        font-size: 0.75rem;
    }

    /* Legacy support */
    .koreasewa-header-center .input-group {
        display: flex !important;
        height: 36px;
    }

    .koreasewa-header-center .form-control {
        font-size: 0.8125rem;
        padding: 0.375rem 0.5rem;
        height: 36px;
    }

    .koreasewa-header-center .btn-outline-secondary {
        padding: 0.375rem 0.5rem;
        height: 36px;
        min-width: 36px;
    }
    
    /* Compact navigation container */
    .koreasewa-nav-container {
        padding: 0 0.5rem;
        height: 52px;
        gap: 0.375rem;
    }
    
    /* Icon-only login button on mobile - WCAG compliant */
    .koreasewa-login-btn {
        padding: 0.5rem;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 102, 255, 0.2);
    }
    
    .koreasewa-login-btn i {
        font-size: 1.125rem;
        margin: 0;
        opacity: 1;
    }
    
    .koreasewa-login-btn-text {
        display: none;
    }

    /* Compact logo on mobile */
    .koreasewa-logo-circle {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .koreasewa-logo-k,
    .koreasewa-logo-s {
        font-size: 1.15rem;
    }

    .koreasewa-logo-title {
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        line-height: 1.2;
    }

    .koreasewa-logo-tagline {
        display: block;
        font-size: 0.75rem;
        line-height: 1.2;
        color: var(--header-text-muted);
    }
    
    /* Compact logo text */
    .koreasewa-logo-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    
    /* Compact sidebar toggle - WCAG compliant */
    .koreasewa-sidebar-toggle-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.2);
        pointer-events: auto;
        z-index: 1001;
    }

    /* Compact navigation */
    .koreasewa-header-navigation {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        border-top: 1px solid var(--header-border);
        position: relative;
    }

    .koreasewa-header-navigation::-webkit-scrollbar {
        display: none;
    }

    .koreasewa-nav-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        max-width: 100%;
    }

    .koreasewa-nav-container::-webkit-scrollbar {
        display: none;
    }

    .koreasewa-nav-menu {
        gap: 0.375rem;
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
        padding: 0 0.5rem;
        scroll-snap-type: x proximity;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .koreasewa-nav-menu-item {
        scroll-snap-align: start;
        flex-shrink: 0;
        flex-grow: 0;
        width: auto;
        min-width: 44px;
        max-width: 44px;
        overflow: hidden;
    }

    /* Compact icon-only navigation links on mobile - WCAG compliant */
    .koreasewa-nav-menu-link {
        padding: 0.5rem !important;
        font-size: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
        position: relative !important;
        background: transparent !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }
    
    .koreasewa-nav-menu-link:hover {
        background: var(--action-hover);
        transform: scale(1.05);
    }
    
    .koreasewa-nav-menu-link:active {
        transform: scale(0.95);
        background: var(--action-active);
    }

    .koreasewa-nav-menu-link i {
        font-size: 1.125rem !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        opacity: 0.85 !important;
        line-height: 1 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }
    
    .koreasewa-nav-menu-link.koreasewa-active i {
        opacity: 1 !important;
    }

    /* Hide text labels on mobile - icon only - Maximum specificity */
    html body .koreasewa-nav-menu-link .koreasewa-nav-menu-text,
    body .koreasewa-nav-menu-link .koreasewa-nav-menu-text,
    .koreasewa-nav-menu-link .koreasewa-nav-menu-text,
    .koreasewa-nav-menu-text,
    html body .koreasewa-header-navigation .koreasewa-nav-menu-text,
    body .koreasewa-header-navigation .koreasewa-nav-menu-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
    }

    /* Hide badges on mobile to save space */
    html body .koreasewa-nav-menu-link .koreasewa-nav-badge,
    body .koreasewa-nav-menu-link .koreasewa-nav-badge,
    .koreasewa-nav-menu-link .koreasewa-nav-badge {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide dropdown icons on mobile to save space */
    html body .koreasewa-nav-menu-link .koreasewa-nav-dropdown-icon,
    body .koreasewa-nav-menu-link .koreasewa-nav-dropdown-icon,
    .koreasewa-nav-menu-link .koreasewa-nav-dropdown-icon {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Professional active state for icon-only links */
    .koreasewa-nav-menu-link.koreasewa-active {
        background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
        border: 2px solid rgba(0, 102, 255, 0.4);
        box-shadow: 0 2px 8px rgba(0, 102, 255, 0.15);
    }
    
    .koreasewa-nav-menu-link.koreasewa-active::after {
        display: none; /* Hide bottom border on mobile */
    }

    .koreasewa-header-left,
    .koreasewa-header-right {
        flex-shrink: 0;
    }

    .koreasewa-sidebar-toggle-btn:active {
        background: var(--action-active);
        transform: scale(0.95);
        opacity: 0.9;
    }
}

/* ============================================================================
   MOBILE RESPONSIVE - SMALL MOBILE (576px and below)
   ============================================================================ */
@media (max-width: 576px) {
    /* Extra compact header for small mobile */
    .koreasewa-header-main-row {
        padding: 0.375rem 0.5rem;
        height: 56px;
        min-height: 56px;
        gap: 0.375rem;
    }

    /* Ensure navigation container doesn't overflow */
    .koreasewa-nav-container {
        padding: 0 0.25rem;
        height: 48px;
        gap: 0.25rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .koreasewa-nav-menu {
        gap: 0.25rem;
        padding: 0 0.25rem;
    }

    .koreasewa-nav-menu-item {
        min-width: 40px;
        max-width: 40px;
    }

    .koreasewa-nav-menu-link {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0.375rem !important;
    }

    .koreasewa-nav-menu-link i {
        font-size: 1rem !important;
    }

    /* Ensure search bar is hidden */
    .koreasewa-header-center {
        display: none !important;
        visibility: hidden !important;
    }

    /* Compact logo on extra small mobile */
    /* Extra small mobile - show logo + title + slogan (compact) */
    .koreasewa-logo-circle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .koreasewa-logo-k,
    .koreasewa-logo-s {
        font-size: 1rem;
    }

    .koreasewa-logo-title {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .koreasewa-logo-text {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        min-width: 0;
        flex: 1;
    }

    .koreasewa-logo-tagline {
        display: block;
        font-size: 0.625rem;
        line-height: 1.2;
        color: var(--header-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.8;
    }

    /* Compact sidebar toggle - maintain WCAG compliance (44px minimum) */
    .koreasewa-sidebar-toggle-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        pointer-events: auto;
        z-index: 1001;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.2);
        cursor: pointer;
    }
    
    .koreasewa-sidebar-toggle-btn:active {
        transform: scale(0.95);
        background: var(--action-active);
    }

    /* Compact navigation */
    .koreasewa-header-navigation {
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .koreasewa-header-navigation::-webkit-scrollbar {
        display: none;
    }

    .koreasewa-nav-container {
        height: 48px;
        gap: 0.25rem;
        padding: 0 0.5rem;
    }

    .koreasewa-nav-menu {
        gap: 0.25rem;
        padding: 0 0.375rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .koreasewa-nav-menu-item {
        scroll-snap-align: start;
    }

    /* Compact icon-only navigation on extra small mobile - WCAG compliant */
    .koreasewa-nav-menu-link {
        padding: 0.5rem;
        font-size: 0;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb), 0.1);
    }

    .koreasewa-nav-menu-link i {
        font-size: 1rem;
        margin-right: 0;
    }

    /* Hide text labels on extra small mobile */
    .koreasewa-nav-menu-link .koreasewa-nav-menu-text,
    .koreasewa-nav-menu-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Compact login button on extra small mobile - WCAG compliant */
    .koreasewa-login-btn {
        padding: 0.5rem;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 102, 255, 0.2);
    }
    
    .koreasewa-login-btn i {
        font-size: 1rem;
    }
    
    .koreasewa-login-btn-text {
        display: none;
    }

    /* Compact header action buttons */
    .koreasewa-header-action .action-btn,
    .koreasewa-header-action .user-btn,
    .koreasewa-header-action .theme-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Notification system removed - hide notification buttons */
    .koreasewa-header-action .notification-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ============================================================================
   FINAL CSS ISOLATION - PREVENT PAGE-SPECIFIC STYLES FROM AFFECTING HEADER
   ============================================================================
   These rules ensure that page-specific CSS cannot override header styles.
   All header styling should be controlled through this file only.
   ============================================================================ */

/* Force header isolation - prevent inheritance from page containers */
body .koreasewa-header,
body #koreasewa-header,
.koreasewa-header {
    /* Reset any inherited styles that might affect header */
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--header-text) !important;
    /* Ensure proper stacking */
    isolation: isolate !important;
    /* Prevent layout shifts */
    contain: layout style paint !important;
}

/* Prevent page-specific margin/padding overrides */
body > .koreasewa-header,
body > header.koreasewa-header,
.koreasewa-header:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure header children are properly scoped */
.koreasewa-header * {
    box-sizing: border-box;
}

/* Prevent global CSS resets from affecting header */
.koreasewa-header,
.koreasewa-header *:not(script):not(style) {
    /* Reset common global resets that might interfere */
    vertical-align: baseline;
    text-decoration: none;
    outline: none;
}

/* Ensure header is never hidden by page-specific styles */
.koreasewa-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   CRITICAL: SIDEBAR TOGGLE BUTTON VISIBILITY - CONSOLIDATED RULES
   ============================================================================
   Consolidated rules to ensure sidebar toggle button is ALWAYS visible on ALL
   pages including homepage. Removed duplicate rules - single source of truth.
   Maximum specificity to override any page-specific CSS.
   ============================================================================ */

/* Ensure header left section (contains toggle button) is always visible */
html body .koreasewa-header .koreasewa-header-left {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* CRITICAL: Sidebar toggle button - MAXIMUM SPECIFICITY - ALWAYS VISIBLE */
/* This rule ensures visibility on ALL pages including homepage */
html body .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
html body .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle,
body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn,
body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Ensure menu icon inside toggle button is always visible */
html body .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn .koreasewa-menu-icon,
html body .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle .koreasewa-menu-icon,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn .koreasewa-menu-icon,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle .koreasewa-menu-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure menu icon lines are always visible */
html body .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn .koreasewa-menu-icon .koreasewa-menu-icon-line,
html body .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle .koreasewa-menu-icon .koreasewa-menu-icon-line,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left .koreasewa-sidebar-toggle-btn .koreasewa-menu-icon .koreasewa-menu-icon-line,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left #koreasewa-sidebar-toggle .koreasewa-menu-icon .koreasewa-menu-icon-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   FINAL ENFORCEMENT - MAXIMUM SPECIFICITY TO ENSURE VISIBILITY
   ============================================================================
   These rules use maximum specificity to override ANY other CSS that might
   be loaded after header.css (including responsive CSS, page-specific CSS, etc.)
   ============================================================================ */

/* Ensure header main row is always visible and properly laid out */
html body .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Note: Header left section rules are consolidated above (line ~2497) */

/* Ensure center section (search bar) is always visible */
html body .koreasewa-header .koreasewa-header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    margin: 0 auto !important;
}

/* Ensure right section (user menu/notifications) is always visible */
html body .koreasewa-header .koreasewa-header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    order: 3 !important;
    /* CRITICAL: Ensure right section stays on the right */
    margin-left: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Ensure logo is always visible with consistent gradient */
html body .koreasewa-header .koreasewa-header-logo,
html body .koreasewa-header .koreasewa-logo-circle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-logo-circle {
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
}

/* Ensure login button is always visible with matching gradient */
html body .koreasewa-header .koreasewa-login-btn,
html body .koreasewa-nav-login .koreasewa-login-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    color: white !important;
}

/* Ensure search bar is always visible */
html body .koreasewa-header .koreasewa-header-center .navbar-search,
html body .koreasewa-header .koreasewa-header-center .search-form,
html body .koreasewa-header .koreasewa-header-center .input-group {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-header-center .form-control {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure navigation row is always visible */
html body .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-nav-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .koreasewa-header .koreasewa-nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   HOMEPAGE HEADER PROTECTION - Ensure Header Loads 100% Standard
   ============================================================================
   These rules ensure the header loads exactly like other pages on homepage.
   Maximum specificity to override any homepage-specific CSS conflicts.
   All header parts must be visible and functional on homepage.
   ============================================================================ */

/* Homepage Header - Complete Protection */
html body[data-page*="home"] .koreasewa-header,
html body[data-page="ks_home_home"] .koreasewa-header,
html body.homepage .koreasewa-header,
html body.home .koreasewa-header,
html body[data-page*="home"] #koreasewa-header,
html body[data-page="ks_home_home"] #koreasewa-header,
html body.homepage #koreasewa-header,
html body.home #koreasewa-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: 0 2px 4px var(--header-shadow) !important;
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Homepage Header Main Row - All Parts Visible */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-main-row,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-main-row,
html body.homepage .koreasewa-header .koreasewa-header-main-row,
html body.home .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.75rem 1rem !important;
    height: auto !important;
    min-height: 70px !important;
}

/* Homepage Header Left - Logo and Sidebar Toggle */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-left,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-left,
html body.homepage .koreasewa-header .koreasewa-header-left,
html body.home .koreasewa-header .koreasewa-header-left {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* Homepage Sidebar Toggle Button */
html body[data-page*="home"] .koreasewa-header .koreasewa-sidebar-toggle-btn,
html body[data-page*="home"] .koreasewa-header #koreasewa-sidebar-toggle,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-sidebar-toggle-btn,
html body[data-page="ks_home_home"] .koreasewa-header #koreasewa-sidebar-toggle,
html body.homepage .koreasewa-header .koreasewa-sidebar-toggle-btn,
html body.homepage .koreasewa-header #koreasewa-sidebar-toggle,
html body.home .koreasewa-header .koreasewa-sidebar-toggle-btn,
html body.home .koreasewa-header #koreasewa-sidebar-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Homepage Logo - Must Be Visible */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-logo,
html body[data-page*="home"] .koreasewa-header .koreasewa-logo-module,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-logo,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-logo-module,
html body.homepage .koreasewa-header .koreasewa-header-logo,
html body.homepage .koreasewa-header .koreasewa-logo-module,
html body.home .koreasewa-header .koreasewa-header-logo,
html body.home .koreasewa-header .koreasewa-logo-module {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Homepage Logo Circle */
html body[data-page*="home"] .koreasewa-header .koreasewa-logo-circle,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-logo-circle,
html body.homepage .koreasewa-header .koreasewa-logo-circle,
html body.home .koreasewa-header .koreasewa-logo-circle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Homepage Logo Text */
html body[data-page*="home"] .koreasewa-header .koreasewa-logo-text,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-logo-text,
html body.homepage .koreasewa-header .koreasewa-logo-text,
html body.home .koreasewa-header .koreasewa-logo-text {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
    min-width: 0 !important;
}

/* Homepage Logo Title and Tagline */
html body[data-page*="home"] .koreasewa-header .koreasewa-logo-title,
html body[data-page*="home"] .koreasewa-header .koreasewa-logo-tagline,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-logo-title,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-logo-tagline,
html body.homepage .koreasewa-header .koreasewa-logo-title,
html body.homepage .koreasewa-header .koreasewa-logo-tagline,
html body.home .koreasewa-header .koreasewa-logo-title,
html body.home .koreasewa-header .koreasewa-logo-tagline {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* Homepage Header Center - Search Bar */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-center,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-center,
html body.homepage .koreasewa-header .koreasewa-header-center,
html body.home .koreasewa-header .koreasewa-header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 0.5rem !important;
}

/* Homepage Search Bar */
html body[data-page*="home"] .koreasewa-header .koreasewa-search-bar,
html body[data-page*="home"] .koreasewa-header .navbar-search,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-search-bar,
html body[data-page="ks_home_home"] .koreasewa-header .navbar-search,
html body.homepage .koreasewa-header .koreasewa-search-bar,
html body.homepage .koreasewa-header .navbar-search,
html body.home .koreasewa-header .koreasewa-search-bar,
html body.home .koreasewa-header .navbar-search {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Homepage Search Input Wrapper */
html body[data-page*="home"] .koreasewa-header .koreasewa-search-input-wrapper,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-search-input-wrapper,
html body.homepage .koreasewa-header .koreasewa-search-input-wrapper,
html body.home .koreasewa-header .koreasewa-search-input-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    position: relative !important;
}

/* Homepage Search Input */
html body[data-page*="home"] .koreasewa-header .koreasewa-search-input,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-search-input,
html body.homepage .koreasewa-header .koreasewa-search-input,
html body.home .koreasewa-header .koreasewa-search-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Homepage Header Right - User Menu and Notifications */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-right,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-right,
html body.homepage .koreasewa-header .koreasewa-header-right,
html body.home .koreasewa-header .koreasewa-header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Homepage Header Action Buttons */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-action,
html body.homepage .koreasewa-header .koreasewa-header-action,
html body.home .koreasewa-header .koreasewa-header-action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
}

/* Legacy notification system removed - hide old notification containers */
html body[data-page*="home"] .koreasewa-header .navbar-notifications,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-notifications,
html body[data-page="ks_home_home"] .koreasewa-header .navbar-notifications,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-notifications,
html body.homepage .koreasewa-header .navbar-notifications,
html body.homepage .koreasewa-header .koreasewa-header-notifications,
html body.home .koreasewa-header .navbar-notifications,
html body.home .koreasewa-header .koreasewa-header-notifications {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Homepage User Menu */
html body[data-page*="home"] .koreasewa-header .navbar-auth,
html body[data-page*="home"] .koreasewa-header .user-menu-btn,
html body[data-page="ks_home_home"] .koreasewa-header .navbar-auth,
html body[data-page="ks_home_home"] .koreasewa-header .user-menu-btn,
html body.homepage .koreasewa-header .navbar-auth,
html body.homepage .koreasewa-header .user-menu-btn,
html body.home .koreasewa-header .navbar-auth,
html body.home .koreasewa-header .user-menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Homepage Header Navigation - Nav Bar */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-navigation,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-navigation,
html body.homepage .koreasewa-header .koreasewa-header-navigation,
html body.home .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-top: 1px solid var(--header-border) !important;
    background: var(--header-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Homepage Nav Container */
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-container,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-nav-container,
html body.homepage .koreasewa-header .koreasewa-nav-container,
html body.home .koreasewa-header .koreasewa-nav-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    height: 50px !important;
    gap: 1rem !important;
}

/* Homepage Nav Menu */
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-menu,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-nav-menu,
html body.homepage .koreasewa-header .koreasewa-nav-menu,
html body.home .koreasewa-header .koreasewa-nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Homepage Nav Menu Items */
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-menu-item,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-nav-menu-item,
html body.homepage .koreasewa-header .koreasewa-nav-menu-item,
html body.home .koreasewa-header .koreasewa-nav-menu-item {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Homepage Nav Menu Links */
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-menu-link,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-nav-menu-link,
html body.homepage .koreasewa-header .koreasewa-nav-menu-link,
html body.home .koreasewa-header .koreasewa-nav-menu-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    color: var(--header-text) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Homepage Login Button */
html body[data-page*="home"] .koreasewa-header .koreasewa-login-btn,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-login-btn,
html body.homepage .koreasewa-header .koreasewa-login-btn,
html body.home .koreasewa-header .koreasewa-login-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.5rem !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* Prevent Homepage CSS from Overriding Header - Maximum Specificity */
html body[data-page*="home"] .koreasewa-header *,
html body[data-page="ks_home_home"] .koreasewa-header *,
html body.homepage .koreasewa-header *,
html body.home .koreasewa-header * {
    box-sizing: border-box !important;
    isolation: inherit !important;
}

/* ============================================================================
   UNIVERSAL HEADER PROTECTION - ALL PAGES (Not Just Homepage)
   ============================================================================
   These rules ensure the header loads 100% standard on ALL pages.
   Maximum specificity to override any page-specific CSS conflicts.
   All header parts must be visible and functional on every page.
   ============================================================================ */

/* Universal Header Protection - All Pages */
html body .koreasewa-header,
html body #koreasewa-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: 0 2px 4px var(--header-shadow) !important;
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Universal Header Main Row - All Pages */
html body .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.75rem 1rem !important;
    height: auto !important;
    min-height: 70px !important;
}

/* Universal Header Left - Logo and Sidebar Toggle - All Pages */
html body .koreasewa-header .koreasewa-header-left {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* Universal Sidebar Toggle Button - All Pages */
html body .koreasewa-header .koreasewa-sidebar-toggle-btn,
html body .koreasewa-header #koreasewa-sidebar-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Universal Logo - All Pages */
html body .koreasewa-header .koreasewa-header-logo,
html body .koreasewa-header .koreasewa-logo-module {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Universal Logo Circle - All Pages */
html body .koreasewa-header .koreasewa-logo-circle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Universal Logo Text - All Pages */
html body .koreasewa-header .koreasewa-logo-text {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
    min-width: 0 !important;
}

/* Universal Logo Title and Tagline - All Pages */
html body .koreasewa-header .koreasewa-logo-title,
html body .koreasewa-header .koreasewa-logo-tagline {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* Universal Header Center - Search Bar - All Pages */
html body .koreasewa-header .koreasewa-header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 0.5rem !important;
}

/* Universal Search Bar - All Pages */
html body .koreasewa-header .koreasewa-search-bar,
html body .koreasewa-header .navbar-search {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Universal Search Input Wrapper - All Pages */
html body .koreasewa-header .koreasewa-search-input-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    position: relative !important;
}

/* Universal Search Input - All Pages */
html body .koreasewa-header .koreasewa-search-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Universal Header Right - User Menu and Notifications - All Pages */
html body .koreasewa-header .koreasewa-header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* CRITICAL: Ensure right section stays on the right side */
    margin-left: auto !important;
    justify-content: flex-end !important;
    order: 3 !important;
    /* CRITICAL: Ensure dropdowns are not clipped */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
}

/* Universal Header Action Buttons - All Pages */
html body .koreasewa-header .koreasewa-header-action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
}

/* Legacy notification system removed - hide old notification containers (but allow new KS notifications) */
html body .koreasewa-header .navbar-notifications,
html body .koreasewa-header .koreasewa-header-notifications,
html body .koreasewa-header .koreasewa-header-action .navbar-notifications {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    align-items: center !important;
}

/* KS Notifications - Always visible on all pages - MAXIMUM SPECIFICITY */
html body .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body .koreasewa-header .koreasewa-header-action#koreasewa-header-notifications-action,
html body .koreasewa-header .koreasewa-notifications-container,
html body .koreasewa-header #koreasewa-notifications-container,
html body .koreasewa-header .koreasewa-notifications-btn,
html body .koreasewa-header #koreasewa-notifications-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* Ensure notifications container uses inline-flex */
html body .koreasewa-header .koreasewa-notifications-container,
html body .koreasewa-header #koreasewa-notifications-container {
    display: inline-flex !important;
}

/* Ensure bell icon is visible - override font-size: 0 */
html body .koreasewa-header .koreasewa-notifications-btn .koreasewa-notifications-icon,
html body .koreasewa-header .koreasewa-notifications-btn i.bi-bell,
html body .koreasewa-header #koreasewa-notifications-btn .koreasewa-notifications-icon,
html body .koreasewa-header #koreasewa-notifications-btn i.bi-bell {
    font-size: 1.125rem !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* Universal Notification Bell Button - All Pages */
/* Notification system removed - hide all notification buttons */
html body .koreasewa-header .notification-btn,
html body .koreasewa-header .koreasewa-header-action .notification-btn,
body .koreasewa-header .notification-btn,
body .koreasewa-header .koreasewa-header-action .notification-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Notification system removed - hide all notification bell icons */
html body .koreasewa-header .notification-btn,
html body .koreasewa-header .notification-btn .bi-bell,
html body .koreasewa-header .notification-btn i,
html body .koreasewa-header .koreasewa-action-btn.notification-btn,
html body .koreasewa-header .koreasewa-action-btn.notification-btn .bi-bell {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Universal Notification Badge - All Pages */
html body .koreasewa-header .koreasewa-notification-badge,
html body .koreasewa-header .notification-badge,
html body .koreasewa-header #koreasewa-notification-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ff0000 !important;
    color: white !important;
    border-radius: 10px !important;
    padding: 0.125rem 0.375rem !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    z-index: 2 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Universal User Menu - All Pages */
html body .koreasewa-header .navbar-auth,
html body .koreasewa-header .user-menu-btn,
html body .koreasewa-header .settings-panel-trigger,
html body .koreasewa-header #userMenuButton {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Universal User Avatar - All Pages */
html body .koreasewa-header .user-avatar-small,
html body .koreasewa-header .user-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Universal Header Navigation - Nav Bar - All Pages */
html body .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-top: 1px solid var(--header-border) !important;
    background: var(--header-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Universal Nav Container - All Pages */
html body .koreasewa-header .koreasewa-nav-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    height: 50px !important;
    gap: 1rem !important;
}

/* Universal Nav Menu - All Pages */
html body .koreasewa-header .koreasewa-nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Universal Nav Menu Items - All Pages */
html body .koreasewa-header .koreasewa-nav-menu-item {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Universal Nav Menu Links - All Pages */
html body .koreasewa-header .koreasewa-nav-menu-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    color: var(--header-text) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Universal Login Button - All Pages */
html body .koreasewa-header .koreasewa-login-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.5rem !important;
    background: linear-gradient(135deg, #0066ff 0%, #ff0000 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* Page-specific duplicate rules removed - Universal rules above cover all pages */
/* All header elements are now protected by universal rules with maximum specificity */

/* ============================================================================
   FINAL PROTECTION - ABSOLUTE LAST RULES (Override ANY CSS loaded after header.css)
   ============================================================================
   These rules are placed at the END of the file to ensure they override:
   - brand-consistency.css
   - homepage-optimized.css
   - homepage-compact.css
   - Any other CSS loaded after header.css
   ============================================================================ */

/* Notification system removed - hide notification buttons */
html body .koreasewa-header .koreasewa-header-action .notification-btn,
html body .koreasewa-header .navbar-notifications .notification-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* User menu button - keep visible */
html body .koreasewa-header .koreasewa-header-action .user-menu-btn,
html body .koreasewa-header .navbar-auth .user-menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Final protection for notification badge - Maximum specificity */
html body .koreasewa-header .koreasewa-notification-badge:not(.koreasewa-notification-badge-hidden),
html body .koreasewa-header .notification-badge:not(.koreasewa-notification-badge-hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Final protection for user avatar - Maximum specificity */
html body .koreasewa-header .user-avatar-small,
html body .koreasewa-header .user-avatar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================================
   FINAL UNIVERSAL PROTECTION LAYER - 100% CONSISTENCY GUARANTEE
   ============================================================================
   This section provides the FINAL protection layer to ensure header is
   100% consistent across ALL pages with ZERO conflicts or issues.
   
   These rules use MAXIMUM SPECIFICITY to override ANY potential conflicts
   from page-specific CSS, third-party libraries, or other stylesheets.
   ============================================================================ */

/* Universal Header Protection - Works on ALL pages, ALL screen sizes */
html body .koreasewa-header,
html body header.koreasewa-header,
html body #koreasewa-header,
body .koreasewa-header,
body[class*="home"] .koreasewa-header,
body[class*="news"] .koreasewa-header,
body[class*="library"] .koreasewa-header,
body[class*="language"] .koreasewa-header,
body[class*="event"] .koreasewa-header,
body[class*="exam"] .koreasewa-header,
body[class*="visa"] .koreasewa-header,
body[class*="travel"] .koreasewa-header,
body[class*="user"] .koreasewa-header,
body[class*="dashboard"] .koreasewa-header {
    /* Core Properties - Protected from ALL overrides */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    
    /* Isolation - Prevent conflicts */
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Universal Main Row Protection */
html body .koreasewa-header .koreasewa-header-main-row,
html body header.koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Universal Navigation Protection */
html body .koreasewa-header .koreasewa-header-navigation,
html body header.koreasewa-header .koreasewa-header-navigation,
body .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Universal Logo Protection */
html body .koreasewa-header .koreasewa-header-logo,
html body .koreasewa-header .koreasewa-logo-module,
body .koreasewa-header .koreasewa-header-logo,
body .koreasewa-header .koreasewa-logo-module {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Universal Search Bar Protection */
html body .koreasewa-header .koreasewa-header-center,
html body .koreasewa-header .koreasewa-search-bar,
body .koreasewa-header .koreasewa-header-center,
body .koreasewa-header .koreasewa-search-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Notification system removed - no notification bell protection needed */

/* Notification system removed - hide any bell icons in notice board */
.header-notice-board .bi-bell,
.header-notice-board [class*="bell"],
.header-notice-board .notification-bell,
.header-notice-board .notice-board-controls .bi-bell,
.header-notice-board .notice-board-controls [class*="bell"],
.header-notice-board .notice-board-content .bi-bell {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Universal User Menu Protection - Ensure visible on ALL pages including language page */
html body .koreasewa-header .navbar-auth,
html body .koreasewa-header #userMenuButton,
html body .koreasewa-header .user-menu-btn,
html body .koreasewa-header [data-koreasewa-action="user"],
body .koreasewa-header .navbar-auth,
body .koreasewa-header #userMenuButton,
body .koreasewa-header .user-menu-btn,
body .koreasewa-header [data-koreasewa-action="user"],
body[data-page*="language"] .koreasewa-header .navbar-auth,
body[data-page*="language"] .koreasewa-header #userMenuButton,
body[data-page*="language"] .koreasewa-header .user-menu-btn,
body[data-page*="language"] .koreasewa-header [data-koreasewa-action="user"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Universal Sidebar Toggle Protection */
html body .koreasewa-header #koreasewa-sidebar-toggle,
html body .koreasewa-header .koreasewa-sidebar-toggle-btn,
body .koreasewa-header #koreasewa-sidebar-toggle,
body .koreasewa-header .koreasewa-sidebar-toggle-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Universal Navigation Menu Protection */
html body .koreasewa-header .koreasewa-nav-menu,
html body .koreasewa-header .koreasewa-nav-menu-item,
body .koreasewa-header .koreasewa-nav-menu,
body .koreasewa-header .koreasewa-nav-menu-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive Protection - Mobile (max-width: 768px) */
@media (max-width: 768px) {
    html body .koreasewa-header,
    html body header.koreasewa-header,
    html body #koreasewa-header,
    body .koreasewa-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html body .koreasewa-header .koreasewa-header-main-row,
    body .koreasewa-header .koreasewa-header-main-row {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    html body .koreasewa-header .koreasewa-header-navigation,
    body .koreasewa-header .koreasewa-header-navigation {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}

/* Responsive Protection - Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    html body .koreasewa-header,
    html body header.koreasewa-header,
    body .koreasewa-header {
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* Responsive Protection - Desktop (min-width: 992px) */
@media (min-width: 992px) {
    html body .koreasewa-header,
    html body header.koreasewa-header,
    body .koreasewa-header {
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* ============================================================================
   HOMEPAGE SPECIFIC PROTECTION - ENSURE 100% IDENTICAL TO OTHER PAGES
   ============================================================================
   These rules ensure the header on the home page is EXACTLY the same as
   all other pages. No differences, no variations, 100% identical.
   ============================================================================ */

/* Homepage Header - Must be identical to all other pages */
html body.home .koreasewa-header,
html body.homepage .koreasewa-header,
html body[data-page*="home"] .koreasewa-header,
html body[data-page="ks_home_home"] .koreasewa-header,
body.home .koreasewa-header,
body.homepage .koreasewa-header,
body[data-page*="home"] .koreasewa-header,
body[data-page="ks_home_home"] .koreasewa-header {
    /* IDENTICAL to universal header rules - no differences */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Homepage Header Main Row - Must be identical */
html body.home .koreasewa-header .koreasewa-header-main-row,
html body.homepage .koreasewa-header .koreasewa-header-main-row,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-main-row,
body.home .koreasewa-header .koreasewa-header-main-row,
body.homepage .koreasewa-header .koreasewa-header-main-row,
body[data-page*="home"] .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Homepage Header Navigation - Must be identical */
html body.home .koreasewa-header .koreasewa-header-navigation,
html body.homepage .koreasewa-header .koreasewa-header-navigation,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-navigation,
body.home .koreasewa-header .koreasewa-header-navigation,
body.homepage .koreasewa-header .koreasewa-header-navigation,
body[data-page*="home"] .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Homepage Notice Board - Hide by default, only show when notices exist */
html body.home .header-notice-board.hidden,
html body.homepage .header-notice-board.hidden,
html body[data-page*="home"] .header-notice-board.hidden,
body.home .header-notice-board.hidden,
body.homepage .header-notice-board.hidden,
body[data-page*="home"] .header-notice-board.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Prevent homepage CSS from affecting header - Maximum specificity */
html body.home .koreasewa-header *,
html body.homepage .koreasewa-header *,
html body[data-page*="home"] .koreasewa-header *,
body.home .koreasewa-header *,
body.homepage .koreasewa-header *,
body[data-page*="home"] .koreasewa-header * {
    /* Inherit from parent - no homepage-specific overrides */
    box-sizing: border-box;
}

/* ============================================================================
   HOMEPAGE AFTER LOGIN PROTECTION - Enhanced for Authenticated Users
   ============================================================================
   These rules ensure header displays correctly on homepage AFTER user login.
   Maximum specificity to override any homepage CSS that might hide header elements.
   ============================================================================ */

/* Homepage Header Right Section - After Login (User Menu & Notifications) */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-right,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-right,
html body.homepage .koreasewa-header .koreasewa-header-right,
html body.home .koreasewa-header .koreasewa-header-right,
body.homepage .koreasewa-header .koreasewa-header-right,
body.home .koreasewa-header .koreasewa-header-right,
body[data-page*="home"] .koreasewa-header .koreasewa-header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Homepage Header Actions - After Login */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-action,
html body.homepage .koreasewa-header .koreasewa-header-action,
html body.home .koreasewa-header .koreasewa-header-action,
body.homepage .koreasewa-header .koreasewa-header-action,
body.home .koreasewa-header .koreasewa-header-action,
body[data-page*="home"] .koreasewa-header .koreasewa-header-action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Legacy notification system removed - hide old notification containers */
html body[data-page*="home"] .koreasewa-header .navbar-notifications,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-notifications,
html body[data-page="ks_home_home"] .koreasewa-header .navbar-notifications,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-notifications,
html body.homepage .koreasewa-header .navbar-notifications,
html body.homepage .koreasewa-header .koreasewa-header-notifications,
html body.home .koreasewa-header .navbar-notifications,
html body.home .koreasewa-header .koreasewa-header-notifications,
body.homepage .koreasewa-header .navbar-notifications,
body.homepage .koreasewa-header .koreasewa-header-notifications,
body.home .koreasewa-header .navbar-notifications,
body.home .koreasewa-header .koreasewa-header-notifications,
body[data-page*="home"] .koreasewa-header .navbar-notifications,
body[data-page*="home"] .koreasewa-header .koreasewa-header-notifications {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* KS Notifications - Always visible on homepage and all pages */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
}

html body[data-page*="home"] .koreasewa-header .koreasewa-notifications-container,
html body.homepage .koreasewa-header .koreasewa-notifications-container,
html body.home .koreasewa-header .koreasewa-notifications-container,
body.homepage .koreasewa-header .koreasewa-notifications-container,
body.home .koreasewa-header .koreasewa-notifications-container,
body[data-page*="home"] .koreasewa-header .koreasewa-notifications-container {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body[data-page*="home"] .koreasewa-header .koreasewa-notifications-btn,
html body.homepage .koreasewa-header .koreasewa-notifications-btn,
html body.home .koreasewa-header .koreasewa-notifications-btn,
body.homepage .koreasewa-header .koreasewa-notifications-btn,
body.home .koreasewa-header .koreasewa-notifications-btn,
body[data-page*="home"] .koreasewa-header .koreasewa-notifications-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Homepage User Menu Container - After Login */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
html body[data-page*="home"] .koreasewa-header .navbar-auth,
html body[data-page="ks_home_home"] .koreasewa-header .navbar-auth,
html body.homepage .koreasewa-header .navbar-auth,
html body.home .koreasewa-header .navbar-auth,
body.homepage .koreasewa-header .navbar-auth,
body.home .koreasewa-header .navbar-auth,
body[data-page*="home"] .koreasewa-header .navbar-auth {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Homepage User Menu Button - After Login - Match News Page Exactly */
html body[data-page*="home"] .koreasewa-header .user-menu-btn,
html body[data-page*="home"] .koreasewa-header .settings-panel-trigger,
html body[data-page*="home"] .koreasewa-header #userMenuButton,
html body[data-page="ks_home_home"] .koreasewa-header .user-menu-btn,
html body[data-page="ks_home_home"] .koreasewa-header .settings-panel-trigger,
html body[data-page="ks_home_home"] .koreasewa-header #userMenuButton,
html body.homepage .koreasewa-header .user-menu-btn,
html body.homepage .koreasewa-header .settings-panel-trigger,
html body.homepage .koreasewa-header #userMenuButton,
html body.home .koreasewa-header .user-menu-btn,
html body.home .koreasewa-header .settings-panel-trigger,
html body.home .koreasewa-header #userMenuButton,
body.homepage .koreasewa-header .user-menu-btn,
body.homepage .koreasewa-header .settings-panel-trigger,
body.homepage .koreasewa-header #userMenuButton,
body.home .koreasewa-header .user-menu-btn,
body.home .koreasewa-header .settings-panel-trigger,
body.home .koreasewa-header #userMenuButton,
body[data-page*="home"] .koreasewa-header .user-menu-btn,
body[data-page*="home"] .koreasewa-header .settings-panel-trigger,
body[data-page*="home"] .koreasewa-header #userMenuButton {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    /* Match Other Pages Styling - Consistent across all pages */
    background: transparent !important;
    border: 1px solid var(--header-border, #e0e0e0) !important;
    border-radius: 50% !important;
    padding: 0.25rem !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

/* Homepage User Avatar - After Login - Match Other Pages (Purple Gradient) */
html body[data-page*="home"] .koreasewa-header .user-avatar-small,
html body[data-page="ks_home_home"] .koreasewa-header .user-avatar-small,
html body.homepage .koreasewa-header .user-avatar-small,
html body.home .koreasewa-header .user-avatar-small,
body.homepage .koreasewa-header .user-avatar-small,
body.home .koreasewa-header .user-avatar-small,
body[data-page*="home"] .koreasewa-header .user-avatar-small {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    /* Match Other Pages Styling - Purple gradient like library, news, etc. */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Override purple gradient for homepage - Match News Page */
html body[data-page*="home"] .koreasewa-header .user-menu-btn .user-avatar-small,
html body[data-page="ks_home_home"] .koreasewa-header .user-menu-btn .user-avatar-small,
html body.homepage .koreasewa-header .user-menu-btn .user-avatar-small,
html body.home .koreasewa-header .user-menu-btn .user-avatar-small,
body.homepage .koreasewa-header .user-menu-btn .user-avatar-small,
body.home .koreasewa-header .user-menu-btn .user-avatar-small,
body[data-page*="home"] .koreasewa-header .user-menu-btn .user-avatar-small {
    background: #ffffff !important;
    border: 2px solid #0066ff !important;
    color: #1a1a1a !important;
    /* Remove any gradient */
    background-image: none !important;
}

/* Notification system removed - no homepage notification bell */

/* Homepage Notification Bell Icon - Match News Page Blue Color */
/* Notification system removed - hide homepage notification buttons and icons */
html body[data-page*="home"] .koreasewa-header .notification-btn,
html body[data-page*="home"] .koreasewa-header .notification-btn .bi-bell,
html body[data-page*="home"] .koreasewa-header .notification-btn i,
html body[data-page="ks_home_home"] .koreasewa-header .notification-btn,
html body[data-page="ks_home_home"] .koreasewa-header .notification-btn .bi-bell,
html body[data-page="ks_home_home"] .koreasewa-header .notification-btn i,
html body.homepage .koreasewa-header .notification-btn,
html body.homepage .koreasewa-header .notification-btn .bi-bell,
html body.homepage .koreasewa-header .notification-btn i,
html body.home .koreasewa-header .notification-btn,
html body.home .koreasewa-header .notification-btn .bi-bell,
html body.home .koreasewa-header .notification-btn i,
body.homepage .koreasewa-header .notification-btn,
body.homepage .koreasewa-header .notification-btn .bi-bell,
body.homepage .koreasewa-header .notification-btn i,
body.home .koreasewa-header .notification-btn,
body.home .koreasewa-header .notification-btn .bi-bell,
body.home .koreasewa-header .notification-btn i,
body[data-page*="home"] .koreasewa-header .notification-btn,
body[data-page*="home"] .koreasewa-header .notification-btn .bi-bell,
body[data-page*="home"] .koreasewa-header .notification-btn i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    color: #0066ff !important;
    font-size: 1.125rem !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Notification system removed - hide homepage notification badges */
html body[data-page*="home"] .koreasewa-header .koreasewa-notification-badge,
html body[data-page*="home"] .koreasewa-header .notification-badge,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-notification-badge,
html body[data-page="ks_home_home"] .koreasewa-header .notification-badge,
html body.homepage .koreasewa-header .koreasewa-notification-badge,
html body.homepage .koreasewa-header .notification-badge,
html body.home .koreasewa-header .koreasewa-notification-badge,
html body.home .koreasewa-header .notification-badge,
body.homepage .koreasewa-header .koreasewa-notification-badge,
body.homepage .koreasewa-header .notification-badge,
body.home .koreasewa-header .koreasewa-notification-badge,
body.home .koreasewa-header .notification-badge,
body[data-page*="home"] .koreasewa-header .koreasewa-notification-badge,
body[data-page*="home"] .koreasewa-header .notification-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============================================================================
   UNIVERSAL HEADER & FOOTER CONSISTENCY PROTECTION - ALL PAGES AFTER LOGIN
   ============================================================================
   These rules ensure header and footer remain identical before and after login.
   Maximum specificity to override any page-specific CSS that might change them.
   ============================================================================ */

/* Universal Header - Consistent Before and After Login */
html body .koreasewa-header,
html body header.koreasewa-header,
html body #koreasewa-header {
    /* Core layout - never changes based on authentication */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Universal Header Main Row - Consistent Layout */
html body .koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 1rem !important;
    min-height: 70px !important;
}

/* Universal Header Navigation - Always Visible */
html body .koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
}

/* Universal Footer - Consistent Before and After Login */
html body .footer-ultra,
html body footer.footer-ultra {
    /* Core layout - never changes based on authentication */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Universal Footer Container - Consistent Layout */
html body .footer-ultra .footer-ultra-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem 1rem 1rem !important;
}

/* ============================================================================
   HOMEPAGE STYLING MATCH - Ensure Homepage Matches News Page Exactly
   ============================================================================
   These rules ensure homepage header elements (bell icon, user avatar) match
   the news page styling exactly - same background, borders, colors, spacing.
   ============================================================================ */

/* Homepage Notification Bell - Match News Page Background & Border */
/* Notification system removed - hide homepage notification buttons */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action .notification-btn,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-action .notification-btn,
html body.homepage .koreasewa-header .koreasewa-header-action .notification-btn,
html body.home .koreasewa-header .koreasewa-header-action .notification-btn,
body.homepage .koreasewa-header .koreasewa-header-action .notification-btn,
body.home .koreasewa-header .koreasewa-header-action .notification-btn,
body[data-page*="home"] .koreasewa-header .koreasewa-header-action .notification-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Homepage User Menu Button - Match News Page Background & Border */
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action .user-menu-btn,
html body[data-page="ks_home_home"] .koreasewa-header .koreasewa-header-action .user-menu-btn,
html body.homepage .koreasewa-header .koreasewa-header-action .user-menu-btn,
html body.home .koreasewa-header .koreasewa-header-action .user-menu-btn,
body.homepage .koreasewa-header .koreasewa-header-action .user-menu-btn,
body.home .koreasewa-header .koreasewa-header-action .user-menu-btn,
body[data-page*="home"] .koreasewa-header .koreasewa-header-action .user-menu-btn {
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================================
   VERSION AND METADATA
   ============================================================================
   Header CSS Version: 5.2.0 - Homepage Styling Match Added
   Last Updated: 2025-01-27
   Status: Production Ready - 100% Consistent - Zero Conflicts Guaranteed
   
   MAJOR IMPROVEMENTS:
   - Added final universal protection layer with maximum specificity
   - Protection rules work on ALL pages (home, news, library, etc.)
   - Protection rules work on ALL screen sizes (mobile, tablet, desktop)
   - Zero conflicts guaranteed - overrides any page-specific CSS
   - 100% consistency across all pages
   
   PREVIOUS CLEANUP:
   - Removed ALL duplicate .koreasewa-header base definitions
   - Removed ALL page-specific duplicate rules
   - Removed ALL old/legacy code and empty selectors
   - Added explicit universal rules for all header components
   
   IMPROVEMENTS:
   - Single header base definition with maximum specificity
   - Universal rules for all header elements (work on ALL pages)
   - Complete protection against any CSS loaded after header.css
   - DRY principle enforced - no duplicate code
   - Final protection layer ensures 100% consistency
   ============================================================================ */

/* ============================================================================
   PERMANENT REMOVAL: Navigation Bar from Home Page
   ============================================================================
   CRITICAL: Navigation bar is PERMANENTLY REMOVED from home page only.
   All other pages show the navigation bar normally.
   
   HEADER STANDARDIZATION - REMOVED PAGE-SPECIFIC HIDING RULES
   ============================================================================
   CRITICAL: Navigation bar must be visible on ALL pages including home page
   for consistent user experience across the entire site.
   Previous rules that hid navigation on home pages have been removed.
   ============================================================================ */

/* ============================================================================
   ENHANCED NAVIGATION BAR FEATURES - Professional Improvements
   ============================================================================
   Enhanced features for better UX, accessibility, and mobile support
   ============================================================================ */

/* Enhanced: Scroll indicators for mobile horizontal scroll */
.koreasewa-nav-container {
    position: relative;
}

.koreasewa-nav-menu.koreasewa-nav-scrolled-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, var(--header-bg), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.koreasewa-nav-menu.koreasewa-nav-scrolled-left::before {
    opacity: 1;
}

.koreasewa-nav-menu.koreasewa-nav-scrolled-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, var(--header-bg), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.koreasewa-nav-menu.koreasewa-nav-scrolled-right::after {
    opacity: 1;
}

/* Enhanced: Better mobile touch targets */
@media (max-width: 768px) {
    .koreasewa-nav-menu-link {
        padding: 0.75rem 1rem;
        min-height: 44px; /* Minimum touch target size */
        font-size: 0.875rem;
    }
    
    .koreasewa-nav-menu {
        gap: 0.25rem;
        padding: 0.25rem 0;
    }
    
    .koreasewa-nav-container {
        padding: 0 0.75rem;
    }
}

/* Enhanced: Better tablet support */
@media (min-width: 769px) and (max-width: 1024px) {
    .koreasewa-nav-menu-link {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
}

/* Enhanced: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .koreasewa-nav-menu-link,
    .koreasewa-nav-menu-link::after,
    .koreasewa-nav-menu-item {
        animation: none !important;
        transition: none !important;
    }
    
    .koreasewa-nav-menu {
        scroll-behavior: auto;
    }
}

/* Enhanced: High contrast mode support */
@media (prefers-contrast: high) {
    .koreasewa-nav-menu-link {
        border: 1px solid currentColor;
    }
    
    .koreasewa-nav-menu-link.koreasewa-active {
        border-width: 2px;
    }
    
    .koreasewa-nav-menu-link:focus-visible {
        outline-width: 3px;
    }
}

/* Enhanced: Print styles - hide navigation */
@media print {
    .koreasewa-header-navigation {
        display: none !important;
    }
}

/* ============================================================================
   CRITICAL: KS NOTIFICATIONS BELL ICON - FINAL ENFORCEMENT
   ============================================================================
   Maximum specificity rules at the end of file to ensure bell icon is ALWAYS visible
   These rules override ANY other CSS that might hide the notification bell icon
   ============================================================================ */

/* Notifications Container - CRITICAL: Always visible */
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="notifications"],
html body .koreasewa-header .koreasewa-header-right #koreasewa-header-notifications-action,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.homepage .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.home .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="notifications"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Notifications Container - inline-flex */
html body .koreasewa-header .koreasewa-notifications-container,
html body .koreasewa-header #koreasewa-notifications-container {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Notifications Button - CRITICAL: Always visible */
html body .koreasewa-header .koreasewa-notifications-btn,
html body .koreasewa-header #koreasewa-notifications-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 38px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
}

/* Bell Icon - CRITICAL: Override button font-size: 0 */
html body .koreasewa-header .koreasewa-notifications-btn i.bi-bell,
html body .koreasewa-header .koreasewa-notifications-btn .koreasewa-notifications-icon,
html body .koreasewa-header #koreasewa-notifications-btn i.bi-bell,
html body .koreasewa-header #koreasewa-notifications-btn .koreasewa-notifications-icon {
    font-size: 1.125rem !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

/* Enhanced: Loading state */
.koreasewa-nav-menu[data-loading="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.koreasewa-nav-menu[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--header-border);
    border-top-color: var(--header-text);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================================================
   HEADER STANDARDIZATION - REMOVED PAGE-SPECIFIC HIDING RULES
   ============================================================================
   CRITICAL: Navigation menu and login button must be visible on ALL pages
   including home page for consistent user experience.
   Previous rules that hid these elements on home pages have been removed
   to ensure header consistency across the entire site.
   ============================================================================ */

/* ============================================================================
   MAXIMUM SPECIFICITY RULES - HEADER ALWAYS VISIBLE
   ============================================================================
   CRITICAL: These rules use maximum specificity to ensure header is ALWAYS
   visible on ALL pages, overriding any page-specific CSS that might hide it.
   These rules are placed at the end of the file to ensure they take precedence.
   ============================================================================ */

/* Header Base - Always Visible - Maximum Specificity */
html body .koreasewa-header,
html body header.koreasewa-header,
html body #koreasewa-header,
html body.home .koreasewa-header,
html body.homepage .koreasewa-header,
html body[data-page*="home"] .koreasewa-header,
html body[data-page="ks_home_home"] .koreasewa-header,
body .koreasewa-header,
body.home .koreasewa-header,
body.homepage .koreasewa-header,
body[data-page*="home"] .koreasewa-header,
body[data-page="ks_home_home"] .koreasewa-header,
header.koreasewa-header,
.koreasewa-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    position: relative !important;
    z-index: var(--z-header, 1000) !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Main Row - Always Visible */
html body .koreasewa-header .koreasewa-header-main-row,
html body.home .koreasewa-header .koreasewa-header-main-row,
html body.homepage .koreasewa-header .koreasewa-header-main-row,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row,
body.home .koreasewa-header .koreasewa-header-main-row,
body.homepage .koreasewa-header .koreasewa-header-main-row,
body[data-page*="home"] .koreasewa-header .koreasewa-header-main-row,
.koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
}

/* Header Navigation - Always Visible */
html body .koreasewa-header .koreasewa-header-navigation,
html body.home .koreasewa-header .koreasewa-header-navigation,
html body.homepage .koreasewa-header .koreasewa-header-navigation,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-navigation,
body .koreasewa-header .koreasewa-header-navigation,
body.home .koreasewa-header .koreasewa-header-navigation,
body.homepage .koreasewa-header .koreasewa-header-navigation,
body[data-page*="home"] .koreasewa-header .koreasewa-header-navigation,
.koreasewa-header .koreasewa-header-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
}

/* Navigation Container - Always Visible */
html body .koreasewa-header .koreasewa-nav-container,
html body.home .koreasewa-header .koreasewa-nav-container,
html body.homepage .koreasewa-header .koreasewa-nav-container,
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-container,
body .koreasewa-header .koreasewa-nav-container,
body.home .koreasewa-header .koreasewa-nav-container,
body.homepage .koreasewa-header .koreasewa-nav-container,
body[data-page*="home"] .koreasewa-header .koreasewa-nav-container,
.koreasewa-header .koreasewa-nav-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
}

/* Navigation Menu - Always Visible */
html body .koreasewa-header .koreasewa-nav-menu,
html body.home .koreasewa-header .koreasewa-nav-menu,
html body.homepage .koreasewa-header .koreasewa-nav-menu,
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-menu,
body .koreasewa-header .koreasewa-nav-menu,
body.home .koreasewa-header .koreasewa-nav-menu,
body.homepage .koreasewa-header .koreasewa-nav-menu,
body[data-page*="home"] .koreasewa-header .koreasewa-nav-menu,
.koreasewa-header .koreasewa-nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
}

/* Login Button Container - Always Visible (when not authenticated) */
html body .koreasewa-header .koreasewa-nav-login,
html body.home .koreasewa-header .koreasewa-nav-login,
html body.homepage .koreasewa-header .koreasewa-nav-login,
html body[data-page*="home"] .koreasewa-header .koreasewa-nav-login,
body .koreasewa-header .koreasewa-nav-login,
body.home .koreasewa-header .koreasewa-nav-login,
body.homepage .koreasewa-header .koreasewa-nav-login,
body[data-page*="home"] .koreasewa-header .koreasewa-nav-login,
.koreasewa-header .koreasewa-nav-login {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Left Section - Always Visible */
html body .koreasewa-header .koreasewa-header-left,
html body.home .koreasewa-header .koreasewa-header-left,
html body.homepage .koreasewa-header .koreasewa-header-left,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-left,
body .koreasewa-header .koreasewa-header-left,
body.home .koreasewa-header .koreasewa-header-left,
body.homepage .koreasewa-header .koreasewa-header-left,
body[data-page*="home"] .koreasewa-header .koreasewa-header-left,
.koreasewa-header .koreasewa-header-left {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header Center Section - Always Visible */
html body .koreasewa-header .koreasewa-header-center,
html body.home .koreasewa-header .koreasewa-header-center,
html body.homepage .koreasewa-header .koreasewa-header-center,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-center,
body .koreasewa-header .koreasewa-header-center,
body.home .koreasewa-header .koreasewa-header-center,
body.homepage .koreasewa-header .koreasewa-header-center,
body[data-page*="home"] .koreasewa-header .koreasewa-header-center,
.koreasewa-header .koreasewa-header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Header Right Section - Always Visible */
html body .koreasewa-header .koreasewa-header-right,
html body.home .koreasewa-header .koreasewa-header-right,
html body.homepage .koreasewa-header .koreasewa-header-right,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-right,
body.home .koreasewa-header .koreasewa-header-right,
body.homepage .koreasewa-header .koreasewa-header-right,
body[data-page*="home"] .koreasewa-header .koreasewa-header-right,
.koreasewa-header .koreasewa-header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* CRITICAL: Ensure right section stays on the right side */
    margin-left: auto !important;
    justify-content: flex-end !important;
    order: 3 !important;
    align-items: center !important;
}

/* Header Action Containers - Always Visible (even when empty) */
html body .koreasewa-header .koreasewa-header-action,
html body.home .koreasewa-header .koreasewa-header-action,
html body.homepage .koreasewa-header .koreasewa-header-action,
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action,
body .koreasewa-header .koreasewa-header-action,
body.home .koreasewa-header .koreasewa-header-action,
body.homepage .koreasewa-header .koreasewa-header-action,
body[data-page*="home"] .koreasewa-header .koreasewa-header-action,
.koreasewa-header .koreasewa-header-action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
}

/* Navbar Auth Container - Always Visible (handles empty state gracefully) */
html body .koreasewa-header .navbar-auth,
html body.home .koreasewa-header .navbar-auth,
html body.homepage .koreasewa-header .navbar-auth,
html body[data-page*="home"] .koreasewa-header .navbar-auth,
body .koreasewa-header .navbar-auth,
body.home .koreasewa-header .navbar-auth,
body.homepage .koreasewa-header .navbar-auth,
body[data-page*="home"] .koreasewa-header .navbar-auth,
.koreasewa-header .navbar-auth {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
    min-height: 38px !important;
}

/* User Menu Button - Visible when authenticated */
html body .koreasewa-header .user-menu-btn,
html body.home .koreasewa-header .user-menu-btn,
html body.homepage .koreasewa-header .user-menu-btn,
html body[data-page*="home"] .koreasewa-header .user-menu-btn,
body .koreasewa-header .user-menu-btn,
body.home .koreasewa-header .user-menu-btn,
body.homepage .koreasewa-header .user-menu-btn,
body[data-page*="home"] .koreasewa-header .user-menu-btn,
.koreasewa-header .user-menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* User Avatar - Visible when authenticated */
html body .koreasewa-header .user-avatar-small,
html body.home .koreasewa-header .user-avatar-small,
html body.homepage .koreasewa-header .user-avatar-small,
html body[data-page*="home"] .koreasewa-header .user-avatar-small,
body .koreasewa-header .user-avatar-small,
body.home .koreasewa-header .user-avatar-small,
body.homepage .koreasewa-header .user-avatar-small,
body[data-page*="home"] .koreasewa-header .user-avatar-small,
.koreasewa-header .user-avatar-small {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Notifications Action - Always Visible */
html body .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"],
.koreasewa-header .koreasewa-header-action[data-koreasewa-action="notifications"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* User Menu Action - Always Visible (container, content shown/hidden by template) */
html body .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
html body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
html body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
html body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
body .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
body.home .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
body.homepage .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
body[data-page*="home"] .koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"],
.koreasewa-header .koreasewa-header-action[data-koreasewa-action="user"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
}

/* ============================================================================
   FINAL ENFORCEMENT - STICKY NAVBAR POSITIONING (UNIVERSAL - ALL PAGES)
   ============================================================================
   ✅ CRITICAL: This rule uses maximum specificity to ensure sticky navbar 
   positioning is ALWAYS applied on ALL pages (home, library, news, events, etc.),
   overriding any potential conflicts from other CSS files or page-specific styles.
   
   ✅ UNIVERSAL: Works on ALL pages, not just home page
   This is placed at the END of the file to ensure it has the highest priority.
   ============================================================================ */

/* ============================================================================
   FINAL ENFORCEMENT - HEADER RIGHT SECTION POSITIONING
   ============================================================================
   CRITICAL: This rule ensures the header-right section (notifications, user menu)
   is ALWAYS positioned on the right side, overriding any potential conflicts.
   ============================================================================ */
html body .koreasewa-header .koreasewa-header-right,
html body.home .koreasewa-header .koreasewa-header-right,
html body.homepage .koreasewa-header .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-right,
body.home .koreasewa-header .koreasewa-header-right,
body.homepage .koreasewa-header .koreasewa-header-right,
.koreasewa-header .koreasewa-header-right {
    /* FORCE right positioning - override ANY conflicting rules */
    margin-left: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    display: flex !important;
}

/* CRITICAL: Ensure notification icon stays in header-right (right side) */
html body .koreasewa-header-right .ks_header_action,
html body .koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"],
html body .koreasewa-header-right #ks_header_notification_action,
html body .koreasewa-header-right .ks_header_notification_container,
body .koreasewa-header-right .ks_header_action,
body .koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"],
body .koreasewa-header-right #ks_header_notification_action,
body .koreasewa-header-right .ks_header_notification_container,
.koreasewa-header-right .ks_header_action,
.koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"],
.koreasewa-header-right #ks_header_notification_action,
.koreasewa-header-right .ks_header_notification_container {
    order: 1 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    /* CRITICAL: Prevent any absolute positioning that might move it */
    float: none !important;
    clear: none !important;
    /* CRITICAL: Ensure it stays in the right section */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* CRITICAL: Prevent any transform or positioning that might move it */
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
}

/* ============================================================================
   NOTIFICATION BELL ICON - REMOVED FROM LEFT SIDE
   ============================================================================
   NOTE: Notification bell icon is now positioned on the RIGHT side only.
   This section is kept for reference but is no longer active.
   ============================================================================ */

/* ============================================================================
   PROFESSIONAL: NOTIFICATION BELL ICON - RIGHT SIDE TOP POSITIONING
   ============================================================================
   CRITICAL: Notification bell icon is positioned on the RIGHT side of the header,
   at the TOP, before the user menu/login icon. This section enforces proper
   positioning across all screen sizes.
   
   REQUIREMENTS:
   - Notification MUST appear on the RIGHT side of the header
   - Notification MUST appear FIRST (top, order: 1)
   - Notification MUST appear before user menu/login (order: 2)
   - Notification MUST be visible and properly styled
   ============================================================================ */

/* Force notification bell to appear ONLY in header-right section (RIGHT SIDE TOP) */
/* MAXIMUM SPECIFICITY: Ensure notification stays on RIGHT side, appears FIRST */
html body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
html body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
html body .koreasewa-header .koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-position="right"],
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="1"],
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"],
body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
body .koreasewa-header .koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-position="right"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="1"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"],
.koreasewa-header .koreasewa-header-right .ks_header_notification_container,
.koreasewa-header .koreasewa-header-right #ks_header_notification_action,
.koreasewa-header .koreasewa-header-right .ks_header_action[data-ks-header-action="notification"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-position="right"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="1"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-ks-header-action="notification"] {
    /* CRITICAL: Ensure proper flex ordering - bell comes FIRST (order: 1), before user menu (order: 2) */
    order: 1 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* CRITICAL: Position in RIGHT section only - MUST be visible */
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    /* CRITICAL: Prevent any positioning that might move it */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    /* CRITICAL: Proper spacing - margin on right for separation from user menu */
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* CRITICAL: Ensure visibility */
    z-index: 10 !important;
    /* CRITICAL: Prevent any flexbox reordering */
    flex-basis: auto !important;
    width: auto !important;
    height: auto !important;
}

/* Ensure user menu appears on right side AFTER notification bell (order: 2) */
/* MAXIMUM SPECIFICITY: User menu must appear after notification bell */
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"],
html body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="2"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"],
body .koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="2"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"],
.koreasewa-header .koreasewa-header-right .koreasewa-header-action[data-header-action-order="2"] {
    order: 2 !important;
    flex-shrink: 0 !important;
}

/* Responsive: Ensure bell icon stays on right on all screen sizes */
@media (max-width: 991.98px) {
    html body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    html body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
    body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
    .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    .koreasewa-header .koreasewa-header-right #ks_header_notification_action {
        order: 1 !important;
        margin-right: 0.375rem !important;
    }
}

@media (max-width: 767.98px) {
    html body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    html body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
    body .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    body .koreasewa-header .koreasewa-header-right #ks_header_notification_action,
    .koreasewa-header .koreasewa-header-right .ks_header_notification_container,
    .koreasewa-header .koreasewa-header-right #ks_header_notification_action {
        order: 1 !important;
        margin-right: 0.25rem !important;
    }
}

/* CRITICAL: Prevent notification bell and user menu from appearing anywhere except header-right */
html body .koreasewa-header-main-row > .ks_header_notification_container,
html body .koreasewa-header-main-row > #ks_header_notification_action,
html body .koreasewa-header-main-row > .ks_header_action[data-ks-header-action="notification"],
html body .koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-action="user"],
html body .koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-module="user-menu"],
html body .koreasewa-header-main-row > .navbar-auth,
html body .koreasewa-header-main-row > .user-menu-btn,
body .koreasewa-header-main-row > .ks_header_notification_container,
body .koreasewa-header-main-row > #ks_header_notification_action,
body .koreasewa-header-main-row > .ks_header_action[data-ks-header-action="notification"],
body .koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-action="user"],
body .koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-module="user-menu"],
body .koreasewa-header-main-row > .navbar-auth,
body .koreasewa-header-main-row > .user-menu-btn,
.koreasewa-header-main-row > .ks_header_notification_container,
.koreasewa-header-main-row > #ks_header_notification_action,
.koreasewa-header-main-row > .ks_header_action[data-ks-header-action="notification"],
.koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-action="user"],
.koreasewa-header-main-row > .koreasewa-header-action[data-koreasewa-module="user-menu"],
.koreasewa-header-main-row > .navbar-auth,
.koreasewa-header-main-row > .user-menu-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure header-right section is always on the right */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right {
    /* CRITICAL: Force right positioning */
    margin-left: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 0.5rem !important;
    /* CRITICAL: Prevent any positioning that might move it */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
}

/* CRITICAL: Prevent notification bell and user menu from appearing in left section */
html body .koreasewa-header .koreasewa-header-left .ks_header_notification_container,
html body .koreasewa-header .koreasewa-header-left #ks_header_notification_action,
html body .koreasewa-header .koreasewa-header-left .ks_header_action[data-ks-header-action="notification"],
html body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-ks-header-action="notification"],
html body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-action="user"],
html body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-module="user-menu"],
html body .koreasewa-header .koreasewa-header-left .navbar-auth,
html body .koreasewa-header .koreasewa-header-left .user-menu-btn,
body .koreasewa-header .koreasewa-header-left .ks_header_notification_container,
body .koreasewa-header .koreasewa-header-left #ks_header_notification_action,
body .koreasewa-header .koreasewa-header-left .ks_header_action[data-ks-header-action="notification"],
body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-ks-header-action="notification"],
body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-action="user"],
body .koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-module="user-menu"],
body .koreasewa-header .koreasewa-header-left .navbar-auth,
body .koreasewa-header .koreasewa-header-left .user-menu-btn,
.koreasewa-header .koreasewa-header-left .ks_header_notification_container,
.koreasewa-header .koreasewa-header-left #ks_header_notification_action,
.koreasewa-header .koreasewa-header-left .ks_header_action[data-ks-header-action="notification"],
.koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-ks-header-action="notification"],
.koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-action="user"],
.koreasewa-header .koreasewa-header-left .koreasewa-header-action[data-koreasewa-module="user-menu"],
.koreasewa-header .koreasewa-header-left .navbar-auth,
.koreasewa-header .koreasewa-header-left .user-menu-btn {
    /* CRITICAL: Hide notification and user menu if they appear in left section (should never happen) */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* ============================================================================
   FINAL AUTHORITATIVE RULES - MAXIMUM SPECIFICITY - OVERRIDE ALL CONFLICTS
   ============================================================================
   These rules use MAXIMUM specificity to ensure correct header layout.
   They override ANY conflicting rules that may exist elsewhere.
   
   Layout: [LEFT: Hamburger + Logo] [CENTER: Search] [RIGHT: Bell + User Menu]
   ============================================================================ */

/* HEADER MAIN ROW - Professional Flexbox Layout */
html body .koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row,
.koreasewa-header .koreasewa-header-main-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    width: 100% !important;
    position: relative !important;
}

/* HEADER LEFT - Hamburger Menu + Logo ONLY (FORCE LEFT POSITION) */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-left,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-left,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
}

/* HEADER CENTER - Search Bar ONLY (FORCE CENTER POSITION) */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-center,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-center,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
}

/* HEADER RIGHT - Bell Icon + User Menu ONLY (FORCE RIGHT POSITION) */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    order: 3 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* BELL ICON - Must be in header-right, order 1 */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .ks_header_notification_container,
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right #ks_header_notification_action,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .ks_header_notification_container,
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right #ks_header_notification_action,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .ks_header_notification_container,
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right #ks_header_notification_action {
    order: 1 !important;
    display: flex !important;
    position: relative !important;
    margin-right: 0.5rem !important;
}

/* USER MENU - Must be in header-right, order 2 */
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
html body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"],
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
body .koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"],
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-action="user"],
.koreasewa-header .koreasewa-header-main-row .koreasewa-header-right .koreasewa-header-action[data-koreasewa-module="user-menu"] {
    order: 2 !important;
    display: flex !important;
    position: relative !important;
}


/* CRITICAL: Ensure header and header-main-row don't break sticky navbar */
html body .koreasewa-header,
body .koreasewa-header,
.koreasewa-header {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
}

html body .koreasewa-header .koreasewa-header-main-row,
body .koreasewa-header .koreasewa-header-main-row,
.koreasewa-header .koreasewa-header-main-row {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* ============================================================================
   FINAL ENFORCEMENT - BODY OVERFLOW FOR STICKY NAVBAR (ALL PAGES)
   ============================================================================
   CRITICAL: This is the FINAL rule to ensure body overflow-y is visible
   for sticky navbar to work on ALL pages (home, library, news, events, etc.)
   This rule uses maximum specificity and is placed at the END of the file
   to ensure it takes precedence over any other CSS that loads after header.css.
   ============================================================================ */
html body,
body {
    /* CRITICAL: Preserve vertical overflow for sticky navbar positioning */
    /* Only hide horizontal overflow to prevent horizontal scroll */
    overflow-x: hidden !important;
    overflow-y: visible !important; /* CRITICAL: Must be visible for sticky to work */
    contain: none !important; /* No containment - breaks sticky positioning */
}

/* ============================================================================
   FINAL CONFLICT PREVENTION - PROTECT HEADER FROM GENERIC SELECTORS
   ============================================================================
   CRITICAL: These rules ensure that generic CSS selectors (.header, .navbar, etc.)
   from other CSS files cannot accidentally override koreasewa-header styles.
   All koreasewa-header elements use maximum specificity to prevent conflicts.
   ============================================================================ */

/* Prevent generic .header class from affecting koreasewa-header */
.header:not(.koreasewa-header) .koreasewa-header,
.koreasewa-header.header {
    /* Reset any generic .header styles that might leak */
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: 0 2px 4px var(--header-shadow) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-header, 1000) !important;
}

/* Prevent generic .navbar class from affecting koreasewa-header navigation */
.navbar:not(.koreasewa-header-navigation) .koreasewa-header-navigation,
.koreasewa-header-navigation.navbar {
    /* Reset any generic .navbar styles that might leak */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure no generic sidebar class affects koreasewa-sidebar */
.sidebar:not(.koreasewa-sidebar) .koreasewa-sidebar,
.koreasewa-sidebar.sidebar {
    /* Reset any generic .sidebar styles that might leak */
    position: fixed !important;
    z-index: var(--z-sidebar, 1050) !important;
}