/* MECO-spezifische Ergänzungen zum Vuexy-Theme (core.css bleibt unberührt).
   Verbindliche Muster: docs/STYLEGUIDE.md */

/* Formularbreiten (P5): genau zwei Standardbreiten */
.meco-form-md { max-width: 48rem; }
.meco-form-lg { max-width: 64rem; }

/* Textutilities */
.text-pre-wrap { white-space: pre-wrap; }
.meco-code-input { letter-spacing: .3em; } /* MFA-/Backup-Codefelder */

/* Risiko-Heatmap – Buckets identisch zu heatmap_klasse() in app/Core/helpers.php.
   Feste Signalfarben; im Dark-Mode leicht gesättigter für Kontrast. */
.meco-heat-gering   { background: #86efac; color: #1f2937; }
.meco-heat-mittel   { background: #fde047; color: #1f2937; }
.meco-heat-hoch     { background: #fb923c; color: #fff; }
.meco-heat-kritisch { background: #ef4444; color: #fff; }
[data-bs-theme="dark"] .meco-heat-gering { background: #4ade80; }
[data-bs-theme="dark"] .meco-heat-mittel { background: #facc15; }
.meco-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: .25rem; }

/* NIS2 – Violett als bewusste Signalfarbe für regulatorische Hinweise */
.nis2-card  { background: #f5f3ff; border-color: #ddd6fe; }
.nis2-title { color: #5b21b6; }
.nis2-text  { color: #7c3aed; }
[data-bs-theme="dark"] .nis2-card  { background: rgba(124, 58, 237, .12); border-color: rgba(124, 58, 237, .4); }
[data-bs-theme="dark"] .nis2-title { color: #c4b5fd; }
[data-bs-theme="dark"] .nis2-text  { color: #a78bfa; }
.btn-nis2   { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn-nis2:hover, .btn-nis2:focus { background: #6d28d9; border-color: #6d28d9; color: #fff; }

/* WYSIWYG-Inhalt (Quill). Editor und Leseansicht müssen identisch aussehen.
   Vuexys typography.css bindet die Inhaltsklassen fast ausschließlich an
   .ql-editor; für die gespeicherte Ausgabe (.meco-inhalt, zusätzlich mit
   .ql-content ausgezeichnet) sind sie hier nachgezogen. Dark Mode braucht keine
   Sonderregeln – editor.css arbeitet durchgehend mit Vuexy-CSS-Variablen. */
.meco-inhalt .ql-align-center { text-align: center; }
.meco-inhalt .ql-align-justify { text-align: justify; }
.meco-inhalt .ql-align-right:not(.ql-direction-rtl) { text-align: end; }
.meco-inhalt .ql-direction-rtl { direction: rtl; text-align: inherit; }
.meco-inhalt .ql-size-small { font-size: .8125rem; }
.meco-inhalt .ql-size-large { font-size: 1rem; }
.meco-inhalt .ql-size-huge  { font-size: 1.1875rem; }
.meco-inhalt .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.meco-inhalt .ql-font-monospace { font-family: var(--bs-font-monospace); }
.meco-inhalt img { max-inline-size: 100%; }

/* Einzugsstufen wie im Editor (typography.css: 2rem je Stufe, Listen +1). */
.meco-inhalt .ql-indent-1 { padding-inline-start: 2rem; }
.meco-inhalt .ql-indent-2 { padding-inline-start: 4rem; }
.meco-inhalt .ql-indent-3 { padding-inline-start: 6rem; }
.meco-inhalt .ql-indent-4 { padding-inline-start: 8rem; }
.meco-inhalt .ql-indent-5 { padding-inline-start: 10rem; }
.meco-inhalt .ql-indent-6 { padding-inline-start: 12rem; }
.meco-inhalt .ql-indent-7 { padding-inline-start: 14rem; }
.meco-inhalt .ql-indent-8 { padding-inline-start: 16rem; }
.meco-inhalt .ql-indent-9 { padding-inline-start: 18rem; }
.meco-inhalt li.ql-indent-1 { padding-inline-start: 4rem; }
.meco-inhalt li.ql-indent-2 { padding-inline-start: 6rem; }
.meco-inhalt li.ql-indent-3 { padding-inline-start: 8rem; }

/* Tabellen im Editorinhalt. core.css setzt im Reboot border-width:0 auf jede
   Zelle, und Vuexy liefert für Editorinhalte kein Tabellen-CSS – ohne diese
   Regeln wären Tabellen rahmenlos. Die von quill-table-better gesetzten
   Inline-Stile gewinnen weiterhin, da sie spezifischer sind. */
.ql-editor table, .meco-inhalt table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
.ql-editor td, .ql-editor th,
.meco-inhalt td, .meco-inhalt th {
    border: 1px solid var(--bs-border-color); padding: .4rem .6rem; vertical-align: top; }
.ql-editor th, .meco-inhalt th { background: var(--bs-gray-50, var(--bs-tertiary-bg)); text-align: left; }

/* Der Editor sitzt in einer Card – die Vuexy-Höhe von 15rem ist dort knapp. */
.ql-container .ql-editor { min-block-size: 20rem; }

/* Die Werkzeugleiste läuft beim Scrollen mit. Bei langen Dokumenten musste man
   sonst zum Formatieren einer Markierung jedes Mal an den Anfang zurück. Sie
   klebt innerhalb von .meco-editor (dem Rahmen aus meco.js) und endet damit
   zusammen mit dem Editor. Der Abstand zur fixierten Navbar ist derselbe wie
   bei Vuexys eigenen Klebeelementen (core.css: .layout-navbar-fixed
   .sticky-element). Der Hintergrund kommt aus editor.css und ist deckend. */
.ql-toolbar.ql-snow {
    position: sticky;
    inset-block-start: 4.125rem;
    /* Über dem Editorinhalt – und über den Auswahlfeldern der Leiste, die sich
       nach unten öffnen –, aber unter den Menüs von quill-table-better (9–11). */
    z-index: 3;
}

/* Im Modal scrollt der Dialogkörper selbst, und über ihm liegt keine Navbar. */
.modal .ql-toolbar.ql-snow { inset-block-start: 0; }

/* Das KI-Panel neben dem Entwurfseditor läuft aus demselben Grund mit wie die
   Werkzeugleiste: Es soll bei der Textstelle bleiben, an der gerade gearbeitet
   wird. Die Spalte ist dank der Flex-Zeile so hoch wie die Editorspalte, das
   Panel hat also Weg zum Kleben. Ist es höher als das Fenster, scrollt es in
   sich selbst, statt unten abgeschnitten zu werden. Erst ab lg – darunter
   stehen die Spalten untereinander, dort wäre Kleben nur im Weg. */
@media (min-width: 992px) {
    .meco-ki {
        position: sticky;
        inset-block-start: 4.125rem;
        max-block-size: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}

/* Vorschlag des Assistenten: Der Kasten zeigt fremden Text, der noch nicht zum
   Dokument gehört – abgesetzter Hintergrund, und lange Absätze bleiben lesbar
   statt den Kasten zu sprengen. */
#ki-ergebnis-text {
    background: var(--bs-gray-50, var(--bs-tertiary-bg));
    max-block-size: 22rem;
    overflow-y: auto;
}

/* Stammdaten: Farbvorschau der Status-Zeilenfarben (Whitelist: Option::CSS_KLASSEN),
   Werte = Vuexy-Kontextfarben aus core.css */
.meco-farbe-keine   { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.meco-farbe-success { background: var(--bs-success); }
.meco-farbe-warning { background: var(--bs-warning); }
.meco-farbe-danger  { background: var(--bs-danger); }
.meco-farbe-info    { background: var(--bs-info); }
.meco-farbe-primary { background: var(--bs-primary); }
.meco-farbe-dark    { background: var(--bs-dark); }

/* Kontextuell eingefärbte Tabellenzeilen (tr.success usw. in Asset-/Lieferantenliste):
   dezenter Vuexy-Tint wie bei den bg-label-Badges (tables-basic) – über
   --bs-paper-bg themeabhängig, daher hell wie dunkel ohne Sonderregeln lesbar.
   Hover-/Striped-Overlays weiterhin neutralisieren. */
.table > tbody > tr.success > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-success)); }
.table > tbody > tr.warning > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-warning)); }
.table > tbody > tr.danger  > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-danger)); }
.table > tbody > tr.info    > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-info)); }
.table > tbody > tr.primary > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-primary)); }
.table > tbody > tr.dark    > td { background: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount, 84%), var(--bs-dark)); }
.table > tbody > tr.success > td, .table > tbody > tr.warning > td,
.table > tbody > tr.danger > td, .table > tbody > tr.info > td,
.table > tbody > tr.primary > td, .table > tbody > tr.dark > td {
    box-shadow: none; }

