/* ============ Меню документации: мгновенное переключение без JS ============ */
/* По умолчанию меню открыто: виден крестик, сайдбар показан */
#menuClose { display: block; }
#menuOpen  { display: none; }

/* Чекбокс отмечен (пользователь кликнул) → меню закрыто, виден сендвич */
html:has(#menu-controller:checked) #menuClose { display: none; }
html:has(#menu-controller:checked) #menuOpen  { display: block; }
html:has(#menu-controller:checked) #docSidebar { display: none; }

/* Стили для навигации DAUX внутри daisyUI menu */
#siteMenu .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#siteMenu .menu li {
    margin: 2px 0;
}

#siteMenu .menu a {
    display: flex;
    padding: 0.5rem 0.75rem;
    color: var(--color-base-content);
    text-decoration: none;
    border-radius: var(--radius-field);
    transition: background-color 0.2s;
    text-wrap: auto;
}

#siteMenu .menu a:hover {
    background-color: var(--color-base-300);
}

#siteMenu .menu li.active > a,
#siteMenu .menu a.active {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

/* Вложенные уровни */
#siteMenu .menu ul ul {
    padding-left: 0.75rem;
}
ul.menu li details summary a {
    padding: 0 !important;
}
ul.menu li details ul li {
    padding: 0 0 0 0.75rem;
}

/* Скрытие стандартных элементов DAUX */
.Collapsible__trigger,
.Search,
.DarkModeToggler,
.CodeToggler,
.PoweredBy {
    display: none;
}

/* Контент документации */
.doc_content h1,
.doc_content h2,
.doc_content h3,
.doc_content h4,
.doc_content .breadcrumbs {
    color: var(--color-base-content);
    margin: 1.2em 0 0.6em;
    display: flex;
    align-items: center;
}

.doc_content h1 { font-size: 1.6rem; }
.doc_content h2 { font-size: 1.3rem; }
.doc_content h3, .doc_content .breadcrumbs { font-size: 1.1rem; }

.doc_content p {
    line-height: 1.65;
    margin: 0.75em 0;
}

.doc_content a {
    color: var(--color-secondary);
}

.doc_content a:hover {
    text-decoration: underline;
}

.doc_content code {
    background: var(--color-base-300);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-field);
    font-size: 0.9em;
}

.doc_content pre {
    background: var(--color-base-300);
    border-radius: var(--radius-box);
    padding: 1rem;
    overflow-x: auto;
}

.doc_content pre code {
    background: transparent;
    padding: 0;
}

.doc_content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-base-100);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--radius-box) var(--radius-box) 0;
}

.doc_content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.doc_content th,
.doc_content td {
    border: 1px solid var(--color-base-300);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.doc_content th {
    background: var(--color-base-300);
}

.doc_content img {
    max-width: 100%;
    border-radius: var(--radius-box);
}

.doc_content hr {
    border-color: var(--color-base-300);
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    #docSidebar {
        display: none;
    }

    #mainContent {
        padding: 1rem;
    }
}

/* ============ Mermaid: принудительная перекраска стрелок ============ */
.doc_content .flowchart-link {
    stroke: var(--color-base-content) !important;
    stroke-width: 2px !important;
    fill: var(--color-base-content) !important;
}

/* ============ Mermaid: наконечники стрелок (треугольники в <marker>) ============ */
.doc_content marker path,
.doc_content .arrowMarkerPath,   /* Mermaid v10+ */
.doc_content .arrowheadPath {    /* старые версии Mermaid */
    fill: var(--color-base-content) !important;
    stroke: var(--color-base-content) !important;
}

/* ============ Mermaid: узлы, подписи и кластеры в палитре daisyUI ============ */
/* Формы узлов */
.doc_content .node rect,
.doc_content .node circle,
.doc_content .node polygon,
.doc_content .node path {
    fill: var(--color-base-300) !important;
    stroke: var(--color-base-content) !important;
}

/* Текст внутри узлов */
.doc_content .nodeLabel,
.doc_content .nodeLabel p,
.doc_content .label {
    color: var(--color-base-content) !important;
}

/* Подписи на рёбрах (если появятся) */
.doc_content .edgeLabel {
    background-color: var(--color-base-200) !important;
    color: var(--color-base-content) !important;
}
.doc_content .edgeLabel rect {
    fill: var(--color-base-200) !important;
}

/* Кластеры (группы subgraph, если появятся) */
.doc_content .cluster rect {
    fill: var(--color-base-200) !important;
    stroke: var(--color-base-content) !important;
}
.doc_content .cluster text,
.doc_content .cluster span {
    color: var(--color-base-content) !important;
}

