/* =========================================================================
   lara4you/help – Hilfe-System: Modal + TOC-Panel
   Theme-fähig über Bootstrap-CSS-Variablen (Light/Dark via [data-bs-theme]).
   Einsatzvarianten:
     #help-modal-body  – Hilfe-Modal (Standard)
     #edit-help-body   – Hilfe-Tab innerhalb eines Edit-Modals (optional)
   ========================================================================= */

/* ─── Typografie im Hilfe-Inhalt ──────────────────────────────────────── */
#help-modal-body, #edit-help-body { font-size: 0.875rem; line-height: 1.6; }
#help-modal-body h1, #edit-help-body h1 { font-size: 1.25rem; margin-top: 0; }
#help-modal-body h2, #edit-help-body h2 { font-size: 1.05rem; margin-top: 1.5rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .25rem; }
#help-modal-body h3, #edit-help-body h3 { font-size: 0.95rem; margin-top: 1rem; }
#help-modal-body h4, #edit-help-body h4 { font-size: 0.875rem; margin-top: .75rem; font-weight: 600; }

/* ─── TOC inline (Edit-Modal Hilfe-Tab) – Box-Stil ────────────────────── */
#edit-help-body .help-toc { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 4px; padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: 0.82rem; }
#edit-help-body .help-toc ul { margin: 0; padding-left: 1.25rem; }
#edit-help-body .help-toc li { margin: .15rem 0; }

/* ─── TOC-Panel (Hilfe-Modal Offcanvas) ───────────────────────────────── */
#help-toc-panel { background: var(--bs-tertiary-bg); font-size: 0.82rem; }
#help-toc-panel .help-toc { background: none; border: none; padding: 0; margin: 0; list-style: none; }
#help-toc-panel .help-toc li { margin: 0; }

/* Hauptpunkt-Zeile: Link + Chevron nebeneinander */
#help-toc-panel .toc-row { display: flex; align-items: center; border-radius: 4px; }
#help-toc-panel .toc-row:hover { background: var(--bs-secondary-bg); }
#help-toc-panel .toc-row a { flex: 1; padding: .25rem .4rem; color: var(--bs-body-color); text-decoration: none; line-height: 1.35; }
#help-toc-panel .toc-row a:hover { color: var(--bs-emphasis-color); }

/* Hauptpunkte ohne Kinder */
#help-toc-panel .help-toc > li > a { display: block; padding: .25rem .5rem; color: var(--bs-body-color); text-decoration: none; border-radius: 4px; line-height: 1.35; }
#help-toc-panel .help-toc > li > a:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }

/* Chevron-Button */
#help-toc-panel .toc-chevron { flex-shrink: 0; background: none; border: none; padding: .2rem .4rem; color: var(--bs-secondary-color); cursor: pointer; line-height: 1; }
#help-toc-panel .toc-chevron:hover { color: var(--bs-body-color); }

/* Sub-Liste: eingeklappt per default, smooth transition */
#help-toc-panel .toc-sub { list-style: none; padding: 0 0 0 .75rem; margin: 0; overflow: hidden; max-height: 0; transition: max-height .2s ease; }
#help-toc-panel .toc-sub.open { max-height: 600px; }
#help-toc-panel .toc-sub li a { display: block; padding: .18rem .5rem; font-size: 0.78rem; color: var(--bs-secondary-color); text-decoration: none; border-radius: 4px; line-height: 1.3; }
#help-toc-panel .toc-sub li a:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ─── Permalink-Anker ─────────────────────────────────────────────────── */
#help-modal-body .help-anchor, #edit-help-body .help-anchor { opacity: 0; margin-left: .4rem; font-size: 0.8em; color: var(--bs-secondary-color); text-decoration: none; transition: opacity .15s; }
#help-modal-body .help-anchor::after, #edit-help-body .help-anchor::after { content: '#'; }
#help-modal-body h1:hover .help-anchor, #edit-help-body h1:hover .help-anchor,
#help-modal-body h2:hover .help-anchor, #edit-help-body h2:hover .help-anchor,
#help-modal-body h3:hover .help-anchor, #edit-help-body h3:hover .help-anchor,
#help-modal-body h4:hover .help-anchor, #edit-help-body h4:hover .help-anchor { opacity: 1; }

/* ─── Code & Tabellen ─────────────────────────────────────────────────── */
#help-modal-body code, #edit-help-body code { font-size: 0.82rem; background: var(--bs-tertiary-bg); padding: 1px 4px; border-radius: 3px; }
#help-modal-body pre code, #edit-help-body pre code { background: none; padding: 0; }
#help-modal-body table, #edit-help-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.82rem; }
#help-modal-body table th, #help-modal-body table td,
#edit-help-body table th, #edit-help-body table td { padding: .4rem .6rem; border: 1px solid var(--bs-border-color); vertical-align: top; }
#help-modal-body table thead th, #edit-help-body table thead th { background: var(--bs-tertiary-bg); font-weight: 600; }
#help-modal-body table tbody tr:nth-child(even), #edit-help-body table tbody tr:nth-child(even) { background: var(--bs-tertiary-bg); }