/* TGF.HtmlText — Modul-spezifische Styles */

/* Der normale Oqtane-Editor ("Bearbeiten") ist auf weissen Hintergrund ausgelegt.
   Daher diesen einen Dialog wieder weiss machen (die graue Theme-Regel gilt sonst global),
   damit der weisse Editor nahtlos einfügt statt aufgesetzt zu wirken. */
.modal-content:has(.tgf-htmltext-rawedit) {
    background-color: var(--tgf-surface);
}

/* Syncfusion-RTE folgt dem TGF-Hell/Dunkel-Theme. Syncfusion ist global fix auf
   das Dark-Theme gesetzt (bootstrap5-dark.css in TgfModuleBase); hier ziehen wir
   den Editor auf die TGF-Tokens, die mit [data-theme] umschalten — hell = weiss,
   dunkel = schwarz. !important, um die hohe Spezifität des Syncfusion-Themes zu schlagen. */
.tgf-template-editor .e-richtexteditor,
.tgf-template-editor .e-richtexteditor .e-rte-content,
.tgf-template-editor .e-richtexteditor .e-rte-content .e-content,
.tgf-template-editor .e-richtexteditor .e-source-content,
.tgf-template-editor .e-richtexteditor .e-source-content .e-content,
.tgf-template-editor .e-richtexteditor .e-rte-srctextarea,
.tgf-template-editor .e-richtexteditor .e-source-content textarea {
    background-color: var(--tgf-surface) !important;
    color: var(--tgf-text) !important;
}

/* An die übrigen .form-control-Felder angleichen: EIN heller Rand am Aussenrahmen,
   runde Ecken. overflow:hidden kappt Toolbar/Content an die Rundung (Syncfusion-Popups
   hängen am body, werden also nicht abgeschnitten). */
.tgf-template-editor .e-richtexteditor {
    border: 1px solid var(--tgf-border) !important;
    border-radius: 0.5rem !important;
    /* !important, da Syncfusion overflow auf .e-richtexteditor selbst setzt und sonst
       die inneren (eckigen) Wrapper nicht an die Rundung geklippt werden. */
    overflow: hidden !important;
}

/* Alle INNEREN Rahmen ausblenden — sonst laufen graue Doppellinien knapp innerhalb
   des Aussenrahmens und trüben die Rundung. Toolbar (grau) und Inhalt (weiss) trennen
   sich ohnehin über die Hintergrundfarbe. Der editierbare Inhalt bleibt ausgenommen,
   damit Tabellen o.ä. ihre Rahmen behalten. */
.tgf-template-editor .e-richtexteditor :not(.e-content):not(.e-content *) {
    border-width: 0 !important;
}

/* Toolbar einen Tick dunkler als der Popup-Hintergrund (der ebenfalls --tgf-surface-alt
   ist), damit sie sich abhebt und als zum weissen Textfeld gehörige Leiste wirkt.
   color-mix bleibt theme-aware (hell wie dunkel je ~10% dunkler). */
.tgf-template-editor .e-richtexteditor .e-rte-toolbar-wrapper,
.tgf-template-editor .e-richtexteditor .e-toolbar-wrapper,
.tgf-template-editor .e-richtexteditor .e-toolbar,
.tgf-template-editor .e-richtexteditor .e-rte-toolbar,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-toolbar-items {
    background-color: color-mix(in srgb, var(--tgf-surface-alt) 90%, #000) !important;
}

/* Alle inneren Container transparent — sonst bleibt z.B. rechts bei Undo/Redo
   ein dunkler Block aus dem Syncfusion-Dark-Theme stehen. */
.tgf-template-editor .e-richtexteditor .e-toolbar .e-toolbar-item,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-tbar-btn,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-dropdown-btn,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-hor-nav,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-scroll-nav {
    background-color: transparent !important;
}

.tgf-template-editor .e-richtexteditor .e-toolbar .e-tbar-btn .e-icons,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-tbar-btn-text,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-dropdown-btn,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-dropdown-btn .e-icons,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-hor-nav .e-icons {
    color: var(--tgf-text) !important;
}

.tgf-template-editor .e-richtexteditor .e-toolbar .e-tbar-btn:hover,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-dropdown-btn:hover {
    background-color: var(--tgf-border) !important;
}

/* Deaktivierte Buttons (z.B. Undo/Redo) nur gedämpft, ohne dunklen Block. */
.tgf-template-editor .e-richtexteditor .e-toolbar .e-overlay,
.tgf-template-editor .e-richtexteditor .e-toolbar .e-tbar-btn.e-disabled {
    background-color: transparent !important;
    opacity: 0.4;
}

/* Vorlagen-Editor: verwaiste Inhalte */
.tgf-template-orphans summary {
    cursor: pointer;
    font-weight: 600;
}

/* Vorlagen-Verwaltung */
.tgf-template-admin summary {
    cursor: pointer;
    font-weight: 600;
}

.tgf-template-json {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
}

/* Unterstrich-Tabs: klar sichtbar auf grauem Grund. Aktiver Tab = roter Balken + roter,
   fetter Text; inaktiv = gedämpft. */
.tgf-template-editor .nav-tabs {
    border-bottom: 1px solid color-mix(in srgb, var(--tgf-border), #000 30%);
    gap: 4px;
}

.tgf-template-editor .nav-tabs .nav-link {
    color: var(--tgf-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 8px 16px;
    font-weight: 500;
}

.tgf-template-editor .nav-tabs .nav-link:hover {
    color: var(--tgf-red);
    border-bottom-color: var(--tgf-border);
}

.tgf-template-editor .nav-tabs .nav-link.active {
    color: var(--tgf-red);
    font-weight: 700;
    background: transparent;
    border-bottom: 3px solid var(--tgf-red);
}

/* Mapping-Dialog beim Vorlagen-Wechsel */
.tgf-mapping-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.tgf-mapping-dialog {
    max-width: 520px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 64px);
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

.tgf-mapping-dialog code {
    font-size: 13px;
}