/* ---------------------------------------------------------------------------
   RichTextEditorControl

   This was an inline <style> block inside the component. Two reasons it had to
   come out.

   It is global CSS, and a component emits its markup once per instance — two
   editors on one page meant two copies of all of it in the DOM, and the
   per-instance `min-height` rule meant the last editor rendered set the height
   of every editor on the page. Height is now a custom property the component
   sets on its own wrapper, so each instance carries its own.

   And it cannot be scoped CSS (.razor.css). Syncfusion renders the quick
   toolbars, the mention list and the dialogs as children of <body>, outside the
   component's own DOM, so the scope attribute Blazor adds would never reach
   them.

   DARK MODE

   Every dark rule keys off [data-bs-theme="dark"] on <html>. That attribute is
   this app's single theme signal: App.razor stamps it before first paint from
   prefers-color-scheme, and MainLayout.SyncDocumentTheme keeps it in step when
   the OS setting changes. Because it sits on the root element it also reaches
   the popups Syncfusion renders at body level.

   The rules this replaces were copied from Syncfusion's demo site and keyed off
   a theme class on <body> — .bootstrap5-dark, .material-dark, body[class*="-dark"]
   and so on. Nothing in this application has ever set such a class, so not one
   of those selectors has ever matched.

   The editor's own chrome is not styled here at all. That comes from the
   Syncfusion theme stylesheet, which the host swaps between bootstrap5.css and
   bootstrap5-dark.css — see coopman-theme.js.
   --------------------------------------------------------------------------- */

/* Height is per instance: the component writes --app-rte-min-height on the
   wrapper and it inherits down to the content area. */
.app-rte .e-rte-content .e-content {
    min-height: var(--app-rte-min-height, 300px);
}

/* The wrapper exists to carry --app-rte-min-height. It replaces a <div> that
   hardcoded id="editor-wraper", which every instance on a page repeated. */
.app-rte-wrap {
    display: block;
    width: 100%;
}

/* Matches the weight and spacing of a MudBlazor field label without depending on
   MudBlazor — this library does not reference it. */
.app-rte-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #6c757d);
}

/* ── @mention list ──────────────────────────────────────────────────────── */

.editor-mention-item-template {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.em-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.em-avatar {
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    text-indent: 0;
    line-height: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Was a hardcoded rgb(16, 24, 40) with a dark override that never matched.
   MudThemeProvider writes these variables onto :root, and the tenant's palette
   feeds them, so the name now follows both the theme and the society's brand.
   The fallbacks are for the prerender frame, before MudBlazor's block exists. */
.em-name {
    color: var(--mud-palette-text-primary, #101828);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 5px;
}

.em-email {
    color: var(--mud-palette-text-secondary, gray);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

/* The id is generated per instance now, so this matches on the suffix rather
   than on the hardcoded "RT_Editor" the single-instance version assumed. */
[id$="_mention_options"] li {
    padding: 10px;
    height: 60px;
}

/* ── Source-code view ───────────────────────────────────────────────────── */

.e-code-mirror::before {
    content: '\e345';
}

.e-html-preview::before {
    content: '\e350';
}

.e-richtexteditor.e-rte-full-screen {
    top: 48px;
}

.CodeMirror-linenumber,
.CodeMirror-gutters {
    display: none;
}

.sb-header {
    z-index: 100;
}

.e-richtexteditor .e-rte-content .e-content pre {
    padding: 10px;
    background: inherit;
}

[data-bs-theme="dark"] .CodeMirror {
    background: #303030;
}

[data-bs-theme="dark"] .e-richtexteditor .e-rte-content .e-content pre {
    padding: 10px;
    background: #303030;
}

/* Syntax colours for the source view. The light values are CodeMirror's own
   defaults, so only dark needs overriding — the originals set green/blue/red
   against a dark background and were unreadable if they had ever applied on
   light. */
[data-bs-theme="dark"] .cm-s-default .cm-tag {
    color: #00ff00;
}

[data-bs-theme="dark"] .cm-s-default .cm-string {
    color: #7fb2ff;
}

[data-bs-theme="dark"] .cm-s-default .cm-attribute {
    color: #ff7b72;
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
    a,
    a:visited {
        color: blue !important;
        text-decoration: underline;
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    a[href]:after {
        content: "";
    }
}