<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <!-- PWA Configuration -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Harshana Systems">
    <meta name="application-name" content="Harshana Systems">
    <meta name="msapplication-TileColor" content="#4f46e5">
    <meta name="theme-color" content="#4f46e5">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Favicon and App Icons -->
    <?php
        $iconVersion = config('app.icon_version', env('ICON_VERSION', time()));
    ?>
    <link rel="icon" type="image/x-icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-32">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-16">
    <link rel="shortcut icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>" id="favicon-ico">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" id="apple-icon">
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-114x114.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-76x76.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-60x60.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/icons/icon-57x57.png">

    <!-- Microsoft Tiles -->
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
    <meta name="msapplication-config" content="/icons/browserconfig.xml">

    <title><?php echo $__env->yieldContent('title', '<?php echo e($appName); ?> Dashboard'); ?></title>

    <!-- Performance Optimization: Load local critical resources -->
    <link rel="preload" href="/assets/bootstrap.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="/assets/all.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link href="/assets/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/all.min.css" rel="stylesheet">
    </noscript>

    <!-- DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

    <!-- Resource hints for better performance -->
    <link rel="prefetch" href="<?php echo e(route('users.index')); ?>">
    <link rel="prefetch" href="<?php echo e(route('dashboard')); ?>">

    <!-- Preload key resources -->
    <link rel="modulepreload" href="/assets/bootstrap.bundle.min.js">

    <!-- Early hints for critical resources -->
    <meta http-equiv="Link"
        content="</assets/bootstrap.min.css>; rel=preload; as=style">
    <meta http-equiv="Link"
        content="</assets/all.min.css>; rel=preload; as=style">

    <!-- Performance monitoring -->
    <script>
        // Performance monitoring
        if ('performance' in window) {
            window.addEventListener('load', function () {
                setTimeout(function () {
                    var perfData = performance.getEntriesByType('navigation')[0];
                    console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart, 'ms');
                    console.log('DOM Ready:', perfData.domContentLoadedEventEnd - perfData.fetchStart, 'ms');
                    console.log('First Paint:', performance.getEntriesByType('paint')[0]?.startTime || 'N/A');
                }, 1000);
            });
        }
    </script>

    <!-- Critical CSS inlined for immediate rendering -->
    <style>
        /* Critical CSS for immediate rendering - Above the fold content */
        html {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            line-height: 1.6
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        .d-none {
            display: none !important
        }

        .d-flex {
            display: flex !important
        }

        .justify-content-between {
            justify-content: space-between !important
        }

        .align-items-center {
            align-items: center !important
        }

        .mb-0 {
            margin-bottom: 0 !important
        }

        .me-2 {
            margin-right: .5rem !important
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 70px;
            height: 100vh;
            background: var(--gray-50);
            border-right: 1px solid var(--gray-200);
            z-index: 1000;
            transition: all .3s ease
        }

        .main-content {
            margin-left: 70px;
            min-height: 100vh;
            background: var(--gray-100);
            transition: margin-left .3s ease
        }

        .content {
            padding: 1rem
        }

        @media(max-width:768px) {
            .sidebar {
                transform: translateX(-100%);
                width: 250px
            }

            .main-content {
                margin-left: 0
            }

            .sidebar.mobile-active {
                transform: translateX(0)
            }
        }
    </style>

    <!-- Main Application Styles -->
    <style>
        <?php
            $appColor = \App\Models\SoftwareSetting::getCurrent()->app_color ?? 'blue';
            $colorMap = [
                'blue' => ['primary' => '#3b82f6', 'secondary' => '#1d4ed8'],
                'green' => ['primary' => '#10b981', 'secondary' => '#059669'],
                'red' => ['primary' => '#ef4444', 'secondary' => '#dc2626'],
                'purple' => ['primary' => '#8b5cf6', 'secondary' => '#7c3aed'],
                'orange' => ['primary' => '#f97316', 'secondary' => '#ea580c'],
                'pink' => ['primary' => '#ec4899', 'secondary' => '#db2777'],
                'teal' => ['primary' => '#14b8a6', 'secondary' => '#0f766e'],
                'lime' => ['primary' => '#84cc16', 'secondary' => '#65a30d'],
                'slate' => ['primary' => '#64748b', 'secondary' => '#475569'],
                'cyan' => ['primary' => '#06b6d4', 'secondary' => '#0891b2']
            ];
            $currentColors = $colorMap[$appColor] ?? $colorMap['blue'];
        ?>
        :root {
            --primary-color:
                <?php echo e($currentColors['primary']); ?>

            ;
            --secondary-color:
                <?php echo e($currentColors['secondary']); ?>

            ;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
            --light-color: #f8fafc;
            --dark-color: #1e293b;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
            --sidebar-width: 280px;

            /* Light theme sidebar */
            --sidebar-bg: var(--gray-100);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-300);
            --sidebar-hover: var(--gray-200);
            --sidebar-active: var(--primary-color);
        }

        /* Dark theme variables */
        [data-theme="dark"] {
            --light-color: #0f172a;
            --dark-color: #e2e8f0;
            --gray-100: #0f172a;
            --gray-200: #1e293b;
            --gray-300: #334155;
            --gray-400: #475569;
            --gray-500: #64748b;
            --gray-600: #94a3b8;
            --gray-700: #cbd5e1;
            --gray-800: #e2e8f0;
            --gray-900: #f1f5f9;

            /* Dark theme sidebar */
            --sidebar-bg: var(--gray-200);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-400);
            --sidebar-hover: var(--gray-300);
            --sidebar-active: var(--primary-color);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--gray-100);
            color: var(--gray-800);
            transition: all 0.3s ease;
        }

        /* Dark theme body and main elements */
        [data-theme="dark"] body {
            background-color: var(--gray-100) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .main-content {
            background-color: var(--gray-100) !important;
        }

        [data-theme="dark"] .content {
            background-color: transparent;
        }

        [data-theme="dark"] .card {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-300) !important;
        }

        [data-theme="dark"] .header {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table th {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .form-control {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] .form-select {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        /* Fix for select dropdown in dark mode */
        [data-theme="dark"] select.form-select {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] select.form-select option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        /* Webkit-specific styling for better browser support */
        [data-theme="dark"] select.form-select::-webkit-option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] select.form-select::-moz-option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        /* Custom select wrapper styling */
        .custom-select-wrapper {
            position: relative;
        }

        .custom-select-wrapper .form-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 40px;
        }

        .custom-select-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--gray-500);
            font-size: 12px;
        }

        [data-theme="dark"] .custom-select-arrow {
            color: var(--gray-600);
        }

        .custom-select-wrapper.focused .custom-select-arrow {
            color: var(--primary-color);
        }

        [data-theme="dark"] .custom-select-wrapper.focused .custom-select-arrow {
            color: var(--primary-color);
        }

        [data-theme="dark"] .btn-outline-secondary {
            color: var(--gray-700) !important;
            border-color: var(--gray-400) !important;
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>

<body data-theme="light">

    <!-- PWA Configuration -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Harshana Systems">
    <meta name="application-name" content="Harshana Systems">
    <meta name="msapplication-TileColor" content="#4f46e5">
    <meta name="theme-color" content="#4f46e5">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Favicon and App Icons -->
    <?php
        $iconVersion = config('app.icon_version', env('ICON_VERSION', time()));
    ?>
    <link rel="icon" type="image/x-icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-32">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-16">
    <link rel="shortcut icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>" id="favicon-ico">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" id="apple-icon">
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-114x114.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-76x76.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-60x60.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/icons/icon-57x57.png">

    <!-- Microsoft Tiles -->
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
    <meta name="msapplication-config" content="/icons/browserconfig.xml">
    <title><?php echo $__env->yieldContent('title', 'Harshana Systems Dashboard'); ?></title>

    <!-- Performance Optimization: Preload critical resources -->
    <link rel="preload" href="/assets/bootstrap.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="/assets/all.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link href="/assets/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/all.min.css" rel="stylesheet">
    </noscript>

    <!-- DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

    <!-- Resource hints for better performance -->
    <link rel="prefetch" href="<?php echo e(route('users.index')); ?>">
    <link rel="prefetch" href="<?php echo e(route('dashboard')); ?>">

    <!-- Preload key resources -->
    <link rel="modulepreload" href="/assets/bootstrap.bundle.min.js">

    <!-- Early hints for critical resources -->
    <meta http-equiv="Link"
        content="</assets/bootstrap.min.css>; rel=preload; as=style">
    <meta http-equiv="Link"
        content="</assets/all.min.css>; rel=preload; as=style">

    <!-- Performance monitoring -->
    <script>
        // Performance monitoring
        if ('performance' in window) {
            window.addEventListener('load', function () {
                setTimeout(function () {
                    var perfData = performance.getEntriesByType('navigation')[0];
                    console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart, 'ms');
                    console.log('DOM Ready:', perfData.domContentLoadedEventEnd - perfData.fetchStart, 'ms');
                    console.log('First Paint:', performance.getEntriesByType('paint')[0]?.startTime || 'N/A');
                }, 1000);
            });
        }
    </script>

    <!-- Critical CSS inlined for immediate rendering -->
    <style>
        /* Critical CSS for immediate rendering - Above the fold content */
        html {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            line-height: 1.6
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        .d-none {
            display: none !important
        }

        .d-flex {
            display: flex !important
        }

        .justify-content-between {
            justify-content: space-between !important
        }

        .align-items-center {
            align-items: center !important
        }

        .mb-0 {
            margin-bottom: 0 !important
        }

        .me-2 {
            margin-right: .5rem !important
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 70px;
            height: 100vh;
            background: var(--gray-50);
            border-right: 1px solid var(--gray-200);
            z-index: 1000;
            transition: all .3s ease
        }

        .main-content {
            margin-left: 70px;
            min-height: 100vh;
            background: var(--gray-100);
            transition: margin-left .3s ease
        }

        .content {
            padding: 1rem
        }

        @media(max-width:768px) {
            .sidebar {
                transform: translateX(-100%);
                width: 250px
            }

            .main-content {
                margin-left: 0
            }

            .sidebar.mobile-active {
                transform: translateX(0)
            }
        }
    </style>

    <!-- Main Application Styles -->
    <style>
        <?php
            $appColor = \App\Models\SoftwareSetting::getCurrent()->app_color ?? 'blue';
            $colorMap = [
                'blue' => ['primary' => '#3b82f6', 'secondary' => '#1d4ed8'],
                'green' => ['primary' => '#10b981', 'secondary' => '#059669'],
                'red' => ['primary' => '#ef4444', 'secondary' => '#dc2626'],
                'purple' => ['primary' => '#8b5cf6', 'secondary' => '#7c3aed'],
                'orange' => ['primary' => '#f97316', 'secondary' => '#ea580c'],
                'pink' => ['primary' => '#ec4899', 'secondary' => '#db2777'],
                'teal' => ['primary' => '#14b8a6', 'secondary' => '#0f766e'],
                'lime' => ['primary' => '#84cc16', 'secondary' => '#65a30d'],
                'slate' => ['primary' => '#64748b', 'secondary' => '#475569'],
                'cyan' => ['primary' => '#06b6d4', 'secondary' => '#0891b2']
            ];
            $currentColors = $colorMap[$appColor] ?? $colorMap['blue'];
        ?>
        :root {
            --primary-color:
                <?php echo e($currentColors['primary']); ?>

            ;
            --secondary-color:
                <?php echo e($currentColors['secondary']); ?>

            ;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
            --light-color: #f8fafc;
            --dark-color: #1e293b;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
            --sidebar-width: 280px;

            /* Light theme sidebar */
            --sidebar-bg: var(--gray-100);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-300);
            --sidebar-hover: var(--gray-200);
            --sidebar-active: var(--primary-color);
        }

        /* Dark theme variables */
        [data-theme="dark"] {
            --light-color: #0f172a;
            --dark-color: #e2e8f0;
            --gray-100: #0f172a;
            --gray-200: #1e293b;
            --gray-300: #334155;
            --gray-400: #475569;
            --gray-500: #64748b;
            --gray-600: #94a3b8;
            --gray-700: #cbd5e1;
            --gray-800: #e2e8f0;
            --gray-900: #f1f5f9;

            /* Dark theme sidebar */
            --sidebar-bg: var(--gray-200);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-400);
            --sidebar-hover: var(--gray-300);
            --sidebar-active: var(--primary-color);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--gray-100);
            color: var(--gray-800);
            transition: all 0.3s ease;
        }

        /* Dark theme body and main elements */
        [data-theme="dark"] body {
            background-color: var(--gray-100) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .main-content {
            background-color: var(--gray-100) !important;
        }

        [data-theme="dark"] .content {
            background-color: transparent;
        }

        [data-theme="dark"] .card {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-300) !important;
        }

        [data-theme="dark"] .header {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table {
            background-color: var(--gray-200) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table th {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .form-control {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] .form-select {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        /* Fix for select dropdown in dark mode */
        [data-theme="dark"] select.form-select {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] select.form-select option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        /* Webkit-specific styling for better browser support */
        [data-theme="dark"] select.form-select::-webkit-option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] select.form-select::-moz-option {
            background-color: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        /* Custom select wrapper styling */
        .custom-select-wrapper {
            position: relative;
        }

        .custom-select-wrapper .form-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 40px;
        }

        .custom-select-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--gray-500);
            font-size: 12px;
        }

        [data-theme="dark"] .custom-select-arrow {
            color: var(--gray-600);
        }

        .custom-select-wrapper.focused .custom-select-arrow {
            color: var(--primary-color);
        }

        [data-theme="dark"] .custom-select-wrapper.focused .custom-select-arrow {
            color: var(--primary-color);
        }

        [data-theme="dark"] .btn-outline-secondary {
            color: var(--gray-700) !important;
            border-color: var(--gray-400) !important;
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>

<body data-theme="light">

    <!-- PWA Configuration -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Harshana Systems">
    <meta name="application-name" content="Harshana Systems">
    <meta name="msapplication-TileColor" content="#4f46e5">
    <meta name="theme-color" content="#4f46e5">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Favicon and App Icons -->
    <?php
        $iconVersion = config('app.icon_version', env('ICON_VERSION', time()));
    ?>
    <link rel="icon" type="image/x-icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-32">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?v=<?php echo e($iconVersion); ?>"
        id="favicon-16">
    <link rel="shortcut icon" href="/icons/favicon.ico?v=<?php echo e($iconVersion); ?>" id="favicon-ico">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" id="apple-icon">
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-114x114.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-76x76.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-60x60.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/icons/icon-57x57.png">

    <!-- Microsoft Tiles -->
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
    <meta name="msapplication-config" content="/icons/browserconfig.xml">
    <title><?php echo $__env->yieldContent('title', 'Harshana Systems Dashboard'); ?></title>

    <!-- Performance Optimization: Preload critical resources -->
    <link rel="preload" href="/assets/bootstrap.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="/assets/all.min.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link href="/assets/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/all.min.css" rel="stylesheet">
    </noscript>

    <!-- DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

    <!-- Resource hints for better performance -->
    <link rel="prefetch" href="<?php echo e(route('users.index')); ?>">
    <link rel="prefetch" href="<?php echo e(route('dashboard')); ?>">

    <!-- Preload key resources -->
    <link rel="modulepreload" href="/assets/bootstrap.bundle.min.js">

    <!-- Early hints for critical resources -->
    <meta http-equiv="Link"
        content="</assets/bootstrap.min.css>; rel=preload; as=style">
    <meta http-equiv="Link"
        content="</assets/all.min.css>; rel=preload; as=style">

    <!-- Performance monitoring -->
    <script>
        // Performance monitoring
        if ('performance' in window) {
            window.addEventListener('load', function () {
                setTimeout(function () {
                    var perfData = performance.getEntriesByType('navigation')[0];
                    console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart, 'ms');
                    console.log('DOM Ready:', perfData.domContentLoadedEventEnd - perfData.fetchStart, 'ms');
                    console.log('First Paint:', performance.getEntriesByType('paint')[0]?.startTime || 'N/A');
                }, 1000);
            });
        }
    </script>

    <!-- Critical CSS inlined for immediate rendering -->
    <style>
        /* Critical CSS for immediate rendering - Above the fold content */
        html {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            line-height: 1.6
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        .d-none {
            display: none !important
        }

        .d-flex {
            display: flex !important
        }

        .justify-content-between {
            justify-content: space-between !important
        }

        .align-items-center {
            align-items: center !important
        }

        .mb-0 {
            margin-bottom: 0 !important
        }

        .me-2 {
            margin-right: .5rem !important
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 70px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            z-index: 1000;
            transition: all .3s ease
        }

        .main-content {
            margin-left: 70px;
            min-height: 100vh;
            background: var(--gray-100);
            transition: margin-left .3s ease
        }

        .content {
            padding: 1rem
        }

        @media(max-width:768px) {
            .sidebar {
                transform: translateX(-100%);
                width: 250px
            }

            .main-content {
                margin-left: 0
            }

            .sidebar.mobile-active {
                transform: translateX(0)
            }
        }
    </style>

    <!-- Main Application Styles -->
    <style>
        :root {
            --primary-color: #4f46e5;
            --secondary-color: #6366f1;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
            --light-color: #f8fafc;
            --dark-color: #1e293b;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
            --sidebar-width: 280px;

            /* Light theme sidebar */
            --sidebar-bg: var(--gray-100);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-300);
            --sidebar-hover: var(--gray-200);
            --sidebar-active: var(--primary-color);
        }

        /* Dark mode variables */
        [data-theme="dark"] {
            --light-color: #0f172a;
            --dark-color: #e2e8f0;
            --gray-100: #0f172a;
            --gray-200: #1e293b;
            --gray-300: #334155;
            --gray-400: #475569;
            --gray-500: #64748b;
            --gray-600: #94a3b8;
            --gray-700: #cbd5e1;
            --gray-800: #e2e8f0;
            --gray-900: #f1f5f9;

            /* Dark theme sidebar */
            --sidebar-bg: var(--gray-200);
            --sidebar-text: var(--gray-800);
            --sidebar-border: var(--gray-400);
            --sidebar-hover: var(--gray-300);
            --sidebar-active: var(--primary-color);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--gray-100);
            color: var(--gray-800);
            transition: all 0.3s ease;
        }

        /* Professional Loading Animation */
        .global-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            visibility: visible;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .global-loader.hide {
            opacity: 0;
            visibility: hidden;
        }

        .loader-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .loader-content {
            position: relative;
            text-align: center;
            color: var(--sidebar-text);
            z-index: 2;
            transition: all 0.3s ease;
        }

        .loader-logo {
            position: relative;
            margin-bottom: 2rem;
            display: inline-block;
        }

        .logo-circle {
            width: 160px;
            height: 160px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            backdrop-filter: blur(15px);
            border: 6px solid var(--sidebar-active);
            animation: pulse 2s ease-in-out infinite;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(79, 70, 229, 0.3);
        }

        [data-theme="dark"] .logo-circle {
            background: rgba(0, 0, 0, 0.2);
            border-color: var(--sidebar-active);
        }

        .logo-circle i {
            font-size: 2.5rem;
            color: var(--sidebar-text);
            animation: logoFloat 3s ease-in-out infinite;
            transition: all 0.3s ease;
        }

        .loader-spinner {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 180px;
            height: 180px;
            border: 6px solid rgba(255, 255, 255, 0.4);
            border-top: 6px solid var(--sidebar-active);
            border-radius: 50%;
            animation: spin 1.2s linear infinite;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .loader-spinner {
            border-color: rgba(255, 255, 255, 0.1);
            border-top-color: var(--sidebar-active);
        }

        .loader-text h4 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            letter-spacing: 3px;
            color: var(--sidebar-text);
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            animation: fadeInUp 1s ease-out;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .loader-text p {
            font-size: 1.3rem;
            opacity: 0.95;
            margin-bottom: 2rem;
            color: var(--sidebar-text);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            animation: fadeInUp 1s ease-out 0.2s both;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .loader-progress {
            width: 200px;
            margin: 0 auto;
            animation: fadeInUp 1s ease-out 0.4s both;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(11, 190, 107, 0.2);
            border-radius: 2px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .progress-bar {
            background: rgba(9, 128, 98, 0.1);
        }

        .progress-fill {
            height: 100%;
            background: var(--sidebar-active);
            border-radius: 2px;
            animation: progressLoad 2s ease-in-out infinite;
            transition: all 0.3s ease;
        }

        /* Loading Animations */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(79, 70, 229, 0.3);
            }

            50% {
                transform: scale(1.08);
                box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(79, 70, 229, 0.5);
            }
        }

        @keyframes logoFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes progressLoad {
            0% {
                width: 0%;
                transform: translateX(-100%);
            }

            50% {
                width: 100%;
                transform: translateX(-100%);
            }

            51% {
                transform: translateX(0%);
            }

            100% {
                width: 100%;
                transform: translateX(0%);
            }
        }

        /* Dark theme loader */
        [data-theme="dark"] .loader-overlay {
            background: linear-gradient(135deg, var(--gray-800), var(--gray-700));
        }

        [data-theme="dark"] .logo-circle {
            background: rgba(247, 1, 1, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .logo-circle {
                width: 60px;
                height: 60px;
            }

            .logo-circle i {
                font-size: 2rem;
            }

            .loader-spinner {
                width: 70px;
                height: 70px;
                top: -5px;
                left: -5px;
            }

            .loader-text h4 {
                font-size: 1.5rem;
            }

            .loader-progress {
                width: 150px;
            }
        }

        /* Dark mode styles */
        [data-theme="dark"] .card {
            background: var(--gray-200) !important;
            color: var(--gray-800) !important;
            border: 1px solid var(--gray-300) !important;
        }

        [data-theme="dark"] .table {
            background: var(--gray-200) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table th {
            background: var(--gray-300) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .table td {
            background: var(--gray-200) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] .form-control {
            background: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }



        /* Sidebar */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 70px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
            color: var(--sidebar-text);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            overflow: hidden;
            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .sidebar:hover {
            width: var(--sidebar-width);
        }

        .sidebar.mobile-active {
            left: 0;
            width: var(--sidebar-width);
        }

        .sidebar-header {
            padding: 1rem 1.5rem 1rem;
            border-bottom: 1px solid var(--sidebar-border);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar-header h3 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 700;
            opacity: 0;
            transition: opacity 0.3s ease;
            color: var(--sidebar-text);
        }

        /* Theme color for sidebar app name */
        .sidebar-header h3[style*="color"] {
            color: inherit !important;
        }

        .sidebar-user-name {
            margin: 4px 0 0 0;
            font-size: 0.9rem;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.3s ease;
            color: var(--sidebar-text);
            opacity: 0.7;
        }

        [data-theme="dark"] .sidebar-header h3 {
            color: var(--sidebar-text);
        }

        .sidebar-header .sidebar-icon {
            width: 45px;
            height: 45px;
            background: var(--sidebar-hover);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 1.4rem;
            transition: all 0.3s ease;
        }

        .sidebar:hover .sidebar-header h3,
        .sidebar.mobile-active .sidebar-header h3,
        .sidebar:hover .sidebar-user-name,
        .sidebar.mobile-active .sidebar-user-name {
            opacity: 1;
        }

        .sidebar:hover .sidebar-header .sidebar-icon {
            transform: scale(1.05);
            background: var(--sidebar-active);
        }

        .sidebar-nav {
            padding: 1rem 0;
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
        }

        /* Custom scrollbar for sidebar */
        .sidebar-nav::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar-nav::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar-nav::-webkit-scrollbar-thumb {
            background: var(--sidebar-border);
            border-radius: 2px;
        }

        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-hover);
        }

        .nav-item {
            margin: 0.1rem 1rem;
            position: relative;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            color: var(--sidebar-text);
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            opacity: 0.8;
        }

        .nav-link:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-text);
            opacity: 1;
            transform: translateX(3px);
        }

        .nav-link.active {
            background: var(--sidebar-active);
            color: white;
            opacity: 1;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 40%;
            background: white;
            border-radius: 0 4px 4px 0;
        }

        .nav-link i {
            width: 20px;
            margin-right: 0.75rem;
            text-align: center;
            flex-shrink: 0;
        }

        .nav-link .nav-text {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar:hover .nav-text,
        .sidebar.mobile-active .nav-text {
            opacity: 1;
        }

        /* Main content */
        .main-content {
            margin-left: 70px;
            transition: margin-left 0.3s ease;
            min-height: 100vh;
        }

        /* Floating Sidebar Toggle Button */
        .floating-sidebar-toggle {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1050;
            width: 60px;
            height: 60px;
            border-radius: 20px;
            border: none;
            background: var(--primary-color);
            color: white;
            font-size: 1.4rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 32px rgba(20, 184, 166, 0.3),
                0 2px 8px rgba(20, 184, 166, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .floating-sidebar-toggle::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            z-index: -1;
        }

        .floating-sidebar-toggle:hover {
            transform: scale(1.05) translateY(-2px);
            background: var(--secondary-color);
            box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4),
                0 4px 12px rgba(20, 184, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .floating-sidebar-toggle:active {
            transform: scale(0.95) translateY(0);
            transition: all 0.1s ease;
        }

        /* Dark theme floating button */
        [data-theme="dark"] .floating-sidebar-toggle {
            background: var(--primary-color);
            color: white;
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(20, 184, 166, 0.4),
                0 2px 8px rgba(20, 184, 166, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        [data-theme="dark"] .floating-sidebar-toggle::before {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        }

        [data-theme="dark"] .floating-sidebar-toggle:hover {
            background: var(--secondary-color);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 12px 40px rgba(20, 184, 166, 0.5),
                0 4px 12px rgba(20, 184, 166, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }



        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Theme switcher */
        .theme-switcher {
            position: relative;
        }

        .theme-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 1rem;
            min-width: 200px;
            display: none;
            z-index: 1001;
        }

        .theme-dropdown.active {
            display: block;
        }

        .color-palette {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin: 0.5rem 0;
        }

        .color-option {
            width: 32px;
            height: 32px;
            border-radius: 12px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .color-option:hover {
            transform: scale(1.15) translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .color-option.active {
            transform: scale(1.1);
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .color-option.active::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
            animation: checkmark 0.3s ease;
        }

        @keyframes checkmark {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Color palette definitions */
        .color-blue {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
        }

        .color-green {
            background: linear-gradient(135deg, #059669, #10b981);
        }

        .color-red {
            background: linear-gradient(135deg, #dc2626, #ef4444);
        }

        .color-orange {
            background: linear-gradient(135deg, #d97706, #f59e0b);
        }

        .color-purple {
            background: linear-gradient(135deg, #7c3aed, #8b5cf6);
        }

        .color-cyan {
            background: linear-gradient(135deg, #0891b2, #06b6d4);
        }

        .color-pink {
            background: linear-gradient(135deg, #db2777, #ec4899);
        }

        .color-teal {
            background: linear-gradient(135deg, #0d9488, #14b8a6);
        }

        .color-lime {
            background: linear-gradient(135deg, #65a30d, #84cc16);
        }

        .color-slate {
            background: linear-gradient(135deg, #475569, #64748b);
        }

        .color-gold {
            background: linear-gradient(135deg, #ca8a04, #eab308);
        }

        .color-navy {
            background: linear-gradient(135deg, #1e40af, #3b82f6);
        }

        /* User dropdown */
        .user-dropdown {
            position: relative;
        }

        .user-dropdown .dropdown-menu {
            border: none;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }

        /* Content area */
        .content {
            padding: 1.5rem;
        }

        /* Cards */
        .card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            background: var(--gray-200);
            color: var(--gray-800);
            border: 1px solid var(--gray-300);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--gray-200);
            padding: 1.5rem;
            font-weight: 600;
        }

        .card-body {
            padding: 1.5rem;
        }

        /* Buttons */
        .btn {
            border-radius: 10px;
            font-weight: 600;
            padding: 0.625rem 1.25rem;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
        }

        /* Tables */
        .table {
            border-radius: 12px;
            overflow: hidden;
        }

        .table thead th {
            background-color: var(--gray-100);
            border: none;
            font-weight: 600;
            color: var(--gray-700);
        }

        /* Overlay for mobile */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }

        .sidebar-overlay.active {
            display: block;
        }

        /* Sidebar sections */
        .sidebar-bottom {
            flex-shrink: 0;
            border-top: 1px solid var(--sidebar-border);
            background: var(--sidebar-bg);
            padding-bottom: 70px; /* Add padding to prevent content from being hidden by bottom nav */
        }

        .theme-toggle-sidebar {
            padding: 0.5rem;
            text-align: center;
        }

        .theme-toggle-btn {
            background: var(--sidebar-hover);
            border: 1px solid var(--sidebar-border);
            color: var(--primary-color);
            border-radius: 8px;
            padding: 0.5rem;
            width: 100%;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* Only show pointer cursor when sidebar is expanded */
        .sidebar:not(:hover) .theme-toggle-btn:not(.mobile-active-parent) {
            cursor: default;
            opacity: 0.6;
        }

        .sidebar:hover .theme-toggle-btn,
        .sidebar.mobile-active .theme-toggle-btn {
            cursor: pointer;
            opacity: 1;
        }

        .theme-toggle-btn:hover {
            background: var(--sidebar-active);
            color: white;
        }

        /* Dark mode theme button */
        [data-theme="dark"] .theme-toggle-btn {
            color: white;
        }

        .theme-toggle-sidebar {
            position: relative;
        }

        .sidebar-theme-dropdown {
            position: absolute;
            bottom: 100%;
            left: 10px;
            right: 10px;
            margin-bottom: 15px;
            display: none;
            z-index: 1200;
            width: calc(100% - 20px);
        }

        /* Responsive positioning for mobile */
        @media (max-width: 768px) {
            .sidebar-theme-dropdown {
                left: 5px;
                right: 5px;
                width: calc(100% - 10px);
            }
        }

        /* Only show dropdown when sidebar is expanded */
        .sidebar:hover .sidebar-theme-dropdown.show {
            display: block;
        }

        /* Hide dropdown when sidebar is collapsed */
        .sidebar:not(:hover) .sidebar-theme-dropdown {
            display: none !important;
        }

        .theme-dropdown-content {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12),
                0 4px 16px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
            padding: 1rem;
            animation: slideUpCompact 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center bottom;
            font-size: 0.9rem;
        }

        @keyframes slideUpCompact {
            0% {
                opacity: 0;
                transform: translateY(15px) scale(0.95);
                filter: blur(3px);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        .sidebar-theme-dropdown.show {
            display: block !important;
            animation: slideUpCompact 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sidebar-theme-dropdown.hiding {
            display: block !important;
            animation: slideDownCompact 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
        }

        @keyframes slideDownCompact {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            100% {
                opacity: 0;
                transform: translateY(10px) scale(0.98);
                filter: blur(1px);
            }
        }

        [data-theme="dark"] .theme-dropdown-content {
            background: rgba(15, 23, 42, 0.95);
            border-color: rgba(255, 255, 255, 0.1);
            color: #f1f5f9;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        }

        .theme-dropdown-content h6 {
            color: #374151;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        [data-theme="dark"] .theme-dropdown-content h6 {
            color: #f3f4f6;
        }

        .theme-mode {
            border-radius: 6px !important;
            font-weight: 500 !important;
            padding: 6px 12px !important;
            font-size: 0.8rem !important;
            transition: all 0.3s ease !important;
        }

        .theme-mode.active {
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
            transform: scale(1.05);
        }

        .color-palette {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 8px;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        [data-theme="dark"] .color-palette {
            background: #2d3748;
        }

        .color-option {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .color-option.active {
            border-color: white;
            transform: scale(1.05);
        }

        .color-option.active::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Color option backgrounds */
        .color-blue {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
        }

        .color-green {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        }

        .color-red {
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
        }

        .color-orange {
            background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
        }

        .color-purple {
            background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
        }

        .color-cyan {
            background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
        }

        .theme-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .logout-btn-sidebar {
            background: rgba(220, 38, 38, 0.15);
            border: 1px solid rgba(220, 38, 38, 0.3);
            color: #dc2626;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            width: calc(100% - 1rem);
            transition: all 0.3s ease;
            margin: 0.5rem;
            margin-bottom: 1rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logout-btn-sidebar:hover {
            background: rgba(220, 38, 38, 0.6);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }

        /* Responsive Design */
        @media (min-width: 768px) {
            .floating-sidebar-toggle {
                display: none;
            }
        }

        @media (max-width: 767px) {

            /* Mobile-first enhancements */
            body {
                background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
                font-size: 16px;
                /* Prevent zoom on iOS */
            }

            .sidebar {
                left: -280px;
                width: var(--sidebar-width);
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
                border-radius: 0 20px 20px 0;
                display: flex;
                flex-direction: column;
                height: 100vh;
            }

            .sidebar-nav {
                flex: 1;
                overflow-y: auto;
                padding-bottom: 15px;
            }

            .sidebar.mobile-active {
                left: 0;
                width: var(--sidebar-width);
                overflow-y: visible;
                max-height: 100vh;
            }

            .sidebar-bottom {
                position: sticky;
                bottom: 0;
                margin-top: auto;
                background: var(--sidebar-bg);
                border-top: 1px solid var(--sidebar-border);
                padding: 0.5rem;
                z-index: 10;
            }

            .logout-btn-sidebar {
                margin-bottom: 0.5rem !important;
                padding: 0.75rem 1rem !important;
            }

            .sidebar:hover {
                width: var(--sidebar-width);
            }

            .main-content {
                margin-left: 0;
                padding-top: 80px;
                /* Account for fixed header */
            }

            .header {
                padding: 1.5rem;
                margin-top: 0;
            }

            .content {
                padding: 1rem;
                margin-bottom: 2rem;
                margin-top: 0;
            }

            .card {
                border-radius: 20px;
                margin-bottom: 1.5rem;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                border: none;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }

            .card-header,
            .card-body {
                padding: 1.5rem;
            }

            .card-header {
                border-radius: 20px 20px 0 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            /* Better touch targets */
            .btn {
                min-height: 48px;
                border-radius: 16px;
                font-weight: 600;
                letter-spacing: 0.5px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .btn:hover,
            .btn:focus,
            .btn:active {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }

            /* Form controls */
            .form-control,
            .form-select {
                min-height: 50px;
                border-radius: 16px;
                border: 2px solid var(--gray-300);
                padding: 12px 16px;
                font-size: 16px;
                transition: all 0.3s ease;
            }

            .form-control:focus,
            .form-select:focus {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
                transform: scale(1.02);
            }

            /* Table responsiveness */
            .table-responsive {
                border-radius: 20px;
                overflow-x: auto !important;
                overflow-y: visible !important;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                -webkit-overflow-scrolling: touch;
            }

            /* Navigation improvements */
            .nav-link {
                padding: 15px 20px;
                border-radius: 12px;
                /* Remove overflow hidden to allow horizontal scroll on mobile */
                transition: all 0.3s ease;
        /* Force table to minimum width for horizontal scroll on mobile */
        @media (max-width: 768px) {
            .table {
                min-width: 900px;
            }
        }
            }

            /* App-like animations */
            .card,
            .btn,
            .nav-link {
                transform: translateZ(0);
                /* Enable hardware acceleration */
            }

            /* Smooth transitions for better UX */
            * {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
            }

            input,
            textarea,
            select {
                -webkit-user-select: text;
                user-select: text;
            }

            /* Safe area support for notched devices */
            .floating-sidebar-toggle {
                top: max(20px, env(safe-area-inset-top, 20px));
                left: max(20px, env(safe-area-inset-left, 20px));
            }

            .content {
                padding-bottom: max(2rem, env(safe-area-inset-bottom));
            }
        }

        /* Alert animations */
        .alert {
            border: none;
            border-radius: 12px;
            animation: slideInDown 0.3s ease;
        }

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

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loading states */
        .loading {
            opacity: 0.7;
            pointer-events: none;
        }

        /* Ensure dropdown is always visible when active */
        .sidebar-theme-dropdown.show {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Theme button styling */
        .theme-toggle-btn {
            width: 100%;
            padding: 12px 16px;
            border: none;
            background: transparent;
            border-radius: 16px;
            color: var(--sidebar-text);
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .theme-toggle-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border-radius: 16px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .theme-toggle-btn:hover::before {
            opacity: 1;
        }

        .theme-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .theme-toggle-btn:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }

        .theme-toggle-btn.active {
            background: rgba(79, 70, 229, 0.2) !important;
            color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
        }

        /* Dark mode support for form text and requirements */
        [data-theme="dark"] .form-text,
        [data-theme="dark"] .requirements-text {
            color: var(--gray-700) !important;
        }

        [data-theme="dark"] .form-text strong,
        [data-theme="dark"] .requirements-text strong {
            color: var(--gray-800) !important;
        }

        /* Dark mode support for user info labels */
        [data-theme="dark"] .info-item h6 {
            color: var(--gray-600) !important;
            background: transparent !important;
        }

        [data-theme="dark"] .info-item p,
        [data-theme="dark"] .info-item .h5 {
            color: var(--gray-800) !important;
        }

        /* Dark mode support for text-muted */
        [data-theme="dark"] .text-muted {
            color: var(--gray-600) !important;
        }

        /* Dark mode support for card headers */
        [data-theme="dark"] .card-header {
            background: var(--gray-300) !important;
            border-color: var(--gray-400) !important;
            color: var(--gray-800) !important;
        }

        [data-theme="dark"] .card-header h5,
        [data-theme="dark"] .card-header h6 {
            color: var(--gray-800) !important;
        }

        /* Dark mode support for list-group items (Settings tabs) */
        [data-theme="dark"] .list-group-item {
            background: var(--gray-300) !important;
            color: var(--gray-800) !important;
            border-color: var(--gray-400) !important;
        }

        [data-theme="dark"] .list-group-item:hover {
            background: var(--gray-400) !important;
            color: var(--gray-900) !important;
        }

        [data-theme="dark"] .list-group-item.active {
            background: var(--primary-color) !important;
            color: white !important;
            border-color: var(--primary-color) !important;
        }

        /* Dark mode support for form-floating labels */
        [data-theme="dark"] .form-floating>label {
            color: var(--gray-600) !important;
            background: transparent !important;
        }

        [data-theme="dark"] .form-floating>.form-control:focus~label,
        [data-theme="dark"] .form-floating>.form-control:not(:placeholder-shown)~label {
            color: var(--gray-700) !important;
            background: var(--gray-300) !important;
        }

        /* Dark mode support for input placeholders */
        [data-theme="dark"] .form-control::placeholder {
            color: var(--gray-500) !important;
            opacity: 1;
        }

        [data-theme="dark"] .form-control::-webkit-input-placeholder {
            color: var(--gray-500) !important;
        }

        [data-theme="dark"] .form-control::-moz-placeholder {
            color: var(--gray-500) !important;
        }

        [data-theme="dark"] .form-control:-ms-input-placeholder {
            color: var(--gray-500) !important;
        }

        /* Professional Loading Animation */
        .global-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .global-loader.hide {
            opacity: 0;
            visibility: hidden;
        }

        .loader-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .loader-content {
            position: relative;
            text-align: center;
            color: var(--sidebar-text);
            z-index: 2;
            transition: all 0.3s ease;
        }

        .loader-logo {
            position: relative;
            margin-bottom: 2rem;
            display: inline-block;
        }

        .logo-circle {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: pulse 2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .logo-circle img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .loader-spinner {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 100px;
            height: 100px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loader-text h4 {
            font-size: 2rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            letter-spacing: 2px;
            color: #1a1a1a;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
            background: color-mix(in srgb, var(--primary-color), transparent 10%);
            padding: 0.5rem 1rem;
            border-radius: 12px;
            display: inline-block;
        }

        .loader-text p {
            font-size: 1rem;
            opacity: 0.9;
            margin: 0.5rem 0 0 0;
            color: #1a1a1a;
            font-weight: 500;
            background: color-mix(in srgb, var(--primary-color), transparent 10%);
            padding: 0.25rem 0.75rem;
            border-radius: 8px;
            display: block;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
        }

        .loader-progress {
            width: 200px;
            height: 4px;
            background: color-mix(in srgb, var(--primary-color), transparent 80%);
            border-radius: 2px;
            margin: 2rem auto 0;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: var(--primary-color);
            border-radius: 2px;
            width: 0%;
            animation: progressLoad 3s ease-in-out infinite;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, transparent, white, transparent);
            animation: shimmer 2s ease-in-out infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
            }
        }

        @keyframes logoFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes progressLoad {
            0% {
                width: 0%;
                transform: translateX(-100%);
            }

            50% {
                width: 100%;
                transform: translateX(-100%);
            }

            51% {
                transform: translateX(0%);
            }

            100% {
                width: 100%;
                transform: translateX(0%);
            }
        }

        /* Dark theme loader */
        [data-theme="dark"] .loader-overlay {
            background: linear-gradient(135deg, var(--gray-800), var(--gray-700));
        }

        [data-theme="dark"] .logo-circle {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .logo-circle {
                width: 60px;
                height: 60px;
            }

            .logo-circle i {
                font-size: 2rem;
            }

            .loader-spinner {
                width: 70px;
                height: 70px;
                top: -5px;
                left: -5px;
            }

            .loader-text h4 {
                font-size: 1.5rem;
            }

            .loader-progress {
                width: 150px;
            }
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
    </head>

    <body data-theme="light">
        <!-- Professional Loading Animation -->
        <div id="globalLoader" class="global-loader">
            <div class="loader-overlay"></div>
            <div class="loader-content">
                <div class="loader-logo">
                    <div class="logo-circle">
                        <?php
                            $iconVersion = config('app.icon_version', env('ICON_VERSION', time()));
                        ?>
                        <img src="/icons/icon-192x192.png?v=<?php echo e($iconVersion); ?>" alt="Loading Icon"
                            style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
                    </div>
                    <div class="loader-spinner"></div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-icon">
                    <?php
                        $appSettings = \App\Models\SoftwareSetting::getCurrent();
                        $appName = $appSettings->app_name ?? config('app.name', 'Harshana Systems');
                        $iconVersion = config('app.icon_version', env('ICON_VERSION', time()));

                        // Get theme color for sidebar
                        $colorMap = [
                            'blue' => '#007bff',
                            'green' => '#28a745',
                            'red' => '#dc3545',
                            'purple' => '#6f42c1',
                            'orange' => '#fd7e14',
                            'pink' => '#e83e8c',
                            'teal' => '#20c997',
                            'lime' => '#ffc107',
                            'slate' => '#6c757d',
                            'cyan' => '#17a2b8'
                        ];
                        $appColor = $appSettings->app_color ?? 'blue';
                        $themeColor = $colorMap[$appColor] ?? $colorMap['blue'];
                    ?>
                    <img src="/icons/icon-192x192.png?v=<?php echo e($iconVersion); ?>" alt="<?php echo e($appName); ?> Icon"
                        style="width: 100%; height: 100%; border-radius: 8px; object-fit: cover;">
                </div>
                <h3 class="sidebar-app-name">
                    <?php echo e($appName); ?>

                </h3>
                <style>
                    .sidebar-app-name {
                        color: var(--primary-color) !important;
                        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
                    }
                </style>
                <?php if(auth()->check()): ?>
                    <p class="sidebar-user-name">
                        <i class="fas fa-user-circle me-1"></i>
                        <?php echo e(auth()->user()->name); ?>

                    </p>
                    <?php if(auth()->user()->branch): ?>
                        <p class="sidebar-user-name" style="font-size: 0.85rem; margin-top: 2px; opacity: 0.8;">
                                    <i class="fas fa-building me-1"></i>
                                    <?php echo e(auth()->user()->branch->name); ?>

                                </p>
                    <?php endif; ?>
                    
                    
                    <?php if(isset($appExpiry)): ?>
                        <?php if($appExpiry['is_expired']): ?>
                            <div class="expiry-warning expired" style="margin-top: 10px; padding: 8px 12px; background: #fee; border: 1px solid #fcc; border-radius: 6px; font-size: 0.8rem;">
                                <i class="fas fa-exclamation-triangle me-1" style="color: #e53e3e;"></i>
                                <span style="color: #e53e3e; font-weight: 600;">Application Expired</span>
                            </div>
                        <?php elseif($appExpiry['show_warning']): ?>
                            <div class="expiry-warning warning" style="margin-top: 10px; padding: 8px 12px; background: #fef3cd; border: 1px solid #ffc107; border-radius: 6px; font-size: 0.8rem;">
                                <i class="fas fa-exclamation-circle me-1" style="color: #f59e0b;"></i>
                                <span style="color: #b45309; font-weight: 600;">
                                    Expires in <?php echo e($appExpiry['days_until_expiry']); ?> <?php echo e($appExpiry['days_until_expiry'] == 1 ? 'day' : 'days'); ?>

                                </span>
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <nav class="sidebar-nav">

            <?php if(auth()->user() && auth()->user()->hasAccessTo('financial_dashboard')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('financial-dashboard.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('financial-dashboard.*') ? 'active' : ''); ?>">
                            <i class="fas fa-chart-line"></i>
                            <span class="nav-text">Financial Dashboard</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('dashboard')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('dashboard')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                            <i class="fas fa-tachometer-alt"></i>
                            <span class="nav-text">Dashboard</span>
                        </a>
                    </div>
                <?php endif; ?>


                <?php if(auth()->user() && auth()->user()->hasAccessTo('invoices')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('invoices.create')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('invoices.create') ? 'active' : ''); ?>">
                            <i class="fas fa-plus-circle"></i>
                            <span class="nav-text">Create Invoice</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('invoices.pending')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('invoices.pending')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('invoices.pending') ? 'active' : ''); ?>">
                            <i class="fas fa-wallet"></i>
                            <span class="nav-text">Pending Payments</span>
                        </a>
                    </div>
                <?php endif; ?>

                   <?php if(auth()->user() && auth()->user()->hasAccessTo('invoices.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('invoices.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('invoices.*') ? 'active' : ''); ?>">
                            <i class="fas fa-file-invoice-dollar"></i>
                            <span class="nav-text">Invoices</span>
                        </a>
                    </div>
                <?php endif; ?>

                 <?php if(auth()->user() && auth()->user()->hasAccessTo('products.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('products.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('products.*') ? 'active' : ''); ?>">
                            <i class="fas fa-box"></i>
                            <span class="nav-text">Products</span>
                        </a>
                    </div>
                <?php endif; ?>

                 <?php if(auth()->user() && auth()->user()->hasAccessTo('damage_stocks.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('damage_stocks.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('damage_stocks.*') ? 'active' : ''); ?>">
                            <i class="fas fa-bug"></i>
                            <span class="nav-text">Damage Stocks</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('stock_transfers.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('stock_transfers.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('stock_transfers.*') ? 'active' : ''); ?>">
                            <i class="fas fa-exchange-alt"></i>
                            <span class="nav-text">Stock Transfers</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('suppliers.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('suppliers.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('suppliers.*') ? 'active' : ''); ?>">
                            <i class="fas fa-truck"></i>
                            <span class="nav-text">Suppliers</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('customers.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('customers.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('customers.*') && !request()->routeIs('customers.creditProfilePage') ? 'active' : ''); ?>">
                            <i class="fas fa-users"></i>
                            <span class="nav-text">Customers</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('customers.credit_profile')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(Route::has('customers.creditProfilePage') ? route('customers.creditProfilePage') : '#'); ?>"
                            class="nav-link <?php echo e(request()->routeIs('customers.creditProfilePage') ? 'active' : ''); ?>">
                            <i class="fas fa-credit-card"></i>
                            <span class="nav-text">Credit Profiles</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('cashbook')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(Route::has('cashbooks.index') ? route('cashbooks.index') : '#'); ?>"
                            class="nav-link <?php echo e(request()->routeIs('cashbooks.*') ? 'active' : ''); ?>">
                            <i class="fas fa-book"></i>
                            <span class="nav-text">Cashbook</span>
                        </a>
                    </div>
                <?php endif; ?>

                

                <?php if(auth()->user() && auth()->user()->hasAccessTo('grns.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('grns.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('grns.*') ? 'active' : ''); ?>">
                            <i class="fas fa-receipt"></i>
                            <span class="nav-text">GRNs</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('categories.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('categories.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('categories.*') ? 'active' : ''); ?>">
                            <i class="fas fa-list-alt"></i>
                            <span class="nav-text">Categories</span>
                        </a>
                    </div>
                <?php endif; ?>

                 <?php if(auth()->user() && auth()->user()->hasAccessTo('qty_types.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('qty_types.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('qty_types.*') ? 'active' : ''); ?>">
                            <i class="fas fa-boxes"></i>
                            <span class="nav-text">Qty Types</span>
                        </a>
                    </div>
                <?php endif; ?>

               

                <?php if(auth()->user() && auth()->user()->hasAccessTo('prices.view')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('prices.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('prices.*') ? 'active' : ''); ?>">
                            <i class="fas fa-tags"></i>
                            <span class="nav-text">Prices</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('reports')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('reports')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('reports') ? 'active' : ''); ?>">
                            <i class="fas fa-chart-bar"></i>
                            <span class="nav-text">Reports</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('devices')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('devices.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('devices.*') ? 'active' : ''); ?>">
                            <i class="fas fa-mobile-alt"></i>
                            <span class="nav-text">Devices</span>
                        </a>
                    </div>
                <?php endif; ?>

               

                 <?php if(auth()->user() && auth()->user()->hasAccessTo('users')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('users.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('users.*') ? 'active' : ''); ?>">
                            <i class="fas fa-users"></i>
                            <span class="nav-text">Users</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('salesmen')): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('salesmen.index')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('salesmen.*') ? 'active' : ''); ?>">
                            <i class="fas fa-user-tie"></i>
                            <span class="nav-text">Salesmen</span>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if(auth()->user() && auth()->user()->hasAccessTo('settings') && auth()->user()->isHidden()): ?>
                    <div class="nav-item">
                        <a href="<?php echo e(route('settings')); ?>"
                            class="nav-link <?php echo e(request()->routeIs('settings') ? 'active' : ''); ?>">
                            <i class="fas fa-cog"></i>
                            <span class="nav-text">Settings</span>
                        </a>
                    </div>
                <?php endif; ?>
            </nav>

            <!-- Sidebar Bottom Section -->
            <div class="sidebar-bottom">
                <!-- Theme Toggle in Sidebar -->
                <div class="theme-toggle-sidebar">
                    <button class="theme-toggle-btn" id="sidebarThemeToggle">
                        <i class="fas fa-palette me-2"></i>
                        <span class="nav-text">Theme</span>
                    </button>
                    <div class="sidebar-theme-dropdown" id="sidebarThemeDropdown">
                        <div class="theme-dropdown-content">
                            <h6>Theme Mode</h6>
                            <div class="btn-group w-100 mb-3">
                                <button class="btn btn-sm btn-outline-primary theme-mode" data-theme="light">
                                    <i class="fas fa-sun me-1"></i>Light
                                </button>
                                <button class="btn btn-sm btn-outline-primary theme-mode" data-theme="dark">
                                    <i class="fas fa-moon me-1"></i>Dark
                                </button>
                            </div>

                            <h6>Color Palette</h6>
                            <div class="color-palette">
                                <!-- Primary Colors -->
                                <div class="color-option color-blue" data-primary="#4f46e5" data-secondary="#6366f1"
                                    title="Indigo Blue"></div>
                                <div class="color-option color-green" data-primary="#059669" data-secondary="#10b981"
                                    title="Emerald Green"></div>
                                <div class="color-option color-red" data-primary="#dc2626" data-secondary="#ef4444"
                                    title="Ruby Red"></div>
                                <div class="color-option color-orange" data-primary="#d97706" data-secondary="#f59e0b"
                                    title="Amber Orange"></div>
                                <div class="color-option color-purple" data-primary="#7c3aed" data-secondary="#8b5cf6"
                                    title="Violet Purple"></div>
                                <div class="color-option color-cyan" data-primary="#0891b2" data-secondary="#06b6d4"
                                    title="Sky Cyan"></div>

                                <!-- Additional Colors -->
                                <div class="color-option color-pink" data-primary="#db2777" data-secondary="#ec4899"
                                    title="Rose Pink"></div>
                                <div class="color-option color-teal" data-primary="#0d9488" data-secondary="#14b8a6"
                                    title="Teal Green"></div>
                                <div class="color-option color-lime" data-primary="#65a30d" data-secondary="#84cc16"
                                    title="Lime Green"></div>
                                <div class="color-option color-slate" data-primary="#475569" data-secondary="#64748b"
                                    title="Slate Gray"></div>
                                <div class="color-option color-gold" data-primary="#ca8a04" data-secondary="#eab308"
                                    title="Golden Yellow"></div>
                                <div class="color-option color-navy" data-primary="#1e40af" data-secondary="#3b82f6"
                                    title="Navy Blue"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Logout Button in Sidebar -->
                <form method="POST" action="<?php echo e(route('logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button class="logout-btn-sidebar" type="submit">
                        <i class="fas fa-sign-out-alt me-2"></i>
                        <span class="nav-text">Logout</span>
                    </button>
                </form>
            </div>
        </div>

        <!-- Sidebar overlay for mobile -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- Floating Mobile Sidebar Toggle -->
        <button class="floating-sidebar-toggle d-md-none" id="sidebarToggle">
            <i class="fas fa-bars"></i>
        </button>

        <!-- Main Content -->
        <div class="main-content" id="mainContent">
            <!-- Content -->
            <div class="content">
                <?php if(session('success')): ?>
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle me-2"></i>
                        <?php echo e(session('success')); ?>

                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>

                <?php if(session('warning')): ?>
                    <div class="alert alert-warning alert-dismissible fade show">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <?php echo e(session('warning')); ?>

                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                    <div class="alert alert-danger alert-dismissible fade show">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <?php echo e(session('error')); ?>

                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>

                <?php echo $__env->yieldContent('content'); ?>
            </div>
        </div>

        <!-- Performance Optimization: Async JavaScript loading -->
        <script>
            // Preload and async load Bootstrap JS for better performance
            (function () {
                var script = document.createElement('script');
                script.src = '/assets/bootstrap.bundle.min.js';
                script.async = true;
                script.defer = true;
                script.onload = function () {
                    // Bootstrap loaded, fire custom event
                    document.dispatchEvent(new Event('bootstrapLoaded'));
                };
                document.head.appendChild(script);
            })();
        </script>
        <script>
            // Load Chart.js for dashboard charts
            (function () {
                var script = document.createElement('script');
                script.src = '/assets/chart.umd.min.js';
                script.async = true;
                script.defer = true;
                script.onload = function () {
                    // Chart.js loaded, fire custom event
                    document.dispatchEvent(new Event('chartjsLoaded'));
                };
                document.head.appendChild(script);
            })();
        </script>
        <script>
            // Professional Loading Animation System (guarded to avoid duplicate declarations)
            if (typeof window.LoadingManager === 'undefined') {
                window.LoadingManager = class {
                constructor() {
                    this.loader = document.getElementById('globalLoader');
                    this.isLoading = false;
                    this.init();
                }

                init() {
                    // Show loader initially
                    this.show();

                    // Hide loader when page is fully loaded
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', () => {
                            setTimeout(() => this.hide(), 500);
                        });
                    } else {
                        setTimeout(() => this.hide(), 300);
                    }

                    // Show loader on form submissions
                    this.attachFormLoaders();

                    // Show loader on navigation links
                    this.attachNavigationLoaders();

                    // Handle page unload (but not during auto-logout)
                    window.addEventListener('beforeunload', (e) => {
                        // Don't show loader if this is an auto-logout redirect
                        if (!window.isAutoLoggingOut) {
                            this.show();
                        }
                    });
                }

                show() {
                    if (this.loader && !this.isLoading) {
                        this.isLoading = true;
                        this.loader.classList.remove('hide');
                        this.loader.style.display = 'flex';
                        document.body.style.overflow = 'hidden';
                    }
                }

                hide() {
                    if (this.loader && this.isLoading) {
                        this.isLoading = false;
                        this.loader.classList.add('hide');
                        document.body.style.overflow = '';

                        setTimeout(() => {
                            if (this.loader.classList.contains('hide')) {
                                this.loader.style.display = 'none';
                                // Dispatch custom event when loading is completely finished
                                window.dispatchEvent(new CustomEvent('pageLoadingComplete'));
                            }
                        }, 500);
                    }
                }

                attachFormLoaders() {
                    // Add loading to all forms except logout forms
                    document.querySelectorAll('form:not(.no-loader)').forEach(form => {
                        form.addEventListener('submit', (e) => {
                            // Small delay to ensure form validation passes
                            setTimeout(() => {
                                if (!e.defaultPrevented) {
                                    this.show();
                                }
                            }, 100);
                        });
                    });
                }

                attachNavigationLoaders() {
                    // Add loading to navigation links
                    document.querySelectorAll('a[href]:not([href^="#"]):not([href^="mailto:"]):not([href^="tel:"]):not(.no-loader)').forEach(link => {
                        link.addEventListener('click', (e) => {
                            // Only show loader for same-origin links
                            try {
                                const url = new URL(link.href);
                                if (url.origin === window.location.origin && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
                                    this.show();
                                }
                            } catch (e) {
                                // Invalid URL, ignore
                            }
                        });
                    });
                }

                // Public method to manually show loader
                showLoader() {
                    this.show();
                }

                // Public method to manually hide loader
                hideLoader() {
                    this.hide();
                }
                }
            }

            // Initialize loading manager if not already
            window.loadingManager = window.loadingManager || new window.LoadingManager();

            // Make it globally available
            window.showLoader = () => window.loadingManager.showLoader();
            window.hideLoader = () => window.loadingManager.hideLoader();

            // Ensure loader state is correct when navigating with browser controls
            // Handle pageshow (bfcache) — browsers may restore the page from cache without firing load events
            window.addEventListener('pageshow', (event) => {
                // If page was restored from bfcache (event.persisted) or shown again, hide any leftover loader
                setTimeout(() => {
                    try {
                        loadingManager.hide();
                        // Re-attach handlers in case they were lost when page was cached
                        loadingManager.attachNavigationLoaders();
                        loadingManager.attachFormLoaders();
                    } catch (e) {
                        // Fail silently
                        console.debug('pageshow handler error:', e);
                    }
                }, 50);
            });

            // Hide loader on popstate (back/forward) navigation
            window.addEventListener('popstate', () => {
                try {
                    loadingManager.hide();
                } catch (e) {
                    console.debug('popstate handler error:', e);
                }
            });

            // If tab becomes visible again, ensure loader is hidden
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'visible') {
                    try { loadingManager.hide(); } catch (e) {}
                }
            });

            // AJAX loading integration
            if (window.fetch) {
                const originalFetch = window.fetch;
                window.fetch = function (...args) {
                    loadingManager.show();
                    return originalFetch.apply(this, args).finally(() => {
                        setTimeout(() => loadingManager.hide(), 300);
                    });
                };
            }

            // jQuery AJAX integration (if jQuery is used)
            if (window.jQuery) {
                $(document).ajaxStart(function () {
                    loadingManager.show();
                }).ajaxStop(function () {
                    setTimeout(() => loadingManager.hide(), 300);
                });
            }

            // Sidebar toggle for mobile
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebar = document.getElementById('sidebar');
            const sidebarOverlay = document.getElementById('sidebarOverlay');

            function toggleSidebar() {
                sidebar.classList.toggle('mobile-active');
                sidebarOverlay.classList.toggle('active');

                // Hide theme dropdown when sidebar closes
                if (!sidebar.classList.contains('mobile-active')) {
                    const themeDropdown = document.getElementById('sidebarThemeDropdown');
                    const themeToggle = document.getElementById('sidebarThemeToggle');
                    if (themeDropdown) {
                        themeDropdown.classList.remove('show');
                    }
                    if (themeToggle) {
                        themeToggle.classList.remove('active');
                    }
                }
            }

            sidebarToggle?.addEventListener('click', toggleSidebar);
            sidebarOverlay?.addEventListener('click', toggleSidebar);

            // Sidebar theme switcher
            const sidebarThemeToggle = document.getElementById('sidebarThemeToggle');
            const sidebarThemeDropdown = document.getElementById('sidebarThemeDropdown');
            const themeModes = document.querySelectorAll('.theme-mode');
            const colorOptions = document.querySelectorAll('.color-option');

            console.log('Theme elements found:', {
                toggle: !!sidebarThemeToggle,
                dropdown: !!sidebarThemeDropdown,
                modes: themeModes.length,
                colors: colorOptions.length
            });

            if (sidebarThemeToggle && sidebarThemeDropdown) {

                // Function to check if sidebar is expanded
                function isSidebarExpanded() {
                    const sidebar = document.getElementById('sidebar');
                    return sidebar && (sidebar.offsetWidth > 70 || sidebar.classList.contains('mobile-active'));
                }

                // Function to smoothly hide dropdown
                function hideDropdownSmooth() {
                    if (sidebarThemeDropdown.classList.contains('show')) {
                        sidebarThemeDropdown.classList.add('hiding');
                        sidebarThemeDropdown.classList.remove('show');
                        sidebarThemeToggle.classList.remove('active');

                        setTimeout(() => {
                            sidebarThemeDropdown.classList.remove('hiding');
                        }, 250);
                    }
                }

                // Function to hide dropdown if sidebar is collapsed
                function hideDropdownIfCollapsed() {
                    if (!isSidebarExpanded()) {
                        hideDropdownSmooth();
                        console.log('Dropdown hidden - sidebar collapsed');
                    }
                }

                sidebarThemeToggle.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    console.log('Theme button clicked');

                    // Only show dropdown if sidebar is expanded
                    if (!isSidebarExpanded()) {
                        console.log('Cannot show dropdown - sidebar is collapsed');
                        return;
                    }

                    const isVisible = sidebarThemeDropdown.classList.contains('show');

                    if (isVisible) {
                        hideDropdownSmooth();
                        console.log('Hiding dropdown');
                    } else {
                        sidebarThemeDropdown.classList.add('show');
                        sidebarThemeToggle.classList.add('active');
                        console.log('Showing dropdown');
                    }
                });

                // Handle sidebar hover changes
                const sidebar = document.getElementById('sidebar');
                if (sidebar) {
                    sidebar.addEventListener('mouseenter', function () {
                        console.log('Sidebar expanded');
                        // Dropdown can be shown when sidebar expands
                    });

                    sidebar.addEventListener('mouseleave', function () {
                        console.log('Sidebar collapsed');
                        // Hide dropdown when sidebar collapses
                        setTimeout(hideDropdownIfCollapsed, 100); // Small delay for smooth transition
                    });
                }

                document.addEventListener('click', function (e) {
                    if (!e.target.closest('.theme-toggle-sidebar') && !e.target.closest('.sidebar-theme-dropdown')) {
                        sidebarThemeDropdown.classList.remove('show');
                        sidebarThemeToggle.classList.remove('active');
                    }
                });
            } else {
                console.error('Theme elements not found!');
            }

            // Theme mode toggle
            themeModes.forEach(function (button) {
                button.addEventListener('click', function () {
                    const theme = button.dataset.theme;

                    console.log('Theme mode selected:', theme);

                    document.body.dataset.theme = theme;
                    localStorage.setItem('theme', theme);

                    // Update only the active color based on selected color
                    const primary = localStorage.getItem('primaryColor') || '#4f46e5';
                    document.documentElement.style.setProperty('--sidebar-active', primary);

                    themeModes.forEach(function (btn) {
                        btn.classList.remove('active');
                    });
                    button.classList.add('active');

                    // Hide dropdown
                    if (sidebarThemeDropdown) {
                        sidebarThemeDropdown.classList.remove('show');
                        sidebarThemeToggle.classList.remove('active');
                    }
                });
            });

            // Color palette selection
            colorOptions.forEach(function (option) {
                option.addEventListener('click', function () {
                    const primary = option.dataset.primary;
                    const secondary = option.dataset.secondary;

                    console.log('Color selected:', primary, secondary);

                    // Update CSS variables
                    document.documentElement.style.setProperty('--primary-color', primary);
                    document.documentElement.style.setProperty('--secondary-color', secondary);

                    // Update only the active color, not sidebar background
                    document.documentElement.style.setProperty('--sidebar-active', primary);

                    // Save preferences
                    localStorage.setItem('primaryColor', primary);
                    localStorage.setItem('secondaryColor', secondary);

                    // Update active state
                    colorOptions.forEach(function (opt) {
                        opt.classList.remove('active');
                    });
                    option.classList.add('active');

                    // Hide dropdown
                    if (sidebarThemeDropdown) {
                        sidebarThemeDropdown.classList.remove('show');
                        sidebarThemeToggle.classList.remove('active');
                    }
                });
            });

            // Initialize theme system after page load
            window.addEventListener('DOMContentLoaded', function () {
                console.log('Initializing theme system...');

                // Load saved preferences
                const savedTheme = localStorage.getItem('theme') || 'dark';
                const savedPrimary = localStorage.getItem('primaryColor') || '#059669';
                const savedSecondary = localStorage.getItem('secondaryColor') || '#10b981';

                console.log('Saved preferences:', { savedTheme, savedPrimary, savedSecondary });

                document.body.dataset.theme = savedTheme;

                // Set active theme button
                const activeThemeButton = document.querySelector(`[data-theme="${savedTheme}"]`);
                if (activeThemeButton) {
                    activeThemeButton.classList.add('active');
                    console.log('Active theme button set:', savedTheme);
                }

                // Apply saved colors
                document.documentElement.style.setProperty('--primary-color', savedPrimary);
                document.documentElement.style.setProperty('--secondary-color', savedSecondary);

                // Set the active color to the saved primary color
                document.documentElement.style.setProperty('--sidebar-active', savedPrimary);

                // Mark active color option
                colorOptions.forEach(option => {
                    if (option.dataset.primary === savedPrimary) {
                        option.classList.add('active');
                    }
                });

                if (!document.querySelector('.color-option.active')) {
                    if (colorOptions.length > 0) {
                        colorOptions[0].classList.add('active');
                        console.log('Default color option activated');
                    }
                }

                // Debug function to test dropdown
                window.testDropdown = function () {
                    const dropdown = document.getElementById('sidebarThemeDropdown');
                    const toggleBtn = document.getElementById('sidebarThemeToggle');
                    if (dropdown) {
                        dropdown.classList.toggle('show');
                        if (toggleBtn) {
                            toggleBtn.classList.toggle('active');
                        }
                        console.log('Dropdown toggled. Visible:', dropdown.classList.contains('show'));
                        console.log('Dropdown element:', dropdown);
                        console.log('Dropdown computed style:', window.getComputedStyle(dropdown));
                    }
                };

                console.log('Theme system initialized successfully');
                console.log('Test dropdown with: window.testDropdown()');
            });

            // Auto-dismiss alerts - wait for Bootstrap to be loaded
            function initAutoDismissAlerts() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    if (!alert.querySelector('.btn-close:focus')) {
                        bootstrap.Alert.getOrCreateInstance(alert).close();
                    }
                });
            }

            // Wait for Bootstrap to load before initializing auto-dismiss
            function checkAndInitAlerts() {
                if (typeof bootstrap !== 'undefined' && typeof bootstrap.Alert !== 'undefined') {
                    setTimeout(initAutoDismissAlerts, 5000);
                } else {
                    // Retry after a short delay
                    setTimeout(checkAndInitAlerts, 100);
                }
            }

            // Start checking for Bootstrap availability
            checkAndInitAlerts();

            // Performance Optimized PWA Service Worker Registration
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', function () {
                    // Register service worker with performance monitoring
                    navigator.serviceWorker.register('/sw.js')
                        .then(function (registration) {
                            console.log('ServiceWorker registration successful with scope: ', registration.scope);

                            // Send performance data to service worker
                            if ('performance' in window) {
                                navigator.serviceWorker.ready.then(function (registration) {
                                    const perfData = performance.getEntriesByType('navigation')[0];
                                    registration.active.postMessage({
                                        type: 'PERFORMANCE_MEASURE',
                                        data: {
                                            loadTime: perfData.loadEventEnd - perfData.fetchStart,
                                            domReady: perfData.domContentLoadedEventEnd - perfData.fetchStart
                                        }
                                    });
                                });
                            }

                            // Update available
                            registration.addEventListener('updatefound', () => {
                                const newWorker = registration.installing;
                                newWorker.addEventListener('statechange', () => {
                                    if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                        // Show update notification
                                        if (confirm('App update available! Reload to get the latest version?')) {
                                            window.location.reload();
                                        }
                                    }
                                });
                            });
                        })
                        .catch(function (err) {
                            console.log('ServiceWorker registration failed: ', err);
                        });
                });
            }

            // PWA Install Prompt - defer until page is fully loaded
            window.addEventListener('load', function () {
                let deferredPrompt;
                window.addEventListener('beforeinstallprompt', (e) => {
                    console.log('Before install prompt event fired');
                    // Prevent Chrome 67 and earlier from automatically showing the prompt
                    e.preventDefault();
                    deferredPrompt = e;

                    // Show install button or banner
                    const installBanner = document.createElement('div');
                    installBanner.id = 'pwa-install-banner';
                    installBanner.innerHTML = `
                    <div class="alert alert-info alert-dismissible fade show" style="margin: 1rem; position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 400px;">
                        <i class="fas fa-mobile-alt me-2"></i>
                        Install App on your device for better experience!
                        <button class="btn btn-sm btn-primary ms-2" id="installApp">Install</button>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;

                    // Try multiple selectors to ensure banner appears
                    const targetElement = document.querySelector('.content') || document.querySelector('.main-content') || document.body;
                    if (targetElement) {
                        targetElement.appendChild(installBanner);
                        console.log('PWA install banner added to:', targetElement.className || 'body');
                    } else {
                        document.body.appendChild(installBanner);
                        console.log('PWA install banner added to body as fallback');
                    }

                    document.getElementById('installApp').addEventListener('click', () => {
                        if (deferredPrompt) {
                            deferredPrompt.prompt();
                            deferredPrompt.userChoice.then((choiceResult) => {
                                if (choiceResult.outcome === 'accepted') {
                                    console.log('User accepted the A2HS prompt');
                                }
                                deferredPrompt = null;
                                installBanner.remove();
                            });
                        }
                    });
                });

                window.addEventListener('appinstalled', (evt) => {
                    console.log('App was installed successfully');
                    // Remove banner if it exists
                    const banner = document.getElementById('pwa-install-banner');
                    if (banner) banner.remove();
                });
            });

            // Auto Logout Functionality
            <?php
                $settings = \App\Models\SoftwareSetting::getCurrent();
                $autoLogoutEnabled = $settings->auto_logout_enabled ?? true;
                $autoLogoutTime = $settings->auto_logout_time ?? 30;
            ?>

            <?php if($autoLogoutEnabled): ?>
                             (function () {
                        let logoutTimer;
                        let warningTimer;
                        let lastActivity = Date.now();
                        let isPageLoading = true;
                        let isInitialized = false;
                        let isLoggingOut = false;
                        const logoutTime = <?php echo e($autoLogoutTime); ?> * 60 * 1000; // Convert minutes to milliseconds
                        const warningTime = Math.min(5 * 60 * 1000, logoutTime * 0.8); // Show warning at 80% of logout time, max 5 minutes

                        function resetTimer() {
                            // Don't start timers while page is loading or during logout process
                            if (isPageLoading || isLoggingOut) return;

                            lastActivity = Date.now();
                            clearTimeout(logoutTimer);
                            clearTimeout(warningTimer);

                            // Only set warning timer if logout time is longer than 30 seconds
                            if (logoutTime > 30000) {
                                warningTimer = setTimeout(() => {
                                    showLogoutWarning();
                                }, logoutTime - warningTime);
                            }

                            // Always set the final logout timer
                            logoutTimer = setTimeout(() => {
                                performLogout();
                            }, logoutTime);
                        }

                        function showLogoutWarning() {
                            // Don't show warnings while page is loading or during logout process
                            if (isPageLoading || isLoggingOut) return;

                            // Create warning modal
                            const warningModal = document.createElement('div');
                            warningModal.innerHTML = `
                            <div class="modal fade" id="logoutWarningModal" tabindex="-1" aria-labelledby="logoutWarningModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-warning">
                                            <h5 class="modal-title text-dark" id="logoutWarningModalLabel">
                                                <i class="fas fa-clock me-2"></i>Session Expiring Soon
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="text-center">
                                                <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                                                <p class="mb-3">Your session will expire in <span id="countdown" class="fw-bold text-danger">${Math.floor(warningTime / 60000)}:${((warningTime % 60000) / 1000).toString().padStart(2, '0')}</span> due to inactivity.</p>
                                                <p class="text-muted">Click "Continue Session" to stay logged in, or you will be automatically logged out.</p>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                <i class="fas fa-times me-2"></i>Cancel
                                            </button>
                                            <button type="button" class="btn btn-primary" onclick="continueSession()">
                                                <i class="fas fa-play me-2"></i>Continue Session
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;

                            document.body.appendChild(warningModal);

                            // Show modal
                            const modal = new bootstrap.Modal(document.getElementById('logoutWarningModal'));
                            modal.show();

                            // Start countdown - use actual warning time
                            let timeLeft = Math.ceil(warningTime / 1000); // Convert milliseconds to seconds
                            const countdownElement = document.getElementById('countdown');

                            const countdownInterval = setInterval(() => {
                                timeLeft--;
                                const minutes = Math.floor(timeLeft / 60);
                                const seconds = timeLeft % 60;
                                countdownElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;

                                if (timeLeft <= 0) {
                                    clearInterval(countdownInterval);
                                    performLogout();
                                }
                            }, 1000);

                            // Auto logout after warning time
                            setTimeout(() => {
                                clearInterval(countdownInterval);
                                performLogout();
                            }, warningTime);
                        }

                        function performLogout() {
                            // Prevent multiple logout attempts
                            if (isLoggingOut) return;
                            isLoggingOut = true;

                            console.log('Auto-logout triggered:', {
                                timestamp: new Date().toISOString(),
                                logoutTime: '<?php echo e($autoLogoutTime); ?> minutes'
                            });

                            // Clear all timers
                            clearTimeout(logoutTimer);
                            clearTimeout(warningTimer);

                            // Hide warning modal if visible
                            const warningModal = document.getElementById('logoutWarningModal');
                            if (warningModal) {
                                const modalInstance = bootstrap.Modal.getInstance(warningModal);
                                if (modalInstance) {
                                    modalInstance.hide();
                                }
                            }

                            // Show logout message
                            const logoutMessage = document.createElement('div');
                            logoutMessage.innerHTML = `
                            <div class="alert alert-warning alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999; min-width: 350px;">
                                <i class="fas fa-sign-out-alt me-2"></i>
                                <strong>Session Expired!</strong><br>
                                You have been automatically logged out due to inactivity. Redirecting to login page...
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;
                            document.body.appendChild(logoutMessage);

                            // Redirect to login after showing message
                            setTimeout(() => {
                                // Set flag to prevent loading animation on logout redirect
                                window.isAutoLoggingOut = true;

                                // Show loading indicator
                                const loadingIndicator = document.createElement('div');
                                loadingIndicator.innerHTML = `
                                <div class="alert alert-info position-fixed" style="top: 70px; right: 20px; z-index: 9999; min-width: 300px;">
                                    <i class="fas fa-spinner fa-spin me-2"></i>
                                    Logging out...
                                </div>
                            `;
                                document.body.appendChild(loadingIndicator);

                                // Perform proper logout by calling Laravel logout route
                                const form = document.createElement('form');
                                form.method = 'POST';
                                form.action = '/logout';
                                form.style.display = 'none';

                                // Add CSRF token
                                const csrfToken = document.querySelector('meta[name="csrf-token"]');
                                if (csrfToken) {
                                    const csrfInput = document.createElement('input');
                                    csrfInput.type = 'hidden';
                                    csrfInput.name = '_token';
                                    csrfInput.value = csrfToken.content;
                                    form.appendChild(csrfInput);
                                }

                                document.body.appendChild(form);

                                // Submit form and add fallback redirect
                                try {
                                    form.submit();
                                } catch (error) {
                                    console.log('Form submission failed, using direct redirect');
                                    window.location.href = '/login';
                                }

                                // Fallback redirect after 3 seconds if form submission doesn't work
                                setTimeout(() => {
                                    window.location.href = '/login';
                                }, 3000);
                            }, 2000);
                        }

                        // Make continueSession function global
                        window.continueSession = function () {
                            // Prevent action during logout process
                            if (isLoggingOut) return;

                            // Hide warning modal
                            const warningModal = document.getElementById('logoutWarningModal');
                            if (warningModal) {
                                const modalInstance = bootstrap.Modal.getInstance(warningModal);
                                if (modalInstance) {
                                    modalInstance.hide();
                                }
                                warningModal.remove();
                            }

                            // Reset timer
                            resetTimer();

                            // Show success message
                            const successMessage = document.createElement('div');
                            successMessage.innerHTML = `
                            <div class="alert alert-success alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                                <i class="fas fa-check-circle me-2"></i>
                                Session extended successfully!
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;
                            document.body.appendChild(successMessage);

                            setTimeout(() => {
                                if (successMessage.parentNode) {
                                    successMessage.remove();
                                }
                            }, 3000);
                        };

                        // Activity events to track
                        const activityEvents = [
                            'mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click',
                            'keydown', 'keyup', 'focus', 'blur', 'change', 'submit'
                        ];

                        // Add event listeners for all activity events
                        activityEvents.forEach(event => {
                            document.addEventListener(event, resetTimer, true);
                        });

                        // Wait for page to fully load before starting auto-logout timer
                        function initializeAutoLogout() {
                            // Prevent multiple initializations
                            if (isInitialized) return;
                            isInitialized = true;

                            isPageLoading = false;
                            lastActivity = Date.now(); // Reset activity time to current moment
                            resetTimer(); // Start the timer

                            console.log('Auto-logout initialized after page load:', {
                                enabled: true,
                                logoutTime: '<?php echo e($autoLogoutTime); ?> minutes',
                                warningTime: 'Dynamic based on logout time',
                                timestamp: new Date().toISOString()
                            });
                        }

                        // Listen for the custom loading complete event
                        window.addEventListener('pageLoadingComplete', initializeAutoLogout);

                        // Fallback: if loading is already complete or no loading animation
                        if (document.readyState === 'complete') {
                            // Check if loader exists and is visible
                            const loader = document.getElementById('globalLoader');
                            if (!loader || loader.style.display === 'none' || loader.classList.contains('hide')) {
                                // Loading animation not active, initialize immediately
                                setTimeout(initializeAutoLogout, 500);
                            }
                        } else {
                            // Fallback for when pageLoadingComplete event doesn't fire
                            window.addEventListener('load', () => {
                                setTimeout(() => {
                                    if (!isInitialized) { // Only initialize if not already done
                                        initializeAutoLogout();
                                    }
                                }, 2000); // 2 second fallback delay
                            });
                        }

                        // Check for inactivity every minute (but only after initialization)
                        setInterval(() => {
                            if (isPageLoading || !isInitialized || isLoggingOut) return; // Skip checks while loading, not initialized, or logging out

                            const now = Date.now();
                            const timeSinceLastActivity = now - lastActivity;

                            if (timeSinceLastActivity >= logoutTime) {
                                console.log('Auto-logout triggered by interval check:', {
                                    timeSinceLastActivity: timeSinceLastActivity,
                                    logoutTime: logoutTime,
                                    timestamp: new Date().toISOString()
                                });
                                performLogout();
                            }
                        }, 60000); // Check every minute
                    })();

                // Custom select enhancement for better dark mode support
                document.addEventListener('DOMContentLoaded', function () {
                    const customSelects = document.querySelectorAll('.custom-select-wrapper .form-select');

                    customSelects.forEach(function (select) {
                        // Apply proper dark mode styling for dropdown options
                        function updateSelectStyling() {
                            const isDarkMode = document.body.getAttribute('data-theme') === 'dark';
                            if (isDarkMode) {
                                // Use CSS variables for consistent dark mode colors
                                const gray300 = getComputedStyle(document.documentElement).getPropertyValue('--gray-300').trim();
                                const gray800 = getComputedStyle(document.documentElement).getPropertyValue('--gray-800').trim();

                                select.style.setProperty('background-color', gray300 || '#d1d5db', 'important');
                                select.style.setProperty('color', gray800 || '#1f2937', 'important');
                            } else {
                                select.style.removeProperty('background-color');
                                select.style.removeProperty('color');
                            }
                        }

                        // Update styling on theme change
                        const observer = new MutationObserver(function (mutations) {
                            mutations.forEach(function (mutation) {
                                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
                                    updateSelectStyling();
                                }
                            });
                        });

                        observer.observe(document.body, {
                            attributes: true,
                            attributeFilter: ['data-theme']
                        });

                        // Initial styling
                        updateSelectStyling();

                        // Handle focus/blur for better UX
                        select.addEventListener('focus', function () {
                            this.closest('.custom-select-wrapper').classList.add('focused');
                        });

                        select.addEventListener('blur', function () {
                            this.closest('.custom-select-wrapper').classList.remove('focused');
                        });
                    });
                });
            <?php endif; ?>
        </script>
        <?php echo $__env->yieldPushContent('scripts'); ?>
    </body>

</html>
<?php /**PATH D:\ONLINE SYSTEMS ORIGINALS\demo perera\test 06-05-2026\resources\views/layouts/app.blade.php ENDPATH**/ ?>