/*
  Custom CSS for quill editor behavior.
  These override quill.snow.css hardcoded colors using our CSS variables,
  keeping the vendor file untouched while making Quill theme-aware.
 */
/* === Snow theme color overrides === */
/* Editor container & content area */
.ql-container {
    background: var(--content-bg);
    font-size:1.0em;
    color: var(--text-color);
}
.ql-container.ql-snow {
    border-color: var(--border-color);
}
.ql-container.focus {
    border-color: var(--primary-color);
}
/* Toolbar */
.ql-toolbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.ql-toolbar.ql-snow {
    border-color: var(--border-color);
    background: var(--surface-bg);
}
.ql-toolbar.focus {
    border-left-color: var(--primary-color);
    border-right-color: var(--primary-color);
    border-top-color: var(--primary-color);
}
/* Toolbar icon colors (SVG strokes and fills) */
.ql-snow .ql-stroke {
    stroke: var(--text-color);
}
.ql-snow .ql-stroke-miter {
    stroke: var(--text-color);
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: var(--text-color);
}
/* Toolbar active/hover icon colors */
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--link-color);
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill {
    fill: var(--link-color);
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter {
    stroke: var(--link-color);
}
/* Picker (dropdowns) */
.ql-snow .ql-picker {
    color: var(--text-color);
}
.ql-snow .ql-picker-options {
    background-color: var(--content-bg);
    border-color: var(--border-color);
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--border-color);
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--border-color);
}
/* Tooltip */
.ql-snow .ql-tooltip {
    background-color: var(--content-bg);
    border-color: var(--border-color);
    box-shadow: 0 0 5px var(--shadow-color);
    color: var(--text-color);
    left: 0 !important;
    border-radius: 4px;
}
.ql-snow .ql-tooltip input[type=text] {
    border-color: var(--border-color);
    color: var(--text-color);
    background: var(--surface-bg);
}
.ql-snow .ql-tooltip a.ql-action::after {
    border-right-color: var(--border-color);
}
/* Links inside editor */
.ql-snow a {
    color: var(--link-color);
}
/* Editor blockquote */
.ql-snow .ql-editor blockquote {
    border-left-color: var(--border-medium);
}
/* Inline code */
.ql-snow .ql-editor code {
    background-color: var(--surface-bg);
}
/* Placeholder text */
.ql-editor.ql-blank::before {
    color: var(--text-light);
}
/* === Editor structure (non-color) === */
.ql-container,
.ql-editor {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.ql-editor {
    max-height:65vh;
}
.ql-container p,
.ql-container ul,
.ql-container ol {
    font-size: 1em;
}
.ql-container ul,
.ql-container ol {
    margin:0;
    padding-bottom:8px;
    padding-left:0;
}
.ql-container p { margin:0; padding:0 0 0.5em 0; }
.ql-container h1 { font-weight:bold; font-size:2.1em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h2 { font-weight:bold; font-size:1.7em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h3 { font-weight:bold; font-size:1.4em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h4 { font-weight:bold; font-size:1.2em !important; margin:0; padding:0.25em 0 0.5em 0; border-bottom: none; }
.ql-container h5 { font-weight:bold; font-size:1.0em !important; margin:0; padding:0.25em 0 0.5em 0; border-bottom: none; }
.ql-container a {
    font-size:1em;
}
/* === Merge variables === */
.ql-container .mergevar {
    border:0;
    background:var(--ql-mergevar-bg);
    border-radius:5px;
    padding:0 0.2em;
    margin:0;
    color:var(--text-color);
    font-style:normal;
}
.ql-container em .mergevar {
    font-style: italic;
}
.ql-container .mergeblockvar[data-param]::after,
.ql-container .mergevar[data-param]::after {
    font-family: 'Feather';
    content: "\e8c3";
    font-size: 0.8em;
    margin-left: 0.2em;
    cursor: pointer;
    opacity: 0.7;
    position:absolute;
    top:0.2em;
    right:1px;
}
.ql-container .mergeblockvar[data-param]:hover::after,
.ql-container .mergevar[data-param]:hover::after {
    opacity: 1;
    color:var(--text-color);
    font-size:0.9em;
    top:0.1em;
}
.ql-container .mergeblockvar {
    border:0;
    padding:0px 2px;
    background:var(--ql-mergevar-bg);
    border-radius:4px;
    margin:0 -2px 0.5em;
    color:var(--text-color);
    white-space:normal;
}
.ql-container .mergevar[data-param] {
    padding-right:1.1em;
}
.ql-container .mergeblockvar[data-param],
.ql-container .mergevar[data-param] {
    position:relative;
}
.ql-container .mergeblockvar table {
    width:100%;
    border-collapse: collapse;
    margin-bottom:5px;
    font-size:1em;
}
.ql-container .mergeblockvar table th,
.ql-container .mergeblockvar table td {
    padding:0 2px;
    border:0;
    font-size: 1em;
}
.ql-container .mergeblockvar table.table-auto-width {
width: auto;
}
.ql-container .mergeblockvar table.table-auto-width th,
.ql-container .mergeblockvar table.table-auto-width td {
    padding: 4px 8px 2px 4px;
}
.ql-container .mergeblockvar table td span.icon-check {
    font-weight: bold;
}
.ql-container .mergeblockvar table thead tr th {
    vertical-align: bottom;
}
.ql-container .mergeblockvar table thead tr:last-child th {
    border-bottom:1px solid var(--overlay-heavy);
}
.ql-container .mergeblockvar table tbody td,
.ql-container .mergeblockvar table tfoot td {
    border-color:var(--overlay-light);
    vertical-align: top;
}
.ql-container .mergeblockvar table tfoot tr:first-child td {
    border-top:1px solid var(--overlay-heavy);
}
.ql-container .mergeblockvar table tfoot {
    font-size:1em !important;
}
.ql-container .mergeblockvar table tfoot td {
    padding-top:5px !important;
    font-weight: bold;
    font-size:1em;
    border-top:1px solid var(--overlay-heavy) !important;
}
.ql-container .align-right {
    text-align:right;
}
.ql-container .mergeblockvar table.smalltable,
.ql-container .mergeblockvar table.financialplan {
    font-size:1em;
}
.ql-container .mergeblockvar table.tinytable {
    font-size:0.9em;
}
textarea.rich-editor {
    display: none;
}
a.ql-action,
a.ql-remove {
    cursor:pointer !important;
    opacity: 1  !important;
    pointer-events: auto !important;
    font-style:normal !important;
}
/* Localized tooltip labels */
.nb.ql-snow .ql-tooltip::before { content: "Åpne url:"; }
.nn.ql-snow .ql-tooltip::before { content: "Åpne url:"; }
.en.ql-snow .ql-tooltip::before { content: "Open url:"; }
.nb.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Skriv url:"; }
.nn.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Skriv url:"; }
.en.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Write url:"; }
.nb.ql-snow .ql-tooltip a.ql-action::after { content: "Rediger"; }
.nn.ql-snow .ql-tooltip a.ql-action::after { content: "Rediger"; }
.en.ql-snow .ql-tooltip a.ql-action::after { content: "Edit"; }
.nb.ql-snow .ql-tooltip a.ql-remove::before { content: "Fjern"; }
.nn.ql-snow .ql-tooltip a.ql-remove::before { content: "Fjern"; }
.en.ql-snow .ql-tooltip a.ql-remove::before { content: "Remove"; }
.nb.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Lagre"; }
.nn.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Lagre"; }
.en.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Save"; }
/* Toolbar custom buttons */
.ql-divider:after {
    content:'';
    width:16px;
    border-bottom:2px solid var(--text-color);
    display: inline-block;
    margin-bottom:5px;
}
.ql-divider:hover:after {
    border-bottom:2px solid var(--link-color);
}
.ql-if-start:after {
    content:'ƒ';
    font-weight: bold;
    font-style:italic;
    font-size: 1.3em;
    position: relative;
    top: -5px;
}
.ql-if-visible:after {
    content: "\e86a";
    font-family: 'Feather';
}
.ql-wrapper.if-hide-hidden .if-hidden {
    display:none;
}
.ql-wrapper.if-hide-hidden .if-start.if-hidden {
    display:block;
    padding: 4px 10px 2px 10px;
}
.ql-wrapper.if-hide-hidden .if-start.if-hidden .if-expr {
    font-size: 0.8em;
}
.ql-wrapper.if-hide-hidden .if-end.if-hidden {
    display:block;
}
/* Page break / hr */
.ql-container hr {
    border:0;
    border-top:1px dashed var(--border-medium);
    border-bottom:1px dashed var(--border-medium);
    padding:1px 0px;
    text-align:center;
    background: var(--ql-hr-bg);
    font-style: italic;
    margin:10px 0;
}
.ql-container hr:after {
    content:'Ny side';
    text-align:center;
}
/* Error state */
.error .ql-toolbar.ql-snow {
    border-color: var(--error-color);
}
.error .ql-container.ql-snow {
    border-color: var(--error-color);
    background-color: var(--error-color-light);
}
/* Resize handle */
.ql-wrapper .ql-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: .3;
    cursor: ns-resize;
}
.ql-wrapper .ql-resize-handle:after {
    content: ' ';
    display: block;
    width: 14px;
    height: 14px;
    background: linear-gradient(
            -45deg,
            var(--text-color) 10%, var(--text-color), transparent, transparent 20%,
            var(--text-color) 20%, var(--text-color), transparent, transparent 30%,
            var(--text-color) 30%, var(--text-color), transparent, transparent 40%,
            var(--text-color) 40%, var(--text-color), transparent, transparent 50%
    )
}
.ql-wrapper .ql-resize-handle:hover {
    opacity: 1;
}
.ql-wrapper[disabled="disabled"] {
    pointer-events: none;
    background: var(--light-grey);
}
.ql-wrapper[disabled="disabled"] .ql-editor {
    background: var(--light-grey);
}
/* === If-block conditional markers === */
/* The Start Bar */
.ql-container .if-start {
    background-color: var(--ql-if-bg);
    border-top: 1px solid var(--ql-if-border);
    border-left: 1px solid var(--ql-if-border);
    border-right: 1px solid var(--ql-if-border);
    color: var(--ql-if-color);
    padding: 5px 10px;
    margin: 0 -5px 0 -5px;
    font-family: monospace;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    user-select: none;
    position:relative;
}
.ql-container .if-start:hover {
    background-color: var(--ql-if-bg-hover);
}
.compose .ql-wrapper .if-start:hover {
    background-color: var(--ql-if-bg) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* The End Bar */
.ql-container .if-end {
    background-color: var(--ql-if-bg);
    border-bottom: 1px solid var(--ql-if-border);
    border-left: 1px solid var(--ql-if-border);
    border-right: 1px solid var(--ql-if-border);
    color: var(--ql-if-color);
    height:4px;
    margin: 0 -5px 0.75em -5px;
    font-family: monospace;
    font-size: 0.8em;
    border-radius: 0 0 4px 4px;
    user-select: none;
}
.ql-container .if-content {
    border-left: 1px solid var(--ql-if-border);
    border-right: 1px solid var(--ql-if-border);
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--ql-if-content-bg);
}
.ql-container .if-hidden {
    opacity: 0.5;
}
.ql-container .if-start + * {
    padding-top: 0.5em;
}
.if-label {
    font-weight: bold;
    font-style:italic;
}
/* Start marker that evaluated to false */
.if-start[data-eval="false"] {
    opacity:0.5;
}
.if-start[data-eval="false"]::after {
    content: "\e86e";
    font-family: 'Feather';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: var(--ql-if-color);
}
.if-start[data-eval="true"]::after {
    content: "\e86a";
    font-family: 'Feather';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: var(--ql-if-color);
}