/* ============================================
   WIKI — ОПТИМИЗИРОВАННЫЙ CSS
   style.css
============================================ */
:root {
  --sidebar-width: 280px;
  --sidebar-min: 200px;
  --sidebar-max: 400px;
  --resizer-width: 6px;
}

/* Общее */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
}
#app-container {
  height: calc(100vh - 56px);
  width: 100%;
  display: flex;
  overflow: hidden; /* ← скролл управляет #main-content, а не весь контейнер */
}

/* Сайдбар */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-min);
  max-width: var(--sidebar-max);
  transition: width 0.2s ease;
  border-right: 1px solid #e9ecef;
  background-color: #f8f9fa;
  display: flex;
}
.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* Ресайзер */
.resizer {
  width: var(--resizer-width);
  background: #e9ecef;
  cursor: col-resize;
  user-select: none;
}
.resizer:hover { background: #0d6efd; }

/* Основной контент */
#main-content {
  display: flex;
  flex-direction: column;
  overflow: auto; /* ✅ Скролл только внутри контента */
}

/* Markdown */
.markdown-content h1 { font-size: 2.25rem; border-bottom: 2px solid #e9ecef; padding-bottom: 0.5rem; }
.markdown-content h2 { font-size: 1.75rem; border-bottom: 1px solid #e9ecef; padding-bottom: 0.3rem; }
.markdown-content h3 { font-size: 1.375rem; }
.markdown-content h1, h2, h3, h4, h5, h6 { margin-top: 1.5rem; margin-bottom: 1rem; color: #2c3e50; }
.markdown-content p, .markdown-content li { margin-bottom: 1rem; }
.markdown-content a { color: #0d6efd; text-decoration: none; }
.markdown-content a:hover { color: #0a58ca; text-decoration: underline; }
.markdown-content blockquote {
  border-left: 4px solid #0d6efd;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background-color: #f8f9fa;
  border-radius: 0 4px 4px 0;
}

/* ============================================
   ТАБЛИЦЫ — ВСЕГДА ВПИСЫВАЮТСЯ В ШИРИНУ
   ============================================ */
.markdown-content table {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-content table td,
.markdown-content table th {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

.markdown-content table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.markdown-content table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.markdown-content img {
  max-width: 100%; height: auto; margin: 1rem 0; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.markdown-content code {
  background-color: #f1f3f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  color: #d63384;
}
.markdown-content pre {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.4;
}
.hljs { background-color: #f8f9fa !important; padding: 1rem !important; }

/* ============================================
   MERMAID — ВСЕГДА ВПИСЫВАЮТСЯ В ШИРИНУ
   ============================================ */
.mermaid-container {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  overflow: auto;
  min-height: 200px;
  max-width: 100%;
}

.mermaid-container svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.mermaid-container svg[viewBox] {
  width: 100% !important;
  height: auto !important;
}

/* Контролы Mermaid */
.mermaid-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}
.mermaid-container:hover .mermaid-controls {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.mermaid-controls-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 5px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mermaid-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #dee2e6; background: white; border-radius: 4px;
  color: #495057; cursor: pointer; font-size: 0.85rem;
}
.mermaid-btn:hover { background-color: #f8f9fa; color: #0d6efd; }

/* ============================================
   PLANTUML — ВСЕГДА ВПИСЫВАЮТСЯ В ШИРИНУ
   ============================================ */
.plantuml-container,
.plantuml-diagram {
  max-width: 100% !important;
  overflow: auto !important;
  margin: 1rem 0;
}

.plantuml-container svg,
.plantuml-diagram svg,
.plantuml-img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.plantuml-container svg[viewBox] {
  width: 100% !important;
  height: auto !important;
}

/* ============================================
   DRAW.IO — ВСЕГДА ВПИСЫВАЮТСЯ В ШИРИНУ
   ============================================ */
.drawio-container {
  max-width: 100% !important;
  margin: 1.5rem 0;
}

.drawio-container iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: 500px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  min-height: 200px;
  max-height: 90vh;
}

.drawio-container-small iframe { height: 300px; }
.drawio-container-medium iframe { height: 500px; }
.drawio-container-large iframe { height: 800px; }
.drawio-container-full iframe { height: 90vh; }

/* Сайдбар: навигация */
.sidebar .nav-link {
  padding: 0.5rem 1rem;
  color: #495057;
  border-radius: 4px;
  margin-bottom: 2px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.sidebar .nav-link:hover { background-color: #e9ecef; color: #0d6efd; }
.sidebar .nav-link.active {
  background-color: #e7f3ff;
  border-left: 3px solid #0d6efd;
  padding-left: calc(1rem - 3px);
  color: #0d6efd;
}
.sidebar .folder-toggle { font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.sidebar .folder-toggle i { width: 16px; text-align: center; font-size: 0.9em; }

/* Хлебные крошки */
.wiki-breadcrumbs { background-color: #f8f9fa; padding: 0.5rem; border-radius: 4px; margin-bottom: 1rem; }

/* Поиск */
#wiki-search:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Контекстное меню */
.context-menu {
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  min-width: 200px;
  padding: 5px 0;
  z-index: 10000;
}
.context-menu .dropdown-item {
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #212529;
  text-decoration: none;
}
.context-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

/* Алерты */
.alert { border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }

/* Футер */
footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e9ecef; }

/* Мобильная адаптация */
@media (max-width: 768px) {
  :root { --sidebar-width: 260px; }
  .sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    z-index: 1010;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transform: translateX(-100%);
  }
  .sidebar.collapsed { transform: translateX(-100%); }
  .sidebar:not(.collapsed) { transform: translateX(0); }
  .resizer { display: none; }
  #app-container { height: calc(100vh - 56px); }
}

/* Стили для математических формул */
.katex { font-size: 1.1em; }
.katex-display { 
    overflow: auto hidden;
    padding: 1rem;
    margin: 1.5rem 0;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}
.katex-display > .katex { padding: 0.5rem; }

/* Добавим в стили шаблона */
.commit-stats {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #f8f9fa;
}

.diff-header {
    background-color: #e9ecef;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
}

.diff-container {
    border: 1px solid #dee2e6;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

.diff-line-num {
    color: #6c757d;
    font-size: 0.8em;
    padding: 0 8px;
    border-right: 1px solid #dee2e6;
    user-select: none;
}


/* ============================================
   РЕЖИМ ПЕЧАТИ
   ============================================ */

@media print {
    /* ✅ СБРОС ОТСТУПОВ СТРАНИЦЫ */
    @page {
        margin: 1.5cm 1cm;
        size: A4 portrait;
    }
    
    /* ✅ ПОЛНЫЙ СБРОС МАРГИНОВ И ПАДДИНГОВ */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* ✅ СКРЫВАЕМ ВСЕ ЭЛЕМЕНТЫ ИНТЕРФЕЙСА */
    .navbar,
    .sidebar,
    .resizer,
    footer,
    .btn,
    .dropdown,
    .context-menu,
    .mermaid-controls,
    .wiki-breadcrumbs,
    #toggle-sidebar,
    .alert-dismissible,
    .no-print,
    #sidebar-resizer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ✅ ИСПРАВЛЕНИЕ ЛЕВОГО ОТСТУПА — УБИРАЕМ FLEX */
    #app-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    #main-content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: none !important;
    }
    
    .container-fluid,
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 1cm !important;
    }
    
    /* ✅ MARKDOWN КОНТЕНТ */
    .markdown-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11pt;
        line-height: 1.5;
    }
    
    /* ✅ ТАБЛИЦЫ ПРИ ПЕЧАТИ */
    .markdown-content table {
        display: table;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .markdown-content table td,
    .markdown-content table th {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    
    /* ✅ MERMAID ПРИ ПЕЧАТИ */
    .mermaid-container,
    .mermaid,
    .mermaid svg {
        display: block !important;
        visibility: visible !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        max-width: 100% !important;
        margin: 1rem 0 !important;
    }
    
    .mermaid svg {
        width: 100% !important;
        height: auto !important;
        max-height: 90vh !important;
    }
    
    /* ✅ PLANTUML ПРИ ПЕЧАТИ */
    .plantuml-container,
    .plantuml-diagram,
    .plantuml-img,
    .plantuml svg {
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 1rem 0 !important;
    }
    
    .plantuml svg {
        max-height: 90vh !important;
    }
    
    /* ✅ DRAW.IO ПРИ ПЕЧАТИ */
    .drawio-container {
        max-width: 100% !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .drawio-container iframe {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px;
        border: 1px solid #dee2e6 !important;
    }
    
    /* ✅ ИЗОБРАЖЕНИЯ ПРИ ПЕЧАТИ */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
    }
    
    /* ✅ ЗАГОЛОВКИ */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
        break-after: avoid !important;
        margin: 1rem 0 0.5rem 0 !important;
    }
    
    /* ✅ КОД */
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        page-break-inside: avoid !important;
        max-width: 100% !important;
    }
    
    /* ✅ БОЛЬШИЕ ДИАГРАММЫ — НА ОТДЕЛЬНУЮ СТРАНИЦУ */
    .mermaid-container[data-large="true"],
    .plantuml-container[data-large="true"],
    .drawio-container[data-large="true"] {
        page-break-before: always !important;
        break-before: page !important;
    }
    
    /* ✅ СКРЫВАЕМ ЯКОРЯ */
    .heading-anchors,
    .anchor-link {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================
   ПОИСК
   ============================================ */

/* Скругление для строки поиска в навбаре */
#wiki-search-global {
    border-radius: 50px;
    padding-left: 15px;
}

#wiki-search-global:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Скругление для поля поиска в модальном окне */
#modal-search-input {
    border-radius: 8px;
}

/* ============================================
   ССЫЛКИ-ЯКОРЯ ДЛЯ ЗАГОЛОВКОВ
   ============================================ */

.heading-anchors {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.anchor-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.7em;
    text-decoration: none;
    border-radius: 4px;
    color: #6c757d;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.anchor-link:hover {
    color: #0d6efd !important;
    background-color: #e9ecef !important;
}

.anchor-link.shortlink-trigger {
    color: #ffc107;
}

.anchor-link.shortlink-trigger:hover {
    color: #ff9f00 !important;
    background-color: #fff3cd !important;
}

.markdown-content h1:hover .heading-anchors,
.markdown-content h2:hover .heading-anchors,
.markdown-content h3:hover .heading-anchors,
.markdown-content h4:hover .heading-anchors,
.markdown-content h5:hover .heading-anchors,
.markdown-content h6:hover .heading-anchors {
    opacity: 1 !important;
}