/* ============================================================
   Quill — FlowKlar theming

   The vendored Snow stylesheet (wwwroot/lib/quill/quill.snow.min.css) provides the editor's
   mechanics: list markers, indent classes, layout. This file re-dresses everything a user actually
   sees — the frame, the toolbar, the dropdown menus and the dialogs — in the app's tokens, so the
   editor reads as one of our own form fields and its dialogs as one of our own modals (see
   ModalContainer.razor.css). Loaded after the Snow stylesheet, so equal specificity wins and,
   unlike the TinyMCE predecessor, no !important battle is needed. Colours go through the app's
   CSS variables, which the dark theme redefines — that alone covers dark mode.
   ============================================================ */

/* ── Editor frame ───────────────────────────────────────── */

/* Matches .form-control: the editor is a form field like any other. position: relative anchors the
   image-resize frame. */
.rte {
    position: relative;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.rte .ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-body);
}

.rte .ql-editor {
    min-height: 320px;
    max-height: 65dvh;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    line-height: 1.6;
}

/* Snow's link tooltip is replaced by the app-styled link dialog. */
.rte .ql-tooltip {
    display: none;
}

/* ── Mentions ──────────────────────────────────────────────────────────────
   The popup renders on the body and is placed at the caret in viewport coordinates (see setupMentions):
   .rte clips its own overflow, and a five-line comment box would cut the list off entirely. Hence fixed
   rather than the absolute placement .rte-menu assumes — and a z-index above the modal layer, since the
   same editor runs inside the task dialog. */

/* The frame is repeated rather than inherited from .rte .rte-menu: this popup renders on the body, so
   every selector scoped to .rte — which is all of them — stops applying. */
.rte-mention-menu {
    position: fixed;
    z-index: 1200;
    min-width: 16rem;
    max-width: 24rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--surface);
    background: var(--surface-menu);
    -webkit-backdrop-filter: var(--menu-blur);
    backdrop-filter: var(--menu-blur);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-family: inherit;
}

.rte-mention-group {
    padding: 0.4rem 0.55rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.rte-mention-group:first-child {
    padding-top: 0.15rem;
}

.rte-mention-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.rte-mention-item:hover,
.rte-mention-item.is-active {
    background: var(--clr-blue-50);
    color: var(--clr-blue-700);
}

.rte-mention-label {
    flex-shrink: 0;
    font-weight: 500;
}

/* The secondary line is context, not content: it may be cut, the name may not. */
.rte-mention-detail {
    overflow: hidden;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rte-mention-empty {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* The mention itself, in the editor and — via app.css — in the rendered comment. */
.rte .ql-editor .fk-mention {
    padding: 0.05em 0.3em;
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* Comment variant: a box that starts at three lines and grows with what is written, rather than an
   article canvas that claims a third of the screen before anyone has typed a word. */
.rte-compact .ql-editor {
    min-height: 5.5rem;
    max-height: 40dvh;
    padding: 0.6rem 0.75rem;
}

.rte-compact .rte-toolbar {
    padding: 0.25rem 0.4rem;
}

/* ── Editor content: mirror what the rendered article will show ── */

.rte .ql-editor img {
    max-width: 100%;
    height: auto;
}

.rte .ql-editor figure.image {
    display: table;
    margin: 1rem auto;
}

.rte .ql-editor figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-size: 0.85em;
    color: var(--text-muted);
    padding-top: 0.4rem;
}

.rte .ql-editor iframe,
.rte .ql-editor video {
    max-width: 100%;
    border: none;
}

.rte .ql-editor blockquote {
    border-left: 3px solid var(--border-strong);
    margin: 0.6rem 0;
    padding-left: 0.9rem;
    color: var(--text-secondary);
}

.rte .ql-editor .ql-code-block-container {
    background: var(--surface-sunken);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--text-body);
}

.rte .ql-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6rem 0;
}

.rte .ql-editor td {
    border: 1px solid var(--border);
    padding: 0.35rem 0.55rem;
}

/* ── Toolbar ────────────────────────────────────────────── */

.rte .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0.25rem 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: inherit;
}

.rte .rte-group {
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
    border-right: 1px solid var(--border);
}

.rte .rte-group:last-child {
    border-right: none;
}

.rte .ql-toolbar button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 1px;
    border-radius: 6px;
    color: var(--clr-slate-600);
    float: none;
}

.rte .ql-toolbar button svg {
    width: 18px;
    height: 18px;
}

/* Snow paints icons with fixed greys; route them through the button colour instead. */
.rte .ql-toolbar button .ql-stroke,
.rte .ql-toolbar button:hover .ql-stroke,
.rte .ql-toolbar button.ql-active .ql-stroke {
    stroke: currentColor;
}

.rte .ql-toolbar button .ql-fill,
.rte .ql-toolbar button:hover .ql-fill,
.rte .ql-toolbar button.ql-active .ql-fill {
    fill: currentColor;
}