/* Druckansicht (Berichte, SoA, Backup-Codes): Layout-Chrome ausblenden und
   die Fixed-Layout-Abstände aus core.css/demo.css neutralisieren. */
@media print {
    #layout-menu, .layout-navbar, .content-footer, .layout-overlay, .drag-target, .no-print {
        display: none !important;
    }
    .layout-page::before { display: none !important; }
    .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page,
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
    .layout-page {
        padding: 0 !important;
    }
    .content-wrapper, .container-xxl, .container-fluid { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
    body { background: #fff !important; }
}

/* Stammdaten-Pflege: Stift-Button neben Auswahllisten-Dropdowns. Der
   position-relative-Wrapper aus meco.js (Select2) muss innerhalb der
   Input-Group selbst als Flex-Child wachsen, damit Feld und Button eine
   geschlossene Gruppe bilden. */
.input-group .meco-ig-select2 { flex: 1 1 auto; min-width: 0; width: 1%; }
.input-group .meco-ig-select2 .select2-container--default .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.meco-liste-gruppe .js-liste-verwalten { border-color: var(--bs-border-color); }

/* Versionsgegenüberstellung (App\Core\HtmlDiff). Die Farben kommen aus den
   Bootstrap-Variablen und folgen damit automatisch dem Dark Mode; die
   Seitenbalken markieren geänderte Blöcke auch dann, wenn Rot/Grün nicht
   unterscheidbar sind (Farbfehlsichtigkeit, Ausdruck). */
.meco-diff ins,
.meco-diff del {
    text-decoration: none;
    padding: 0.05em 0.2em;
    border-radius: 0.2rem;
}
.meco-diff ins {
    background-color: rgba(var(--bs-success-rgb), 0.18);
    border-bottom: 2px solid rgba(var(--bs-success-rgb), 0.55);
}
.meco-diff del {
    background-color: rgba(var(--bs-danger-rgb), 0.15);
    text-decoration: line-through;
    opacity: 0.85;
}
.meco-diff .meco-diff-block {
    padding-left: 0.75rem;
    border-left: 3px solid transparent;
}
.meco-diff .meco-diff-neu       { border-left-color: var(--bs-success); }
.meco-diff .meco-diff-entfernt  { border-left-color: var(--bs-danger); }
.meco-diff .meco-diff-geaendert { border-left-color: var(--bs-warning); }

/* In Tabellen wirkt der Seitenbalken als Zellrand statt als Einzug. */
.meco-diff td.meco-diff-block,
.meco-diff th.meco-diff-block { padding-left: 0.5rem; }

@media print {
    .meco-diff ins { border-bottom-width: 1px; }
    .meco-diff .meco-diff-block { border-left-width: 2px; }
}

/* Legendenkästchen der Vergleichsansicht stehen außerhalb von .meco-diff. */
ins.meco-diff-legende, del.meco-diff-legende {
    text-decoration: none;
    padding: 0.05em 0.35em;
    border-radius: 0.2rem;
}
ins.meco-diff-legende {
    background-color: rgba(var(--bs-success-rgb), 0.18);
    border-bottom: 2px solid rgba(var(--bs-success-rgb), 0.55);
}
del.meco-diff-legende {
    background-color: rgba(var(--bs-danger-rgb), 0.15);
    text-decoration: line-through;
}

/* Dokumentkommentare: Hervorhebung kommentierter Textstellen und der
   schwebende "Kommentieren"-Button an der Textauswahl. */
mark.meco-kommentar-mark {
    background-color: rgba(var(--bs-warning-rgb), 0.35);
    padding: 0;
    cursor: pointer;
}
.meco-kommentar-knopf {
    position: absolute;
    z-index: 1080;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* Kurzes Aufblinken beim Sprung zwischen Textstelle und Listeneintrag. */
.meco-kommentar-blink {
    animation: meco-kommentar-blink 1.6s ease-out;
}
@keyframes meco-kommentar-blink {
    0%, 40% { background-color: rgba(var(--bs-warning-rgb), 0.25); }
    100% { background-color: transparent; }
}

/* KI-Assistent (/ki-chat): Feinschliff der Vuexy-Chat-Seite. Die Antworten des
   Modells werden von App\Services\KI\Markdown als kleines HTML-Fragment
   gerendert (Absätze, Listen, Code) – hier bekommen sie die Abstände der
   Chat-Blase. */
.app-chat .chat-message .chat-message-wrapper { max-inline-size: 46rem; }
.ki-antwort > :last-child { margin-bottom: 0 !important; }
.ki-antwort ul.ki-liste,
.ki-antwort ol.ki-liste { margin-block: 0.25rem; }
.ki-antwort code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background-color: rgba(var(--bs-body-color-rgb), 0.08);
}
.ki-antwort pre.ki-code {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(var(--bs-body-color-rgb), 0.08);
    overflow-x: auto;
    white-space: pre;
}
/* Quellenmarker [1] in der Antwort und in der Quellenliste darunter. */
.ki-quelle-marker {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--bs-primary);
    vertical-align: super;
}