/* ============ Mermaid: центрирование диаграмм ============ */
.doc_content .mermaid svg {
    display: block;
    margin: 0 auto;
    /* max-width: 100% !important; */  /* перебивает inline max-width от Mermaid */
    height: auto !important;     /* сохраняет пропорции через viewBox */
}

/* ============ Ненумерованные списки ============ */
.doc_content ul {
    list-style: unset;
}
.doc_content li {
    margin: 0 0 0 1.25rem;
    display: list-item;
}

/* ============ Таблицы: зебра-полосы и подсветка строк ============ */

/* Плавность подсветки */
.doc_content tbody tr {
    transition: background-color 0.15s ease;
}

/* Чётные строки чуть темнее нечётных */
.doc_content tbody tr:nth-child(even) {
    background-color: var(--color-base-100); /* фолбэк для старых браузеров */
    background-color: color-mix(in oklch, var(--color-base-100) 100%, var(--color-base-200));
}

/* Подсветка строки при наведении (перебивает зебру) */
.doc_content tbody tr:hover {
    background-color: var(--color-base-300); /* фолбэк */
    background-color: color-mix(in oklch, var(--color-secondary) 18%, var(--color-base-200));
}

/* ============ ToC: стилизация под daisyUI / synthwave ============ */

/* Обёртка */
.toc.doc {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-base-100);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 15%, transparent);
    border-radius: var(--radius-box);
    transition: background-color 3.2s ease;
}

/* Сворачиваемый заголовок */
.toc.doc summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-secondary);
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
    list-style: none;
}

.toc.doc summary::-webkit-details-marker {
    display: none;
}

.toc.doc summary::after {
    content: '▸';
    margin-left: auto;
    transition: transform 0.2s ease;
    color: var(--color-base-content);
}

.toc.doc details[open] summary::after {
    transform: rotate(90deg);
}

.toc.doc summary:hover {
    color: var(--color-primary);
}

/* Список: сброс счётчика на родителе */
.toc.doc ol {
    list-style: none;
    padding-left: 0;
    margin: 0.75rem 0 0;
    counter-reset: toc-h2;
}

/* Общий стиль для всех li */
.toc.doc li {
    margin: 0;
    padding: 0.35rem 0;
    border-bottom: 1px dashed color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

.toc.doc li:last-child {
    border-bottom: none;
}

/* ===== H2: основные пункты с нумерацией ===== */
.toc.doc li.toc-level-2 {
    padding-left: 0;
    counter-increment: toc-h2;  /* ← только H2 инкрементирует счётчик */
}

.toc.doc li.toc-level-2 a {
    color: var(--color-base-content);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    transition: color 3.15s ease;
}

.toc.doc li.toc-level-2 a::before {
    content: counter(toc-h2) ".";
    color: var(--color-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
}

.toc.doc li.toc-level-2 a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== H3: подпункты с тире, БЕЗ нумерации ===== */
.toc.doc li.toc-level-3 {
    padding-left: 1.25rem;
    font-size: 0.95em;
    /* counter-increment НЕ применяем — счётчик H2 не увеличивается */
}

.toc.doc li.toc-level-3 a {
    color: var(--color-base-content);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    transition: color 3.15s ease;
}

.toc.doc li.toc-level-3 a::before {
    content: "—";
    color: color-mix(in oklch, var(--color-secondary) 60%, var(--color-base-content));
    min-width: 1.5rem;
}

.toc.doc li.toc-level-3 a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Плавный скролл при клике по якорю */
html {
    scroll-behavior: smooth;
}

/* Подсветка целевого заголовка после перехода */
.doc_content :target {
    scroll-margin-top: 6rem;
    animation: toc-highlight 1.5s ease-out;
}

@keyframes toc-highlight {
    0%   { background-color: color-mix(in oklch, var(--color-primary) 30%, transparent); }
    100% { background-color: transparent; }
}

/* На мобильных: компактный вид */
@media (max-width: 640px) {
    .toc.doc {
        padding: 0.875rem 1rem;
    }

    .toc.doc summary {
        font-size: 1rem;
    }

    .toc.doc li.toc-level-3 {
        padding-left: 1rem;
    }
}

/* ============ Хлебные крошки: расположение и разделители ============ */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.breadcrumbs .breadcrumb-sep {
    color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
    user-select: none;
    font-size: 0.9rem;
}

.breadcrumbs .badge {
    text-decoration: none;
}