src/ApplicationBundle/Resources/views/inc/central_header.html.twig line 1

Open in your IDE?
  1. {# ═══════════════════════════════════════════════════════════════════════════
  2.    Central Header — HoneyBee Ecosystem
  3.    Scandinavian SaaS design · single source of truth for all public pages
  4.    ═══════════════════════════════════════════════════════════════════════════ #}
  5. {% if not include_html is defined %}
  6.     {% set include_html = 1 %}
  7.     {% if app.request.request.get('skipHTML') != '' %}{% set include_html = 0 %}{% endif %}
  8.     {% if app.request.query.get('skipHTML')   != '' %}{% set include_html = 0 %}{% endif %}
  9. {% endif %}
  10. {% if include_html == 1 %}
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  17.     <meta name="description"
  18.           content="{{ og_description is defined ? og_description : 'HoneyBee connects Business ERP, Project ERP, HoneyCore Edge EMS, AI and mobile field operations in one ecosystem — so business, project, finance, site, asset and energy data work together. ERP from €7.99/user/month; HoneyCore Edge+ deployment from €2,999/site.' }}">
  19.     <meta name="keywords"
  20.           content="HoneyBee, project ERP Germany, EPC ERP, ERP for engineering companies, business ERP for SMEs, ERP Singapore, HoneyCore Edge EMS, HoneyCore Edge+ project quotation software, energy infrastructure intelligence, EMS, SCADA business integration, O&amp;M billing software, DATEV-ready ERP, NIS2-aware software governance">
  21.     <meta name="author" content="HoneyBee Ecosystem">
  22.     <title id="pageTitle">{{ page_title }}</title>
  24.     <meta property="og:title" content="{{ og_title       is defined ? og_title       : page_title }}"/>
  25.     <meta property="og:description"
  26.           content="{{ og_description is defined ? og_description : 'HoneyBee — Operating system for EPC companies, system integrators, energy asset owners, and multi-site industrial businesses.' }}"/>
  27.     <meta property="og:image"
  28.           content="{{ og_image       is defined ? (absolute_url(path('dashboard'))~og_image) : (absolute_url(path('dashboard'))~'honeybee_web_assets/icons/honeybeeicon.svg') }}"/>
  29.     {% set _noindex_routes = ['user_login','sign_up','reset_password','verify_email','verify_otp','reset_new_password','honeybee_otp_verification','hb360_my_estimate','hb360_shared_estimate'] %}
  30.     {% if app.request.get('_route') in _noindex_routes %}
  31.         <meta name="robots" content="noindex, nofollow">
  32.     {% else %}
  33.         <meta name="robots" content="index, follow">
  34.     {% endif %}
  36.     {# ── Favicons ──────────────────────────────────────────────────────────── #}
  37.     <link rel="shortcut icon" type="image/x-icon"
  38.           href="{{ asset('favicon.ico') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  39.     <link rel="apple-touch-icon" sizes="180x180"
  40.           href="{{ asset('apple-icon.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  41.     <link rel="icon" type="image/png" sizes="32x32"
  42.           href="{{ asset('favicon-32x32.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  43.     <link rel="icon" type="image/png" sizes="16x16"
  44.           href="{{ asset('favicon-16x16.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  45.     <link rel="manifest" href="{{ asset('site.webmanifest') }}">
  46.     <link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg') }}" color="#C07D2A">
  47.     <meta name="msapplication-TileColor" content="#1A1D2E">
  48.     <meta name="theme-color" content="#F7F5F0">
  50.     {# ── Fonts ─────────────────────────────────────────────────────────────── #}
  51.     <link rel="preconnect" href="https://fonts.googleapis.com">
  52.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  53.     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Montserrat:wght@500&display=swap"
  54.           rel="stylesheet">
  55.     {# Material Icons served locally (web/css/iconfont/) — no external CDN, so icons never flicker/break when offline or the CDN is slow #}
  56.     <link rel="stylesheet" href="{{ asset('css/iconfont/material-icons.css') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  58.     {# ── Core stylesheets ──────────────────────────────────────────────────── #}
  59.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  60.           integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  61.           crossorigin="anonymous" referrerpolicy="no-referrer">
  62.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  63.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  64.     <link rel="stylesheet"
  65.           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
  66.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css">
  67.     <link rel="stylesheet"
  68.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/bootstrap.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  69.     <link rel="stylesheet"
  70.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/style.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  71.     <link rel="stylesheet" id="dark-theme-css"
  72.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/dark.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  73.           disabled="true">
  74.     <link rel="stylesheet"
  75.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  76.     <link rel="stylesheet"
  77.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/central_responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  78.     {# ── CW1 consolidated central-web spine (base=tokens, pages=marketing, admin=shell).
  79.          Replaces the retired temporary_inline.css; loaded last so tokens/utilities
  80.          are available to every central page. ──────────────────────────────────── #}
  81.     <link rel="stylesheet"
  82.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/base.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  83.     <link rel="stylesheet"
  84.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/pages.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  85.     <link rel="stylesheet"
  86.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/admin.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  88.     {# ── Dev toolbar suppression ───────────────────────────────────────────── #}
  89.     <style>{% if app.session.get('devAdminMode') != 1 %}.sf-toolbar {
  90.             display: none !important
  91.         }{% endif %}</style>
  93.     {# ── Preloader ─────────────────────────────────────────────────────────── #}
  94.     <style>
  95.         #hb-preloader {
  96.             position: fixed;
  97.             top: 0;
  98.             left: 0;
  99.             width: 100%;
  100.             height: 100vh;
  101.             background: #F7F5F0;
  102.             display: flex;
  103.             flex-direction: column;
  104.             justify-content: center;
  105.             align-items: center;
  106.             z-index: 99999;
  107.         }
  109.         .hb-pre-logo {
  110.             display: flex;
  111.             align-items: center;
  112.             gap: 12px;
  113.             margin-bottom: 28px;
  114.         }
  116.         .hb-pre-logo img {
  117.             width: 34px;
  118.             height: 34px;
  119.         }
  121.         .hb-pre-logo span {
  122.             font-family: 'DM Sans', sans-serif;
  123.             font-size: 17px;
  124.             font-weight: 800;
  125.             color: #1A1D2E;
  126.             letter-spacing: -.01em;
  127.         }
  129.         .hb-pre-logo span b {
  130.             color: #C07D2A;
  131.             font-weight: 800;
  132.         }
  134.         .hb-pre-bar-wrap {
  135.             width: 120px;
  136.             height: 2px;
  137.             background: rgba(26, 29, 46, .08);
  138.             border-radius: 2px;
  139.             overflow: hidden;
  140.         }
  142.         .hb-pre-bar {
  143.             height: 100%;
  144.             width: 40%;
  145.             background: #C07D2A;
  146.             border-radius: 2px;
  147.             animation: hb-slide 1.5s ease-in-out infinite;
  148.         }
  150.         @keyframes hb-slide {
  151.             0% {
  152.                 transform: translateX(-100%);
  153.             }
  154.             50% {
  155.                 transform: translateX(250%);
  156.             }
  157.             100% {
  158.                 transform: translateX(-100%);
  159.             }
  160.         }
  161.     </style>
  163.     {# ── Inline JS (runs before body paint) ───────────────────────────────── #}
  164.     <script>
  165.         var logger = (function () {
  166.             var _old = null, pub = {};
  167.             pub.enableLogger = function () {
  168.                 if (_old) window['console']['log'] = _old;
  169.             };
  170.             pub.disableLogger = function () {
  171.                 _old = console.log;
  172.                 window['console']['log'] = function () {
  173.                 };
  174.             };
  175.             return pub;
  176.         }());
  177.         {% if app.session.get('devAdminMode') != 1 %}
  178.         window['console']['log'] = function () {
  179.         };
  180.         {% endif %}
  181.     </script>
  183.     <script>
  184.         function changeTheme(isDark) {
  185.             var darkCss = document.getElementById('dark-theme-css');
  186.             var cb = document.getElementById('theme-toggle-checkbox');
  187.             var track = document.getElementById('hbThemeTrack');
  188.             document.querySelectorAll('img').forEach(function (img) {
  189.                 if (isDark) {
  190.                     img.src = img.src.replace('/honeybee_web_assets/', '/honeybee_web_assets/dark/');
  191.                 } else {
  192.                     img.src = img.src.replace('/honeybee_web_assets/dark/', '/honeybee_web_assets/');
  193.                 }
  194.             });
  195.             if (darkCss) darkCss.disabled = !isDark;
  196.             if (cb) cb.checked = isDark;
  197.             if (track) track.classList.toggle('hb-dark', isDark);
  198.             localStorage.setItem('theme', isDark ? 'dark' : 'light');
  199.         }
  200.     </script>
  202.     <script>if (typeof module === 'object') {
  203.             window.module = module;
  204.             module = undefined;
  205.         }</script>
  207.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  208.             integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  209.     <script data-ad-client="ca-pub-8286883017903771" async
  210.             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  211.     <script>var BaseURL = '{{ url('dashboard') }}';</script>
  212. </head>
  214. {# ── Google Analytics ──────────────────────────────────────────────────────── #}
  215. <script async src="https://www.googletagmanager.com/gtag/js?id=G-V22132YMJ3"></script>
  216. <script>
  217.     window.dataLayer = window.dataLayer || [];
  219.     function gtag() {
  220.         dataLayer.push(arguments);
  221.     }
  223.     gtag('js', new Date());
  224.     gtag('config', 'G-V22132YMJ3');
  225. </script>
  227. {# ── Resolve admin level & consultant flag ────────────────────────────────── #}
  228. {% set BUDDYBEE_ADMIN_LEVEL = 0 %}
  229. {% set isConsultant         = 0 %}
  230. {% if session[UserConstants.USER_ID] is defined %}
  231.     {% set isConsultant         = session[UserConstants.IS_CONSULTANT]        is defined ? session[UserConstants.IS_CONSULTANT]        : 0 %}
  232.     {% set BUDDYBEE_ADMIN_LEVEL = session[UserConstants.BUDDYBEE_ADMIN_LEVEL] is defined ? session[UserConstants.BUDDYBEE_ADMIN_LEVEL] : 0 %}
  233. {% endif %}
  235. {# Single <body> tag — classes set in one place, no duplicate tags #}
  236. {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  237. <body class="buddybee_body has_admin_bar body-mask">
  238. {% elseif session[UserConstants.USER_ID] is defined %}
  239. <body class="buddybee_body body-mask">
  240. {% else %}
  241. <body class="body-mask">
  242. {% endif %}
  244. {# ── Preloader ─────────────────────────────────────────────────────────────── #}
  245. <div id="hb-preloader">
  246.     <div class="hb-pre-logo">
  247.         <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  248.              alt="HoneyBee">
  249.         <span>Honey<b>Bee</b></span>
  250.     </div>
  251.     <div class="hb-pre-bar-wrap">
  252.         <div class="hb-pre-bar"></div>
  253.     </div>
  254. </div>
  256. {# ── Processing overlay (shown during AJAX) ────────────────────────────────── #}
  257. <div id="buddybee_processing_loader">
  258.     <div><p>Processing</p></div>
  259. </div>
  261. {# ══════════════════════════════ NAVBAR ═══════════════════════════════════════
  262.    Scandinavian navbar: glass-morphism, fixed, minimal, fully responsive
  263.    ═══════════════════════════════════════════════════════════════════════════ #}
  264. <style>
  265.     /* ── Design tokens ──────────────────────────────────────────────────────────── */
  266.     :root {
  267.         --hb-ink: #1A1D2E;
  268.         --hb-ink-2: #252840;
  269.         --hb-amber: #C07D2A;
  270.         --hb-amber-lt: #D4954A;
  271.         --hb-muted: #6B6E7F;
  272.         --hb-border: rgba(26, 29, 46, .08);
  273.         --hb-border-md: rgba(26, 29, 46, .14);
  274.         --hb-cream: #F7F5F0;
  275.         --hb-white: #FFFFFF;
  276.         --hb-shadow: 0 2px 20px rgba(26, 29, 46, .07);
  277.         --hb-shadow-lg: 0 8px 32px rgba(26, 29, 46, .10);
  278.         --hb-radius: 10px;
  279.         --hb-font: 'DM Sans', 'Gilroy', system-ui, sans-serif;
  280.     }
  282.     /* ── Navbar shell ─────────────────────────────────────────────────────────── */
  283.     .hb-navbar {
  284.         position: fixed;
  285.         top: 0;
  286.         left: 0;
  287.         right: 0;
  288.         z-index: 9999;
  289.         background: rgba(247, 245, 240, .97);
  290.         backdrop-filter: blur(20px) saturate(180%);
  291.         -webkit-backdrop-filter: blur(20px) saturate(180%);
  292.         border-bottom: 1px solid var(--hb-border);
  293.         transition: box-shadow .2s, border-color .2s;
  294.         font-family: var(--hb-font);
  295.     }
  297.     .hb-navbar.hb-scrolled {
  298.         box-shadow: var(--hb-shadow);
  299.         border-color: var(--hb-border-md);
  300.     }
  302.     /* ── Inner container ──────────────────────────────────────────────────────── */
  303.     .hb-nav-inner {
  304.         max-width: 1280px;
  305.         margin: 0 auto;
  306.         padding: 0 28px;
  307.         height: 64px;
  308.         display: flex;
  309.         align-items: center;
  310.         gap: 24px;
  311.     }
  313.     /* ── Brand ────────────────────────────────────────────────────────────────── */
  314.     .hb-brand {
  315.         display: flex;
  316.         align-items: center;
  317.         gap: 9px;
  318.         text-decoration: none;
  319.         flex-shrink: 0;
  320.     }
  322.     .hb-brand img {
  323.         height: 30px;
  324.         width: auto;
  325.     }
  327.     .hb-brand-name {
  328.         font-size: 15.5px;
  329.         font-weight: 800;
  330.         color: var(--hb-ink);
  331.         letter-spacing: -.01em;
  332.         line-height: 1;
  333.     }
  335.     .hb-brand-name b {
  336.         color: var(--hb-amber);
  337.         font-weight: 800;
  338.     }
  340.     /* ── Nav links ────────────────────────────────────────────────────────────── */
  341.     .hb-links {
  342.         display: flex;
  343.         align-items: center;
  344.         gap: 2px;
  345.         list-style: none;
  346.         margin: 0;
  347.         padding: 0;
  348.         flex: 1;
  349.     }
  351.     .hb-links .hb-link > a,
  352.     .hb-links .hb-drop > a {
  353.         display: inline-flex;
  354.         align-items: center;
  355.         gap: 5px;
  356.         padding: 7px 11px;
  357.         font-size: 13.5px;
  358.         font-weight: 500;
  359.         color: var(--hb-muted);
  360.         text-decoration: none;
  361.         border-radius: 7px;
  362.         white-space: nowrap;
  363.         transition: color .15s, background .15s;
  364.         position: relative;
  365.     }
  367.     .hb-links .hb-link > a:hover,
  368.     .hb-links .hb-drop > a:hover {
  369.         color: var(--hb-ink);
  370.         background: rgba(26, 29, 46, .04);
  371.     }
  373.     .hb-links .hb-link > a.active {
  374.         color: var(--hb-ink);
  375.         font-weight: 600;
  376.     }
  378.     .hb-links .hb-link > a.active::after {
  379.         content: '';
  380.         position: absolute;
  381.         bottom: 2px;
  382.         left: 11px;
  383.         right: 11px;
  384.         height: 1.5px;
  385.         background: var(--hb-amber);
  386.         border-radius: 2px;
  387.     }
  389.     /* ── Dropdown ─────────────────────────────────────────────────────────────── */
  390.     .hb-drop {
  391.         position: relative;
  392.     }
  394.     .hb-caret {
  395.         font-size: 9px;
  396.         opacity: .5;
  397.         transition: transform .2s;
  398.     }
  400.     .hb-drop:hover .hb-caret {
  401.         transform: rotate(180deg);
  402.     }
  404.     .hb-dd-menu {
  405.         position: absolute;
  406.         top: 100%;
  407.         left: 50%;
  408.         transform: translateX(-50%) translateY(0);
  409.         min-width: 195px;
  410.         background: var(--hb-white);
  411.         border: 1px solid var(--hb-border-md);
  412.         border-radius: var(--hb-radius);
  413.         box-shadow: var(--hb-shadow-lg);
  414.         padding: 6px;
  415.         padding-top: 12px; /* gap lives inside → no dead zone */
  416.         opacity: 0;
  417.         pointer-events: none;
  418.         transition: opacity .16s, transform .16s;
  419.         transition-delay: 0s, 0s; /* show instantly */
  420.         list-style: none;
  421.         margin: 0;
  422.         z-index: 10001;
  423.     }
  425.     .hb-drop:hover .hb-dd-menu,
  426.     .hb-dd-menu:hover {
  427.         opacity: 1;
  428.         pointer-events: all;
  429.         transform: translateX(-50%) translateY(0);
  430.     }
  432.     .hb-drop:not(:hover) .hb-dd-menu:not(:hover) {
  433.         transition-delay: .12s;
  434.     }
  436.     /* slight lag on hide */
  437.     .hb-dd-menu li a {
  438.         display: block;
  439.         padding: 8px 12px;
  440.         font-size: 13px;
  441.         font-weight: 500;
  442.         color: var(--hb-muted);
  443.         text-decoration: none;
  444.         border-radius: 6px;
  445.         transition: color .12s, background .12s;
  446.     }
  448.     .hb-dd-menu li a:hover {
  449.         color: var(--hb-ink);
  450.         background: rgba(26, 29, 46, .04);
  451.     }
  453.     .hb-dd-menu li a.active {
  454.         color: var(--hb-ink);
  455.         font-weight: 600;
  456.     }
  458.     .hb-dd-div {
  459.         height: 1px;
  460.         background: var(--hb-border);
  461.         margin: 4px 6px;
  462.     }
  464.     /* ── Right side ───────────────────────────────────────────────────────────── */
  465.     .hb-nav-right {
  466.         display: flex;
  467.         align-items: center;
  468.         gap: 6px;
  469.         flex-shrink: 0;
  470.     }
  472.     /* ── Language switcher ────────────────────────────────────────────────────── */
  473.     .hb-lang {
  474.         position: relative;
  475.     }
  477.     .hb-lang-btn {
  478.         display: flex;
  479.         align-items: center;
  480.         gap: 5px;
  481.         padding: 6px 10px;
  482.         font-size: 12.5px;
  483.         font-weight: 600;
  484.         color: var(--hb-muted);
  485.         background: none;
  486.         border: 1px solid var(--hb-border);
  487.         border-radius: 7px;
  488.         cursor: pointer;
  489.         transition: all .15s;
  490.         font-family: var(--hb-font);
  491.     }
  493.     .hb-lang-btn:hover {
  494.         color: var(--hb-ink);
  495.         border-color: var(--hb-border-md);
  496.         background: rgba(26, 29, 46, .03);
  497.     }
  499.     .hb-lang-menu {
  500.         position: absolute;
  501.         top: 100%;
  502.         right: 0;
  503.         min-width: 155px;
  504.         background: var(--hb-white);
  505.         border: 1px solid var(--hb-border-md);
  506.         border-radius: var(--hb-radius);
  507.         box-shadow: var(--hb-shadow-lg);
  508.         padding: 6px;
  509.         padding-top: 10px; /* gap lives inside → no dead zone */
  510.         opacity: 0;
  511.         pointer-events: none;
  512.         transform: translateY(0);
  513.         transition: opacity .15s;
  514.         z-index: 10001;
  515.         list-style: none;
  516.         margin: 0;
  517.     }
  519.     .hb-lang:hover .hb-lang-menu,
  520.     .hb-lang-menu:hover {
  521.         opacity: 1;
  522.         pointer-events: all;
  523.     }
  525.     .hb-lang:not(:hover) .hb-lang-menu:not(:hover) {
  526.         transition-delay: .12s;
  527.     }
  529.     .hb-lang-menu li a {
  530.         display: block;
  531.         padding: 7px 12px;
  532.         font-size: 13px;
  533.         font-weight: 500;
  534.         color: var(--hb-muted);
  535.         text-decoration: none;
  536.         border-radius: 6px;
  537.         transition: all .12s;
  538.     }
  540.     .hb-lang-menu li a:hover {
  541.         color: var(--hb-ink);
  542.         background: rgba(26, 29, 46, .04);
  543.     }
  545.     /* ── User dropdown ────────────────────────────────────────────────────────── */
  546.     .hb-user {
  547.         position: relative;
  548.     }
  550.     .hb-user-btn {
  551.         display: flex;
  552.         align-items: center;
  553.         gap: 7px;
  554.         background: none;
  555.         border: none;
  556.         cursor: pointer;
  557.         padding: 4px 6px;
  558.         border-radius: 8px;
  559.         transition: background .15s;
  560.     }
  562.     .hb-user-btn:hover {
  563.         background: rgba(26, 29, 46, .05);
  564.     }
  566.     .hb-user-avatar {
  567.         width: 30px;
  568.         height: 30px;
  569.         border-radius: 50%;
  570.         background-size: cover !important;
  571.         background-position: center !important;
  572.         border: 1.5px solid var(--hb-border-md);
  573.         flex-shrink: 0;
  574.     }
  576.     .hb-user-name {
  577.         font-size: 13px;
  578.         font-weight: 600;
  579.         color: var(--hb-ink);
  580.         max-width: 110px;
  581.         white-space: nowrap;
  582.         overflow: hidden;
  583.         text-overflow: ellipsis;
  584.     }
  586.     .hb-user-menu {
  587.         position: absolute;
  588.         top: 100%;
  589.         right: 0;
  590.         min-width: 185px;
  591.         background: var(--hb-white);
  592.         border: 1px solid var(--hb-border-md);
  593.         border-radius: var(--hb-radius);
  594.         box-shadow: var(--hb-shadow-lg);
  595.         padding: 6px;
  596.         padding-top: 12px; /* gap lives inside → no dead zone */
  597.         opacity: 0;
  598.         pointer-events: none;
  599.         transform: translateY(0);
  600.         transition: opacity .15s;
  601.         z-index: 10001;
  602.         list-style: none;
  603.         margin: 0;
  604.     }
  606.     .hb-user:hover .hb-user-menu {
  607.         opacity: 1;
  608.         pointer-events: all;
  609.     }
  611.     .hb-user:not(:hover) .hb-user-menu:not(:hover) {
  612.         transition-delay: .12s;
  613.     }
  615.     .hb-user-menu li a {
  616.         display: flex;
  617.         align-items: center;
  618.         gap: 8px;
  619.         padding: 8px 12px;
  620.         font-size: 13px;
  621.         font-weight: 500;
  622.         color: var(--hb-muted);
  623.         text-decoration: none;
  624.         border-radius: 6px;
  625.         transition: all .12s;
  626.     }
  628.     .hb-user-menu li a:hover {
  629.         color: var(--hb-ink);
  630.         background: rgba(26, 29, 46, .04);
  631.     }
  633.     .hb-user-menu li a i {
  634.         font-size: 12px;
  635.         width: 14px;
  636.         opacity: .5;
  637.     }
  639.     .hb-u-div {
  640.         height: 1px;
  641.         background: var(--hb-border);
  642.         margin: 4px 6px;
  643.     }
  645.     /* ── Auth + Companies buttons ─────────────────────────────────────────────── */
  646.     .hb-btn-login {
  647.         padding: 7px 16px;
  648.         font-size: 13px;
  649.         font-weight: 600;
  650.         color: var(--hb-ink);
  651.         background: none;
  652.         border: 1.5px solid var(--hb-border-md);
  653.         border-radius: 8px;
  654.         text-decoration: none;
  655.         transition: all .15s;
  656.     }
  658.     .hb-btn-login:hover {
  659.         color: var(--hb-ink);
  660.         border-color: var(--hb-ink);
  661.         background: rgba(26, 29, 46, .03);
  662.     }
  664.     .hb-btn-signup {
  665.         padding: 7px 16px;
  666.         font-size: 13px;
  667.         font-weight: 700;
  668.         color: #fff;
  669.         background: var(--hb-ink);
  670.         border: 1.5px solid transparent;
  671.         border-radius: 8px;
  672.         text-decoration: none;
  673.         transition: all .15s;
  674.     }
  676.     .hb-btn-signup:hover {
  677.         color: #fff;
  678.         background: var(--hb-ink-2);
  679.         box-shadow: 0 4px 14px rgba(26, 29, 46, .2);
  680.     }
  682.     .hb-btn-companies {
  683.         display: inline-flex;
  684.         align-items: center;
  685.         gap: 6px;
  686.         padding: 7px 15px;
  687.         font-size: 13px;
  688.         font-weight: 700;
  689.         color: #fff;
  690.         background: var(--hb-amber);
  691.         border: none;
  692.         border-radius: 8px;
  693.         text-decoration: none;
  694.         transition: all .15s;
  695.     }
  697.     .hb-btn-companies:hover {
  698.         color: #fff;
  699.         background: var(--hb-amber-lt);
  700.         box-shadow: 0 4px 14px rgba(192, 125, 42, .28);
  701.     }
  703.     /* ── Switch-user panel (admin only) ──────────────────────────────────────── */
  704.     .hb-switch {
  705.         position: relative;
  706.     }
  708.     .hb-switch-btn {
  709.         padding: 6px 11px;
  710.         font-size: 12px;
  711.         font-weight: 600;
  712.         color: var(--hb-muted);
  713.         background: none;
  714.         border: 1px solid var(--hb-border);
  715.         border-radius: 7px;
  716.         cursor: pointer;
  717.         font-family: var(--hb-font);
  718.         transition: all .15s;
  719.     }
  721.     .hb-switch-btn:hover {
  722.         color: var(--hb-ink);
  723.         border-color: var(--hb-border-md);
  724.     }
  726.     .hb-switch-panel {
  727.         position: absolute;
  728.         top: 100%;
  729.         right: 0;
  730.         min-width: 225px;
  731.         background: var(--hb-white);
  732.         border: 1px solid var(--hb-border-md);
  733.         border-radius: var(--hb-radius);
  734.         box-shadow: var(--hb-shadow-lg);
  735.         padding: 10px;
  736.         padding-top: 14px; /* gap lives inside → no dead zone */
  737.         opacity: 0;
  738.         pointer-events: none;
  739.         transform: translateY(0);
  740.         transition: opacity .15s;
  741.         z-index: 10001;
  742.         list-style: none;
  743.         margin: 0;
  744.     }
  746.     .hb-switch:hover .hb-switch-panel {
  747.         opacity: 1;
  748.         pointer-events: all;
  749.     }
  751.     .hb-switch:not(:hover) .hb-switch-panel:not(:hover) {
  752.         transition-delay: .12s;
  753.     }
  755.     .hb-switch-panel li a {
  756.         display: block;
  757.         padding: 8px 10px;
  758.         font-size: 13px;
  759.         font-weight: 500;
  760.         color: var(--hb-muted);
  761.         text-decoration: none;
  762.         border-radius: 6px;
  763.         transition: all .12s;
  764.     }
  766.     .hb-switch-panel li a:hover {
  767.         color: var(--hb-ink);
  768.         background: rgba(26, 29, 46, .04);
  769.     }
  771.     .hb-sw-div {
  772.         height: 1px;
  773.         background: var(--hb-border);
  774.         margin: 6px 0;
  775.     }
  777.     .hb-switch-panel select {
  778.         width: 100%;
  779.         font-size: 12px;
  780.         font-family: var(--hb-font);
  781.         border: 1px solid var(--hb-border-md);
  782.         border-radius: 6px;
  783.         padding: 6px 8px;
  784.         color: var(--hb-ink);
  785.         background: var(--hb-cream);
  786.     }
  788.     /* ── Theme toggle ─────────────────────────────────────────────────────────── */
  789.     .hb-theme {
  790.         display: flex;
  791.         align-items: center;
  792.         gap: 6px;
  793.         padding: 0 2px;
  794.     }
  796.     .hb-theme-img {
  797.         width: 14px;
  798.         height: 14px;
  799.         opacity: .45;
  800.         display: block;
  801.     }
  803.     #theme-toggle-checkbox {
  804.         display: none;
  805.     }
  807.     .hb-theme-track {
  808.         position: relative;
  809.         width: 34px;
  810.         height: 19px;
  811.         background: rgba(26, 29, 46, .14);
  812.         border-radius: 10px;
  813.         cursor: pointer;
  814.         transition: background .2s;
  815.         flex-shrink: 0;
  816.         display: block;
  817.     }
  819.     .hb-theme-track::after {
  820.         content: '';
  821.         position: absolute;
  822.         top: 2px;
  823.         left: 2px;
  824.         width: 15px;
  825.         height: 15px;
  826.         background: white;
  827.         border-radius: 50%;
  828.         box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  829.         transition: transform .2s;
  830.     }
  832.     .hb-theme-track.hb-dark {
  833.         background: var(--hb-amber);
  834.     }
  836.     .hb-theme-track.hb-dark::after {
  837.         transform: translateX(15px);
  838.     }
  840.     /* ── Mobile hamburger ─────────────────────────────────────────────────────── */
  841.     .hb-toggler {
  842.         display: none;
  843.         background: none;
  844.         border: none;
  845.         cursor: pointer;
  846.         padding: 8px;
  847.         flex-direction: column;
  848.         gap: 5px;
  849.         border-radius: 7px;
  850.         margin-left: auto;
  851.         flex-shrink: 0;
  852.         transition: background .15s;
  853.     }
  855.     .hb-toggler:hover {
  856.         background: rgba(26, 29, 46, .06);
  857.     }
  859.     .hb-toggler span {
  860.         display: block;
  861.         width: 21px;
  862.         height: 1.5px;
  863.         background: var(--hb-ink);
  864.         border-radius: 2px;
  865.         transition: all .22s;
  866.     }
  868.     .hb-toggler.hb-open span:nth-child(1) {
  869.         transform: rotate(45deg) translate(4.5px, 4.5px);
  870.     }
  872.     .hb-toggler.hb-open span:nth-child(2) {
  873.         opacity: 0;
  874.         transform: scaleX(0);
  875.     }
  877.     .hb-toggler.hb-open span:nth-child(3) {
  878.         transform: rotate(-45deg) translate(4.5px, -4.5px);
  879.     }
  881.     /* ── Responsive ───────────────────────────────────────────────────────────── */
  882.     @media (max-width: 1024px) {
  883.         .hb-toggler {
  884.             display: flex;
  885.         }
  887.         .hb-links, .hb-nav-right {
  888.             display: none;
  889.         }
  891.         .hb-nav-inner {
  892.             height: 56px;
  893.         }
  895.         .hb-navbar.hb-open .hb-nav-inner {
  896.             height: auto;
  897.             flex-wrap: wrap;
  898.             padding-top: 12px;
  899.             padding-bottom: 14px;
  900.             align-items: flex-start;
  901.         }
  903.         .hb-navbar.hb-open .hb-links {
  904.             display: flex;
  905.             flex-direction: column;
  906.             align-items: flex-start;
  907.             width: 100%;
  908.             flex: 0 0 100%;
  909.             gap: 2px; /* flex: 0 0 100% overrides base flex:1 to force row wrap */
  910.         }
  912.         .hb-navbar.hb-open .hb-links .hb-link,
  913.         .hb-navbar.hb-open .hb-links .hb-drop {
  914.             width: 100%;
  915.         }
  917.         .hb-navbar.hb-open .hb-links .hb-link > a,
  918.         .hb-navbar.hb-open .hb-links .hb-drop > a {
  919.             width: 100%;
  920.             justify-content: space-between;
  921.         }
  923.         .hb-navbar.hb-open .hb-dd-menu {
  924.             position: static;
  925.             transform: none;
  926.             opacity: 0;
  927.             pointer-events: none;
  928.             display: none;
  929.             box-shadow: none;
  930.             border: none;
  931.             background: rgba(26, 29, 46, .03);
  932.             border-radius: 7px;
  933.             margin: 2px 0 2px 12px;
  934.         }
  936.         .hb-navbar.hb-open .hb-drop.hb-mob-open .hb-dd-menu {
  937.             display: block;
  938.             opacity: 1;
  939.             pointer-events: all;
  940.         }
  942.         .hb-navbar.hb-open .hb-nav-right {
  943.             display: flex;
  944.             flex-wrap: wrap;
  945.             width: 100%;
  946.             flex: 0 0 100%;
  947.             gap: 8px;
  948.             padding-top: 12px;
  949.             border-top: 1px solid var(--hb-border);
  950.             margin-top: 4px;
  951.         }
  952.     }
  954.     /* ── Body offset for fixed navbar ─────────────────────────────────────────── */
  955.     body {
  956.         padding-top: 64px;
  957.     }
  959.     @media (max-width: 1024px) {
  960.         body {
  961.             padding-top: 56px;
  962.         }
  963.     }
  965.     /* ── Processing loader ────────────────────────────────────────────────────── */
  966.     #buddybee_processing_loader {
  967.         position: fixed;
  968.         inset: 0;
  969.         background: rgba(247, 245, 240, .88);
  970.         backdrop-filter: blur(4px);
  971.         z-index: 999999;
  972.         display: none;
  973.         align-items: center;
  974.         justify-content: center;
  975.     }
  977.     #buddybee_processing_loader div {
  978.         background: var(--hb-white);
  979.         border-radius: 14px;
  980.         padding: 28px 44px;
  981.         box-shadow: 0 12px 40px rgba(26, 29, 46, .12);
  982.         text-align: center;
  983.     }
  985.     #buddybee_processing_loader p {
  986.         color: var(--hb-ink);
  987.         font-weight: 700;
  988.         font-size: 12px;
  989.         letter-spacing: .1em;
  990.         text-transform: uppercase;
  991.         margin: 0;
  992.         font-family: var(--hb-font);
  993.     }
  995.     a:hover {
  996.         text-decoration: none;
  997.     }
  998. </style>
  1000. <nav class="hb-navbar" id="hbNavbar">
  1001.     <div class="hb-nav-inner">
  1003.         {# Brand #}
  1004.         <a class="hb-brand" href="{{ url('dashboard') }}">
  1005.             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  1006.                  alt="HoneyBee">
  1007.             <span class="hb-brand-name">Honey<b>Bee</b></span>
  1008.         </a>
  1010.         {# Mobile hamburger #}
  1011.         <button class="hb-toggler" id="hbToggler" aria-label="Open menu" type="button">
  1012.             <span></span><span></span><span></span>
  1013.         </button>
  1015.         {# Primary navigation #}
  1016.         <ul class="hb-links">
  1017.             <li class="hb-drop">
  1018.                 <a href="#">Platform <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1019.                 <ul class="hb-dd-menu">
  1020.                     <li><a href="{{ url('honeybee_product') }}"
  1021.                            class="{{ app.request.get('_route') == 'honeybee_product' ? 'active' : '' }}">Platform overview</a></li>
  1022.                     <li><a href="{{ url('honeybee_project_erp') }}"
  1023.                            class="{{ app.request.get('_route') == 'honeybee_project_erp' ? 'active' : '' }}">Project ERP</a></li>
  1024.                     <li><a href="{{ url('honeybee_business_erp') }}"
  1025.                            class="{{ app.request.get('_route') == 'honeybee_business_erp' ? 'active' : '' }}">Business ERP</a></li>
  1026.                     <li><a href="{{ url('honeybee_edge') }}"
  1027.                            class="{{ app.request.get('_route') == 'honeybee_edge' ? 'active' : '' }}">HoneyCore Edge EMS</a></li>
  1028.                     <li><a href="{{ url('honeybee_edge_projects') }}"
  1029.                            class="{{ app.request.get('_route') == 'honeybee_edge_projects' ? 'active' : '' }}">HoneyCore Edge+ Projects</a></li>
  1030.                 </ul>
  1031.             </li>
  1032.             <li class="hb-link">
  1033.                 <a href="{{ url('honeybee_solutions') }}"
  1034.                    class="{{ app.request.get('_route') == 'honeybee_solutions' ? 'active' : '' }}">Solutions</a>
  1035.             </li>
  1036.             <li class="hb-drop">
  1037.                 <a href="#">Tools <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1038.                 <ul class="hb-dd-menu">
  1039.                     <li><a href="{{ url('honeybee_tool', {'slug': 'rooftop-estimate'}) }}"
  1040.                            class="{{ app.request.get('slug') == 'rooftop-estimate' ? 'active' : '' }}">Instant Solar Estimate</a></li>
  1041.                     {% if app.session.get('userType') == 8 %}
  1042.                     <li><a href="{{ url('hb360_my_estimate') }}"
  1043.                            class="{{ app.request.get('_route') == 'hb360_my_estimate' ? 'active' : '' }}">My Solar Estimates</a></li>
  1044.                     {% endif %}
  1045.                     <li><a href="{{ url('honeybee_tool', {'slug': 'cost-leakage-calculator'}) }}"
  1046.                            class="{{ app.request.get('slug') == 'cost-leakage-calculator' ? 'active' : '' }}">Project Cost Leakage Calculator</a></li>
  1047.                     <li><a href="{{ url('honeybee_tool', {'slug': 'roi-calculator'}) }}"
  1048.                            class="{{ app.request.get('slug') == 'roi-calculator' ? 'active' : '' }}">ERP ROI Calculator</a></li>
  1049.                     <li><a href="{{ url('honeybee_tool', {'slug': 'site-assessment-estimator'}) }}"
  1050.                            class="{{ app.request.get('slug') == 'site-assessment-estimator' ? 'active' : '' }}">HoneyCore Site Assessment Estimator</a></li>
  1051.                 </ul>
  1052.             </li>
  1053.             <li class="hb-link">
  1054.                 <a href="{{ url('honeybee_pricing') }}"
  1055.                    class="{{ app.request.get('_route') == 'honeybee_pricing' ? 'active' : '' }} trn"
  1056.                    data-trn-key="_PRICING_">Pricing</a>
  1057.             </li>
  1058.             <li class="hb-link">
  1059.                 <a href="{{ url('honeybee_partners') }}"
  1060.                    class="{{ app.request.get('_route') == 'honeybee_partners' ? 'active' : '' }}">Partners</a>
  1061.             </li>
  1062.             <li class="hb-link">
  1063.                 <a href="{{ url('honeybee_trust') }}"
  1064.                    class="{{ app.request.get('_route') == 'honeybee_trust' ? 'active' : '' }}">Trust</a>
  1065.             </li>
  1066.             <li class="hb-drop">
  1067.                 <a href="#">Company <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1068.                 <ul class="hb-dd-menu">
  1069.                     <li><a href="{{ url('honeybee_about_us') }}"
  1070.                            class="{{ app.request.get('_route') == 'honeybee_about_us' ? 'active' : '' }}">About</a></li>
  1071.                     <li><a href="{{ url('honeybee_experience') }}"
  1072.                            class="{{ app.request.get('_route') == 'honeybee_experience' ? 'active' : '' }}">Experience</a></li>
  1073.                     <li><a href="{{ url('honeybee_investor') }}"
  1074.                            class="{{ app.request.get('_route') == 'honeybee_investor' ? 'active' : '' }}">Investor Snapshot</a></li>
  1075.                     <li><a href="{{ url('honeybee_FAQ') }}"
  1076.                            class="{{ app.request.get('_route') == 'honeybee_FAQ' ? 'active' : '' }}">FAQ</a></li>
  1077.                     <li><a href="{{ url('honeybee_contact') }}"
  1078.                            class="{{ app.request.get('_route') == 'honeybee_contact' ? 'active' : '' }}">Contact</a>
  1079.                     </li>
  1080.                 </ul>
  1081.             </li>
  1082.         </ul>
  1084.         {# Right-side controls #}
  1085.         <div class="hb-nav-right">
  1087.             {# Language switcher #}
  1088.             <div class="hb-lang">
  1089.                 <button class="hb-lang-btn" type="button">
  1090.                     <i class="fa-solid fa-globe" style="font-size:12px"></i>
  1091.                     <span class="curr_locale_text">en</span>
  1092.                     <i class="fa-solid fa-chevron-down" style="font-size:8px;opacity:.5"></i>
  1093.                 </button>
  1094.                 <ul class="hb-lang-menu">
  1095.                     <li><a href="#" class="locale_changer en" data-locale="en">🇬🇧 English</a></li>
  1096.                     <li><a href="#" class="locale_changer bn" data-locale="bn">🇧🇩 বাংলা</a></li>
  1097.                     <li><a href="#" class="locale_changer it" data-locale="it">🇮🇹 Italiano</a></li>
  1098.                     <li><a href="#" class="locale_changer de" data-locale="de">🇩🇪 Deutsch</a></li>
  1099.                     <li><a href="#" class="locale_changer fr" data-locale="fr">🇫🇷 Français</a></li>
  1100.                     <li><a href="#" class="locale_changer sp" data-locale="sp">🇪🇸 Español</a></li>
  1101.                     <li><a href="#" class="locale_changer cn" data-locale="cn">🇨🇳 中文</a></li>
  1102.                 </ul>
  1103.             </div>
  1105.             {# Admin only: switch user #}
  1106.             {% if session[UserConstants.USER_ID] is defined and (BUDDYBEE_ADMIN_LEVEL >= 1 or session['actualUserIsAdmin'] is defined) %}
  1107.                 <div class="hb-switch">
  1108.                     <button class="hb-switch-btn" type="button">Switch User</button>
  1109.                     <ul class="hb-switch-panel">
  1110.                         <li>
  1111.                             <a href="{{ absolute_url(path('view_as_user_central')) }}/{{ session['actualUserId'] is defined ? session['actualUserId'] : session['userId'] }}">
  1112.                                 ↩ Back to Mine
  1113.                             </a>
  1114.                         </li>
  1115.                         <li class="hb-sw-div"></li>
  1116.                         <li style="padding:2px 0"><select name="viewAsId" id="viewAsId"></select></li>
  1117.                     </ul>
  1118.                 </div>
  1119.             {% endif %}
  1121.             {% if session[UserConstants.USER_ID] is defined %}
  1123.                 {# Authenticated: user avatar + dropdown #}
  1124.                 <div class="hb-user">
  1125.                     <button class="hb-user-btn" type="button">
  1126.                         <div class="hb-user-avatar"
  1127.                                 {% if session[UserConstants.USER_IMAGE] != '' and session[UserConstants.USER_IMAGE] is not null %}
  1128.                                     style="background:url('{{ url('dashboard') }}{{ session[UserConstants.USER_IMAGE] }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1129.                                 {% else %}
  1130.                                     style="background:url('{{ url('dashboard') }}honeybee_web_assets/images/profiles/profile.png?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1131.                                 {% endif %}
  1132.                         ></div>
  1133.                         <span class="hb-user-name">{{ session[UserConstants.USER_NAME] }}</span>
  1134.                         <i class="fa-solid fa-chevron-down" style="font-size:9px;color:var(--hb-muted);opacity:.55"></i>
  1135.                     </button>
  1136.                     <ul class="hb-user-menu">
  1137.                         <li>
  1138.                             <a href="{{ url('honeybee_my_freelancer_profile') }}"
  1139.                                class="{{ app.request.get('_route') == 'honeybee_my_freelancer_profile' ? 'active' : '' }}">
  1140.                                 <i class="fa-regular fa-circle-user"></i> Profile
  1141.                             </a>
  1142.                         </li>
  1143.                         <li>
  1144.                             <a href="{{ url('ticket_list') }}"
  1145.                                class="{{ app.request.get('_route') == 'ticket_list' ? 'active' : '' }}">
  1146.                                 <i class="fa-regular fa-ticket"></i> <span class="trn" data-trn-key="_MY_TICKETS_">My Tickets</span>
  1147.                             </a>
  1148.                         </li>
  1149.                         <li>
  1150.                             <a href="{{ url('central_landing') }}"
  1151.                                class="{{ app.request.get('_route') == 'central_landing' ? 'active' : '' }}">
  1152.                                 <i class="fas fa-border-all"></i> <span class="trn" data-trn-key="_MY_COMPANIES_">My Companies</span>
  1153.                             </a>
  1154.                         </li>
  1155.                         {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  1156.                             <li class="hb-u-div"></li>
  1157.                             <li>
  1158.                                 <a href="{{ url('super_admin_command_center') }}"
  1159.                                    class="{{ app.request.get('_route') == 'super_admin_command_center' ? 'active' : '' }}">
  1160.                                     <i class="fa-solid fa-gauge-high"></i> Super Admin
  1161.                                 </a>
  1162.                             </li>
  1163.                             <li class="hb-u-div"></li>
  1164.                             <li>
  1165.                                 <a href="{{ url('datev_home') }}"
  1166.                                    class="{{ app.request.get('_route') == 'datev_home' ? 'active' : '' }}">
  1167.                                     <i class="fa-solid fa-gauge-high"></i> Datev Control
  1168.                                 </a>
  1169.                             </li>
  1171.                         {% endif %}
  1172.                         {% if BUDDYBEE_ADMIN_LEVEL > 1 %}
  1173.                             <li class="hb-u-div"></li>
  1174.                             <li>
  1175.                                 <a href="{{ url('admin_demo_pending_list') }}"
  1176.                                    class="{{ app.request.get('_route') in ['admin_demo_pending_list','admin_demo_request_detail'] ? 'active' : '' }}">
  1177.                                     <i class="fa-solid fa-calendar-check"></i> Demo Requests
  1178.                                 </a>
  1179.                             </li>
  1180.                             <li>
  1181.                                 <a href="{{ url('admin_demo_all_list') }}"
  1182.                                    class="{{ app.request.get('_route') == 'admin_demo_all_list' ? 'active' : '' }}">
  1183.                                     <i class="fa-solid fa-list-check"></i> All Bookings
  1184.                                 </a>
  1185.                             </li>
  1186.                         {% endif %}
  1187.                         <li class="hb-u-div"></li>
  1188.                         <li>
  1189.                             <a href="{{ url('user_logout') }}" style="color:#B04030">
  1190.                                 <i class="fa-solid fa-right-from-bracket"></i> Logout
  1191.                             </a>
  1192.                         </li>
  1193.                     </ul>
  1194.                 </div>
  1196.                 {# Companies shortcut #}
  1197.                 <a href="{{ url('central_landing') }}" class="hb-btn-companies trn" data-trn-key="_COMPANIES_">
  1198.                     <i class="fa-solid fa-building" style="font-size:11px"></i>
  1199.                     <span>Companies</span>
  1200.                 </a>
  1202.                 {# Book Demo CTA (authenticated) #}
  1203.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1204.                     Demo</a>
  1206.             {% else %}
  1208.                 {# Guest: login + get started + book demo #}
  1209.                 <a href="{{ url('user_login') }}" class="hb-btn-login trn" data-trn-key="_LOGIN_">Login</a>
  1210.                 <a href="{{ url('sign_up') }}" class="hb-btn-signup trn" data-trn-key="_CREATE_ACCOUNT_">Get Started</a>
  1211.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1212.                     Demo</a>
  1214.             {% endif %}
  1216.             {# Dark / Light mode toggle #}
  1217.             {#            <div class="hb-theme"> #}
  1218.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/sun.svg')) }}" alt="Light mode"> #}
  1219.             {#                <input type="checkbox" id="theme-toggle-checkbox"> #}
  1220.             {#                <label for="theme-toggle-checkbox" class="hb-theme-track" id="hbThemeTrack"></label> #}
  1221.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/moon.svg')) }}" alt="Dark mode"> #}
  1222.             {#            </div> #}
  1224.         </div>{# /hb-nav-right #}
  1225.     </div>{# /hb-nav-inner #}
  1226. </nav>
  1228. {# ── Apply saved theme immediately (no flash of wrong theme) ─────────────── #}
  1229. <script>
  1230.     (function () {
  1231.         var saved = localStorage.getItem('theme') || 'light';
  1232.         if (saved === 'dark') {
  1233.             var css = document.getElementById('dark-theme-css');
  1234.             var cb = document.getElementById('theme-toggle-checkbox');
  1235.             var track = document.getElementById('hbThemeTrack');
  1236.             if (css) css.disabled = false;
  1237.             if (cb) cb.checked = true;
  1238.             if (track) track.classList.add('hb-dark');
  1239.         }
  1240.     }());
  1241. </script>
  1243. {# ── Navbar interaction scripts ───────────────────────────────────────────── #}
  1244. <script>
  1245.     (function () {
  1246.         var navbar = document.getElementById('hbNavbar');
  1247.         var toggler = document.getElementById('hbToggler');
  1249.         window.addEventListener('scroll', function () {
  1250.             navbar.classList.toggle('hb-scrolled', window.scrollY > 6);
  1251.         }, {passive: true});
  1253.         if (toggler) {
  1254.             toggler.addEventListener('click', function () {
  1255.                 navbar.classList.toggle('hb-open');
  1256.                 toggler.classList.toggle('hb-open');
  1257.             });
  1258.         }
  1260.         navbar.querySelectorAll('.hb-drop > a').forEach(function (a) {
  1261.             a.addEventListener('click', function (e) {
  1262.                 if (window.innerWidth <= 1024) {
  1263.                     e.preventDefault();
  1264.                     a.closest('.hb-drop').classList.toggle('hb-mob-open');
  1265.                 }
  1266.             });
  1267.         });
  1269.         var cb = document.getElementById('theme-toggle-checkbox');
  1270.         var track = document.getElementById('hbThemeTrack');
  1271.         if (cb && track) {
  1272.             track.addEventListener('click', function () {
  1273.                 changeTheme(!cb.checked);
  1274.             });
  1275.         }
  1276.     }());
  1277. </script>
  1279. {# ── Preloader: hide on load ──────────────────────────────────────────────── #}
  1280. <script>
  1281.     document.body.style.overflow = 'hidden';
  1282.     window.addEventListener('load', function () {
  1283.         var pre = document.getElementById('hb-preloader');
  1284.         if (pre) {
  1285.             pre.style.transition = 'opacity .35s ease';
  1286.             pre.style.opacity = '0';
  1287.             setTimeout(function () {
  1288.                 pre.style.display = 'none';
  1289.             }, 360);
  1290.         }
  1291.         document.body.style.overflow = 'auto';
  1292.     });
  1293. </script>
  1296. {% set full_js_included = 0 %}
  1297. {% endif %}{# /include_html #}
  1299. <input type="hidden" id="timeStampOnHeaderLoad" value="{{ 'now'|date('U') }}">
  1300. {% include '@Application/inc/ajax_route_library.html.twig' %}
  1302. {# Date-picker scripts #}
  1303. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1304. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  1305. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>