@syuttechnologies/layout 1.0.2 → 1.0.22

package/dist/components/EnterpriseLayout.js

@@ -110,7 +110,6 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
                     setDynamicNavigation(parsedNavigation);
                     // Update expanded sections for the new navigation
                     setExpandedSections(new Set(parsedNavigation.map((n) => n.section)));
-                    setExpandedOverviewSections(new Set(parsedNavigation.filter((sec) => sec.section !== "Dashboard").map((sec) => sec.section)));
                 }
             }
             catch (error) {
@@ -142,10 +141,25 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
             }
         }
     }, []);
+    // Sync dynamicModules when config.modules prop changes (if no localStorage override)
+    useEffect(() => {
+        const storedModules = localStorage.getItem('MODULES_CONFIG');
+        if (!storedModules && config.modules) {
+            setDynamicModules(config.modules);
+        }
+    }, [config.modules]);
+    // Sync dynamicNavigation when config.navigation prop changes (if no localStorage override)
+    useEffect(() => {
+        const storedNavigation = localStorage.getItem('NAVIGATION_MENU');
+        if (!storedNavigation && config.navigation) {
+            setDynamicNavigation(config.navigation);
+            setExpandedSections(new Set(config.navigation.map((n) => n.section)));
+        }
+    }, [config.navigation]);
     // User preference for auto-collapse (configurable)
     const [autoCollapseEnabled, setAutoCollapseEnabled] = useState(config.layout.autoCollapseSidebar);
     // Overview tab section management
-    const [expandedOverviewSections, setExpandedOverviewSections] = useState(new Set(config.navigation.filter(sec => sec.section !== "Dashboard").map(sec => sec.section)));
+    const [expandedOverviewSections, setExpandedOverviewSections] = useState(new Set());
     // React 18 Concurrent Features
     const [isPending, startTransition] = useTransition();
     const deferredActiveTab = useDeferredValue(activeTab);
@@ -197,1963 +211,1964 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
         const footerHeight = footerVisible && config.layout.enableFooter
             ? config.layout.footerHeight
             : "0px";