.rte .ql-toolbar button:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
}

.rte .ql-toolbar button.ql-active {
    background: var(--clr-blue-50);
    color: var(--clr-blue-700);
}

.rte .ql-toolbar button:disabled {
    color: var(--text-faint);
    cursor: default;
}

/* ── Toolbar dropdowns (blocks, table) ──────────────────── */

.rte .rte-blocks,
.rte .rte-table {
    position: relative;
    display: inline-flex;
}

/* Specificity note: Snow sizes and floats every button under .ql-snow.ql-toolbar (0,2,1). All
   dropdown-button and menu rules below therefore include .ql-toolbar plus the button element, and
   explicitly neutralise Snow's float/width/height — plain .rte .rte-menu-item would lose. */
.rte .ql-toolbar button.rte-blocks-btn,
.rte .ql-toolbar button.rte-table-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    float: none;
    width: auto;
    height: 28px;
    margin: 1px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--clr-slate-600);
    font-size: 0.85rem;
    white-space: nowrap;
}

.rte .rte-blocks-label {
    color: var(--text-secondary);
    min-width: 4.5rem;
    text-align: left;
}

.rte .ql-toolbar button.rte-blocks-btn svg,
.rte .ql-toolbar button.rte-table-btn svg {
    float: none;
    width: 16px;
    height: 16px;
}

.rte .ql-toolbar button.rte-blocks-btn svg:last-child,
.rte .ql-toolbar button.rte-table-btn svg:last-child {
    width: 12px;
    height: 12px;
}

.rte .rte-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 12rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
}

.rte .ql-toolbar .rte-menu button.rte-menu-item {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    background: transparent;
}

.rte .ql-toolbar .rte-menu button.rte-menu-item:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
}

.rte .ql-toolbar .rte-menu button.rte-menu-item.active {
    background: var(--clr-blue-50);
    color: var(--clr-blue-700);
}

.rte .ql-toolbar .rte-menu button.rte-menu-item:disabled {
    color: var(--text-faint);
    cursor: default;
}

.rte .rte-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0.35rem;
}

/* Block previews inside the menu keep their element look but stay compact. */
.rte .rte-menu-item h1,
.rte .rte-menu-item h2,
.rte .rte-menu-item h3,
.rte .rte-menu-item h4,
.rte .rte-menu-item h5,
.rte .rte-menu-item h6,
.rte .rte-menu-item p,
.rte .rte-menu-item pre {
    margin: 0;
    color: inherit;
    line-height: 1.35;
}

.rte .rte-menu-item h1 { font-size: 1.3rem; }
.rte .rte-menu-item h2 { font-size: 1.15rem; }
.rte .rte-menu-item h3 { font-size: 1.02rem; }
.rte .rte-menu-item h4 { font-size: 0.95rem; }
.rte .rte-menu-item h5 { font-size: 0.88rem; }
.rte .rte-menu-item h6 { font-size: 0.82rem; }
.rte .rte-menu-item pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    background: none;
    padding: 0;
    border: none;
}

/* Table size picker */
.rte .rte-grid-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.25rem 0.35rem 0.35rem;
}

.rte .rte-grid {
    display: grid;
    grid-template-columns: repeat(8, 16px);
    gap: 3px;
    padding: 0 0.35rem 0.35rem;
}

.rte .ql-toolbar .rte-menu button.rte-grid-cell {
    display: block;
    float: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: var(--surface);
    padding: 0;
}

.rte .ql-toolbar .rte-menu button.rte-grid-cell.hot {
    background: var(--clr-blue-50);
    border-color: var(--clr-blue-700);
}

/* ── Image resize frame ─────────────────────────────────── */

.rte .rte-resize {
    position: absolute;
    border: 1px solid var(--clr-blue-500);
    pointer-events: none;
    z-index: 30;
}

.rte .rte-resize-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--clr-blue-500);
    border: 1px solid var(--surface);
    border-radius: 2px;
    pointer-events: auto;
}

.rte .rte-resize-handle.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.rte .rte-resize-handle.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.rte .rte-resize-handle.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.rte .rte-resize-handle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }

/* ── Upload notices ─────────────────────────────────────── */

.rte .rte-notice {
    margin: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--clr-red-200);
    border-radius: 8px;
    background: var(--clr-red-50);
    color: var(--clr-red-600);
    font-size: 0.85rem;
}

/* ── Dialogs ────────────────────────────────────────────── */

/* Above the app's modals (10050) so an editor inside a modal still gets a usable dialog, but below
   toasts (10100), which must stay readable on top of everything. */
.rte-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10055;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Touch devices: centre in the area actually visible. The link dialog is opened to type into,
   so the on-screen keyboard is always up — and `inset: 0` spans the layout viewport, which some
   engines leave at full height and scroll instead. js/viewport.js publishes the visible box. */
