vendor/uvdesk/support-center-bundle/Resources/views/Knowledgebase/modern-unified.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
  3. {% block title %}Base de Conocimientos{% endblock %}
  5. {% block body %}
  6. <div class="modern-kb-container" id="modern-kb-container">
  7.     <div class="modern-kb-wrapper">
  8.         <!-- Sidebar Navigation -->
  9.         <aside class="modern-kb-sidebar">
  10.             <div class="modern-kb-sidebar-header">
  11.                 <h2>{{ 'Base de Conocimientos'|trans }}</h2>
  12.                 <a href="{{ path('helpdesk_knowledgebase') }}" class="kb-back-to-topics" title="{{ 'Volver a temas frecuentes'|trans }}">
  13.                     ← {{ 'Temas frecuentes'|trans }}
  14.                 </a>
  15.                 <div class="kb-search-container">
  16.                     <input type="text" 
  17.                            id="kb-search-input" 
  18.                            class="kb-search-input" 
  19.                            placeholder="{{ 'Buscar artículos...'|trans }}"
  20.                            autocomplete="off">
  21.                     <span class="kb-search-icon">🔍</span>
  22.                     <button type="button" class="kb-search-clear" id="kb-search-clear" style="display: none;">✕</button>
  23.                 </div>
  24.                 <div class="kb-search-results-count" id="kb-search-results-count" style="display: none;">
  25.                     <span id="kb-results-number">0</span> {{ 'resultados encontrados'|trans }}
  26.                 </div>
  27.             </div>
  28.             
  29.             <nav class="modern-kb-nav" id="kb-navigation">
  30.                 {% if structure|length == 0 %}
  31.                     <div style="padding: 20px; color: #bdc3c7; text-align: center;">
  32.                         <p>No hay carpetas disponibles</p>
  33.                     </div>
  34.                 {% else %}
  35.                     {% for folder in structure %}
  36.                     <div class="modern-kb-folder-section">
  37.                         <div class="modern-kb-folder-header" data-folder-id="{{ folder.id }}">
  38.                             {% if folder.solutionImage %}
  39.                                 <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ folder.solutionImage }}" 
  40.                                      class="folder-icon" alt="{{ folder.name }}">
  41.                             {% else %}
  42.                                 <span class="folder-icon-placeholder">{{ folder.name|slice(0, 2)|upper }}</span>
  43.                             {% endif %}
  44.                             <span class="folder-name">{{ folder.name }}</span>
  45.                             <span class="folder-toggle">▼</span>
  46.                         </div>
  47.                         
  48.                         <div class="modern-kb-folder-content" id="folder-{{ folder.id }}" style="max-height: 0px; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0;">
  49.                             {% if folder.categories|length > 0 %}
  50.                                 {% for category in folder.categories %}
  51.                                     <div class="modern-kb-category-section">
  52.                                         <div class="modern-kb-category-header" data-category-id="{{ category.id }}">
  53.                                             <span class="category-name">{{ category.name }}</span>
  54.                                             <span class="category-count">({{ category.articleCount }})</span>
  55.                                             <span class="category-toggle">▶</span>
  56.                                         </div>
  57.                                         
  58.                                         <ul class="modern-kb-articles-list" id="category-{{ category.id }}" style="display: none;">
  59.                                             {% for article in category.articles %}
  60.                                                 {% set articleId = article.id is defined ? article.id : (article.getId is defined ? article.getId() : null) %}
  61.                                                 {% set articleName = article.name is defined ? article.name : (article.getName is defined ? article.getName() : 'Sin título') %}
  62.                                                 {% set articleSlug = article.slug is defined ? article.slug : (article.getSlug is defined ? article.getSlug() : '') %}
  63.                                                 {% set articleStared = article.stared is defined ? article.stared : (article.getStared is defined ? article.getStared() : false) %}
  64.                                                 <li class="modern-kb-article-item">
  65.                                                     <a href="#" 
  66.                                                        class="kb-article-link" 
  67.                                                        data-article-slug="{{ articleSlug }}"
  68.                                                        data-article-id="{{ articleId }}">
  69.                                                         {% if articleStared %}<span class="article-star">⭐</span>{% endif %}
  70.                                                         {{ articleName }}
  71.                                                     </a>
  72.                                                 </li>
  73.                                             {% endfor %}
  74.                                         </ul>
  75.                                     </div>
  76.                                 {% endfor %}
  77.                             {% endif %}
  78.                             
  79.                             {% if folder.directArticles|length > 0 %}
  80.                                 <div class="modern-kb-direct-articles">
  81.                                     <div class="modern-kb-category-header" data-category-id="direct-{{ folder.id }}" style="cursor: pointer;">
  82.                                         <span class="category-name">{{ 'Artículos Directos'|trans }}</span>
  83.                                         <span class="category-count">({{ folder.directArticles|length }})</span>
  84.                                         <span class="category-toggle">▶</span>
  85.                                     </div>
  86.                                     <ul class="modern-kb-articles-list" id="category-direct-{{ folder.id }}" style="display: none;">
  87.                                         {% for article in folder.directArticles %}
  88.                                             {% set articleId = article.id is defined ? article.id : (article.getId is defined ? article.getId() : null) %}
  89.                                             {% set articleName = article.name is defined ? article.name : (article.getName is defined ? article.getName() : 'Sin título') %}
  90.                                             {% set articleSlug = article.slug is defined ? article.slug : (article.getSlug is defined ? article.getSlug() : '') %}
  91.                                             {% set articleStared = article.stared is defined ? article.stared : (article.getStared is defined ? article.getStared() : false) %}
  92.                                             <li class="modern-kb-article-item">
  93.                                                 <a href="#" 
  94.                                                    class="kb-article-link" 
  95.                                                    data-article-slug="{{ articleSlug }}"
  96.                                                    data-article-id="{{ articleId }}">
  97.                                                     {% if articleStared %}<span class="article-star">⭐</span>{% endif %}
  98.                                                     {{ articleName }}
  99.                                                 </a>
  100.                                             </li>
  101.                                         {% endfor %}
  102.                                     </ul>
  103.                                 </div>
  104.                             {% endif %}
  105.                         </div>
  106.                     </div>
  107.                     {% endfor %}
  108.                 {% endif %}
  109.             </nav>
  110.         </aside>
  111.         
  112.         <!-- Main Content Area -->
  113.         <main class="modern-kb-content">
  114.             <!-- Content Search Bar -->
  115.             <div class="kb-content-search-bar">
  116.                 <div class="kb-content-search-container">
  117.                     <input type="text" 
  118.                            id="kb-content-search-input" 
  119.                            class="kb-content-search-input" 
  120.                            placeholder="{{ 'Buscar en el contenido de los artículos...'|trans }}"
  121.                            autocomplete="off">
  122.                     <span class="kb-content-search-icon">🔍</span>
  123.                     <button type="button" class="kb-content-search-clear" id="kb-content-search-clear" style="display: none;">✕</button>
  124.                 </div>
  125.                 <div class="kb-content-search-results-count" id="kb-content-search-results-count" style="display: none;">
  126.                     <span id="kb-content-results-number">0</span> {{ 'artículos encontrados'|trans }}
  127.                 </div>
  128.             </div>
  129.             
  130.             <div id="kb-article-viewer">
  131.                 <!-- Welcome Screen -->
  132.                 <div class="kb-welcome-screen" id="welcome-screen">
  133.                     <div class="kb-welcome-content">
  134.                         <h1>{{ 'Bienvenido a la Base de Conocimientos'|trans }}</h1>
  135.                         <p>{{ 'Seleccione un artículo del menú lateral para comenzar o navegue por todo el contenido'|trans }}</p>
  136.                         <div class="kb-stats">
  137.                             {% set totalArticles = 0 %}
  138.                             {% for folder in structure %}
  139.                                 {% set totalArticles = totalArticles + folder.totalArticles %}
  140.                             {% endfor %}
  141.                             <div class="kb-stat-item">
  142.                                 <span class="kb-stat-number">{{ structure|length }}</span>
  143.                                 <span class="kb-stat-label">{{ 'Carpetas'|trans }}</span>
  144.                             </div>
  145.                             <div class="kb-stat-item">
  146.                                 <span class="kb-stat-number">{{ totalArticles }}</span>
  147.                                 <span class="kb-stat-label">{{ 'Artículos'|trans }}</span>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.                 
  153.                 <!-- All Articles Content -->
  154.                 <div class="kb-all-articles-content">
  155.                     {% for folder in structure %}
  156.                         <div class="kb-folder-content-section" data-folder-id="{{ folder.id }}">
  157.                             <div class="kb-folder-title-section">
  158.                                 <h2 class="kb-folder-title">{{ folder.name }}</h2>
  159.                                 {% if folder.description %}
  160.                                     <p class="kb-folder-description">{{ folder.description }}</p>
  161.                                 {% endif %}
  162.                             </div>
  163.                             
  164.                             {% if folder.categories|length > 0 %}
  165.                                 {% for category in folder.categories %}
  166.                                     <div class="kb-category-content-section" data-category-id="{{ category.id }}">
  167.                                         <h3 class="kb-category-title">{{ category.name }}</h3>
  168.                                         {% if category.description %}
  169.                                             <p class="kb-category-description">{{ category.description }}</p>
  170.                                         {% endif %}
  171.                                         
  172.                                         <div class="kb-category-articles">
  173.                                             {% for article in category.articles %}
  174.                                                 {% set articleId = article.id is defined ? article.id : (article.getId is defined ? article.getId() : null) %}
  175.                                                 {% set articleName = article.name is defined ? article.name : (article.getName is defined ? article.getName() : 'Sin título') %}
  176.                                                 {% set articleSlug = article.slug is defined ? article.slug : (article.getSlug is defined ? article.getSlug() : '') %}
  177.                                                 {% set articleContent = article.content is defined ? article.content : (article.getContent is defined ? article.getContent() : '') %}
  178.                                                 {% set articleDateAdded = article.dateAdded is defined ? article.dateAdded : (article.getDateAdded is defined ? article.getDateAdded() : null) %}
  179.                                                 
  180.                                                 <article class="kb-article-display" id="article-{{ articleSlug }}" data-article-slug="{{ articleSlug }}" data-article-id="{{ articleId }}">
  181.                                                     <header class="kb-article-header">
  182.                                                         <h1>{{ articleName }}</h1>
  183.                                                         {% if articleDateAdded %}
  184.                                                             <div class="kb-article-meta">
  185.                                                                 <span class="kb-article-date">
  186.                                                                     {{ 'Publicado el'|trans }} {{ articleDateAdded }}
  187.                                                                 </span>
  188.                                                             </div>
  189.                                                         {% endif %}
  190.                                                     </header>
  191.                                                     <div class="kb-article-body">
  192.                                                         {{ articleContent|raw }}
  193.                                                     </div>
  194.                                                     {% if article.subarticles is defined and article.subarticles is not empty %}
  195.                                                         <hr>
  196.                                                         <h2>{{ 'Related sections'|trans }}</h2>
  197.                                                         <div class="uv-subarticles-list">
  198.                                                             {% for sub in article.subarticles %}
  199.                                                                 <article class="uv-subarticle">
  200.                                                                     <h3>{{ sub.name }}</h3>
  201.                                                                     <div class="uv-subarticle-content">{{ sub.content|raw }}</div>
  202.                                                                 </article>
  203.                                                             {% endfor %}
  204.                                                         </div>
  205.                                                     {% endif %}
  206.                                                 </article>
  207.                                             {% endfor %}
  208.                                         </div>
  209.                                     </div>
  210.                                 {% endfor %}
  211.                             {% endif %}
  212.                             
  213.                             {% if folder.directArticles|length > 0 %}
  214.                                 <div class="kb-direct-articles-section" data-folder-id="{{ folder.id }}">
  215.                                     <h3 class="kb-category-title">{{ 'Artículos Directos'|trans }}</h3>
  216.                                     <div class="kb-category-articles">
  217.                                         {% for article in folder.directArticles %}
  218.                                             {% set articleId = article.id is defined ? article.id : (article.getId is defined ? article.getId() : null) %}
  219.                                             {% set articleName = article.name is defined ? article.name : (article.getName is defined ? article.getName() : 'Sin título') %}
  220.                                             {% set articleSlug = article.slug is defined ? article.slug : (article.getSlug is defined ? article.getSlug() : '') %}
  221.                                             {% set articleContent = article.content is defined ? article.content : (article.getContent is defined ? article.getContent() : '') %}
  222.                                             {% set articleDateAdded = article.dateAdded is defined ? article.dateAdded : (article.getDateAdded is defined ? article.getDateAdded() : null) %}
  223.                                             
  224.                                             <article class="kb-article-display" id="article-{{ articleSlug }}" data-article-slug="{{ articleSlug }}" data-article-id="{{ articleId }}">
  225.                                                 <header class="kb-article-header">
  226.                                                     <h1>{{ articleName }}</h1>
  227.                                                     {% if articleDateAdded %}
  228.                                                         <div class="kb-article-meta">
  229.                                                             <span class="kb-article-date">
  230.                                                                 {{ 'Publicado el'|trans }} {{ articleDateAdded }}
  231.                                                             </span>
  232.                                                         </div>
  233.                                                     {% endif %}
  234.                                                 </header>
  235.                                                 <div class="kb-article-body">
  236.                                                     {{ articleContent|raw }}
  237.                                                 </div>
  238.                                                 {% if article.subarticles is defined and article.subarticles is not empty %}
  239.                                                         <hr>
  240.                                                         <h2>{{ 'Related sections'|trans }}</h2>
  241.                                                         <div class="uv-subarticles-list">
  242.                                                             {% for sub in article.subarticles %}
  243.                                                                 <article class="uv-subarticle">
  244.                                                                     <h3>{{ sub.name }}</h3>
  245.                                                                     <div class="uv-subarticle-content">{{ sub.content|raw }}</div>
  246.                                                                 </article>
  247.                                                             {% endfor %}
  248.                                                         </div>
  249.                                                 {% endif %}
  250.                                             </article>
  251.                                         {% endfor %}
  252.                                     </div>
  253.                                 </div>
  254.                             {% endif %}
  255.                         </div>
  256.                     {% endfor %}
  257.                 </div>
  258.             </div>
  259.         </main>
  260.     </div>
  261. </div>
  263. <style>
  264. .modern-kb-container {
  265.     width: 100%;
  266.     min-height: calc(100vh - 200px);
  267.     background: #f8f9fa;
  268.     padding: 20px 0;
  269. }
  271. .modern-kb-wrapper {
  272.     display: flex;
  273.     max-width: 1400px;
  274.     margin: 0 auto;
  275.     background: #fff;
  276.     border-radius: 8px;
  277.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  278.     overflow: hidden;
  279.     height: calc(100vh - 250px);
  280.     min-height: calc(100vh - 250px);
  281.     max-height: calc(100vh - 250px);
  282. }
  284. /* Sidebar Styles */
  285. .modern-kb-sidebar {
  286.     width: 320px;
  287.     background: #2c3e50;
  288.     color: #ecf0f1;
  289.     overflow: hidden;
  290.     flex-shrink: 0;
  291.     height: 100%;
  292.     display: flex;
  293.     flex-direction: column;
  294. }
  296. /* Sidebar scrollbar */
  297. .modern-kb-sidebar::-webkit-scrollbar,
  298. .modern-kb-nav::-webkit-scrollbar {
  299.     width: 8px;
  300. }
  302. .modern-kb-sidebar::-webkit-scrollbar-track,
  303. .modern-kb-nav::-webkit-scrollbar-track {
  304.     background: #1a252f;
  305. }
  307. .modern-kb-sidebar::-webkit-scrollbar-thumb,
  308. .modern-kb-nav::-webkit-scrollbar-thumb {
  309.     background: #34495e;
  310.     border-radius: 4px;
  311. }
  313. .modern-kb-sidebar::-webkit-scrollbar-thumb:hover,
  314. .modern-kb-nav::-webkit-scrollbar-thumb:hover {
  315.     background: #4a5f7a;
  316. }
  318. .modern-kb-sidebar-header {
  319.     padding: 20px;
  320.     background: #34495e;
  321.     border-bottom: 2px solid #1a252f;
  322.     flex-shrink: 0;
  323. }
  325. .modern-kb-sidebar-header h2 {
  326.     margin: 0 0 15px 0;
  327.     font-size: 18px;
  328.     font-weight: 600;
  329.     color: #ecf0f1;
  330. }
  332. .kb-back-to-topics {
  333.     display: inline-block;
  334.     margin-top: 10px;
  335.     padding: 8px 12px;
  336.     background: rgba(52, 152, 219, 0.2);
  337.     color: #3498db;
  338.     text-decoration: none;
  339.     border-radius: 4px;
  340.     font-size: 13px;
  341.     transition: background 0.2s, color 0.2s;
  342. }
  344. .kb-back-to-topics:hover {
  345.     background: rgba(52, 152, 219, 0.3);
  346.     color: #5dade2;
  347. }
  349. /* Search Styles */
  350. .kb-search-container {
  351.     position: relative;
  352.     margin-bottom: 10px;
  353. }
  355. .kb-search-input {
  356.     width: 100%;
  357.     padding: 10px 35px 10px 35px;
  358.     background: #1a252f;
  359.     border: 1px solid #34495e;
  360.     border-radius: 4px;
  361.     color: #ecf0f1;
  362.     font-size: 14px;
  363.     box-sizing: border-box;
  364.     transition: border-color 0.2s, background 0.2s;
  365. }
  367. .kb-search-input:not(:placeholder-shown) {
  368.     padding-right: 50px; /* More space when clear button is visible */
  369. }
  371. .kb-search-input:focus {
  372.     outline: none;
  373.     border-color: #3498db;
  374.     background: #2c3e50;
  375. }
  377. .kb-search-input::placeholder {
  378.     color: #7f8c8d;
  379. }
  381. .kb-search-icon {
  382.     position: absolute;
  383.     left: 12px;
  384.     top: 50%;
  385.     transform: translateY(-50%);
  386.     color: #7f8c8d;
  387.     pointer-events: none;
  388.     font-size: 14px;
  389. }
  391. .kb-search-clear {
  392.     position: absolute;
  393.     right: 8px;
  394.     top: 50%;
  395.     transform: translateY(-50%);
  396.     background: transparent;
  397.     border: none;
  398.     color: #7f8c8d;
  399.     cursor: pointer;
  400.     font-size: 16px;
  401.     padding: 4px 8px;
  402.     border-radius: 3px;
  403.     transition: color 0.2s, background 0.2s;
  404. }
  406. .kb-search-clear:hover {
  407.     color: #ecf0f1;
  408.     background: #34495e;
  409. }
  411. .kb-search-results-count {
  412.     margin-top: 8px;
  413.     font-size: 12px;
  414.     color: #95a5a6;
  415.     text-align: center;
  416. }
  418. .kb-search-results-count span {
  419.     font-weight: 600;
  420.     color: #3498db;
  421. }
  423. /* Highlight styles for search matches */
  424. .kb-search-highlight {
  425.     background: rgba(52, 152, 219, 0.3);
  426.     padding: 2px 4px;
  427.     border-radius: 2px;
  428. }
  430. /* Styles for filtered/hidden items */
  431. .modern-kb-folder-section.hidden-by-search,
  432. .modern-kb-category-section.hidden-by-search,
  433. .modern-kb-article-item.hidden-by-search,
  434. .kb-article-display.hidden-by-content-search,
  435. .kb-folder-content-section.hidden-by-content-search,
  436. .kb-category-content-section.hidden-by-content-search {
  437.     display: none !important;
  438. }
  440. .modern-kb-folder-section.visible-by-search,
  441. .modern-kb-category-section.visible-by-search {
  442.     display: block !important;
  443. }
  445. /* Welcome screen visibility */
  446. .kb-welcome-screen.hidden-by-content-search {
  447.     display: none !important;
  448. }
  450. /* Content search highlight */
  451. .kb-content-search-highlight,
  452. mark.kb-content-search-highlight {
  453.     background: rgba(255, 235, 59, 0.5);
  454.     padding: 2px 4px;
  455.     border-radius: 3px;
  456.     font-weight: 500;
  457.     color: #2c3e50;
  458. }
  460. .modern-kb-nav {
  461.     padding: 10px 0;
  462.     flex: 1;
  463.     overflow-y: auto;
  464.     overflow-x: hidden;
  465.     position: relative;
  466.     width: 100%;
  467. }
  469. .modern-kb-folder-section {
  470.     border-bottom: 1px solid #34495e;
  471.     position: relative;
  472.     width: 100%;
  473.     display: block;
  474.     margin: 0;
  475.     padding: 0;
  476. }
  478. .modern-kb-folder-header {
  479.     padding: 12px 20px;
  480.     cursor: pointer;
  481.     display: flex;
  482.     align-items: center;
  483.     gap: 12px;
  484.     transition: background 0.2s;
  485.     user-select: none;
  486.     color: #ecf0f1 !important;
  487.     visibility: visible !important;
  488.     opacity: 1 !important;
  489.     position: relative;
  490.     width: 100%;
  491.     box-sizing: border-box;
  492.     min-height: 48px;
  493.     z-index: 1;
  494. }
  496. .modern-kb-folder-header:hover {
  497.     background: #34495e;
  498. }
  500. .modern-kb-folder-header.active {
  501.     background: #3498db;
  502. }
  504. .folder-icon,
  505. .folder-icon-placeholder {
  506.     width: 32px;
  507.     height: 32px;
  508.     border-radius: 4px;
  509.     flex-shrink: 0;
  510. }
  512. .folder-icon {
  513.     object-fit: cover;
  514. }
  516. .folder-icon-placeholder {
  517.     background: #3498db;
  518.     display: flex;
  519.     align-items: center;
  520.     justify-content: center;
  521.     font-size: 12px;
  522.     font-weight: bold;
  523.     color: #fff !important;
  524.     visibility: visible !important;
  525. }
  527. .folder-name {
  528.     flex: 1;
  529.     min-width: 0;
  530.     font-weight: 500;
  531.     color: #ecf0f1 !important;
  532.     visibility: visible !important;
  533.     opacity: 1 !important;
  534.     font-size: 14px;
  535.     line-height: 1.4;
  536.     overflow: hidden;
  537.     text-overflow: ellipsis;
  538.     white-space: nowrap;
  539. }
  541. .folder-toggle {
  542.     font-size: 10px;
  543.     transition: transform 0.2s;
  544.     color: #ecf0f1 !important;
  545.     visibility: visible !important;
  546.     opacity: 1 !important;
  547.     flex-shrink: 0;
  548.     width: 16px;
  549.     text-align: center;
  550.     margin-left: 4px;
  551. }
  553. .modern-kb-folder-header.active .folder-toggle {
  554.     transform: rotate(180deg);
  555. }
  557. .modern-kb-folder-content {
  558.     background: #1a252f;
  559.     overflow: hidden;
  560.     transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  561.     color: #bdc3c7;
  562.     position: relative;
  563.     width: 100%;
  564.     display: block;
  565.     box-sizing: border-box;
  566.     margin: 0;
  567.     padding: 0;
  568.     will-change: max-height;
  569.     clear: both;
  570. }
  572. .modern-kb-folder-content.expanded {
  573.     color: #bdc3c7 !important;
  574. }
  576. .modern-kb-folder-content * {
  577.     visibility: visible !important;
  578.     color: #bdc3c7 !important;
  579.     text-shadow: none !important;
  580.     position: relative !important;
  581. }
  583. .modern-kb-folder-content.expanded * {
  584.     color: #bdc3c7 !important;
  585.     visibility: visible !important;
  586.     opacity: 1 !important;
  587. }
  589. .modern-kb-folder-content span {
  590.     color: #bdc3c7 !important;
  591.     opacity: 1 !important;
  592.     visibility: visible !important;
  593. }
  595. /* Asegurar que no haya elementos superpuestos */
  596. .modern-kb-folder-content > * {
  597.     position: relative !important;
  598.     float: none !important;
  599.     clear: both !important;
  600. }
  602. .modern-kb-category-section {
  603.     border-bottom: 1px solid #2c3e50;
  604.     position: relative;
  605.     width: 100%;
  606.     display: block;
  607.     margin: 0;
  608.     padding: 0;
  609. }
  611. .modern-kb-category-header {
  612.     padding: 10px 20px 10px 50px;
  613.     cursor: pointer;
  614.     display: flex !important;
  615.     align-items: center;
  616.     gap: 8px;
  617.     transition: background 0.2s;
  618.     user-select: none;
  619.     font-size: 14px !important;
  620.     color: #bdc3c7 !important;
  621.     visibility: visible !important;
  622.     opacity: 1 !important;
  623.     position: relative !important;
  624.     z-index: 1 !important;
  625.     width: 100%;
  626.     box-sizing: border-box;
  627.     margin: 0;
  628.     clear: both;
  629.     min-height: 40px;
  630. }
  632. .modern-kb-category-header .category-name,
  633. .modern-kb-category-header .category-count,
  634. .modern-kb-category-header .category-toggle {
  635.     color: #bdc3c7 !important;
  636.     visibility: visible !important;
  637.     opacity: 1 !important;
  638.     display: inline-block !important;
  639.     font-size: 14px !important;
  640.     position: relative;
  641.     z-index: 2;
  642. }
  644. .modern-kb-category-header:hover {
  645.     background: #2c3e50;
  646. }
  648. .category-name {
  649.     flex: 1;
  650.     min-width: 0;
  651.     color: #bdc3c7 !important;
  652.     font-size: 14px !important;
  653.     visibility: visible !important;
  654.     overflow: hidden;
  655.     text-overflow: ellipsis;
  656.     white-space: nowrap;
  657.     position: relative;
  658.     z-index: 1;
  659.     display: block;
  660.     max-width: calc(100% - 80px);
  661. }
  663. .category-count {
  664.     font-size: 12px !important;
  665.     color: #95a5a6 !important;
  666.     visibility: visible !important;
  667.     flex-shrink: 0;
  668.     margin-left: 4px;
  669. }
  671. .category-toggle {
  672.     font-size: 10px !important;
  673.     transition: transform 0.2s;
  674.     color: #bdc3c7 !important;
  675.     visibility: visible !important;
  676.     flex-shrink: 0;
  677.     width: 12px;
  678.     text-align: center;
  679.     margin-left: 4px;
  680. }
  682. .modern-kb-category-header.active .category-toggle {
  683.     transform: rotate(90deg);
  684. }
  686. .modern-kb-articles-list {
  687.     list-style: none;
  688.     padding: 0;
  689.     margin: 0;
  690.     background: #1a252f;
  691.     visibility: visible !important;
  692.     opacity: 1 !important;
  693.     display: block !important;
  694.     position: relative;
  695.     width: 100%;
  696.     box-sizing: border-box;
  697.     clear: both;
  698.     min-height: 0;
  699. }
  701. .modern-kb-articles-list[style*="display: none"] {
  702.     display: none !important;
  703. }
  705. .modern-kb-article-item {
  706.     border-bottom: 1px solid #2c3e50;
  707.     position: relative;
  708.     width: 100%;
  709.     display: block;
  710.     margin: 0;
  711.     padding: 0;
  712. }
  714. .modern-kb-article-item:last-child {
  715.     border-bottom: none;
  716. }
  718. .kb-article-link {
  719.     display: block !important;
  720.     padding: 10px 20px 10px 70px;
  721.     color: #bdc3c7 !important;
  722.     text-decoration: none;
  723.     transition: all 0.2s;
  724.     font-size: 13px;
  725.     line-height: 1.5;
  726.     visibility: visible !important;
  727.     opacity: 1 !important;
  728.     cursor: pointer;
  729.     width: 100%;
  730.     box-sizing: border-box;
  731.     position: relative;
  732.     white-space: nowrap;
  733.     overflow: hidden;
  734.     text-overflow: ellipsis;
  735.     clear: both;
  736.     z-index: 1;
  737. }
  739. .kb-article-link:hover {
  740.     background: #2c3e50;
  741.     color: #3498db;
  742.     padding-left: 75px;
  743.     white-space: normal;
  744.     overflow: visible;
  745.     text-overflow: clip;
  746. }
  748. .kb-article-link.active {
  749.     background: #3498db;
  750.     color: #fff;
  751.     font-weight: 500;
  752. }
  754. .article-star {
  755.     margin-right: 6px;
  756.     font-size: 12px;
  757. }
  759. .modern-kb-direct-articles {
  760.     padding: 10px 0;
  761. }
  763. .modern-kb-direct-articles .modern-kb-category-header {
  764.     padding-left: 50px;
  765.     cursor: pointer;
  766. }
  768. .modern-kb-direct-articles .modern-kb-category-header:hover {
  769.     background: #2c3e50;
  770. }
  772. /* Main Content Styles */
  773. .modern-kb-content {
  774.     flex: 1;
  775.     padding: 0;
  776.     background: #fff;
  777.     overflow-y: scroll;
  778.     overflow-x: hidden;
  779.     height: 100%;
  780.     position: relative;
  781.     display: flex;
  782.     flex-direction: column;
  783. }
  785. /* Force scrollbar to be visible always */
  786. .modern-kb-content {
  787.     overflow-y: scroll !important;
  788. }
  790. .modern-kb-content::-webkit-scrollbar {
  791.     width: 12px;
  792. }
  794. .modern-kb-content::-webkit-scrollbar-track {
  795.     background: #f1f1f1;
  796.     border-left: 1px solid #e0e0e0;
  797. }
  799. .modern-kb-content::-webkit-scrollbar-thumb {
  800.     background: #888;
  801.     border-radius: 6px;
  802.     border: 2px solid #f1f1f1;
  803. }
  805. .modern-kb-content::-webkit-scrollbar-thumb:hover {
  806.     background: #555;
  807. }
  809. /* Firefox scrollbar */
  810. .modern-kb-content {
  811.     scrollbar-width: thin;
  812.     scrollbar-color: #888 #f1f1f1;
  813. }
  815. /* Content Search Bar Styles */
  816. .kb-content-search-bar {
  817.     padding: 20px;
  818.     background: #f8f9fa;
  819.     border-bottom: 2px solid #e0e0e0;
  820.     flex-shrink: 0;
  821.     position: sticky;
  822.     top: 0;
  823.     z-index: 10;
  824.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  825. }
  827. .kb-content-search-container {
  828.     position: relative;
  829.     max-width: 800px;
  830.     margin: 0 auto;
  831. }
  833. .kb-content-search-input {
  834.     width: 100%;
  835.     padding: 12px 45px 12px 45px;
  836.     background: #fff;
  837.     border: 2px solid #ddd;
  838.     border-radius: 6px;
  839.     color: #2c3e50;
  840.     font-size: 16px;
  841.     box-sizing: border-box;
  842.     transition: border-color 0.2s, box-shadow 0.2s;
  843. }
  845. .kb-content-search-input:focus {
  846.     outline: none;
  847.     border-color: #3498db;
  848.     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  849. }
  851. .kb-content-search-input::placeholder {
  852.     color: #95a5a6;
  853. }
  855. .kb-content-search-input:not(:placeholder-shown) {
  856.     padding-right: 60px;
  857. }
  859. .kb-content-search-icon {
  860.     position: absolute;
  861.     left: 15px;
  862.     top: 50%;
  863.     transform: translateY(-50%);
  864.     color: #7f8c8d;
  865.     pointer-events: none;
  866.     font-size: 16px;
  867. }
  869. .kb-content-search-clear {
  870.     position: absolute;
  871.     right: 10px;
  872.     top: 50%;
  873.     transform: translateY(-50%);
  874.     background: transparent;
  875.     border: none;
  876.     color: #7f8c8d;
  877.     cursor: pointer;
  878.     font-size: 18px;
  879.     padding: 5px 10px;
  880.     border-radius: 4px;
  881.     transition: color 0.2s, background 0.2s;
  882. }
  884. .kb-content-search-clear:hover {
  885.     color: #2c3e50;
  886.     background: #ecf0f1;
  887. }
  889. .kb-content-search-results-count {
  890.     margin-top: 10px;
  891.     font-size: 14px;
  892.     color: #7f8c8d;
  893.     text-align: center;
  894. }
  896. .kb-content-search-results-count span {
  897.     font-weight: 600;
  898.     color: #3498db;
  899. }
  901. #kb-article-viewer {
  902.     padding: 0;
  903.     min-height: 100%;
  904.     background: #fff;
  905.     width: 100%;
  906.     overflow: visible;
  907.     flex: 1;
  908. }
  910. /* Asegurar que el contenido tenga altura suficiente para scroll */
  911. .kb-welcome-screen,
  912. .kb-article-display {
  913.     min-height: calc(100vh - 250px);
  914.     padding-bottom: 60px;
  915. }
  917. /* Estilos para el contenido completo de artículos */
  918. .kb-all-articles-content {
  919.     padding: 20px 0;
  920. }
  922. .kb-folder-content-section {
  923.     margin-bottom: 60px;
  924.     padding-bottom: 40px;
  925.     border-bottom: 2px solid #ecf0f1;
  926. }
  928. .kb-folder-content-section:last-child {
  929.     border-bottom: none;
  930. }
  932. .kb-folder-title-section {
  933.     margin-bottom: 30px;
  934.     padding-bottom: 20px;
  935.     border-bottom: 1px solid #ecf0f1;
  936. }
  938. .kb-folder-title {
  939.     font-size: 32px;
  940.     color: #2c3e50;
  941.     margin: 0 0 10px 0;
  942.     font-weight: 600;
  943. }
  945. .kb-folder-description {
  946.     font-size: 16px;
  947.     color: #7f8c8d;
  948.     margin: 0;
  949. }
  951. .kb-category-content-section {
  952.     margin-bottom: 40px;
  953. }
  955. .kb-category-title {
  956.     font-size: 24px;
  957.     color: #34495e;
  958.     margin: 30px 0 15px 0;
  959.     font-weight: 600;
  960.     padding-left: 20px;
  961.     border-left: 4px solid #3498db;
  962. }
  964. .kb-category-description {
  965.     font-size: 14px;
  966.     color: #7f8c8d;
  967.     margin: 0 0 20px 20px;
  968. }
  970. .kb-category-articles {
  971.     padding-left: 20px;
  972. }
  974. .kb-direct-articles-section {
  975.     margin-top: 40px;
  976.     padding-top: 40px;
  977.     border-top: 1px solid #ecf0f1;
  978. }
  980. /* Asegurar espaciado entre artículos */
  981. .kb-article-display {
  982.     margin-bottom: 60px;
  983.     padding-bottom: 40px;
  984.     border-bottom: 1px solid #f0f0f0;
  985. }
  987. .kb-article-display:last-child {
  988.     border-bottom: none;
  989.     margin-bottom: 0;
  990. }
  992. /* Highlight para artículo activo */
  993. .kb-article-display.active {
  994.     background: #f8f9fa;
  995.     padding: 30px;
  996.     border-radius: 8px;
  997.     border-left: 4px solid #3498db;
  998.     margin-left: -30px;
  999.     padding-left: 30px;
  1000. }
  1002. .kb-loading {
  1003.     padding: 40px;
  1004.     text-align: center;
  1005.     color: #7f8c8d;
  1006.     font-size: 16px;
  1007. }
  1009. .kb-welcome-screen {
  1010.     display: flex;
  1011.     align-items: flex-start;
  1012.     justify-content: center;
  1013.     min-height: calc(100vh - 250px);
  1014.     padding: 60px 20px 40px 20px;
  1015.     width: 100%;
  1016.     box-sizing: border-box;
  1017. }
  1019. .kb-welcome-content {
  1020.     text-align: center;
  1021.     max-width: 600px;
  1022.     width: 100%;
  1023.     padding: 20px;
  1024.     box-sizing: border-box;
  1025. }
  1027. .kb-welcome-content h1 {
  1028.     font-size: 32px;
  1029.     color: #2c3e50;
  1030.     margin-bottom: 16px;
  1031. }
  1033. .kb-welcome-content > p {
  1034.     font-size: 18px;
  1035.     color: #7f8c8d;
  1036.     margin-bottom: 40px;
  1037. }
  1039. .kb-stats {
  1040.     display: flex;
  1041.     justify-content: center;
  1042.     gap: 40px;
  1043.     margin-top: 40px;
  1044. }
  1046. .kb-stat-item {
  1047.     display: flex;
  1048.     flex-direction: column;
  1049.     align-items: center;
  1050. }
  1052. .kb-stat-number {
  1053.     font-size: 48px;
  1054.     font-weight: bold;
  1055.     color: #3498db;
  1056.     line-height: 1;
  1057. }
  1059. .kb-stat-label {
  1060.     font-size: 14px;
  1061.     color: #7f8c8d;
  1062.     margin-top: 8px;
  1063. }
  1065. /* Article Display Styles */
  1066. .kb-article-display {
  1067.     padding: 40px;
  1068.     max-width: 900px;
  1069.     margin: 0 auto;
  1070. }
  1072. .kb-article-header {
  1073.     border-bottom: 2px solid #ecf0f1;
  1074.     padding-bottom: 20px;
  1075.     margin-bottom: 30px;
  1076. }
  1078. .kb-article-header h1 {
  1079.     font-size: 32px;
  1080.     color: #2c3e50;
  1081.     margin: 0 0 16px 0;
  1082.     line-height: 1.3;
  1083. }
  1085. .kb-article-meta {
  1086.     display: flex;
  1087.     gap: 20px;
  1088.     font-size: 14px;
  1089.     color: #7f8c8d;
  1090. }
  1092. .kb-article-author {
  1093.     font-weight: 500;
  1094. }
  1096. .kb-article-date {
  1097.     color: #95a5a6;
  1098. }
  1100. .kb-article-body {
  1101.     font-size: 16px;
  1102.     line-height: 1.8;
  1103.     color: #34495e;
  1104. }
  1106. .kb-article-body h2 {
  1107.     font-size: 24px;
  1108.     color: #2c3e50;
  1109.     margin-top: 32px;
  1110.     margin-bottom: 16px;
  1111. }
  1113. .kb-article-body h3 {
  1114.     font-size: 20px;
  1115.     color: #34495e;
  1116.     margin-top: 24px;
  1117.     margin-bottom: 12px;
  1118. }
  1120. .kb-article-body p {
  1121.     margin-bottom: 16px;
  1122. }
  1124. .kb-article-body ul,
  1125. .kb-article-body ol {
  1126.     margin-bottom: 16px;
  1127.     padding-left: 30px;
  1128. }
  1130. .kb-article-body li {
  1131.     margin-bottom: 8px;
  1132. }
  1134. .kb-article-body code {
  1135.     background: #f4f4f4;
  1136.     padding: 2px 6px;
  1137.     border-radius: 3px;
  1138.     font-family: 'Courier New', monospace;
  1139.     font-size: 14px;
  1140. }
  1142. .kb-article-body pre {
  1143.     background: #2c3e50;
  1144.     color: #ecf0f1;
  1145.     padding: 16px;
  1146.     border-radius: 4px;
  1147.     overflow-x: auto;
  1148.     margin-bottom: 16px;
  1149. }
  1151. .kb-article-body pre code {
  1152.     background: transparent;
  1153.     padding: 0;
  1154.     color: inherit;
  1155. }
  1157. .kb-article-body img {
  1158.     max-width: 100%;
  1159.     height: auto;
  1160.     border-radius: 4px;
  1161.     margin: 20px 0;
  1162. }
  1164. .kb-article-body table {
  1165.     width: 100%;
  1166.     border-collapse: collapse;
  1167.     margin: 20px 0;
  1168. }
  1170. .kb-article-body table th,
  1171. .kb-article-body table td {
  1172.     padding: 12px;
  1173.     border: 1px solid #ddd;
  1174.     text-align: left;
  1175. }
  1177. .kb-article-body table th {
  1178.     background: #f8f9fa;
  1179.     font-weight: 600;
  1180. }
  1182. .kb-article-body blockquote {
  1183.     border-left: 4px solid #3498db;
  1184.     padding-left: 16px;
  1185.     margin: 20px 0;
  1186.     color: #7f8c8d;
  1187.     font-style: italic;
  1188. }
  1190. /* Loading State */
  1191. .kb-loading {
  1192.     display: flex;
  1193.     align-items: center;
  1194.     justify-content: center;
  1195.     min-height: 400px;
  1196.     font-size: 18px;
  1197.     color: #7f8c8d;
  1198. }
  1200. .kb-loading::before {
  1201.     content: '';
  1202.     width: 40px;
  1203.     height: 40px;
  1204.     border: 4px solid #ecf0f1;
  1205.     border-top-color: #3498db;
  1206.     border-radius: 50%;
  1207.     animation: spin 1s linear infinite;
  1208.     margin-right: 16px;
  1209. }
  1211. @keyframes spin {
  1212.     to { transform: rotate(360deg); }
  1213. }
  1215. /* Responsive */
  1216. @media (max-width: 768px) {
  1217.     .modern-kb-wrapper {
  1218.         flex-direction: column;
  1219.     }
  1220.     
  1221.     .modern-kb-sidebar {
  1222.         width: 100%;
  1223.         max-height: 300px;
  1224.     }
  1225.     
  1226.     .modern-kb-content {
  1227.         max-height: none;
  1228.     }
  1229. }
  1230. </style>
  1232. <script>
  1233. (function() {
  1234.     'use strict';
  1235.     
  1236.     // Función para inicializar todos los event listeners
  1237.     function initializeKB() {
  1238.         console.log('Initializing Knowledge Base...');
  1239.         
  1240.         // Debug: Log structure data
  1241.         const nav = document.getElementById('kb-navigation');
  1242.         if (nav) {
  1243.             const folders = nav.querySelectorAll('.modern-kb-folder-section');
  1244.             console.log('Total folders found in DOM:', folders.length);
  1245.             
  1246.             folders.forEach(function(folder, index) {
  1247.                 const folderHeader = folder.querySelector('.modern-kb-folder-header');
  1248.                 const folderName = folderHeader ? folderHeader.querySelector('.folder-name').textContent : 'Unknown';
  1249.                 const categories = folder.querySelectorAll('.modern-kb-category-section');
  1250.                 const directArticles = folder.querySelectorAll('.modern-kb-direct-articles');
  1251.                 console.log(`Folder ${index + 1}: "${folderName}" - Categories: ${categories.length}, Direct Articles sections: ${directArticles.length}`);
  1252.             });
  1253.         }
  1254.         
  1255.         // Toggle folder expansion
  1256.         const folderHeaders = document.querySelectorAll('.modern-kb-folder-header');
  1257.         console.log('Found folder headers:', folderHeaders.length);
  1258.         
  1259.         folderHeaders.forEach(function(header) {
  1260.             header.addEventListener('click', function(e) {
  1261.                 e.preventDefault();
  1262.                 e.stopPropagation();
  1263.                 console.log('Folder header clicked:', this.dataset.folderId);
  1264.                 
  1265.                 const folderId = this.dataset.folderId;
  1266.                 const content = document.getElementById('folder-' + folderId);
  1267.                 
  1268.                 if (!content) {
  1269.                     console.error('Folder content not found for ID:', folderId);
  1270.                     return;
  1271.                 }
  1272.                 
  1273.                 const isExpanded = content.classList.contains('expanded');
  1274.                 console.log('Current state - isExpanded:', isExpanded);
  1275.                 console.log('Content scrollHeight:', content.scrollHeight);
  1276.                 
  1277.                 // Toggle this folder
  1278.                 this.classList.toggle('active');
  1279.                 
  1280.                 // Force toggle with direct style manipulation
  1281.                 if (isExpanded) {
  1282.                     // Collapse
  1283.                     content.classList.remove('expanded');
  1284.                     content.style.maxHeight = '0px';
  1285.                     content.style.opacity = '0';
  1286.                     content.style.paddingTop = '0px';
  1287.                     content.style.paddingBottom = '0px';
  1288.                     content.style.overflow = 'hidden';
  1289.                     content.style.marginTop = '0';
  1290.                     content.style.marginBottom = '0';
  1291.                     console.log('Folder collapsed');
  1292.                 } else {
  1293.                     // Expand
  1294.                     content.classList.add('expanded');
  1295.                     
  1296.                     // First, reset all styles to ensure clean state
  1297.                     content.style.opacity = '1';
  1298.                     content.style.paddingTop = '10px';
  1299.                     content.style.paddingBottom = '10px';
  1300.                     content.style.overflow = 'hidden';
  1301.                     
  1302.                     // Temporarily remove max-height restriction to measure natural height
  1303.                     const originalMaxHeight = content.style.maxHeight;
  1304.                     content.style.maxHeight = 'none';
  1305.                     content.style.height = 'auto';
  1306.                     
  1307.                     // Force a reflow to ensure layout updates
  1308.                     void content.offsetHeight;
  1309.                     
  1310.                     // Now measure the natural height with padding
  1311.                     const naturalHeight = content.scrollHeight;
  1312.                     console.log('Natural height (with padding):', naturalHeight);
  1313.                     
  1314.                     // Calculate total height needed (add buffer for safety)
  1315.                     const buffer = 50; // Extra buffer to prevent cutting off content
  1316.                     const finalHeight = naturalHeight + buffer;
  1317.                     
  1318.                     // Apply the max-height for smooth transition
  1319.                     content.style.maxHeight = finalHeight + 'px';
  1320.                     content.style.height = 'auto';
  1321.                     
  1322.                     // Force another reflow to ensure layout updates and push elements down
  1323.                     void content.offsetHeight;
  1324.                     
  1325.                     // After transition completes, ensure overflow is visible
  1326.                     setTimeout(function() {
  1327.                         if (content.classList.contains('expanded')) {
  1328.                             // Keep overflow hidden to prevent content from spilling out
  1329.                             // but allow enough height for all content
  1330.                             const actualHeight = content.scrollHeight;
  1331.                             if (actualHeight > finalHeight - buffer) {
  1332.                                 content.style.maxHeight = (actualHeight + buffer) + 'px';
  1333.                             }
  1334.                         }
  1335.                     }, 350);
  1336.                     
  1337.                     console.log('Applied maxHeight:', content.style.maxHeight);
  1338.                     console.log('Content visible:', content.style.opacity);
  1339.                     console.log('Children count:', content.children.length);
  1340.                     console.log('Final height:', finalHeight);
  1341.                 }
  1342.             });
  1343.         });
  1344.         
  1345.         // Toggle category expansion and load articles - Using event delegation
  1346.         // Reutilizar nav que ya fue declarado arriba
  1347.         if (nav) {
  1348.             nav.addEventListener('click', function(e) {
  1349.                 console.log('Click detected in nav:', e.target);
  1350.                 
  1351.                 // First check if it's a category header or any child element
  1352.                 const categoryHeader = e.target.closest('.modern-kb-category-header');
  1353.                 if (categoryHeader && categoryHeader.dataset.categoryId) {
  1354.                     e.preventDefault();
  1355.                     e.stopPropagation();
  1356.                     
  1357.                     const categoryId = categoryHeader.dataset.categoryId;
  1358.                     console.log('Category header clicked:', categoryId);
  1359.                     
  1360.                     // Handle both regular categories and direct articles
  1361.                     let articlesList = document.getElementById('category-' + categoryId);
  1362.                     
  1363.                     // If not found, try direct articles format
  1364.                     if (!articlesList && categoryId.startsWith('direct-')) {
  1365.                         const folderId = categoryId.replace('direct-', '');
  1366.                         articlesList = document.getElementById('category-direct-' + folderId);
  1367.                     }
  1368.                     
  1369.                     if (articlesList) {
  1370.                         // Check current visibility state
  1371.                         const computedStyle = window.getComputedStyle(articlesList);
  1372.                         const isCurrentlyVisible = computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden';
  1373.                         
  1374.                         // Find parent folder content to recalculate height
  1375.                         const folderContent = articlesList.closest('.modern-kb-folder-content');
  1376.                         
  1377.                         if (isCurrentlyVisible) {
  1378.                             // Hide
  1379.                             articlesList.style.setProperty('display', 'none', 'important');
  1380.                             articlesList.style.setProperty('visibility', 'hidden', 'important');
  1381.                             categoryHeader.classList.remove('active');
  1382.                             console.log('Category collapsed');
  1383.                             
  1384.                             // Recalculate parent folder height after hiding articles
  1385.                             if (folderContent && folderContent.classList.contains('expanded')) {
  1386.                                 setTimeout(function() {
  1387.                                     const naturalHeight = folderContent.scrollHeight;
  1388.                                     const buffer = 50;
  1389.                                     folderContent.style.maxHeight = (naturalHeight + buffer) + 'px';
  1390.                                     console.log('Recalculated folder height after collapse:', naturalHeight + buffer);
  1391.                                 }, 50);
  1392.                             }
  1393.                         } else {
  1394.                             // Show
  1395.                             articlesList.style.setProperty('display', 'block', 'important');
  1396.                             articlesList.style.setProperty('visibility', 'visible', 'important');
  1397.                             articlesList.style.setProperty('opacity', '1', 'important');
  1398.                             categoryHeader.classList.add('active');
  1399.                             
  1400.                             const articleCount = articlesList.querySelectorAll('.kb-article-link').length;
  1401.                             console.log('Category expanded, articles visible:', articleCount, 'articles');
  1402.                             
  1403.                             // Recalculate parent folder height after showing articles
  1404.                             if (folderContent && folderContent.classList.contains('expanded')) {
  1405.                                 setTimeout(function() {
  1406.                                     const naturalHeight = folderContent.scrollHeight;
  1407.                                     const buffer = 50;
  1408.                                     folderContent.style.maxHeight = (naturalHeight + buffer) + 'px';
  1409.                                     console.log('Recalculated folder height after expand:', naturalHeight + buffer);
  1410.                                 }, 50);
  1411.                             }
  1412.                         }
  1413.                     } else {
  1414.                         console.error('Articles list not found for category:', categoryId);
  1415.                     }
  1416.                     return; // Exit early to prevent article link handler
  1417.                 }
  1418.                 
  1419.                 // Then check if it's an article link
  1420.                 const articleLink = e.target.closest('.kb-article-link');
  1421.                 if (articleLink) {
  1422.                     e.preventDefault();
  1423.                     e.stopPropagation();
  1424.                     
  1425.                     console.log('Article link clicked');
  1426.                     
  1427.                     // Remove active class from all links and articles
  1428.                     document.querySelectorAll('.kb-article-link').forEach(function(l) {
  1429.                         l.classList.remove('active');
  1430.                     });
  1431.                     document.querySelectorAll('.kb-article-display').forEach(function(a) {
  1432.                         a.classList.remove('active');
  1433.                     });
  1434.                     
  1435.                     // Add active class to clicked link
  1436.                     articleLink.classList.add('active');
  1437.                     
  1438.                     const articleSlug = articleLink.dataset.articleSlug;
  1439.                     const articleId = articleLink.dataset.articleId;
  1440.                     
  1441.                     console.log('Scrolling to article:', articleSlug);
  1442.                     
  1443.                     if (!articleSlug) {
  1444.                         console.error('No article slug found');
  1445.                         return;
  1446.                     }
  1447.                     
  1448.                     // Update URL without reload
  1449.                     const url = new URL(window.location);
  1450.                     url.searchParams.set('article', articleSlug);
  1451.                     window.history.pushState({article: articleSlug}, '', url);
  1452.                     
  1453.                     // Find the article in the main content area
  1454.                     const articleElement = document.getElementById('article-' + articleSlug);
  1455.                     const contentArea = document.querySelector('.modern-kb-content');
  1456.                     
  1457.                     if (articleElement && contentArea) {
  1458.                         // Add active class to highlight the article
  1459.                         articleElement.classList.add('active');
  1460.                         
  1461.                         // Calculate scroll position (offset from top of content area)
  1462.                         const contentRect = contentArea.getBoundingClientRect();
  1463.                         const articleRect = articleElement.getBoundingClientRect();
  1464.                         const scrollTop = contentArea.scrollTop;
  1465.                         const articleTop = articleRect.top - contentRect.top + scrollTop;
  1466.                         
  1467.                         // Scroll to article with smooth behavior
  1468.                         contentArea.scrollTo({
  1469.                             top: articleTop - 20, // 20px offset from top
  1470.                             behavior: 'smooth'
  1471.                         });
  1472.                         
  1473.                         console.log('Scrolled to article:', articleSlug);
  1474.                     } else {
  1475.                         console.error('Article element not found:', 'article-' + articleSlug);
  1476.                         // If article not found, scroll to welcome screen
  1477.                         const welcomeScreen = document.getElementById('welcome-screen');
  1478.                         if (welcomeScreen && contentArea) {
  1479.                             contentArea.scrollTo({
  1480.                                 top: 0,
  1481.                                 behavior: 'smooth'
  1482.                             });
  1483.                         }
  1484.                     }
  1485.                 }
  1486.             });
  1487.         }
  1488.         
  1489.         // Count article links after a short delay to ensure all are rendered
  1490.         setTimeout(function() {
  1491.             console.log('Found article links:', document.querySelectorAll('.kb-article-link').length);
  1492.             console.log('Found category headers:', document.querySelectorAll('.modern-kb-category-header').length);
  1493.         }, 500);
  1494.         
  1495.         // Handle browser back/forward buttons
  1496.         window.addEventListener('popstate', function(e) {
  1497.             if (e.state && e.state.article) {
  1498.                 const link = document.querySelector('[data-article-slug="' + e.state.article + '"]');
  1499.                 if (link) {
  1500.                     link.click();
  1501.                 }
  1502.             }
  1503.         });
  1504.         
  1505.         // Handle article selection from URL parameter
  1506.         const urlParams = new URLSearchParams(window.location.search);
  1507.         const articleParam = urlParams.get('article');
  1508.         if (articleParam) {
  1509.             setTimeout(function() {
  1510.                 const articleElement = document.getElementById('article-' + articleParam);
  1511.                 const activeLink = document.querySelector('[data-article-slug="' + articleParam + '"]');
  1512.                 const contentArea = document.querySelector('.modern-kb-content');
  1513.                 
  1514.                 if (articleElement && contentArea) {
  1515.                     // Add active classes
  1516.                     if (activeLink) {
  1517.                         activeLink.classList.add('active');
  1518.                     }
  1519.                     articleElement.classList.add('active');
  1520.                     
  1521.                     // Expand parent folder and category
  1522.                     if (activeLink) {
  1523.                         let articlesList = activeLink.closest('.modern-kb-articles-list');
  1524.                         if (articlesList) {
  1525.                             articlesList.style.setProperty('display', 'block', 'important');
  1526.                             let categoryHeader = articlesList.previousElementSibling;
  1527.                             if (categoryHeader && categoryHeader.classList.contains('modern-kb-category-header')) {
  1528.                                 categoryHeader.classList.add('active');
  1529.                                 
  1530.                                 // Expand parent folder
  1531.                                 let folderContent = categoryHeader.closest('.modern-kb-folder-content');
  1532.                                 if (folderContent) {
  1533.                                     let folderHeader = folderContent.previousElementSibling;
  1534.                                     if (folderHeader && folderHeader.classList.contains('modern-kb-folder-header')) {
  1535.                                         folderHeader.classList.add('active');
  1536.                                         folderContent.classList.add('expanded');
  1537.                                         folderContent.style.maxHeight = '9999px';
  1538.                                         folderContent.style.opacity = '1';
  1539.                                         folderContent.style.overflow = 'visible';
  1540.                                         folderContent.style.paddingTop = '10px';
  1541.                                         folderContent.style.paddingBottom = '10px';
  1542.                                     }
  1543.                                 }
  1544.                             }
  1545.                         }
  1546.                     }
  1547.                     
  1548.                     // Scroll to article
  1549.                     const contentRect = contentArea.getBoundingClientRect();
  1550.                     const articleRect = articleElement.getBoundingClientRect();
  1551.                     const scrollTop = contentArea.scrollTop;
  1552.                     const articleTop = articleRect.top - contentRect.top + scrollTop;
  1553.                     
  1554.                     contentArea.scrollTo({
  1555.                         top: articleTop - 20,
  1556.                         behavior: 'smooth'
  1557.                     });
  1558.                 }
  1559.             }, 300);
  1560.         }
  1561.         
  1562.         // Auto-expand selected topic folder and category, then scroll
  1563.         {% if selectedTopic %}
  1564.             setTimeout(function() {
  1565.                 const topicId = {{ selectedTopic.id }};
  1566.                 const firstCategoryId = {{ selectedTopic.firstCategoryId ?: 'null' }};
  1567.                 
  1568.                 // Hide welcome screen
  1569.                 const welcomeScreen = document.getElementById('welcome-screen');
  1570.                 if (welcomeScreen) {
  1571.                     welcomeScreen.style.display = 'none';
  1572.                 }
  1573.                 
  1574.                 // Find and expand the folder (solution)
  1575.                 const folderHeader = document.querySelector('.modern-kb-folder-header[data-folder-id="' + topicId + '"]');
  1576.                 if (folderHeader) {
  1577.                     const folderContent = document.getElementById('folder-' + topicId);
  1578.                     
  1579.                     if (folderContent) {
  1580.                         // Expand folder
  1581.                         folderHeader.classList.add('active');
  1582.                         folderContent.classList.add('expanded');
  1583.                         folderContent.style.opacity = '1';
  1584.                         folderContent.style.paddingTop = '10px';
  1585.                         folderContent.style.paddingBottom = '10px';
  1586.                         folderContent.style.overflow = 'hidden';
  1587.                         
  1588.                         // Calculate natural height
  1589.                         folderContent.style.maxHeight = 'none';
  1590.                         const naturalHeight = folderContent.scrollHeight;
  1591.                         const buffer = 50;
  1592.                         folderContent.style.maxHeight = (naturalHeight + buffer) + 'px';
  1593.                         
  1594.                         console.log('Expanded folder:', topicId);
  1595.                         
  1596.                         // If there's a first category, expand it too
  1597.                         if (firstCategoryId) {
  1598.                             setTimeout(function() {
  1599.                                 const categoryHeader = document.querySelector('.modern-kb-category-header[data-category-id="' + firstCategoryId + '"]');
  1600.                                 const articlesList = document.getElementById('category-' + firstCategoryId);
  1601.                                 
  1602.                                 if (categoryHeader && articlesList) {
  1603.                                     articlesList.style.setProperty('display', 'block', 'important');
  1604.                                     articlesList.style.setProperty('visibility', 'visible', 'important');
  1605.                                     articlesList.style.setProperty('opacity', '1', 'important');
  1606.                                     categoryHeader.classList.add('active');
  1607.                                     
  1608.                                     console.log('Expanded category:', firstCategoryId);
  1609.                                     
  1610.                                     // Scroll to the category section in main content
  1611.                                     setTimeout(function() {
  1612.                                         const categorySection = document.querySelector('.kb-category-content-section[data-category-id="' + firstCategoryId + '"]');
  1613.                                         const contentArea = document.querySelector('.modern-kb-content');
  1614.                                         
  1615.                                         if (categorySection && contentArea) {
  1616.                                             // Wait a bit more for layout to settle
  1617.                                             setTimeout(function() {
  1618.                                                 const contentRect = contentArea.getBoundingClientRect();
  1619.                                                 const sectionRect = categorySection.getBoundingClientRect();
  1620.                                                 const scrollTop = contentArea.scrollTop;
  1621.                                                 const sectionTop = sectionRect.top - contentRect.top + scrollTop;
  1622.                                                 
  1623.                                                 contentArea.scrollTo({
  1624.                                                     top: Math.max(0, sectionTop - 120), // 120px offset from top
  1625.                                                     behavior: 'smooth'
  1626.                                                 });
  1627.                                                 
  1628.                                                 console.log('Scrolled to category section');
  1629.                                             }, 100);
  1630.                                         }
  1631.                                     }, 400);
  1632.                                 }
  1633.                             }, 300);
  1634.                         } else {
  1635.                             // If no category, scroll to the folder section
  1636.                             setTimeout(function() {
  1637.                                 const folderSection = document.querySelector('.kb-folder-content-section[data-folder-id="' + topicId + '"]');
  1638.                                 const contentArea = document.querySelector('.modern-kb-content');
  1639.                                 
  1640.                                 if (folderSection && contentArea) {
  1641.                                     setTimeout(function() {
  1642.                                         const contentRect = contentArea.getBoundingClientRect();
  1643.                                         const sectionRect = folderSection.getBoundingClientRect();
  1644.                                         const scrollTop = contentArea.scrollTop;
  1645.                                         const sectionTop = sectionRect.top - contentRect.top + scrollTop;
  1646.                                         
  1647.                                         contentArea.scrollTo({
  1648.                                             top: Math.max(0, sectionTop - 120),
  1649.                                             behavior: 'smooth'
  1650.                                         });
  1651.                                         
  1652.                                         console.log('Scrolled to folder section');
  1653.                                     }, 100);
  1654.                                 }
  1655.                             }, 300);
  1656.                         }
  1657.                     }
  1658.                 } else {
  1659.                     console.warn('Folder not found for topic ID:', topicId);
  1660.                 }
  1661.             }, 500);
  1662.         {% elseif not selectedArticle %}
  1663.             // Auto-expand first folder on load if no article is selected and no topic
  1664.             const firstFolder = document.querySelector('.modern-kb-folder-header');
  1665.             if (firstFolder) {
  1666.                 setTimeout(function() {
  1667.                     firstFolder.click();
  1668.                 }, 100);
  1669.             }
  1670.         {% endif %}
  1671.         
  1672.         console.log('Knowledge Base initialized successfully');
  1673.     }
  1674.     
  1675.     // Search functionality
  1676.     function initializeSearch() {
  1677.         const searchInput = document.getElementById('kb-search-input');
  1678.         const searchClear = document.getElementById('kb-search-clear');
  1679.         const resultsCount = document.getElementById('kb-search-results-count');
  1680.         const resultsNumber = document.getElementById('kb-results-number');
  1681.         
  1682.         if (!searchInput) return;
  1683.         
  1684.         // Function to highlight text
  1685.         function highlightText(text, searchTerm) {
  1686.             if (!searchTerm) return text;
  1687.             const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
  1688.             return text.replace(regex, '<span class="kb-search-highlight">$1</span>');
  1689.         }
  1690.         
  1691.         // Function to perform search
  1692.         function performSearch(searchTerm) {
  1693.             const term = searchTerm.trim().toLowerCase();
  1694.             let matchCount = 0;
  1695.             
  1696.             // Show/hide clear button
  1697.             if (term.length > 0) {
  1698.                 searchClear.style.display = 'block';
  1699.                 resultsCount.style.display = 'block';
  1700.             } else {
  1701.                 searchClear.style.display = 'none';
  1702.                 resultsCount.style.display = 'none';
  1703.             }
  1704.             
  1705.             if (term.length === 0) {
  1706.                 // Reset all - show everything
  1707.                 document.querySelectorAll('.modern-kb-folder-section').forEach(function(section) {
  1708.                     section.classList.remove('hidden-by-search', 'visible-by-search');
  1709.                 });
  1710.                 document.querySelectorAll('.modern-kb-category-section').forEach(function(section) {
  1711.                     section.classList.remove('hidden-by-search', 'visible-by-search');
  1712.                 });
  1713.                 document.querySelectorAll('.modern-kb-article-item').forEach(function(item) {
  1714.                     item.classList.remove('hidden-by-search');
  1715.                     const link = item.querySelector('.kb-article-link');
  1716.                     if (link && link.dataset.originalText) {
  1717.                         link.innerHTML = link.dataset.originalText; // Restore original text
  1718.                     }
  1719.                 });
  1720.                 document.querySelectorAll('.kb-article-display').forEach(function(article) {
  1721.                     article.classList.remove('hidden-by-search');
  1722.                     const header = article.querySelector('.kb-article-header h1');
  1723.                     if (header) {
  1724.                         // Store original text if not already stored
  1725.                         if (!header.dataset.originalText) {
  1726.                             header.dataset.originalText = header.textContent;
  1727.                         }
  1728.                         header.innerHTML = header.dataset.originalText; // Restore original text
  1729.                     }
  1730.                 });
  1731.                 // Restore category names
  1732.                 document.querySelectorAll('.category-name').forEach(function(catName) {
  1733.                     if (catName.dataset.originalText) {
  1734.                         catName.innerHTML = catName.dataset.originalText;
  1735.                     }
  1736.                 });
  1737.                 resultsNumber.textContent = '0';
  1738.                 return;
  1739.             }
  1740.             
  1741.             // First, search in category names (sidebar)
  1742.             const categoryMatches = new Set();
  1743.             document.querySelectorAll('.category-name').forEach(function(catName) {
  1744.                 // Store original text if not already stored
  1745.                 if (!catName.dataset.originalText) {
  1746.                     catName.dataset.originalText = catName.textContent;
  1747.                 }
  1748.                 
  1749.                 const originalText = catName.dataset.originalText;
  1750.                 const categoryName = originalText.toLowerCase();
  1751.                 
  1752.                 if (categoryName.includes(term)) {
  1753.                     // Category name matches - mark it and show all its articles
  1754.                     const catSection = catName.closest('.modern-kb-category-section');
  1755.                     if (catSection) {
  1756.                         categoryMatches.add(catSection);
  1757.                         // Show all articles in this category
  1758.                         const articles = catSection.querySelectorAll('.modern-kb-article-item');
  1759.                         articles.forEach(function(article) {
  1760.                             article.classList.remove('hidden-by-search');
  1761.                         });
  1762.                         matchCount += articles.length;
  1763.                     }
  1764.                     
  1765.                     // Highlight the matching text in the category name
  1766.                     catName.innerHTML = highlightText(originalText, searchTerm);
  1767.                 } else {
  1768.                     // Restore original text without highlights
  1769.                     catName.innerHTML = originalText;
  1770.                 }
  1771.             });
  1772.             
  1773.             // Search in sidebar article links
  1774.             document.querySelectorAll('.kb-article-link').forEach(function(link) {
  1775.                 // Store original text if not already stored
  1776.                 if (!link.dataset.originalText) {
  1777.                     link.dataset.originalText = link.textContent;
  1778.                 }
  1779.                 
  1780.                 const originalText = link.dataset.originalText;
  1781.                 const articleName = originalText.toLowerCase();
  1782.                 const articleItem = link.closest('.modern-kb-article-item');
  1783.                 
  1784.                 // Check if this article is in a matching category
  1785.                 const catSection = articleItem.closest('.modern-kb-category-section');
  1786.                 const isInMatchingCategory = catSection && categoryMatches.has(catSection);
  1787.                 
  1788.                 if (articleName.includes(term) || isInMatchingCategory) {
  1789.                     articleItem.classList.remove('hidden-by-search');
  1790.                     if (!isInMatchingCategory) {
  1791.                         matchCount++;
  1792.                     }
  1793.                     
  1794.                     // Highlight the matching text in the link
  1795.                     if (articleName.includes(term)) {
  1796.                         link.innerHTML = highlightText(originalText, searchTerm);
  1797.                     } else {
  1798.                         link.innerHTML = originalText;
  1799.                     }
  1800.                 } else {
  1801.                     articleItem.classList.add('hidden-by-search');
  1802.                     // Restore original text without highlights
  1803.                     link.innerHTML = originalText;
  1804.                 }
  1805.             });
  1806.             
  1807.             // Search in main content articles
  1808.             document.querySelectorAll('.kb-article-display').forEach(function(article) {
  1809.                 const header = article.querySelector('.kb-article-header h1');
  1810.                 const body = article.querySelector('.kb-article-body');
  1811.                 
  1812.                 // Store original header text if not already stored
  1813.                 if (header && !header.dataset.originalText) {
  1814.                     header.dataset.originalText = header.textContent;
  1815.                 }
  1816.                 
  1817.                 const originalHeaderText = header && header.dataset.originalText ? header.dataset.originalText : '';
  1818.                 const articleName = originalHeaderText.toLowerCase();
  1819.                 const articleContent = body ? body.textContent.toLowerCase() : '';
  1820.                 
  1821.                 if (articleName.includes(term) || articleContent.includes(term)) {
  1822.                     article.classList.remove('hidden-by-search');
  1823.                     matchCount++;
  1824.                     
  1825.                     // Highlight in header
  1826.                     if (header && articleName.includes(term)) {
  1827.                         header.innerHTML = highlightText(originalHeaderText, searchTerm);
  1828.                     } else if (header) {
  1829.                         // Restore original if no match in header
  1830.                         header.innerHTML = originalHeaderText;
  1831.                     }
  1832.                 } else {
  1833.                     article.classList.add('hidden-by-search');
  1834.                     // Restore original header text
  1835.                     if (header && header.dataset.originalText) {
  1836.                         header.innerHTML = header.dataset.originalText;
  1837.                     }
  1838.                 }
  1839.             });
  1840.             
  1841.             // Show/hide folders and categories based on matches
  1842.             document.querySelectorAll('.modern-kb-folder-section').forEach(function(folderSection) {
  1843.                 const folderContent = folderSection.querySelector('.modern-kb-folder-content');
  1844.                 const visibleArticles = folderContent ? 
  1845.                     folderContent.querySelectorAll('.modern-kb-article-item:not(.hidden-by-search)') : [];
  1846.                 
  1847.                 // Check if category has visible articles or matching category names
  1848.                 let hasVisibleContent = visibleArticles.length > 0;
  1849.                 if (!hasVisibleContent && folderContent) {
  1850.                     folderContent.querySelectorAll('.modern-kb-category-section').forEach(function(catSection) {
  1851.                         const catArticles = catSection.querySelectorAll('.modern-kb-article-item:not(.hidden-by-search)');
  1852.                         const catName = catSection.querySelector('.category-name');
  1853.                         const categoryNameMatches = catName && catName.textContent.toLowerCase().includes(term);
  1854.                         
  1855.                         if (catArticles.length > 0 || categoryNameMatches) {
  1856.                             hasVisibleContent = true;
  1857.                         }
  1858.                     });
  1859.                 }
  1860.                 
  1861.                 if (hasVisibleContent) {
  1862.                     folderSection.classList.remove('hidden-by-search');
  1863.                     folderSection.classList.add('visible-by-search');
  1864.                     
  1865.                     // Auto-expand folder if it has matches
  1866.                     if (folderContent && !folderContent.classList.contains('expanded')) {
  1867.                         const folderHeader = folderSection.querySelector('.modern-kb-folder-header');
  1868.                         if (folderHeader) {
  1869.                             folderHeader.classList.add('active');
  1870.                             folderContent.classList.add('expanded');
  1871.                             folderContent.style.maxHeight = '9999px';
  1872.                             folderContent.style.opacity = '1';
  1873.                             folderContent.style.paddingTop = '10px';
  1874.                             folderContent.style.paddingBottom = '10px';
  1875.                         }
  1876.                     }
  1877.                 } else {
  1878.                     folderSection.classList.add('hidden-by-search');
  1879.                     folderSection.classList.remove('visible-by-search');
  1880.                 }
  1881.             });
  1882.             
  1883.             // Show/hide categories based on matches
  1884.             document.querySelectorAll('.modern-kb-category-section').forEach(function(catSection) {
  1885.                 const visibleArticles = catSection.querySelectorAll('.modern-kb-article-item:not(.hidden-by-search)');
  1886.                 const catName = catSection.querySelector('.category-name');
  1887.                 const categoryNameMatches = catName && catName.textContent.toLowerCase().includes(term);
  1888.                 
  1889.                 if (visibleArticles.length > 0 || categoryNameMatches) {
  1890.                     catSection.classList.remove('hidden-by-search');
  1891.                     catSection.classList.add('visible-by-search');
  1892.                     
  1893.                     // Auto-expand category and show articles list
  1894.                     const articlesList = catSection.querySelector('.modern-kb-articles-list');
  1895.                     const categoryHeader = catSection.querySelector('.modern-kb-category-header');
  1896.                     
  1897.                     if (articlesList && categoryHeader) {
  1898.                         articlesList.style.setProperty('display', 'block', 'important');
  1899.                         articlesList.style.setProperty('visibility', 'visible', 'important');
  1900.                         articlesList.style.setProperty('opacity', '1', 'important');
  1901.                         categoryHeader.classList.add('active');
  1902.                     }
  1903.                 } else {
  1904.                     catSection.classList.add('hidden-by-search');
  1905.                     catSection.classList.remove('visible-by-search');
  1906.                 }
  1907.             });
  1908.             
  1909.             // Update results count
  1910.             resultsNumber.textContent = matchCount;
  1911.         }
  1912.         
  1913.         // Event listeners
  1914.         let searchTimeout;
  1915.         searchInput.addEventListener('input', function(e) {
  1916.             clearTimeout(searchTimeout);
  1917.             const term = e.target.value;
  1918.             
  1919.             // Debounce search for better performance
  1920.             searchTimeout = setTimeout(function() {
  1921.                 performSearch(term);
  1922.             }, 300);
  1923.         });
  1924.         
  1925.         searchInput.addEventListener('keydown', function(e) {
  1926.             if (e.key === 'Enter') {
  1927.                 e.preventDefault();
  1928.                 clearTimeout(searchTimeout);
  1929.                 performSearch(e.target.value);
  1930.             }
  1931.         });
  1932.         
  1933.         searchClear.addEventListener('click', function() {
  1934.             searchInput.value = '';
  1935.             searchInput.focus();
  1936.             performSearch('');
  1937.         });
  1938.         
  1939.         // Initial search if URL has search parameter
  1940.         const urlParams = new URLSearchParams(window.location.search);
  1941.         const searchParam = urlParams.get('search');
  1942.         if (searchParam) {
  1943.             searchInput.value = searchParam;
  1944.             performSearch(searchParam);
  1945.         }
  1946.     }
  1947.     
  1948.     // Content Search functionality
  1949.     function initializeContentSearch() {
  1950.         const contentSearchInput = document.getElementById('kb-content-search-input');
  1951.         const contentSearchClear = document.getElementById('kb-content-search-clear');
  1952.         const contentResultsCount = document.getElementById('kb-content-search-results-count');
  1953.         const contentResultsNumber = document.getElementById('kb-content-results-number');
  1954.         const welcomeScreen = document.getElementById('welcome-screen');
  1955.         
  1956.         if (!contentSearchInput) return;
  1957.         
  1958.         // Function to highlight text in content
  1959.         function highlightContentText(text, searchTerm) {
  1960.             if (!searchTerm) return text;
  1961.             const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
  1962.             return text.replace(regex, '<mark class="kb-content-search-highlight">$1</mark>');
  1963.         }
  1964.         
  1965.         // Function to perform content search
  1966.         function performContentSearch(searchTerm) {
  1967.             const term = searchTerm.trim().toLowerCase();
  1968.             let matchCount = 0;
  1969.             
  1970.             // Show/hide clear button and results count
  1971.             if (term.length > 0) {
  1972.                 contentSearchClear.style.display = 'block';
  1973.                 contentResultsCount.style.display = 'block';
  1974.             } else {
  1975.                 contentSearchClear.style.display = 'none';
  1976.                 contentResultsCount.style.display = 'none';
  1977.             }
  1978.             
  1979.             if (term.length === 0) {
  1980.                 // Reset all - show everything including welcome screen
  1981.                 document.querySelectorAll('.kb-article-display').forEach(function(article) {
  1982.                     article.classList.remove('hidden-by-content-search');
  1983.                     const header = article.querySelector('.kb-article-header h1');
  1984.                     if (header && header.dataset.originalText) {
  1985.                         header.innerHTML = header.dataset.originalText;
  1986.                     }
  1987.                     // Remove highlights from body content
  1988.                     const body = article.querySelector('.kb-article-body');
  1989.                     if (body && body.dataset.originalHtml) {
  1990.                         body.innerHTML = body.dataset.originalHtml;
  1991.                     }
  1992.                 });
  1993.                 document.querySelectorAll('.kb-folder-content-section').forEach(function(section) {
  1994.                     section.classList.remove('hidden-by-content-search');
  1995.                 });
  1996.                 document.querySelectorAll('.kb-category-content-section').forEach(function(section) {
  1997.                     section.classList.remove('hidden-by-content-search');
  1998.                 });
  1999.                 
  2000.                 // Restore category titles
  2001.                 document.querySelectorAll('.kb-category-title').forEach(function(catTitle) {
  2002.                     if (catTitle.dataset.originalText) {
  2003.                         catTitle.innerHTML = catTitle.dataset.originalText;
  2004.                     }
  2005.                 });
  2006.                 
  2007.                 // Show welcome screen
  2008.                 if (welcomeScreen) {
  2009.                     welcomeScreen.classList.remove('hidden-by-content-search');
  2010.                 }
  2011.                 
  2012.                 contentResultsNumber.textContent = '0';
  2013.                 return;
  2014.             }
  2015.             
  2016.             // Hide welcome screen when searching
  2017.             if (welcomeScreen) {
  2018.                 welcomeScreen.classList.add('hidden-by-content-search');
  2019.             }
  2020.             
  2021.             // First, search in category titles (main content)
  2022.             const categoryContentMatches = new Set();
  2023.             document.querySelectorAll('.kb-category-title').forEach(function(catTitle) {
  2024.                 // Store original text if not already stored
  2025.                 if (!catTitle.dataset.originalText) {
  2026.                     catTitle.dataset.originalText = catTitle.textContent;
  2027.                 }
  2028.                 
  2029.                 const originalText = catTitle.dataset.originalText;
  2030.                 const categoryName = originalText.toLowerCase();
  2031.                 
  2032.                 if (categoryName.includes(term)) {
  2033.                     // Category name matches - mark it and show all its articles
  2034.                     const catSection = catTitle.closest('.kb-category-content-section');
  2035.                     if (catSection) {
  2036.                         categoryContentMatches.add(catSection);
  2037.                         // Show all articles in this category
  2038.                         const articles = catSection.querySelectorAll('.kb-article-display');
  2039.                         articles.forEach(function(article) {
  2040.                             article.classList.remove('hidden-by-content-search');
  2041.                         });
  2042.                         matchCount += articles.length;
  2043.                     }
  2044.                     
  2045.                     // Highlight the matching text in the category title
  2046.                     catTitle.innerHTML = highlightContentText(originalText, searchTerm);
  2047.                 } else {
  2048.                     // Restore original text without highlights
  2049.                     catTitle.innerHTML = originalText;
  2050.                 }
  2051.             });
  2052.             
  2053.             // Search in all articles in the main content
  2054.             document.querySelectorAll('.kb-article-display').forEach(function(article) {
  2055.                 const header = article.querySelector('.kb-article-header h1');
  2056.                 const body = article.querySelector('.kb-article-body');
  2057.                 
  2058.                 // Check if this article is in a matching category
  2059.                 const catSection = article.closest('.kb-category-content-section');
  2060.                 const isInMatchingCategory = catSection && categoryContentMatches.has(catSection);
  2061.                 
  2062.                 // Store original header text if not already stored
  2063.                 if (header && !header.dataset.originalText) {
  2064.                     header.dataset.originalText = header.textContent;
  2065.                 }
  2066.                 
  2067.                 // Store original body HTML if not already stored
  2068.                 if (body && !body.dataset.originalHtml) {
  2069.                     body.dataset.originalHtml = body.innerHTML;
  2070.                 }
  2071.                 
  2072.                 const originalHeaderText = header && header.dataset.originalText ? header.dataset.originalText : '';
  2073.                 const articleName = originalHeaderText.toLowerCase();
  2074.                 const articleContent = body ? body.textContent.toLowerCase() : '';
  2075.                 
  2076.                 if (articleName.includes(term) || articleContent.includes(term) || isInMatchingCategory) {
  2077.                     article.classList.remove('hidden-by-content-search');
  2078.                     if (!isInMatchingCategory) {
  2079.                         matchCount++;
  2080.                     }
  2081.                     
  2082.                     // Highlight in header if matches
  2083.                     if (header && articleName.includes(term)) {
  2084.                         header.innerHTML = highlightContentText(originalHeaderText, searchTerm);
  2085.                     } else if (header) {
  2086.                         header.innerHTML = originalHeaderText;
  2087.                     }
  2088.                     
  2089.                     // Highlight in body content if matches
  2090.                     if (body && articleContent.includes(term) && body.dataset.originalHtml) {
  2091.                         // Simple approach: highlight text in HTML while preserving structure
  2092.                         // Escape special regex characters in search term
  2093.                         const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  2094.                         const regex = new RegExp(`(${escapedTerm})`, 'gi');
  2095.                         
  2096.                         // Replace text nodes only (preserve HTML tags)
  2097.                         // This is a simplified approach - replace in text content areas
  2098.                         let htmlContent = body.dataset.originalHtml;
  2099.                         // Only replace outside of HTML tags
  2100.                         htmlContent = htmlContent.replace(regex, function(match) {
  2101.                             // Check if we're inside an HTML tag
  2102.                             return '<mark class="kb-content-search-highlight">' + match + '</mark>';
  2103.                         });
  2104.                         
  2105.                         body.innerHTML = htmlContent;
  2106.                     } else if (body && body.dataset.originalHtml) {
  2107.                         body.innerHTML = body.dataset.originalHtml;
  2108.                     }
  2109.                 } else {
  2110.                     article.classList.add('hidden-by-content-search');
  2111.                     // Restore original content
  2112.                     if (header && header.dataset.originalText) {
  2113.                         header.innerHTML = header.dataset.originalText;
  2114.                     }
  2115.                     if (body && body.dataset.originalHtml) {
  2116.                         body.innerHTML = body.dataset.originalHtml;
  2117.                     }
  2118.                 }
  2119.             });
  2120.             
  2121.             // Hide/show folder and category sections based on visible articles or matching category names
  2122.             document.querySelectorAll('.kb-folder-content-section').forEach(function(folderSection) {
  2123.                 const visibleArticles = folderSection.querySelectorAll('.kb-article-display:not(.hidden-by-content-search)');
  2124.                 const matchingCategories = folderSection.querySelectorAll('.kb-category-title');
  2125.                 let hasMatchingCategory = false;
  2126.                 
  2127.                 matchingCategories.forEach(function(catTitle) {
  2128.                     if (catTitle.textContent.toLowerCase().includes(term)) {
  2129.                         hasMatchingCategory = true;
  2130.                     }
  2131.                 });
  2132.                 
  2133.                 if (visibleArticles.length > 0 || hasMatchingCategory) {
  2134.                     folderSection.classList.remove('hidden-by-content-search');
  2135.                 } else {
  2136.                     folderSection.classList.add('hidden-by-content-search');
  2137.                 }
  2138.             });
  2139.             
  2140.             document.querySelectorAll('.kb-category-content-section').forEach(function(catSection) {
  2141.                 const visibleArticles = catSection.querySelectorAll('.kb-article-display:not(.hidden-by-content-search)');
  2142.                 const catTitle = catSection.querySelector('.kb-category-title');
  2143.                 const categoryNameMatches = catTitle && catTitle.textContent.toLowerCase().includes(term);
  2144.                 
  2145.                 if (visibleArticles.length > 0 || categoryNameMatches) {
  2146.                     catSection.classList.remove('hidden-by-content-search');
  2147.                 } else {
  2148.                     catSection.classList.add('hidden-by-content-search');
  2149.                 }
  2150.             });
  2151.             
  2152.             // Update results count
  2153.             contentResultsNumber.textContent = matchCount;
  2154.         }
  2155.         
  2156.         // Event listeners
  2157.         let contentSearchTimeout;
  2158.         contentSearchInput.addEventListener('input', function(e) {
  2159.             clearTimeout(contentSearchTimeout);
  2160.             const term = e.target.value;
  2161.             
  2162.             // Debounce search for better performance
  2163.             contentSearchTimeout = setTimeout(function() {
  2164.                 performContentSearch(term);
  2165.             }, 300);
  2166.         });
  2167.         
  2168.         contentSearchInput.addEventListener('keydown', function(e) {
  2169.             if (e.key === 'Enter') {
  2170.                 e.preventDefault();
  2171.                 clearTimeout(contentSearchTimeout);
  2172.                 performContentSearch(e.target.value);
  2173.             }
  2174.         });
  2175.         
  2176.         contentSearchClear.addEventListener('click', function() {
  2177.             contentSearchInput.value = '';
  2178.             contentSearchInput.focus();
  2179.             performContentSearch('');
  2180.         });
  2181.     }
  2182.     
  2183.     // Initialize when DOM is ready (only once)
  2184.     let initialized = false;
  2185.     function initOnce() {
  2186.         if (!initialized) {
  2187.             initialized = true;
  2188.             initializeKB();
  2189.             initializeSearch();
  2190.             initializeContentSearch();
  2191.             
  2192.             // Scroll to container if topic is selected (after everything is initialized)
  2193.             {% if selectedTopic %}
  2194.             setTimeout(function() {
  2195.                 const kbContainer = document.getElementById('modern-kb-container');
  2196.                 if (kbContainer) {
  2197.                     const containerRect = kbContainer.getBoundingClientRect();
  2198.                     const scrollY = window.scrollY || window.pageYOffset;
  2199.                     const containerTop = containerRect.top + scrollY;
  2200.                     
  2201.                     window.scrollTo({
  2202.                         top: Math.max(0, containerTop - 20), // 20px offset from top
  2203.                         behavior: 'smooth'
  2204.                     });
  2205.                     
  2206.                     console.log('Scrolled page to modern-kb-container');
  2207.                 }
  2208.             }, 800); // Wait a bit more for all content to render
  2209.             {% endif %}
  2210.         }
  2211.     }
  2212.     
  2213.     if (document.readyState === 'loading') {
  2214.         document.addEventListener('DOMContentLoaded', initOnce);
  2215.     } else {
  2216.         // DOM is already ready
  2217.         initOnce();
  2218.     }
  2219.     
  2220.     // Also try with jQuery if available (for compatibility)
  2221.     if (typeof jQuery !== 'undefined') {
  2222.         jQuery(document).ready(function($) {
  2223.             console.log('jQuery ready, initializing...');
  2224.             initOnce();
  2225.         });
  2226.     }
  2227.     
  2228.     // Also scroll on window load (after all resources are loaded)
  2229.     {% if selectedTopic %}
  2230.     window.addEventListener('load', function() {
  2231.         setTimeout(function() {
  2232.             const kbContainer = document.getElementById('modern-kb-container');
  2233.             if (kbContainer) {
  2234.                 const containerRect = kbContainer.getBoundingClientRect();
  2235.                 const scrollY = window.scrollY || window.pageYOffset;
  2236.                 const containerTop = containerRect.top + scrollY;
  2237.                 
  2238.                 window.scrollTo({
  2239.                     top: Math.max(0, containerTop - 20),
  2240.                     behavior: 'smooth'
  2241.                 });
  2242.             }
  2243.         }, 200);
  2244.     });
  2245.     {% endif %}
  2246. })();
  2247. </script>
  2248. {% endblock %}