-        return `
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      :root {
-        --primary: ${colors.primary};
-        --secondary: ${colors.secondary};
-        --success: ${colors.success};
-        --warning: ${colors.warning};
-        --danger: ${colors.danger};
-        --info: ${colors.info};
-        
-        --bg-primary: #ffffff;
-        --bg-secondary: #f8fafc;
-        --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        --text-primary: #1e293b;
-        --text-secondary: #64748b;
-        --text-muted: #94a3b8;
-        --border-color: rgba(226, 232, 240, 0.5);
-        --glass-bg: rgba(255, 255, 255, 0.95);
-        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.1);
-        --accent-primary: ${colors.primary};
-        --accent-gradient: linear-gradient(135deg, ${colors.primary}, ${colors.info});
-        
-        --header-height: ${config.layout.headerHeight};
-        --sidebar-width: ${config.layout.sidebarWidth};
-        --sidebar-collapsed-width: ${config.layout.sidebarCollapsedWidth};
-        --footer-height: ${footerHeight};
-        --tab-bar-height: ${config.layout.tabBarHeight};
-      }
-
-      [data-theme="dark"] {
-        --bg-primary: #0f172a;
-        --bg-secondary: #1e293b;
-        --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-        --text-primary: #f1f5f9;
-        --text-secondary: #cbd5e1;
-        --text-muted: #64748b;
-        --border-color: rgba(71, 85, 105, 0.5);
-        --glass-bg: rgba(15, 23, 42, 0.95);
-        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.3);
-      }
-
-      html {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: var(--bg-gradient);
-        color: var(--text-primary);
-        line-height: 1.5;
-        height: 100vh;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        transition: background 0.3s ease, color 0.3s ease;
-      }
-
-      .enterprise-layout {
-        width: 100%;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      .layout-header {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: var(--header-height);
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border-bottom: 1px solid var(--border-color);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 1rem;
-        z-index: 1000;
-        box-shadow: var(--shadow);
-      }
-
-      .header-left {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        flex: 0 0 auto;
-        min-width: 0;
-      }
-
-      .header-center {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        justify-content: center;
-        min-width: 0;
-      }
-
-      .header-right {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        flex-shrink: 0;
-        position: relative;
-      }
-
-      .header-info-section {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        height: fit-content;
-        max-height: calc(var(--header-height) - 1rem);
-      }
-
-      .header-info-card {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.375rem 0.875rem;
-        border-radius: 1.25rem;
-        backdrop-filter: blur(10px);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        cursor: pointer;
-        position: relative;
-        overflow: visible;
-        height: fit-content;
-        max-height: 2.25rem;
-      }
-
-      .header-info-card-blue {
-        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.06) 100%);
-        border: 1px solid rgba(37, 99, 235, 0.2);
-        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08),
-                    0 1px 2px rgba(0, 0, 0, 0.04);
-      }
-
-      .header-info-card-green {
-        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(34, 197, 94, 0.06) 100%);
-        border: 1px solid rgba(16, 185, 129, 0.2);
-        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08),
-                    0 1px 2px rgba(0, 0, 0, 0.04);
-      }
-
-      .header-info-card::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        height: 100%;
-        background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
-        transform: translate(-50%, -50%) scale(0);
-        transition: transform 0.5s ease-out;
-        pointer-events: none;
-      }
-
-      .header-info-card:hover::before {
-        transform: translate(-50%, -50%) scale(2);
-      }
-
-      .header-info-card-blue:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18),
-                    0 2px 4px rgba(0, 0, 0, 0.06);
-        border-color: rgba(37, 99, 235, 0.35);
-        background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%);
-      }
-
-      .header-info-card-green:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18),
-                    0 2px 4px rgba(0, 0, 0, 0.06);
-        border-color: rgba(16, 185, 129, 0.35);
-        background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(34, 197, 94, 0.08) 100%);
-      }
-
-      .header-info-card:active {
-        transform: translateY(0) scale(0.98);
-        transition: all 0.1s ease;
-      }
-
-      .header-info-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.25rem;
-        height: 1.25rem;
-        flex-shrink: 0;
-      }
-
-      .header-info-card-blue .header-info-icon {
-        color: #2563eb;
-      }
-
-      .header-info-card-green .header-info-icon {
-        color: #10b981;
-      }
-
-      .header-info-content {
-        display: flex;
-        flex-direction: column;
-        gap: 0.0625rem;
-        min-width: 0;
-      }
-
-      .header-info-label {
-        font-size: 0.5625rem;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        font-weight: 700;
-        line-height: 1;
-        white-space: nowrap;
-      }
-
-      .header-info-card-blue .header-info-label {
-        color: #1d4ed8;
-        opacity: 0.85;
-      }
-
-      .header-info-card-green .header-info-label {
-        color: #059669;
-        opacity: 0.85;
-      }
-
-      .header-info-value {
-        font-size: 0.8125rem;
-        font-weight: 700;
-        white-space: nowrap;
-        letter-spacing: -0.01em;
-        line-height: 1.2;
-      }
-
-      .header-info-card-blue .header-info-value {
-        color: #1e3a8a;
-      }
-
-      .header-info-card-green .header-info-value {
-        color: #065f46;
-      }
-
-      .header-info-card:hover .header-info-label,
-      .header-info-card:hover .header-info-value {
-        opacity: 1;
-      }
-
-      .header-info-card.selectable {
-        cursor: pointer;
-        padding-right: 0.625rem;
-      }
-
-      .header-info-chevron {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 0.25rem;
-        transition: transform 0.3s ease;
-        opacity: 0.7;
-      }
-
-      .header-info-card:hover .header-info-chevron {
-        opacity: 1;
-      }
-
-      .header-info-dropdown {
-        position: absolute;
-        top: calc(100% + 0.5rem);
-        left: 0;
-        right: 0;
-        background: var(--glass-bg);
-        border-radius: 0.75rem;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
-                    0 4px 8px rgba(0, 0, 0, 0.1);
-        backdrop-filter: blur(12px);
-        z-index: 1000;
-        overflow: hidden;
-        animation: dropdownSlideIn 0.2s ease-out;
-        min-width: 180px;
-      }
-
-      @keyframes dropdownSlideIn {
-        from {
-          opacity: 0;
-          transform: translateY(-8px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .header-info-dropdown-blue {
-        border: 1px solid rgba(37, 99, 235, 0.3);
-      }
-
-      .header-info-dropdown-green {
-        border: 1px solid rgba(16, 185, 129, 0.3);
-      }
-
-      .header-info-dropdown-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.625rem 0.875rem;
-        font-size: 0.8125rem;
-        font-weight: 500;
-        color: var(--text-primary);
-        transition: all 0.2s ease;
-        cursor: pointer;
-        gap: 0.5rem;
-      }
-
-      .header-info-dropdown-item:hover {
-        background: rgba(37, 99, 235, 0.08);
-      }
-
-      .header-info-dropdown-blue .header-info-dropdown-item:hover {
-        background: rgba(37, 99, 235, 0.12);
-        color: #1e40af;
-      }
-
-      .header-info-dropdown-green .header-info-dropdown-item:hover {
-        background: rgba(16, 185, 129, 0.12);
-        color: #047857;
-      }
-
-      .header-info-dropdown-item.active {
-        font-weight: 700;
-        background: rgba(37, 99, 235, 0.1);
-      }
-
-      .header-info-dropdown-blue .header-info-dropdown-item.active {
-        background: rgba(37, 99, 235, 0.15);
-        color: #1e40af;
-      }
-
-      .header-info-dropdown-green .header-info-dropdown-item.active {
-        background: rgba(16, 185, 129, 0.15);
-        color: #047857;
-      }
-
-      .header-info-dropdown-item svg {
-        flex-shrink: 0;
-      }
-
-      .app-logo {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 1.125rem;
-        font-weight: 700;
-        background: var(--accent-gradient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        white-space: nowrap;
-        flex-shrink: 0;
-      }
-
-      .logo-image {
-        flex-shrink: 0;
-        border-radius: 0.375rem;
-      }
-
-      .breadcrumb-container {
-        display: flex;
-        align-items: center;
-        font-size: 0.75rem;
-        opacity: 0.8;
-        margin-left: 1rem;
-      }
-
-      .breadcrumb {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        color: var(--text-secondary);
-      }
-
-      .breadcrumb-item {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-      }
-
-      .breadcrumb-link {
-        color: var(--text-secondary);
-        text-decoration: none;
-        transition: color 0.2s ease;
-      }
-
-      .breadcrumb-link:hover {
-        color: var(--accent-primary);
-      }
-
-      .breadcrumb-current {
-        color: var(--accent-primary);
-        font-weight: 500;
-      }
-
-      .breadcrumb-separator {
-        color: var(--text-muted);
-        opacity: 0.6;
-      }
-
-      .layout-body {
-        display: flex;
-        height: calc(100vh - var(--header-height) - var(--footer-height));
-        margin-top: var(--header-height);
-        overflow: hidden;
-      }
-
-      .layout-body.footer-hidden {
-        height: calc(100vh - var(--header-height));
-      }
-
-      .layout-sidebar {
-        width: var(--sidebar-width);
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border-right: 1px solid var(--border-color);
-        overflow-y: auto;
-        overflow-x: hidden;
-        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        flex-shrink: 0;
-        will-change: width;
-        backface-visibility: hidden;
-        contain: layout style paint;
-      }
-
-      .layout-sidebar.collapsed {
-        width: var(--sidebar-collapsed-width);
-        overflow-y: hidden;
-      }
-
-      .layout-sidebar.mobile-hidden {
-        transform: translateX(-100%);
-        width: 0;
-      }
-
-      .layout-main {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        background: var(--bg-gradient);
-        min-width: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        box-sizing: border-box;
-      }
-
-      .layout-footer {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: var(--footer-height);
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border-top: 1px solid var(--border-color);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 1rem;
-        z-index: 1000;
-        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-        font-size: 0.7rem;
-        color: var(--text-secondary);
-        transition: transform 0.3s ease;
-      }
-
-      .layout-footer.hidden {
-        transform: translateY(100%);
-        visibility: hidden;
-        opacity: 0;
-      }
-
-      .footer-left {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-      }
-
-      .footer-environment {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.375rem;
-        font-weight: 500;
-        font-size: 0.625rem;
-      }
-
-      .env-development {
-        background: var(--danger);
-        color: white;
-      }
-
-      .env-staging {
-        background: var(--warning);
-        color: white;
-      }
-
-      .env-production {
-        background: var(--success);
-        color: white;
-      }
-
-      .env-uat {
-        background: var(--info);
-        color: white;
-      }
-
-      .footer-right {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-      }
-
-      .footer-support {
-        color: var(--accent-primary);
-        text-decoration: none;
-        transition: opacity 0.2s ease;
-      }
-
-      .footer-support:hover {
-        opacity: 0.8;
-      }
-
-      .content-wrapper {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-        width: 100%;
-      }
-
-      .tab-bar {
-        display: flex;
-        align-items: center;
-        background: var(--glass-bg);
-        border-bottom: 1px solid var(--border-color);
-        padding: 0;
-        margin: 0;
-        min-height: var(--tab-bar-height);
-        overflow-x: hidden;
-        flex-shrink: 0;
-        gap: 0.25rem;
-        transition: all 0.3s ease;
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .tab-bar.hidden {
-        display: none;
-      }
-
-      .single-page-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background: var(--glass-bg);
-        border-bottom: 1px solid var(--border-color);
-        padding: 0.5rem 1.25rem;
-        flex-shrink: 0;
-      }
-
-      .page-title {
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: var(--text-primary);
-      }
-
-      .back-button {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.375rem 0.75rem;
-        background: transparent;
-        border: 1px solid var(--border-color);
-        border-radius: 0.5rem;
-        color: var(--text-secondary);
-        text-decoration: none;
-        font-size: 0.8rem;
-        transition: all 0.3s ease;
-        cursor: pointer;
-      }
-
-      .back-button:hover {
-        background: var(--bg-secondary);
-        color: var(--text-primary);
-        border-color: var(--border-color);
-      }
-
-      .tab {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.375rem 0.5rem;
-        margin: 0;
-        background: var(--bg-secondary);
-        border: 1px solid var(--border-color);
-        border-bottom: none;
-        border-radius: 0.75rem 0.75rem 0 0;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        white-space: nowrap;
-        min-width: 100px;
-        max-width: 180px;
-        font-size: 0.8rem;
-        color: var(--text-secondary);
-      }
-
-      .tab:hover {
-        background: var(--bg-primary);
-        color: var(--text-primary);
-      }
-
-      .tab.active {
-        background: var(--bg-primary);
-        border-color: var(--accent-primary);
-        color: var(--accent-primary);
-        box-shadow: 0 -2px 4px rgba(37, 99, 235, 0.1);
-      }
-
-      .tab-title {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        min-width: 0;
-      }
-
-      .tab-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1rem;
-        height: 1rem;
-        border-radius: 50%;
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: var(--text-muted);
-        transition: all 0.3s ease;
-        flex-shrink: 0;
-      }
-
-      .tab-close:hover {
-        background: var(--border-color);
-        color: var(--text-secondary);
-      }
-
-      .tab.active .tab-close:hover {
-        background: rgba(37, 99, 235, 0.1);
-        color: var(--accent-primary);
-      }
-
-      /* Tab overflow menu styles for mobile */
-      .tab-bar-wrapper {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        background: var(--glass-bg);
-        border-bottom: 1px solid var(--border-color);
-        min-height: var(--tab-bar-height);
-      }
-
-      .tab-bar-visible {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        flex: 1;
-        overflow: hidden;
-        min-height: var(--tab-bar-height);
-      }
-
-      .tab-more-container {
-        position: relative;
-        flex-shrink: 0;
-      }
-
-      .tab-more-btn {
-        display: none;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.375rem 0.75rem;
-        background: var(--bg-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 0.5rem;
-        cursor: pointer;
-        font-size: 0.8rem;
-        color: var(--text-secondary);
-        transition: all 0.3s ease;
-        margin-right: 0.5rem;
-        white-space: nowrap;
-      }
-
-      .tab-more-btn:hover {
-        background: var(--bg-primary);
-        color: var(--accent-primary);
-        border-color: var(--accent-primary);
-      }
-
-      .tab-more-btn.active {
-        background: var(--accent-primary);
-        color: white;
-        border-color: var(--accent-primary);
-      }
-
-      .tab-overflow-menu {
-        position: absolute;
-        top: 100%;
-        right: 0;
-        min-width: 200px;
-        max-width: 280px;
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border: 1px solid var(--border-color);
-        border-radius: 0.75rem;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-        padding: 0.5rem;
-        z-index: 1002;
-        margin-top: 0.25rem;
-        opacity: 0;
-        visibility: hidden;
-        transform: translateY(-10px);
-        transition: all 0.3s ease;
-      }
-
-      .tab-overflow-menu.open {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0);
-      }
-
-      .tab-overflow-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.5rem 0.75rem;
-        border-radius: 0.5rem;
-        cursor: pointer;
-        font-size: 0.8rem;
-        color: var(--text-secondary);
-        transition: all 0.3s ease;
-        gap: 0.5rem;
-      }
-
-      .tab-overflow-item:hover {
-        background: var(--bg-secondary);
-        color: var(--text-primary);
-      }
-
-      .tab-overflow-item.active {
-        background: rgba(37, 99, 235, 0.1);
-        color: var(--accent-primary);
-      }
-
-      .tab-overflow-item-title {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .tab-overflow-item-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.25rem;
-        height: 1.25rem;
-        border-radius: 50%;
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: var(--text-muted);
-        transition: all 0.3s ease;
-        flex-shrink: 0;
-      }
-
-      .tab-overflow-item-close:hover {
-        background: var(--border-color);
-        color: var(--danger);
-      }
-
-      .tab-content-area {
-        flex: 1;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        min-height: 0;
-        background: var(--bg-gradient);
-        box-sizing: border-box;
-      }
-
-      .enterprise-module {
-        display: none;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        box-sizing: border-box;
-      }
-
-      .enterprise-module.active {
-        display: block;
-      }
-
-      .module-header {
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border: 1px solid var(--border-color);
-        border-radius: 1rem;
-        padding: 0.75rem 1.25rem;
-        margin: 0.75rem 1.25rem 0 1.25rem;
-        box-shadow: var(--shadow);
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: 1rem;
-        flex-shrink: 0;
-      }
-
-      .module-header-content {
-        flex: 1;
-        text-align: left;
-      }
-
-      .module-title {
-        font-size: 1.25rem;
-        font-weight: 700;
-        background: var(--accent-gradient);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        margin-bottom: 0.375rem;
-        line-height: 1.2;
-      }
-
-      .module-description {
-        font-size: 0.8rem;
-        color: var(--text-secondary);
-        margin-bottom: 0;
-        line-height: 1.3;
-      }
-
-      .module-actions {
-        display: flex;
-        align-items: flex-start;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-        flex-shrink: 0;
-      }
-
-      .module-content {
-        padding: 0 1.25rem 2rem 1.25rem;
-        max-width: 100%;
-        overflow: hidden;
-      }
-
-      .layout-body.footer-hidden .module-content {
-        padding-bottom: 0;
-      }
-
-      .btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.375rem;
-        padding: 0.5rem 1rem;
-        font-size: 0.8rem;
-        font-weight: 500;
-        border: none;
-        border-radius: 0.75rem;
-        cursor: pointer;
-        text-decoration: none;
-        transition: all 0.3s ease;
-        white-space: nowrap;
-      }
-
-      .btn-primary {
-        background: var(--accent-gradient);
-        color: white;
-        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
-      }
-
-      .btn-primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
-      }
-
-      .btn-secondary {
-        background: var(--glass-bg);
-        color: var(--text-primary);
-        border: 1px solid var(--border-color);
-      }
-
-      .btn-secondary:hover {
-        background: var(--bg-secondary);
-        transform: translateY(-2px);
-      }
-
-      .nav-section {
-        padding: 0.75rem 0 0 0;
-        border-bottom: 1px solid var(--border-color);
-      }
-
-      .nav-section:last-child {
-        border-bottom: none;
-      }
-
-      .nav-section-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.5rem 1rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        border-radius: 0.75rem;
-        margin: 0 0.75rem 0.375rem 0.75rem;
-        position: relative;
-      }
-
-      .nav-section-header:hover {
-        background: var(--bg-secondary);
-      }
-
-      .nav-section-title {
-        font-size: 0.6875rem;
-        font-weight: 600;
-        color: var(--text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.075em;
-        margin: 0;
-        flex: 1;
-      }
-
-      .nav-chevron {
-        color: var(--text-muted);
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .nav-section-header.expanded .nav-chevron {
-        transform: rotate(0deg);
-      }
-
-      .nav-section-header.collapsed .nav-chevron {
-        transform: rotate(-90deg);
-      }
-
-      .nav-section-content {
-        overflow: hidden;
-        transition: all 0.3s ease;
-        padding-bottom: 0.75rem;
-      }
-
-      .nav-section-content.expanded {
-        max-height: 500px;
-        opacity: 1;
-      }
-
-      .nav-section-content.collapsed {
-        max-height: 0;
-        opacity: 0;
-        padding-bottom: 0;
-      }
-
-      .nav-menu {
-        list-style: none;
-      }
-
-      .nav-item {
-        margin: 0 0.75rem;
-      }
-
-      .nav-link {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        padding: 0.5rem 0.75rem;
-        color: var(--text-secondary);
-        text-decoration: none;
-        border-radius: 0.75rem;
-        transition: all 0.3s ease;
-        font-size: 0.8rem;
-        position: relative;
-      }
-
-      .nav-link:hover,
-      .nav-link.active {
-        background: var(--accent-gradient);
-        color: white;
-        transform: translateX(4px);
-        box-shadow: var(--shadow);
-      }
-
-      /* NEW: Multi-level menu styles */
-      .nav-sub-menu {
-        margin-left: 1.5rem;
-        border-left: 1px solid var(--border-color);
-        padding-left: 0.5rem;
-        margin-top: 0.25rem;
-        list-style: none;
-      }
-
-      .nav-sub-item {
-        margin: 0 0.5rem;
-      }
-
-      .nav-sub-link {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.375rem 0.5rem;
-        color: var(--text-muted);
-        text-decoration: none;
-        border-radius: 0.5rem;
-        transition: all 0.3s ease;
-        font-size: 0.75rem;
-        position: relative;
-      }
-
-      .nav-sub-link:hover,
-      .nav-sub-link.active {
-        background: var(--accent-gradient);
-        color: white;
-        transform: translateX(2px);
-        box-shadow: var(--shadow);
-      }
-
-      .nav-item-with-children > .nav-link {
-        position: relative;
-      }
-
-      .nav-item-expand {
-        position: absolute;
-        right: 0.5rem;
-        color: var(--text-muted);
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .nav-item-expand.expanded {
-        transform: rotate(90deg);
-      }
-
-      .nav-badge {
-        background: var(--danger);
-        color: white;
-        font-size: 0.625rem;
-        padding: 0.125rem 0.3rem;
-        border-radius: 0.5rem;
-        margin-left: auto;
-        font-weight: 600;
-      }
-
-      .menu-toggle {
-        background: none;
-        border: none;
-        padding: 0.5rem;
-        border-radius: 0.75rem;
-        cursor: pointer;
-        color: var(--text-secondary);
-        transition: all 0.3s ease;
-      }
-
-      .menu-toggle:hover {
-        background: var(--bg-secondary);
-        color: var(--text-primary);
-      }
-
-      .persona-control {
-        position: relative;
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding: 0.375rem;
-        border-radius: 0.75rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        flex-shrink: 0;
-      }
-
-      .persona-control:hover {
-        background: var(--bg-secondary);
-      }
-
-      .persona-avatar {
-        width: 2rem;
-        height: 2rem;
-        border-radius: 50%;
-        background: var(--accent-gradient);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: 600;
-        font-size: 0.75rem;
-        flex-shrink: 0;
-      }
-
-      .persona-role {
-        font-size: 0.75rem;
-        color: var(--text-secondary);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100px;
-      }
-
-      .persona-panel {
-        position: absolute;
-        top: 100%;
-        right: 0;
-        width: 300px;
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border: 2px solid rgba(203, 213, 225, 0.8);
-        border-radius: 1rem;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-        padding: 1rem;
-        z-index: 1001;
-        margin-top: 0.5rem;
-        opacity: 0;
-        visibility: hidden;
-        transform: translateY(-10px);
-        transition: all 0.3s ease;
-      }
-
-      .persona-panel.open {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0);
-      }
-
-      .persona-panel-header {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        padding-bottom: 0.75rem;
-        margin-bottom: 0.75rem;
-        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
-      }
-
-      .persona-panel-avatar {
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 50%;
-        background: var(--accent-gradient);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: 600;
-        font-size: 0.875rem;
-      }
-
-      .persona-panel-info h3 {
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: var(--text-primary);
-        margin-bottom: 0.125rem;
-      }
-
-      .persona-panel-info p {
-        font-size: 0.75rem;
-        color: var(--text-secondary);
-      }
-
-      .persona-panel-section {
-        padding-bottom: 0.75rem;
-        margin-bottom: 0.75rem;
-        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-      }
-
-      .persona-panel-section:last-child {
-        margin-bottom: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-
-      .persona-panel-section h4 {
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: 0.5rem;
-      }
-
-      .persona-panel-controls {
-        display: flex;
-        flex-direction: column;
-        gap: 0.375rem;
-      }
-
-      .persona-control-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.5rem 0.75rem;
-        border-radius: 0.5rem;
-        border: 1px solid transparent;
-        transition: all 0.3s ease;
-        cursor: pointer;
-        font-size: 0.8rem;
-      }
-
-      .persona-control-item:hover {
-        background: var(--bg-secondary);
-        border-color: rgba(203, 213, 225, 0.7);
-      }
-
-      .persona-control-item.action {
-        color: var(--text-primary);
-      }
-
-      .persona-control-item.action:hover {
-        color: var(--accent-primary);
-      }
-
-      .persona-control-item.danger:hover {
-        background: rgba(220, 38, 38, 0.1);
-        color: var(--danger);
-      }
-
-      .persona-control-label {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      /* Notification Panel */
-      .notification-bell {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 50%;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        background: transparent;
-      }
-
-      .notification-bell:hover {
-        background: var(--bg-secondary);
-      }
-
-      .notification-badge {
-        position: absolute;
-        top: 0.25rem;
-        right: 0.25rem;
-        background: var(--danger);
-        color: white;
-        font-size: 0.625rem;
-        font-weight: 600;
-        min-width: 1.125rem;
-        height: 1.125rem;
-        border-radius: 0.5625rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 0.25rem;
-        border: 2px solid var(--glass-bg);
-      }
-
-      .notification-panel {
-        position: absolute;
-        top: 100%;
-        right: 0;
-        width: 380px;
-        max-height: 500px;
-        background: var(--glass-bg);
-        backdrop-filter: blur(15px);
-        border: 2px solid rgba(203, 213, 225, 0.8);
-        border-radius: 1rem;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-        z-index: 1001;
-        margin-top: 0.5rem;
-        opacity: 0;
-        visibility: hidden;
-        transform: translateY(-10px);
-        transition: all 0.3s ease;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .notification-panel.open {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0);
-      }
-
-      .notification-panel-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 1rem 1.25rem;
-        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
-      }
-
-      .notification-panel-title {
-        font-size: 1rem;
-        font-weight: 600;
-        color: var(--text-primary);
-      }
-
-      .notification-panel-actions {
-        display: flex;
-        gap: 0.5rem;
-      }
-
-      .notification-action-btn {
-        font-size: 0.75rem;
-        color: var(--primary);
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.375rem;
-        transition: all 0.2s ease;
-      }
-
-      .notification-action-btn:hover {
-        background: rgba(37, 99, 235, 0.1);
-      }
-
-      .notification-panel-content {
-        flex: 1;
-        overflow-y: auto;
-        padding: 0.5rem;
-      }
-
-      .notification-item {
-        display: flex;
-        gap: 0.75rem;
-        padding: 0.875rem;
-        margin-bottom: 0.5rem;
-        border-radius: 0.75rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        border: 1px solid transparent;
-      }
-
-      .notification-item:hover {
-        background: var(--bg-secondary);
-        border-color: rgba(203, 213, 225, 0.7);
-      }
-
-      .notification-item.unread {
-        background: rgba(37, 99, 235, 0.05);
-      }
-
-      .notification-icon {
-        flex-shrink: 0;
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.125rem;
-      }
-
-      .notification-icon.success {
-        background: rgba(22, 163, 74, 0.1);
-        color: var(--success);
-      }
-
-      .notification-icon.info {
-        background: rgba(37, 99, 235, 0.1);
-        color: var(--primary);
-      }
-
-      .notification-icon.warning {
-        background: rgba(217, 119, 6, 0.1);
-        color: var(--warning);
-      }
-
-      .notification-icon.error {
-        background: rgba(220, 38, 38, 0.1);
-        color: var(--danger);
-      }
-
-      .notification-content {
-        flex: 1;
-        min-width: 0;
-      }
-
-      .notification-title {
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: var(--text-primary);
-        margin-bottom: 0.25rem;
-      }
-
-      .notification-message {
-        font-size: 0.8rem;
-        color: var(--text-secondary);
-        margin-bottom: 0.375rem;
-        line-height: 1.4;
-      }
-
-      .notification-time {
-        font-size: 0.7rem;
-        color: var(--text-muted);
-      }
-
-      .notification-empty {
-        text-align: center;
-        padding: 3rem 2rem;
-        color: var(--text-muted);
-      }
-
-      .notification-empty-icon {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-        opacity: 0.3;
-      }
-
-      .notification-filters {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.75rem 1rem;
-        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-        background: var(--bg-secondary);
-      }
-
-      .notification-filter-tabs {
-        display: flex;
-        gap: 0.25rem;
-        background: white;
-        border-radius: 0.5rem;
-        padding: 0.25rem;
-      }
-
-      .notification-filter-tab {
-        padding: 0.375rem 0.75rem;
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: var(--text-secondary);
-        background: transparent;
-        border: none;
-        border-radius: 0.375rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      .notification-filter-tab:hover {
-        background: var(--bg-secondary);
-      }
-
-      .notification-filter-tab.active {
-        background: var(--primary);
-        color: white;
-      }
-
-      .notification-grouping-dropdown {
-        position: relative;
-      }
-
-      .notification-grouping-btn {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding: 0.375rem 0.625rem;
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: var(--text-secondary);
-        background: white;
-        border: 1px solid var(--border-color);
-        border-radius: 0.375rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      .notification-grouping-btn:hover {
-        border-color: var(--primary);
-        color: var(--primary);
-      }
-
-      .notification-group-header {
-        padding: 0.5rem 0.875rem;
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        background: var(--bg-secondary);
-        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-        margin-bottom: 0.25rem;
-      }
-
-      .view-mode-toggle {
-        display: flex;
-        align-items: center;
-        background: var(--bg-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 0.5rem;
-        padding: 0.125rem;
-        gap: 0.125rem;
-      }
-
-      .view-mode-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.375rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        color: var(--text-secondary);
-        background: transparent;
-        border: none;
-        font-size: 0.75rem;
-      }
-
-      .view-mode-btn.active {
-        background: var(--accent-gradient);
-        color: white;
-      }
-
-      .theme-toggle {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .theme-switch {
-        position: relative;
-        width: 2.5rem;
-        height: 1.25rem;
-        background: var(--bg-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 0.625rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-      }
-
-      .theme-switch.active {
-        background: var(--accent-primary);
-        border-color: var(--accent-primary);
-      }
-
-      .theme-switch-handle {
-        position: absolute;
-        top: 0.125rem;
-        left: 0.125rem;
-        width: 0.875rem;
-        height: 0.875rem;
-        background: white;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-      }
-
-      .theme-switch.active .theme-switch-handle {
-        transform: translateX(1.125rem);
-      }
-
-      /* Compact Mode Styles */
-      .sidebar-collapsed .nav-section-title,
-      .sidebar-collapsed .nav-badge,
-      .sidebar-collapsed .persona-role {
-        display: none;
-      }
-
-      .sidebar-collapsed .nav-link {
-        justify-content: center;
-        padding: 0.75rem;
-        margin: 0.25rem 0.5rem;
-      }
-
-      .sidebar-collapsed .nav-section-header {
-        justify-content: center;
-        padding: 0.75rem;
-        margin: 0.25rem 0.5rem;
-      }
-
-      .sidebar-collapsed .nav-chevron {
-        display: none;
-      }
-
-      .sidebar-collapsed .nav-section-content {
-        display: none;
-      }
-
-      /* Compact navigation specific styles */
-      .compact-navigation {
-        padding: 0.5rem 0;
-        width: 100%;
-        overflow: visible;
-      }
-
-      .compact-nav-item {
-        margin: 0.25rem 0.5rem;
-        position: relative;
-      }
-
-      .compact-nav-link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.75rem;
-        color: var(--text-secondary);
-        text-decoration: none;
-        border-radius: 0.75rem;
-        transition: all 0.2s ease;
-        font-size: 0.8rem;
-        position: relative;
-        min-height: 3rem;
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .compact-nav-link:hover,
-      .compact-nav-link.active {
-        background: var(--accent-gradient);
-        color: white;
-        box-shadow: var(--shadow);
-      }
-
-      .compact-nav-badge {
-        position: absolute;
-        top: 0.25rem;
-        right: 0.25rem;
-        background: var(--danger);
-        color: white;
-        font-size: 0.5rem;
-        padding: 0.125rem 0.25rem;
-        border-radius: 0.375rem;
-        font-weight: 600;
-        min-width: 1rem;
-        text-align: center;
-        line-height: 1;
-      }
-
-      .section-tooltip {
-        position: relative;
-      }
-
-      .section-tooltip::after {
-        content: attr(data-tooltip);
-        position: absolute;
-        left: calc(100% + 0.75rem);
-        top: 50%;
-        transform: translateY(-50%);
-        background: var(--glass-bg);
-        color: var(--text-primary);
-        padding: 0.5rem 0.75rem;
-        border-radius: 0.5rem;
-        font-size: 0.75rem;
-        white-space: nowrap;
-        z-index: 1000;
-        box-shadow: var(--shadow);
-        backdrop-filter: blur(15px);
-        border: 1px solid var(--border-color);
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.2s ease;
-        pointer-events: none;
-      }
-
-      /* FIX: Only show tooltips after initialization */
-      .enterprise-layout.initialized .section-tooltip:hover::after {
-        opacity: 1;
-        visibility: visible;
-      }
-
-      /* Tablet responsive styles */
-      @media (max-width: 1024px) and (min-width: 769px) {
-        /* Reduce header info card padding on tablets */
-        .header-info-card {
-          padding: 0.3rem 0.6rem;
-          gap: 0.4rem;
-        }
-
-        .header-info-label {
-          font-size: 0.5rem;
-        }
-
-        .header-info-value {
-          font-size: 0.75rem;
-        }
-
-        .header-info-icon {
-          width: 1rem;
-          height: 1rem;
-        }
-
-        .notification-bell {
-          width: 2.25rem;
-          height: 2.25rem;
-        }
-
-        .logo-company {
-          font-size: 1.1rem;
-        }
-
-        .logo-tagline {
-          font-size: 0.55rem;
-        }
-      }
-
-      /* Mobile responsive styles */
-      @media (max-width: 768px) {
-        .mobile-overlay {
-          position: fixed;
-          top: var(--header-height);
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.5);
-          z-index: 1000;
-          opacity: 0;
-          visibility: hidden;
-          transition: opacity 0.3s ease, visibility 0.3s ease;
-        }
-
-        .mobile-overlay.visible {
-          opacity: 1;
-          visibility: visible;
-        }
-
-        .layout-sidebar {
-          position: absolute;
-          top: var(--header-height);
-          left: 0;
-          height: calc(100% - var(--header-height));
-          width: 85vw;
-          max-width: var(--sidebar-width);
-          transform: translateX(-100%);
-          z-index: 1001;
-        }
-
-        .layout-sidebar.mobile-open {
-          transform: translateX(0);
-        }
-
-        .tab-bar {
-          padding: 0;
-          margin: 0;
-          width: 100%;
-        }
-
-        /* Mobile tab overflow - show only 2 tabs + more button */
-        .tab-bar-visible .tab {
-          display: none;
-        }
-
-        .tab-bar-visible .tab:nth-child(-n+2) {
-          display: flex;
-        }
-
-        .tab-more-btn {
-          display: flex;
-        }
-
-        .tab {
-          min-width: 80px;
-          max-width: 120px;
-          padding: 0.25rem 0.5rem;
-          margin: 0;
-          font-size: 0.7rem;
-        }
-
-        .single-page-header {
-          padding: 0.375rem 0.75rem;
-        }
-
-        .page-title {
-          font-size: 1rem;
-        }
-
-        .module-header {
-          margin: 1rem;
-          padding: 1rem;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 0.75rem;
-        }
-
-        .module-content {
-          padding: 1rem;
-        }
-
-        .footer-left,
-        .footer-right {
-          gap: 0.5rem;
-        }
-
-        .footer-environment {
-          font-size: 0.5rem;
-        }
-
-        .breadcrumb-container {
-          display: none;
-        }
-
-        .header-center {
-          display: none;
-        }
-
-        /* Hide Entity & FY info cards on mobile to make room for persona */
-        .header-info-section {
-          display: none;
-        }
-
-        /* Ensure header-right elements are properly spaced and visible */
-        .header-right {
-          gap: 0.5rem;
-          flex-wrap: nowrap;
-          flex-shrink: 0;
-        }
-
-        /* Adjust notification bell size for mobile */
-        .notification-bell {
-          width: 2.25rem;
-          height: 2.25rem;
-          flex-shrink: 0;
-        }
-
-        /* Ensure persona-control is always visible on mobile */
-        .persona-control {
-          display: flex !important;
-          flex-shrink: 0;
-          z-index: 1001;
-        }
-
-        /* Make notification panel full width on mobile */
-        .notification-panel {
-          position: fixed;
-          left: 50%;
-          right: auto;
-          transform: translateX(-50%);
-          width: calc(100vw - 2rem);
-          max-width: 380px;
-        }
-
-        .notification-panel.open {
-          transform: translateX(-50%) translateY(0);
-        }
-
-        /* Adjust persona panel for mobile - fixed position for better visibility */
-        .persona-panel {
-          position: fixed;
-          top: var(--header-height);
-          right: 0.5rem;
-          left: auto;
-          width: calc(100vw - 1rem);
-          max-width: 300px;
-          margin-top: 0.25rem;
-        }
-
-        /* Make logo smaller on mobile */
-        .logo-company {
-          font-size: 1rem;
-        }
-
-        .logo-tagline {
-          font-size: 0.5rem;
-        }
-
-        .persona-role {
-          display: none;
-        }
-      }
-
-      /* Extra small mobile (phones) */
-      @media (max-width: 480px) {
-        .layout-header {
-          padding: 0 0.5rem;
-          height: 3rem;
-        }
-
-        .header-left {
-          gap: 0.5rem;
-        }
-
-        .menu-toggle {
-          width: 2rem;
-          height: 2rem;
-          padding: 0.25rem;
-        }
-
-        .logo-company {
-          font-size: 0.875rem;
-        }
-
-        .logo-tagline {
-          display: none;
-        }
-
-        .notification-bell {
-          width: 2rem;
-          height: 2rem;
-        }
-
-        .notification-panel {
-          width: calc(100vw - 1rem);
-          max-width: 100%;
-          right: -0.25rem;
-        }
-
-        .notification-filter-tab {
-          padding: 0.25rem 0.5rem;
-          font-size: 0.65rem;
-        }
-
-        .notification-grouping-btn {
-          font-size: 0.65rem;
-          padding: 0.25rem 0.5rem;
-        }
-
-        .tab {
-          min-width: 60px;
-          max-width: 100px;
-          padding: 0.25rem 0.375rem;
-          font-size: 0.65rem;
-        }
-
-        .module-header {
-          margin: 0.75rem;
-          padding: 0.75rem;
-        }
-
-        .module-content {
-          padding: 0.75rem;
-        }
-
-        .header-right {
-          gap: 0.375rem;
-        }
-
-        /* Smaller persona avatar on extra small screens */
-        .persona-avatar {
-          width: 1.75rem;
-          height: 1.75rem;
-          font-size: 0.65rem;
-        }
-      }
+        return `
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      :root {
+        --primary: ${colors.primary};
+        --secondary: ${colors.secondary};
+        --success: ${colors.success};
+        --warning: ${colors.warning};
+        --danger: ${colors.danger};
+        --info: ${colors.info};
+        
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8fafc;
+        --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        --text-primary: #1e293b;
+        --text-secondary: #64748b;
+        --text-muted: #94a3b8;
+        --border-color: rgba(226, 232, 240, 0.5);
+        --glass-bg: rgba(255, 255, 255, 0.95);
+        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.1);
+        --accent-primary: ${colors.primary};
+        --accent-gradient: linear-gradient(135deg, ${colors.primary}, ${colors.info});
+        
+        --header-height: ${config.layout.headerHeight};
+        --sidebar-width: ${config.layout.sidebarWidth};
+        --sidebar-collapsed-width: ${config.layout.sidebarCollapsedWidth};
+        --footer-height: ${footerHeight};
+        --tab-bar-height: ${config.layout.tabBarHeight};
+      }
+
+      [data-theme="dark"] {
+        --bg-primary: #0f172a;
+        --bg-secondary: #1e293b;
+        --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+        --text-primary: #f1f5f9;
+        --text-secondary: #cbd5e1;
+        --text-muted: #64748b;
+        --border-color: rgba(71, 85, 105, 0.5);
+        --glass-bg: rgba(15, 23, 42, 0.95);
+        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.3);
+      }
+
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: var(--bg-gradient);
+        color: var(--text-primary);
+        line-height: 1.5;
+        height: 100vh;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        transition: background 0.3s ease, color 0.3s ease;
+      }
+
+      .enterprise-layout {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .layout-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--header-height);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 1rem;
+        z-index: 1000;
+        box-shadow: var(--shadow);
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex: 0 0 auto;
+        min-width: 0;
+      }
+
+      .header-center {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+        min-width: 0;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .header-info-section {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: fit-content;
+        max-height: calc(var(--header-height) - 1rem);
+      }
+
+      .header-info-card {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.875rem;
+        border-radius: 1.25rem;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
+        position: relative;
+        overflow: visible;
+        height: fit-content;
+        max-height: 2.25rem;
+      }
+
+      .header-info-card-blue {
+        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.06) 100%);
+        border: 1px solid rgba(37, 99, 235, 0.2);
+        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08),
+                    0 1px 2px rgba(0, 0, 0, 0.04);
+      }
+
+      .header-info-card-green {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(34, 197, 94, 0.06) 100%);
+        border: 1px solid rgba(16, 185, 129, 0.2);
+        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08),
+                    0 1px 2px rgba(0, 0, 0, 0.04);
+      }
+
+      .header-info-card::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform 0.5s ease-out;
+        pointer-events: none;
+      }
+
+      .header-info-card:hover::before {
+        transform: translate(-50%, -50%) scale(2);
+      }
+
+      .header-info-card-blue:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18),
+                    0 2px 4px rgba(0, 0, 0, 0.06);
+        border-color: rgba(37, 99, 235, 0.35);
+        background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%);
+      }
+
+      .header-info-card-green:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18),
+                    0 2px 4px rgba(0, 0, 0, 0.06);
+        border-color: rgba(16, 185, 129, 0.35);
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(34, 197, 94, 0.08) 100%);
+      }
+
+      .header-info-card:active {
+        transform: translateY(0) scale(0.98);
+        transition: all 0.1s ease;
+      }
+
+      .header-info-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+      }
+
+      .header-info-card-blue .header-info-icon {
+        color: #2563eb;
+      }
+
+      .header-info-card-green .header-info-icon {
+        color: #10b981;
+      }
+
+      .header-info-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.0625rem;
+        min-width: 0;
+      }
+
+      .header-info-label {
+        font-size: 0.5625rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+      }
+
+      .header-info-card-blue .header-info-label {
+        color: #1d4ed8;
+        opacity: 0.85;
+      }
+
+      .header-info-card-green .header-info-label {
+        color: #059669;
+        opacity: 0.85;
+      }
+
+      .header-info-value {
+        font-size: 0.8125rem;
+        font-weight: 700;
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+        line-height: 1.2;
+      }
+
+      .header-info-card-blue .header-info-value {
+        color: #1e3a8a;
+      }
+
+      .header-info-card-green .header-info-value {
+        color: #065f46;
+      }
+
+      .header-info-card:hover .header-info-label,
+      .header-info-card:hover .header-info-value {
+        opacity: 1;
+      }
+
+      .header-info-card.selectable {
+        cursor: pointer;
+        padding-right: 0.625rem;
+      }
+
+      .header-info-chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0.25rem;
+        transition: transform 0.3s ease;
+        opacity: 0.7;
+      }
+
+      .header-info-card:hover .header-info-chevron {
+        opacity: 1;
+      }
+
+      .header-info-dropdown {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: 0;
+        right: 0;
+        background: var(--glass-bg);
+        border-radius: 0.75rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
+                    0 4px 8px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(12px);
+        z-index: 1000;
+        overflow: hidden;
+        animation: dropdownSlideIn 0.2s ease-out;
+        min-width: 180px;
+      }
+
+      @keyframes dropdownSlideIn {
+        from {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .header-info-dropdown-blue {
+        border: 1px solid rgba(37, 99, 235, 0.3);
+      }
+
+      .header-info-dropdown-green {
+        border: 1px solid rgba(16, 185, 129, 0.3);
+      }
+
+      .header-info-dropdown-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.625rem 0.875rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: var(--text-primary);
+        transition: all 0.2s ease;
+        cursor: pointer;
+        gap: 0.5rem;
+      }
+
+      .header-info-dropdown-item:hover {
+        background: rgba(37, 99, 235, 0.08);
+      }
+
+      .header-info-dropdown-blue .header-info-dropdown-item:hover {
+        background: rgba(37, 99, 235, 0.12);
+        color: #1e40af;
+      }
+
+      .header-info-dropdown-green .header-info-dropdown-item:hover {
+        background: rgba(16, 185, 129, 0.12);
+        color: #047857;
+      }
+
+      .header-info-dropdown-item.active {
+        font-weight: 700;
+        background: rgba(37, 99, 235, 0.1);
+      }
+
+      .header-info-dropdown-blue .header-info-dropdown-item.active {
+        background: rgba(37, 99, 235, 0.15);
+        color: #1e40af;
+      }
+
+      .header-info-dropdown-green .header-info-dropdown-item.active {
+        background: rgba(16, 185, 129, 0.15);
+        color: #047857;
+      }
+
+      .header-info-dropdown-item svg {
+        flex-shrink: 0;
+      }
+
+      .app-logo {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.125rem;
+        font-weight: 700;
+        background: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .logo-image {
+        flex-shrink: 0;
+        border-radius: 0.375rem;
+      }
+
+      .breadcrumb-container {
+        display: flex;
+        align-items: center;
+        font-size: 0.75rem;
+        opacity: 0.8;
+        margin-left: 1rem;
+      }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        color: var(--text-secondary);
+      }
+
+      .breadcrumb-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .breadcrumb-link {
+        color: var(--text-secondary);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      .breadcrumb-link:hover {
+        color: var(--accent-primary);
+      }
+
+      .breadcrumb-current {
+        color: var(--accent-primary);
+        font-weight: 500;
+      }
+
+      .breadcrumb-separator {
+        color: var(--text-muted);
+        opacity: 0.6;
+      }
+
+      .layout-body {
+        display: flex;
+        height: calc(100vh - var(--header-height) - var(--footer-height));
+        margin-top: var(--header-height);
+        overflow: hidden;
+      }
+
+      .layout-body.footer-hidden {
+        height: calc(100vh - var(--header-height));
+      }
+
+      .layout-sidebar {
+        width: var(--sidebar-width);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-right: 1px solid var(--border-color);
+        overflow-y: auto;
+        overflow-x: hidden;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        flex-shrink: 0;
+        will-change: width;
+        backface-visibility: hidden;
+        contain: layout style paint;
+      }
+
+      .layout-sidebar.collapsed {
+        width: var(--sidebar-collapsed-width);
+        overflow-y: hidden;
+      }
+
+      .layout-sidebar.mobile-hidden {
+        transform: translateX(-100%);
+        width: 0;
+      }
+
+      .layout-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-gradient);
+        min-width: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .layout-footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--footer-height);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 1rem;
+        z-index: 1000;
+        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+        font-size: 0.7rem;
+        color: var(--text-secondary);
+        transition: transform 0.3s ease;
+      }
+
+      .layout-footer.hidden {
+        transform: translateY(100%);
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      .footer-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .footer-environment {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.375rem;
+        font-weight: 500;
+        font-size: 0.625rem;
+      }
+
+      .env-development {
+        background: var(--danger);
+        color: white;
+      }
+
+      .env-staging {
+        background: var(--warning);
+        color: white;
+      }
+
+      .env-production {
+        background: var(--success);
+        color: white;
+      }
+
+      .env-uat {
+        background: var(--info);
+        color: white;
+      }
+
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .footer-support {
+        color: var(--accent-primary);
+        text-decoration: none;
+        transition: opacity 0.2s ease;
+      }
+
+      .footer-support:hover {
+        opacity: 0.8;
+      }
+
+      .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .tab-bar {
+        display: flex;
+        align-items: center;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        padding: 0;
+        margin: 0;
+        min-height: var(--tab-bar-height);
+        overflow-x: hidden;
+        flex-shrink: 0;
+        gap: 0.25rem;
+        transition: all 0.3s ease;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tab-bar.hidden {
+        display: none;
+      }
+
+      .single-page-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        padding: 0.5rem 1.25rem;
+        flex-shrink: 0;
+      }
+
+      .page-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+
+      .back-button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.75rem;
+        background: transparent;
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        font-size: 0.8rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+      }
+
+      .back-button:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+        border-color: var(--border-color);
+      }
+
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.5rem;
+        margin: 0;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-bottom: none;
+        border-radius: 0.75rem 0.75rem 0 0;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+        min-width: 100px;
+        max-width: 180px;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+      }
+
+      .tab:hover {
+        background: var(--bg-primary);
+        color: var(--text-primary);
+      }
+
+      .tab.active {
+        background: var(--bg-primary);
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 -2px 4px rgba(37, 99, 235, 0.1);
+      }
+
+      .tab-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      .tab-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .tab-close:hover {
+        background: var(--border-color);
+        color: var(--text-secondary);
+      }
+
+      .tab.active .tab-close:hover {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--accent-primary);
+      }
+
+      /* Tab overflow menu styles for mobile */
+      .tab-bar-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        min-height: var(--tab-bar-height);
+      }
+
+      .tab-bar-visible {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        flex: 1;
+        overflow: hidden;
+        min-height: var(--tab-bar-height);
+      }
+
+      .tab-more-container {
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .tab-more-btn {
+        display: none;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.375rem 0.75rem;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+        margin-right: 0.5rem;
+        white-space: nowrap;
+      }
+
+      .tab-more-btn:hover {
+        background: var(--bg-primary);
+        color: var(--accent-primary);
+        border-color: var(--accent-primary);
+      }
+
+      .tab-more-btn.active {
+        background: var(--accent-primary);
+        color: white;
+        border-color: var(--accent-primary);
+      }
+
+      .tab-overflow-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        min-width: 200px;
+        max-width: 280px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        border-radius: 0.75rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        padding: 0.5rem;
+        z-index: 1002;
+        margin-top: 0.25rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+      }
+
+      .tab-overflow-menu.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .tab-overflow-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+        gap: 0.5rem;
+      }
+
+      .tab-overflow-item:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+
+      .tab-overflow-item.active {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--accent-primary);
+      }
+
+      .tab-overflow-item-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tab-overflow-item-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 50%;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .tab-overflow-item-close:hover {
+        background: var(--border-color);
+        color: var(--danger);
+      }
+
+      .tab-content-area {
+        flex: 1;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        background: var(--bg-gradient);
+        box-sizing: border-box;
+      }
+
+      .enterprise-module {
+        display: none;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        box-sizing: border-box;
+      }
+
+      .enterprise-module.active {
+        display: block;
+      }
+
+      .module-header {
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        border-radius: 1rem;
+        padding: 0.75rem 1.25rem;
+        margin: 0.75rem 1.25rem 0 1.25rem;
+        box-shadow: var(--shadow);
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 1rem;
+        flex-shrink: 0;
+      }
+
+      .module-header-content {
+        flex: 1;
+        text-align: left;
+      }
+
+      .module-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        background: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 0.375rem;
+        line-height: 1.2;
+      }
+
+      .module-description {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        margin-bottom: 0;
+        line-height: 1.3;
+      }
+
+      .module-actions {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+
+      .module-content {
+        padding: 0 1.25rem 2rem 1.25rem;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      .layout-body.footer-hidden .module-content {
+        padding-bottom: 0;
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        border: none;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+      }
+
+      .btn-primary {
+        background: var(--accent-gradient);
+        color: white;
+        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+      }
+
+      .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
+      }
+
+      .btn-secondary {
+        background: var(--glass-bg);
+        color: var(--text-primary);
+        border: 1px solid var(--border-color);
+      }
+
+      .btn-secondary:hover {
+        background: var(--bg-secondary);
+        transform: translateY(-2px);
+      }
+
+      .nav-section {
+        padding: 0.75rem 0 0 0;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      .nav-section:last-child {
+        border-bottom: none;
+      }
+
+      .nav-section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border-radius: 0.75rem;
+        margin: 0 0.75rem 0.375rem 0.75rem;
+        position: relative;
+      }
+
+      .nav-section-header:hover {
+        background: var(--bg-secondary);
+      }
+
+      .nav-section-title {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.075em;
+        margin: 0;
+        flex: 1;
+      }
+
+      .nav-chevron {
+        color: var(--text-muted);
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .nav-section-header.expanded .nav-chevron {
+        transform: rotate(0deg);
+      }
+
+      .nav-section-header.collapsed .nav-chevron {
+        transform: rotate(-90deg);
+      }
+
+      .nav-section-content {
+        overflow: hidden;
+        transition: all 0.3s ease;
+        padding-bottom: 0.75rem;
+      }
+
+      .nav-section-content.expanded {
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .nav-section-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        padding-bottom: 0;
+      }
+
+      .nav-menu {
+        list-style: none;
+      }
+
+      .nav-item {
+        margin: 0 0.75rem;
+      }
+
+      .nav-link {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem 0.75rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        border-radius: 0.75rem;
+        transition: all 0.3s ease;
+        font-size: 0.8rem;
+        position: relative;
+      }
+
+      .nav-link:hover,
+      .nav-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        transform: translateX(4px);
+        box-shadow: var(--shadow);
+      }
+
+      /* NEW: Multi-level menu styles */
+      .nav-sub-menu {
+        margin-left: 1.5rem;
+        border-left: 1px solid var(--border-color);
+        padding-left: 0.5rem;
+        margin-top: 0.25rem;
+        list-style: none;
+      }
+
+      .nav-sub-item {
+        margin: 0 0.5rem;
+      }
+
+      .nav-sub-link {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.5rem;
+        color: var(--text-muted);
+        text-decoration: none;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+        font-size: 0.75rem;
+        position: relative;
+      }
+
+      .nav-sub-link:hover,
+      .nav-sub-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        transform: translateX(2px);
+        box-shadow: var(--shadow);
+      }
+
+      .nav-item-with-children > .nav-link {
+        position: relative;
+      }
+
+      .nav-item-expand {
+        position: absolute;
+        right: 0.5rem;
+        color: var(--text-muted);
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .nav-item-expand.expanded {
+        transform: rotate(90deg);
+      }
+
+      .nav-badge {
+        background: var(--danger);
+        color: white;
+        font-size: 0.625rem;
+        padding: 0.125rem 0.3rem;
+        border-radius: 0.5rem;
+        margin-left: auto;
+        font-weight: 600;
+      }
+
+      .menu-toggle {
+        background: none;
+        border: none;
+        padding: 0.5rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+      }
+
+      .menu-toggle:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+
+      .persona-control {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+        z-index: 10002;
+      }
+
+      .persona-control:hover {
+        background: var(--bg-secondary);
+      }
+
+      .persona-avatar {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        background: var(--accent-gradient);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: 0.75rem;
+        flex-shrink: 0;
+      }
+
+      .persona-role {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
+
+      .persona-panel {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 300px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 2px solid rgba(203, 213, 225, 0.8);
+        border-radius: 1rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        padding: 1rem;
+        z-index: 10001;
+        margin-top: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+      }
+
+      .persona-panel.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .persona-panel-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding-bottom: 0.75rem;
+        margin-bottom: 0.75rem;
+        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
+      }
+
+      .persona-panel-avatar {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        background: var(--accent-gradient);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: 0.875rem;
+      }
+
+      .persona-panel-info h3 {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.125rem;
+      }
+
+      .persona-panel-info p {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+      }
+
+      .persona-panel-section {
+        padding-bottom: 0.75rem;
+        margin-bottom: 0.75rem;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+      }
+
+      .persona-panel-section:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .persona-panel-section h4 {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.5rem;
+      }
+
+      .persona-panel-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+      }
+
+      .persona-control-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        border: 1px solid transparent;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        font-size: 0.8rem;
+      }
+
+      .persona-control-item:hover {
+        background: var(--bg-secondary);
+        border-color: rgba(203, 213, 225, 0.7);
+      }
+
+      .persona-control-item.action {
+        color: var(--text-primary);
+      }
+
+      .persona-control-item.action:hover {
+        color: var(--accent-primary);
+      }
+
+      .persona-control-item.danger:hover {
+        background: rgba(220, 38, 38, 0.1);
+        color: var(--danger);
+      }
+
+      .persona-control-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      /* Notification Panel */
+      .notification-bell {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        background: transparent;
+      }
+
+      .notification-bell:hover {
+        background: var(--bg-secondary);
+      }
+
+      .notification-badge {
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+        background: var(--danger);
+        color: white;
+        font-size: 0.625rem;
+        font-weight: 600;
+        min-width: 1.125rem;
+        height: 1.125rem;
+        border-radius: 0.5625rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.25rem;
+        border: 2px solid var(--glass-bg);
+      }
+
+      .notification-panel {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 380px;
+        max-height: 500px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 2px solid rgba(203, 213, 225, 0.8);
+        border-radius: 1rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        z-index: 1001;
+        margin-top: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .notification-panel.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .notification-panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
+      }
+
+      .notification-panel-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+
+      .notification-panel-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .notification-action-btn {
+        font-size: 0.75rem;
+        color: var(--primary);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        transition: all 0.2s ease;
+      }
+
+      .notification-action-btn:hover {
+        background: rgba(37, 99, 235, 0.1);
+      }
+
+      .notification-panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+      }
+
+      .notification-item {
+        display: flex;
+        gap: 0.75rem;
+        padding: 0.875rem;
+        margin-bottom: 0.5rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+      }
+
+      .notification-item:hover {
+        background: var(--bg-secondary);
+        border-color: rgba(203, 213, 225, 0.7);
+      }
+
+      .notification-item.unread {
+        background: rgba(37, 99, 235, 0.05);
+      }
+
+      .notification-icon {
+        flex-shrink: 0;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.125rem;
+      }
+
+      .notification-icon.success {
+        background: rgba(22, 163, 74, 0.1);
+        color: var(--success);
+      }
+
+      .notification-icon.info {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--primary);
+      }
+
+      .notification-icon.warning {
+        background: rgba(217, 119, 6, 0.1);
+        color: var(--warning);
+      }
+
+      .notification-icon.error {
+        background: rgba(220, 38, 38, 0.1);
+        color: var(--danger);
+      }
+
+      .notification-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .notification-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.25rem;
+      }
+
+      .notification-message {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.375rem;
+        line-height: 1.4;
+      }
+
+      .notification-time {
+        font-size: 0.7rem;
+        color: var(--text-muted);
+      }
+
+      .notification-empty {
+        text-align: center;
+        padding: 3rem 2rem;
+        color: var(--text-muted);
+      }
+
+      .notification-empty-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        opacity: 0.3;
+      }
+
+      .notification-filters {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+        background: var(--bg-secondary);
+      }
+
+      .notification-filter-tabs {
+        display: flex;
+        gap: 0.25rem;
+        background: white;
+        border-radius: 0.5rem;
+        padding: 0.25rem;
+      }
+
+      .notification-filter-tab {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        background: transparent;
+        border: none;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .notification-filter-tab:hover {
+        background: var(--bg-secondary);
+      }
+
+      .notification-filter-tab.active {
+        background: var(--primary);
+        color: white;
+      }
+
+      .notification-grouping-dropdown {
+        position: relative;
+      }
+
+      .notification-grouping-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        background: white;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .notification-grouping-btn:hover {
+        border-color: var(--primary);
+        color: var(--primary);
+      }
+
+      .notification-group-header {
+        padding: 0.5rem 0.875rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+        margin-bottom: 0.25rem;
+      }
+
+      .view-mode-toggle {
+        display: flex;
+        align-items: center;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        padding: 0.125rem;
+        gap: 0.125rem;
+      }
+
+      .view-mode-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        color: var(--text-secondary);
+        background: transparent;
+        border: none;
+        font-size: 0.75rem;
+      }
+
+      .view-mode-btn.active {
+        background: var(--accent-gradient);
+        color: white;
+      }
+
+      .theme-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .theme-switch {
+        position: relative;
+        width: 2.5rem;
+        height: 1.25rem;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.625rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .theme-switch.active {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+      }
+
+      .theme-switch-handle {
+        position: absolute;
+        top: 0.125rem;
+        left: 0.125rem;
+        width: 0.875rem;
+        height: 0.875rem;
+        background: white;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+
+      .theme-switch.active .theme-switch-handle {
+        transform: translateX(1.125rem);
+      }
+
+      /* Compact Mode Styles */
+      .sidebar-collapsed .nav-section-title,
+      .sidebar-collapsed .nav-badge,
+      .sidebar-collapsed .persona-role {
+        display: none;
+      }
+
+      .sidebar-collapsed .nav-link {
+        justify-content: center;
+        padding: 0.75rem;
+        margin: 0.25rem 0.5rem;
+      }
+
+      .sidebar-collapsed .nav-section-header {
+        justify-content: center;
+        padding: 0.75rem;
+        margin: 0.25rem 0.5rem;
+      }
+
+      .sidebar-collapsed .nav-chevron {
+        display: none;
+      }
+
+      .sidebar-collapsed .nav-section-content {
+        display: none;
+      }
+
+      /* Compact navigation specific styles */
+      .compact-navigation {
+        padding: 0.5rem 0;
+        width: 100%;
+        overflow: visible;
+      }
+
+      .compact-nav-item {
+        margin: 0.25rem 0.5rem;
+        position: relative;
+      }
+
+      .compact-nav-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        border-radius: 0.75rem;
+        transition: all 0.2s ease;
+        font-size: 0.8rem;
+        position: relative;
+        min-height: 3rem;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .compact-nav-link:hover,
+      .compact-nav-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        box-shadow: var(--shadow);
+      }
+
+      .compact-nav-badge {
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+        background: var(--danger);
+        color: white;
+        font-size: 0.5rem;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.375rem;
+        font-weight: 600;
+        min-width: 1rem;
+        text-align: center;
+        line-height: 1;
+      }
+
+      .section-tooltip {
+        position: relative;
+      }
+
+      .section-tooltip::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        left: calc(100% + 0.75rem);
+        top: 50%;
+        transform: translateY(-50%);
+        background: var(--glass-bg);
+        color: var(--text-primary);
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        z-index: 1000;
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s ease;
+        pointer-events: none;
+      }
+
+      /* FIX: Only show tooltips after initialization */
+      .enterprise-layout.initialized .section-tooltip:hover::after {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Tablet responsive styles */
+      @media (max-width: 1024px) and (min-width: 769px) {
+        /* Reduce header info card padding on tablets */
+        .header-info-card {
+          padding: 0.3rem 0.6rem;
+          gap: 0.4rem;
+        }
+
+        .header-info-label {
+          font-size: 0.5rem;
+        }
+
+        .header-info-value {
+          font-size: 0.75rem;
+        }
+
+        .header-info-icon {
+          width: 1rem;
+          height: 1rem;
+        }
+
+        .notification-bell {
+          width: 2.25rem;
+          height: 2.25rem;
+        }
+
+        .logo-company {
+          font-size: 1.1rem;
+        }
+
+        .logo-tagline {
+          font-size: 0.55rem;
+        }
+      }
+
+      /* Mobile responsive styles */
+      @media (max-width: 768px) {
+        .mobile-overlay {
+          position: fixed;
+          top: var(--header-height);
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: 1000;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .mobile-overlay.visible {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .layout-sidebar {
+          position: absolute;
+          top: var(--header-height);
+          left: 0;
+          height: calc(100% - var(--header-height));
+          width: 85vw;
+          max-width: var(--sidebar-width);
+          transform: translateX(-100%);
+          z-index: 1001;
+        }
+
+        .layout-sidebar.mobile-open {
+          transform: translateX(0);
+        }
+
+        .tab-bar {
+          padding: 0;
+          margin: 0;
+          width: 100%;
+        }
+
+        /* Mobile tab overflow - show only 2 tabs + more button */
+        .tab-bar-visible .tab {
+          display: none;
+        }
+
+        .tab-bar-visible .tab:nth-child(-n+2) {
+          display: flex;
+        }
+
+        .tab-more-btn {
+          display: flex;
+        }
+
+        .tab {
+          min-width: 80px;
+          max-width: 120px;
+          padding: 0.25rem 0.5rem;
+          margin: 0;
+          font-size: 0.7rem;
+        }
+
+        .single-page-header {
+          padding: 0.375rem 0.75rem;
+        }
+
+        .page-title {
+          font-size: 1rem;
+        }
+
+        .module-header {
+          margin: 1rem;
+          padding: 1rem;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.75rem;
+        }
+
+        .module-content {
+          padding: 1rem;
+        }
+
+        .footer-left,
+        .footer-right {
+          gap: 0.5rem;
+        }
+
+        .footer-environment {
+          font-size: 0.5rem;
+        }
+
+        .breadcrumb-container {
+          display: none;
+        }
+
+        .header-center {
+          display: none;
+        }
+
+        /* Hide Entity & FY info cards on mobile to make room for persona */
+        .header-info-section {
+          display: none;
+        }
+
+        /* Ensure header-right elements are properly spaced and visible */
+        .header-right {
+          gap: 0.5rem;
+          flex-wrap: nowrap;
+          flex-shrink: 0;
+        }
+
+        /* Adjust notification bell size for mobile */
+        .notification-bell {
+          width: 2.25rem;
+          height: 2.25rem;
+          flex-shrink: 0;
+        }
+
+        /* Ensure persona-control is always visible on mobile */
+        .persona-control {
+          display: flex !important;
+          flex-shrink: 0;
+          z-index: 1001;
+        }
+
+        /* Make notification panel full width on mobile */
+        .notification-panel {
+          position: fixed;
+          left: 50%;
+          right: auto;
+          transform: translateX(-50%);
+          width: calc(100vw - 2rem);
+          max-width: 380px;
+        }
+
+        .notification-panel.open {
+          transform: translateX(-50%) translateY(0);
+        }
+
+        /* Adjust persona panel for mobile - fixed position for better visibility */
+        .persona-panel {
+          position: fixed;
+          top: var(--header-height);
+          right: 0.5rem;
+          left: auto;
+          width: calc(100vw - 1rem);
+          max-width: 300px;
+          margin-top: 0.25rem;
+        }
+
+        /* Make logo smaller on mobile */
+        .logo-company {
+          font-size: 1rem;
+        }
+
+        .logo-tagline {
+          font-size: 0.5rem;
+        }
+
+        .persona-role {
+          display: none;
+        }
+      }
+
+      /* Extra small mobile (phones) */
+      @media (max-width: 480px) {
+        .layout-header {
+          padding: 0 0.5rem;
+          height: 3rem;
+        }
+
+        .header-left {
+          gap: 0.5rem;
+        }
+
+        .menu-toggle {
+          width: 2rem;
+          height: 2rem;
+          padding: 0.25rem;
+        }
+
+        .logo-company {
+          font-size: 0.875rem;
+        }
+
+        .logo-tagline {
+          display: none;
+        }
+
+        .notification-bell {
+          width: 2rem;
+          height: 2rem;
+        }
+
+        .notification-panel {
+          width: calc(100vw - 1rem);
+          max-width: 100%;
+          right: -0.25rem;
+        }
+
+        .notification-filter-tab {
+          padding: 0.25rem 0.5rem;
+          font-size: 0.65rem;
+        }
+
+        .notification-grouping-btn {
+          font-size: 0.65rem;
+          padding: 0.25rem 0.5rem;
+        }
+
+        .tab {
+          min-width: 60px;
+          max-width: 100px;
+          padding: 0.25rem 0.375rem;
+          font-size: 0.65rem;
+        }
+
+        .module-header {
+          margin: 0.75rem;
+          padding: 0.75rem;
+        }
+
+        .module-content {
+          padding: 0.75rem;
+        }
+
+        .header-right {
+          gap: 0.375rem;
+        }
+
+        /* Smaller persona avatar on extra small screens */
+        .persona-avatar {
+          width: 1.75rem;
+          height: 1.75rem;
+          font-size: 0.65rem;
+        }
+      }
     `;
     }, [config.branding.colors, config.layout, footerVisible]);
     // Apply theme and styles
@@ -2616,7 +2631,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
                                                             }, children: "Tabs" }), _jsx("button", { className: `view-mode-btn ${!tabModeEnabled ? "active" : ""}`, onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 startTransition(() => setTabModeEnabled(false));
-                                                            }, children: "Single" })] })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.settings, {}), "Dark Mode=5"] }), _jsx("div", { className: `theme-switch ${darkMode ? "active" : ""}`, onClick: (e) => {
+                                                            }, children: "Single" })] })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.settings, {}), "Dark Mode-7"] }), _jsx("div", { className: `theme-switch ${darkMode ? "active" : ""}`, onClick: (e) => {
                                                         e.stopPropagation();
                                                         toggleTheme();
                                                     }, children: _jsx("div", { className: "theme-switch-handle" }) })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.footer, {}), "Show Footer"] }), _jsx("div", { className: `theme-switch ${footerVisible ? "active" : ""}`, onClick: (e) => {