@media (hover: none) and (pointer: coarse) {
    .rte-dialog-backdrop {
        bottom: auto;
        top: var(--visual-top, 0px);
        height: var(--visual-vh, 100dvh);
    }
}

/* Mirrors .dialog in ModalContainer.razor.css. */
.rte-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 30rem;
    max-height: calc(var(--visual-vh, 100dvh) - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rte-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
}

.rte-dialog-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

/* The X, styled like the app's .btn-icon. */
.rte-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.rte-dialog-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.rte-dialog-close svg {
    width: 16px;
    height: 16px;
}

.rte-dialog-body {
    padding: 0.5rem 1.5rem 1.25rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    overflow-y: auto;
}

.rte-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--border);
}

.rte-dialog-error {
    margin-right: auto;
    color: var(--clr-red-600);
    font-size: 0.82rem;
}

/* ── Dialog form fields ─────────────────────────────────── */

.rte-field {
    display: block;
    margin-bottom: 0.8rem;
}

.rte-field span {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

/* Mirrors .form-control, focus ring included. */
.rte-field input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--text-body);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rte-field input:focus {
    outline: none;
    border-color: var(--clr-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.rte-field input::placeholder {
    color: var(--text-faint);
}

.rte-dims {
    display: flex;
    gap: 0.8rem;
}

.rte-dims .rte-field {
    flex: 1;
}

.rte-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.rte-check input {
    accent-color: var(--clr-blue-600);
}

.rte-hint {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Dialog tabs (image dialog: Allgemein / Hochladen) ──── */

.rte-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.rte-tab {
    padding: 0.45rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.rte-tab:hover {
    color: var(--text);
}

.rte-tab.active {
    color: var(--clr-blue-700);
    border-bottom-color: var(--clr-blue-700);
}

/* Upload tab */
.rte-dropzone {
    background: var(--surface-page);
    border: 2px dashed var(--border-strong);
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
}

.rte-dropzone p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.rte-dropzone.over {
    border-color: var(--clr-blue-500);
    background: var(--clr-blue-50);
}

.rte-dropzone.busy {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Dialog buttons (.btn / .btn-primary / .btn-secondary) ── */

.rte-btn-primary,
.rte-btn-secondary {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.rte-btn-primary {
    background: var(--clr-slate-800);
    border: 1px solid transparent;
    color: var(--clr-white);
}

.rte-btn-primary:hover {
    background: var(--clr-slate-900);
}

.rte-btn-secondary {
    background: var(--btn-fill);
    border: 1px solid transparent;
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
}

.rte-btn-secondary:hover {
    background: var(--btn-fill-hover);
    box-shadow: var(--shadow-sm);
}

/* The protocol blocks as they look while being written — the same rules app.css applies to a
   rendered protocol, so the editor is not a different document. The counter resets per editor. */
.rte .ql-editor {
    counter-reset: fk-top;
}

.rte .ql-editor .fk-top {
    counter-increment: fk-top;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 1.05rem;
}

.rte .ql-editor .fk-top::before {
    content: "TOP " counter(fk-top) " · ";
    color: var(--clr-slate-400);
    font-weight: 600;
}

.rte .ql-editor .fk-decision {
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--clr-green-500, #16a34a);
    border-radius: 0 6px 6px 0;
    background: var(--surface-track);
}

.rte .ql-editor .fk-decision::before {
    content: "Beschluss";
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-slate-500);
}

/* ── Live editing (docs/LIVE-EDITING.md) ─────────────────────────────────── */

/* Watching a session: the text as it is written, without the tools to write it. The frame stays so the
   others' cursors have their editor around them; it reads as the protocol, not as a form. */
.rte.rte-readonly {
    border-color: transparent;
    background: transparent;
}

.rte.rte-readonly .rte-toolbar {
    display: none;
}

.rte.rte-readonly .ql-editor {
    min-height: 0;
    max-height: none;
    padding: 0;
    cursor: default;
}

/* An editor waiting for the session's document — the first one fills it from the stored text, and
   typing into it before that would put the words in front of the whole protocol. */
.rte.rte-live-waiting .ql-editor {
    opacity: 0.45;
}

.rte.rte-live-waiting::after {
    content: "Wird geladen …";
    position: absolute;
    top: 3.5rem;
    left: 50%;
    translate: -50% 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: 0.82rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* The others' carets: quill-cursors draws them; the flag carries the app's type. */
.rte .ql-cursor-flag {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px 4px 4px 0;
}

/* quill-cursors' stylesheet clips the container; the editor's frame already does, and the image
   resize frame must still reach the corners. */
.rte .ql-container {
    overflow: visible;
}

.rte .rte-live-recovery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-color: var(--clr-amber-200, #fde68a);
    background: var(--clr-amber-50, #fffbeb);
    color: var(--clr-amber-800, #92400e);
}