/* Prüfregel-Dokumentation (Views/ValidationRules). Das Suchfeld (.search-wrap) steht in site.css. */

/* ---------- Seite ---------- */
/* Seitenrand: gleicher Abstand zum Text wie auf den Doku-Seiten mit .content-card
   (Container 0.75rem + Kartenpadding 1.5rem). */
.vr-page { padding-left: 2.25rem; padding-right: 2.25rem; }
@media (max-width: 767.98px) { .vr-page { padding-left: 1rem; padding-right: 1rem; } }

.vr-page mark { padding: 0 .1em; border-radius: .2em; background: #fff3a3; }

/* Schweregrad: beschriftetes Badge in der Trefferliste, Punkt in Zählungen */
.vr-sev {
    display: inline-block; flex: none; min-width: 4.6rem; text-align: center;
    font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 1rem; border: 1px solid transparent;
}
.vr-sev-error { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.vr-sev-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.vr-sev-count { display: inline-flex; align-items: center; margin-right: .75rem; white-space: nowrap; }
.vr-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--bs-info); margin-right: .35rem; }
.vr-dot-error { background: var(--bs-danger); }
.vr-dot-warning { background: var(--bs-warning); }

/* Register der Regelfamilien */
.vr-family-group { margin-bottom: 1.75rem; }
.vr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.vr-tile {
    text-align: left; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg);
    padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; transition: transform .1s, box-shadow .1s;
}
.vr-tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08); }
.vr-tile-label { font-weight: 600; }
.vr-tile-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.vr-tile-sev { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .35rem; }

/* Treffer, gruppiert nach Familie */
.vr-group { margin-bottom: 1.5rem; }
.vr-group-head {
    position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); font-size: 1rem; font-weight: 600;
    padding: .6rem 0; border-bottom: 2px solid var(--bs-border-color); margin: 0;
}
.vr-group-head small { font-weight: 400; color: var(--bs-secondary-color); margin-left: .5rem; font-family: var(--bs-font-monospace); }
.vr-item { border-bottom: 1px solid var(--bs-border-color-translucent); }
.vr-item-head {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    border: 0; background: transparent; padding: .75rem .25rem;
}
.vr-item-head:hover { background: var(--bs-tertiary-bg); }
.vr-item-id { min-width: 10rem; font-weight: 600; color: var(--bs-body-color); }
.vr-item-title { flex: 1; }
.vr-item-head > .fa-chevron-down { transition: transform .15s; color: var(--bs-secondary-color); }
.vr-item.open .vr-item-head > .fa-chevron-down { transform: rotate(180deg); }
.vr-item-body { padding: .25rem 0 1.25rem; }

@media (max-width: 767.98px) {
    .vr-item-head { flex-wrap: wrap; }
    .vr-item-id { min-width: 0; }
    .vr-item-title { flex-basis: 100%; }
}

/* Einzelseite einer Regel: vorherige | alle Regeln der Familie | nächste */
.vr-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }

/* ---------- Detailkarte (_RuleDetail) ---------- */
/* Bewusst zurückhaltend im CI-Blau (--color-primary-* aus site.css). Den Schweregrad zeigen Badge und
   Hinweiszeile; Rahmen und Hintergrund der Karte färben sich nicht rot oder gelb. */
.rule-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--color-primary-300);
    border-radius: .75rem;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .05);
    overflow: hidden;
}
.rule-card-head {
    padding: 1.25rem 1.5rem 1rem;
    background: linear-gradient(180deg, var(--color-primary-100), transparent);
}
.rule-card-body { padding: .25rem 1.5rem 1.5rem; }
.rule-id { font-family: var(--bs-font-monospace); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; }
a.rule-id { color: var(--bs-link-color); text-decoration: none; }
a.rule-id:hover { text-decoration: underline; }
.rule-lead { font-size: 1.05rem; color: var(--bs-body-color); }
.rule-consequence { font-size: .85rem; }
.rule-sev-error .rule-consequence { color: var(--bs-danger-text-emphasis); }
.rule-sev-warning .rule-consequence { color: var(--bs-warning-text-emphasis); }

/* Regelwerk-Kennzeichnung (Schlüssel aus ValidationRuleClassifier.Sources) */
.rule-src {
    display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .5rem; border-radius: 1rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
    white-space: nowrap;
}
.rule-src-en16931 { background: #e7f0ff; color: #0b4fb3; }
.rule-src-xrechnung { background: #fff1e0; color: #a14d00; }
.rule-src-peppol { background: #e8f7ef; color: #146c43; }
.rule-src-facturx { background: #f1e9ff; color: #5b21b6; }

.rule-fact { border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .75rem 1rem; }
.rule-fact-label { font-weight: 600; margin-bottom: .25rem; }
.rule-bt {
    display: inline-block; font-family: var(--bs-font-monospace); font-size: .8rem; padding: .1rem .45rem;
    margin: 0 .25rem .25rem 0; border: 1px solid var(--bs-primary-border-subtle); border-radius: .35rem;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); text-decoration: none;
}
a.rule-bt:hover { background: var(--bs-primary); color: #fff; }
.rule-bt-sm { font-size: .7rem; margin: 0; }
.rule-help { margin-top: .5rem; }
.rule-help .validation-steps { padding-left: 2.2rem; }
.rule-tech > summary { cursor: pointer; color: var(--bs-secondary-color); font-weight: 600; }
.rule-original {
    font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
}
.rule-changelog { padding-left: 1rem; }

/* Syntaxhervorhebung von Prüfausdruck (XPathHighlighter) und XML-Beispielen (XmlHighlighter).
   Gleiche Werte wie in areas/support/css/support.css, das im öffentlichen Bereich nicht geladen wird. */
.validation-criterion {
    max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    padding: .5rem .75rem; font-family: var(--bs-font-monospace);
}
.validation-criterion, .validation-example pre.xml {
    --xp-kw: #7c3aed; --xp-fn: #0b5ed7; --xp-var: #b45309; --xp-str: #198754; --xp-num: #d9480f;
    --xp-att: #0f766e; --xp-ax: #6c757d; --xp-op: #b42318;
}
.validation-criterion .xp-kw { color: var(--xp-kw); font-weight: 600; }
.validation-criterion .xp-fn { color: var(--xp-fn); }
.validation-criterion .xp-var { color: var(--xp-var); }
.validation-criterion .xp-str { color: var(--xp-str); }
.validation-criterion .xp-num { color: var(--xp-num); }
.validation-criterion .xp-att { color: var(--xp-att); }
.validation-criterion .xp-ax { color: var(--xp-ax); font-style: italic; }
.validation-criterion .xp-op { color: var(--xp-op); }
.validation-example { min-width: 0; }
.validation-example pre.xml {
    --xml-tag: #0b5ed7; --xml-pfx: #6c757d; --xml-att: #0f766e; --xml-val: #198754;
    margin: .35rem 0 0; padding: .4rem .5rem; background: transparent; font-size: .75rem; line-height: 1.45;
    white-space: pre; overflow-x: auto; max-width: 100%;
}
.validation-example .xml-tag { color: var(--xml-tag); }
.validation-example .xml-pfx { color: var(--xml-pfx); }
.validation-example .xml-att { color: var(--xml-att); }
.validation-example .xml-val { color: var(--xml-val); }