/*
 * Quill (snow theme) restyled for the dark-first "Console" theme.
 * Keyed off MudBlazor palette CSS variables so it adapts to the active
 * theme (dark or light). Loaded AFTER quill.snow.css so equal-specificity
 * rules win by source order. Global (not scoped) because Quill builds its
 * toolbar/editor DOM in JavaScript without Blazor scope attributes.
 */

/* Container + toolbar borders and surfaces */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--mud-palette-lines-inputs, rgba(255, 255, 255, 0.3));
}

.ql-toolbar.ql-snow {
    background-color: var(--mud-palette-surface, #1a1a24);
    border-top-left-radius: var(--mud-default-borderradius, 4px);
    border-top-right-radius: var(--mud-default-borderradius, 4px);
}

.ql-container.ql-snow {
    /* Cancel Quill's default height:100%. In a flex parent (MudGrid item) that
       100% resolves to a definite height that excludes the sibling toolbar, so
       the container's bottom overshoots the grid cell and the Save/Reset buttons
       below paint on top of it. height:auto lets it size to its content. */
    height: auto;
    background-color: var(--mud-palette-surface, #1a1a24);
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
    border-bottom-left-radius: var(--mud-default-borderradius, 4px);
    border-bottom-right-radius: var(--mud-default-borderradius, 4px);
    font-family: inherit;
    font-size: 1rem;
}

/* Bounded, scrollable editing area: never overflows the card or overlaps
   the Save/Reset buttons rendered below it. height:auto overrides Quill's
   height:100% so the min/max-height bounds actually drive the box size. */
.ql-container.ql-snow .ql-editor {
    height: auto;
    min-height: 180px;
    max-height: 420px;
    overflow-y: auto;
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
}

.ql-snow .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.5));
    font-style: normal;
}

.ql-editor a {
    color: var(--mud-palette-primary, #3ddc84);
}

/* Toolbar icons: recolor SVG strokes/fills so they are visible on dark surfaces. */
.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
    stroke: var(--mud-palette-action-default, rgba(255, 255, 255, 0.7));
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: var(--mud-palette-action-default, rgba(255, 255, 255, 0.7));
}

.ql-snow .ql-picker {
    color: var(--mud-palette-action-default, rgba(255, 255, 255, 0.7));
}

.ql-snow .ql-picker-options {
    background-color: var(--mud-palette-surface, #1a1a24);
    border-color: var(--mud-palette-lines-inputs, rgba(255, 255, 255, 0.3)) !important;
}

/* Hover / active states use the Console accent. */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--mud-palette-primary, #3ddc84);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--mud-palette-primary, #3ddc84);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-item:hover {
    color: var(--mud-palette-primary, #3ddc84);
}

/* Link editing tooltip. */
.ql-snow .ql-tooltip {
    background-color: var(--mud-palette-surface, #1a1a24);
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
    border-color: var(--mud-palette-lines-inputs, rgba(255, 255, 255, 0.3));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.ql-snow .ql-tooltip input[type=text] {
    background-color: var(--mud-palette-background, #12121a);
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
    border-color: var(--mud-palette-lines-inputs, rgba(255, 255, 255, 0.3));
}

.ql-snow .ql-tooltip a {
    color: var(--mud-palette-primary, #3ddc84);
}