/* =========================================================================
   HILFE / GLOSSAR
   ========================================================================= */

.ofma-dashboard__main--hilfe {
    padding: 1.5rem;
    overflow-y: auto;
}

.hilfe-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* Suche */
.hilfe-search {
    margin-bottom: 16px;
}

.hilfe-search__input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--of-border, #e2e8f0);
    border-radius: 6px;
    font-size: var(--of-text-sm);
    background: var(--of-bg-card, #fff);
    color: var(--of-text, #1e293b);
    outline: none;
    transition: border-color 0.15s;
}

.hilfe-search__input:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.hilfe-search__input::placeholder {
    color: var(--of-text-muted, #94a3b8);
}

/* Schnellnavigation */
.hilfe-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--of-border, #e2e8f0);
}

.hilfe-nav__link {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: var(--of-text-xs);
    font-weight: 500;
    color: var(--of-text-secondary, #475569);
    background: var(--of-bg-card, #fff);
    border: 1px solid var(--of-border, #e2e8f0);
    text-decoration: none;
    transition: all 0.15s;
}

.hilfe-nav__link:hover {
    background: #14b8a6;
    color: #fff;
    border-color: #14b8a6;
}

/* Sections */
.hilfe-section {
    margin-bottom: 32px;
}

.hilfe-section__title {
    font-size: var(--of-text-lg);
    font-weight: 700;
    color: var(--of-text, #1e293b);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #14b8a6;
}

/* Entries */
.hilfe-entry {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: var(--of-bg-card, #fff);
    border: 1px solid var(--of-border, #e2e8f0);
    border-radius: 6px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hilfe-entry:hover {
    border-color: #14b8a6;
}

.hilfe-entry--highlight {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
}

.hilfe-entry__title {
    font-size: var(--of-text-base);
    font-weight: 600;
    color: var(--of-text, #1e293b);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hilfe-entry__badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: var(--of-text-2xs);
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #059669, #65a30d, #ca8a04);
    color: #fff;
}

.hilfe-entry__range {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: var(--of-text-3xs);
    font-weight: 600;
    background: var(--of-bg-page, #f1f5f9);
    color: var(--of-text-muted, #94a3b8);
}

.hilfe-entry > p {
    font-size: var(--of-text-sm);
    color: var(--of-text-secondary, #475569);
    margin: 0 0 8px;
    line-height: 1.5;
}

.hilfe-entry > p:last-child {
    margin-bottom: 0;
}

/* Aufzaehlungen in Entries: gleiche Schriftgroesse/Farbe/Einrueckung wie die Absaetze
   (sonst greift der globale <ul>-Reset -> Punkte haengen links und Schrift zu gross). */
.hilfe-list {
    list-style: none;
    margin: 4px 0 8px;
    padding-left: 2px;
    font-size: var(--of-text-sm);
    color: var(--of-text-secondary, #475569);
    line-height: 1.5;
}
.hilfe-list li {
    margin: 4px 0;
}

/* Detail-Block (Details innerhalb eines Entries) */
.hilfe-entry__detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--of-border, #e2e8f0);
}

.hilfe-entry__detail h4 {
    font-size: var(--of-text-xs);
    font-weight: 600;
    color: var(--of-text, #1e293b);
    margin: 10px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hilfe-entry__detail h4:first-child {
    margin-top: 0;
}

.hilfe-entry__detail p {
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary, #475569);
    margin: 0 0 6px;
    line-height: 1.5;
}

.hilfe-entry__detail code {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: var(--of-text-2xs);
    background: var(--of-bg-page, #f1f5f9);
    color: #14b8a6;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Tabellen */
.hilfe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--of-text-xs);
    margin: 6px 0;
}

.hilfe-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--of-border, #e2e8f0);
    color: var(--of-text-secondary, #475569);
    vertical-align: top;
}

.hilfe-table tr:last-child td {
    border-bottom: none;
}

.hilfe-table td:first-child {
    white-space: nowrap;
}

/* Farblegende */
.hilfe-color-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0;
}

.hilfe-color-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--of-text-xs);
    color: var(--of-text-secondary, #475569);
}

.hilfe-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Hinweis-Box */
.hilfe-note {
    padding: 8px 10px !important;
    border-radius: 4px;
    background: rgba(20, 184, 166, 0.06) !important;
    border-left: 3px solid #14b8a6;
    font-size: var(--of-text-xs) !important;
    color: var(--of-text-secondary, #475569) !important;
}

/* =========================================================================
   DARK MODE
   ========================================================================= */

/* Dark Mode — Hauptbereich */
[data-theme="dark"] .ofma-dashboard__main--hilfe {
    color: #94a3b8;
}

[data-theme="dark"] .page-header__title {
    color: #94a3b8;
}

[data-theme="dark"] .page-header__subtitle {
    color: #64748b;
}

[data-theme="dark"] .hilfe-entry__badge {
    opacity: 0.85;
}

[data-theme="dark"] .hilfe-color-legend__item {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-table th {
    color: #64748b;
    border-bottom-color: #334155;
}

[data-theme="dark"] .hilfe-table td {
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .hilfe-search__input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .hilfe-entry > p {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry__detail {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry__detail p,
[data-theme="dark"] .hilfe-entry__detail li,
[data-theme="dark"] .hilfe-entry__detail td {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry__detail strong {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-search__input::placeholder {
    color: #64748b;
}

[data-theme="dark"] .hilfe-nav__link {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-section__title {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .hilfe-entry:hover {
    border-color: #14b8a6;
}

[data-theme="dark"] .hilfe-entry__title {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry__range {
    background: #334155;
    color: #64748b;
}

[data-theme="dark"] .hilfe-entry__detail {
    border-top-color: #334155;
}

[data-theme="dark"] .hilfe-entry__detail h4 {
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-entry__detail code {
    background: #334155;
    color: #2dd4bf;
}

[data-theme="dark"] .hilfe-table td {
    border-bottom-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .hilfe-note {
    background: rgba(20, 184, 166, 0.08) !important;
    color: #94a3b8 !important;
}

/* =========================================================
   Zentraler Seiten-Lade-Spinner (rund, mittig) — wie auf den anderen Seiten.
   Deckt die Seite beim Laden ab und wird per JS (window.load) ausgeblendet.
   ========================================================= */
.hilfe-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ofma-bg-page, #f1f5f9);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hilfe-loading::before {
    content: "";
    width: 42px;
    height: 42px;
    border: 3px solid var(--ofma-border, #e2e8f0);
    border-top-color: var(--ofma-color-primary, #14b8a6);
    border-radius: 50%;
    animation: hilfe-spin 0.7s linear infinite;
}
.hilfe-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes hilfe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hilfe-loading::before { animation-duration: 1.6s; }
}

/* =========================================================
   Mobil: Vergleichstabellen duerfen in der ersten Spalte umbrechen.
   Sonst zwingt 'white-space:nowrap' bei langen Feature-Namen die Tabelle
   ueber den Bildschirmrand und die rechte Spalte (Plan) wird abgeschnitten.
   ========================================================= */
@media (max-width: 600px) {
    .hilfe-table td:first-child { white-space: normal; word-break: break-word; }
}

/* =========================================================
   Hilfe/Glossar als Kachel-Akkordeon: nur die Kategorie-Kacheln sind
   sichtbar, der Text oeffnet sich per Klick. JS wickelt den Abschnitts-
   Inhalt in .hilfe-section__body und schaltet .is-open auf der Section.
   ========================================================= */
.hilfe-section { margin-bottom: 10px; }

.hilfe-section__title--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 15px 18px;
    border: 1px solid var(--of-border, #e2e8f0);
    border-radius: 10px;
    background: var(--of-bg-card, #ffffff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hilfe-section__title--toggle:hover {
    border-color: #14b8a6;
    background: var(--of-bg-hover, #f8fafc);
}
.hilfe-section__title--toggle::after {
    content: "\25BE"; /* Chevron nach unten */
    flex: none;
    font-size: 0.7em;
    line-height: 1;
    color: var(--of-text-muted, #94a3b8);
    transition: transform 0.2s ease;
}
.hilfe-section.is-open > .hilfe-section__title--toggle { border-color: #14b8a6; }
.hilfe-section.is-open > .hilfe-section__title--toggle::after { transform: rotate(180deg); }

.hilfe-section__body { display: none; }
.hilfe-section.is-open > .hilfe-section__body { display: block; padding: 12px 2px 2px; }

[data-theme="dark"] .hilfe-section__title--toggle {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .hilfe-section__title--toggle:hover { border-color: #14b8a6; background: #263348; }