/* DELAD UR style.css (KAN-388 CSS-3): rad 2378-3091, byte-exakt; Mailkomponisten. Laddas direkt efter föregående del i index.html. */


/* =============================================================================
BUTTONS & ICONS (CLEANED & MERGED)
============================================================================= */
.action-icon-btn {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.7) !important;
border: none !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
}

.action-icon-btn:hover {
background: transparent !important;
color: white !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
}

.ql-container.ql-snow, .ql-editor {
background: transparent !important;
color: var(--text-primary) !important;
min-height: 160px !important;
max-height: 38vh !important;
overflow-y: auto !important;
opacity: 0.95 !important;
}
.ql-editor p { margin: 0; }

#atlas-mail-composer .glass-modal-box {
width: min(640px, 96vw) !important;
height: min(680px, 96vh) !important;
max-height: 96vh !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .glass-modal-body {
flex: 1 !important;
overflow: hidden !important;
max-height: none !important;
min-height: 0 !important;
padding: 12px 20px 8px !important;
}
/* Släpp modalens hidden tillfälligt när Quill-picker eller länk-tooltip
är öppen, annars kan popovern klippas av glass-modal-box/body.       */
#atlas-mail-composer .glass-modal-box:has(.ql-picker.ql-expanded),
#atlas-mail-composer .glass-modal-body:has(.ql-picker.ql-expanded),
#atlas-mail-composer .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)),
#atlas-mail-composer .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}
#atlas-mail-composer .glass-modal-footer {
background: transparent;
justify-content: flex-end !important;
gap: 12px !important;
padding: 10px 18px 14px !important;
margin-top: 0 !important;
flex-shrink: 0 !important;
}
/* Minska h3-marginalen i composer-headern */
#atlas-mail-composer .glass-modal-header h3 {
margin-bottom: 6px !important;
font-size: 14px !important;
}

#atlas-mail-composer[data-internal-only="true"] .glass-modal-box {
height: auto !important;
max-height: min(620px, 95vh) !important;
}

#atlas-mail-composer[data-internal-only="true"] .glass-modal-body {
flex: 0 0 auto !important;
overflow: hidden !important;
padding-bottom: 8px !important;
}

#atlas-mail-composer[data-internal-only="true"] #composer-mode-toggle,
#atlas-mail-composer[data-internal-only="true"] #composer-subject-row {
display: none !important;
}

#atlas-mail-composer[data-internal-only="true"] .composer-quill-wrap .ql-editor {
min-height: 110px !important;
max-height: 180px !important;
}

#atlas-mail-composer[data-internal-only="true"] #composer-info-box {
margin-top: 8px !important;
}

/* === Quill Compose Editor (Nytt meddelande / Nytt mail) === */
.composer-quill-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
transition: border-color 0.2s;
}
.composer-quill-wrap:focus-within {
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.05);
}
.composer-quill-wrap:has(.ql-picker.ql-expanded),
.composer-quill-wrap:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible;
}
.composer-quill-wrap:has(.ql-tooltip:not(.ql-hidden)) .ql-container.ql-snow {
overflow: visible !important;
opacity: 1 !important;
}
#atlas-mail-composer #composer-message-row {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#atlas-mail-composer .composer-quill-wrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#atlas-mail-composer .composer-quill-wrap .ql-container.ql-snow {
flex: 1 1 auto !important;
min-height: 0 !important;
}
.composer-quill-wrap .ql-container.ql-snow {
border: none !important;
background: transparent !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow {
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.035) !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: wrap !important;
position: relative !important;
z-index: 3 !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-formats {
margin-right: 4px !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow button {
width: 24px !important;
height: 24px !important;
padding: 3px !important;
border-radius: 5px !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow button:hover,
.composer-quill-wrap .ql-toolbar.ql-snow button.ql-active {
background: rgba(255,255,255,0.1) !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-stroke {
stroke: rgba(255,255,255,0.72) !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-fill {
fill: rgba(255,255,255,0.72) !important;
}
#ctpl-editor .ql-toolbar.ql-snow {
border: none !important;
border-bottom: 1px solid var(--border-color) !important;
background: color-mix(in srgb, var(--bg-dark-secondary) 82%, transparent) !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: wrap !important;
position: relative !important;
z-index: 3 !important;
}
#ctpl-editor .ql-toolbar.ql-snow .ql-formats {
margin-right: 4px !important;
}
#ctpl-editor .ql-toolbar.ql-snow button {
width: 24px !important;
height: 24px !important;
padding: 3px !important;
border-radius: 5px !important;
}
#ctpl-editor .ql-toolbar.ql-snow button:hover,
#ctpl-editor .ql-toolbar.ql-snow button.ql-active {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
#ctpl-editor .ql-toolbar.ql-snow .ql-stroke {
stroke: var(--text-secondary) !important;
}
#ctpl-editor .ql-toolbar.ql-snow .ql-fill {
fill: var(--text-secondary) !important;
}
/* #118-B: size-pickerns synliga siffra är TEXT och måste klara 4,5:1, inte 3:1.
   Mätt live i alla tio teman 2026-08-07: --text-secondary gav nordic-dawn 3,33 ·
   atlas-minimal 3,83 · carbon-theme 4,03. Denna regel (.ql-toolbar.ql-snow) är den
   som FAKTISKT vinner för #ctpl-editor — den grupperade regeln längre ner har lägre
   specificitet och når aldrig hit. Knapparna i samma toolbar bär redan --text-primary. */
#ctpl-editor .ql-toolbar.ql-snow .ql-picker-label {
color: var(--text-primary) !important;
}
#ctpl-quill.ql-container.ql-snow {
border: none !important;
background: var(--bg-frosty-input-field, var(--bg-dark-tertiary)) !important;
min-height: 160px !important;
overflow: hidden !important;
}
#ctpl-quill .ql-editor {
color: var(--text-primary) !important;
font-size: 13px !important;
font-family: inherit !important;
line-height: 1.5 !important;
padding: 12px 14px !important;
min-height: 160px !important;
max-height: 230px !important;
overflow-y: auto !important;
background: transparent !important;
}
@media (min-width: 1600px) and (min-height: 901px) {
#ctpl-quill .ql-editor {
max-height: clamp(340px, 38vh, 560px) !important;
}
}
#ctpl-editor.ctpl-editor-revealed {
border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color)) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent), 0 14px 30px color-mix(in srgb, #000 26%, transparent) !important;
}
.ctpl-editor-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px 10px;
align-items: center;
padding: 0 0 4px 0;
}
.ctpl-editor-mode {
grid-column: 1;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.55px;
text-transform: uppercase;
color: var(--accent-primary);
}
.ctpl-editor-current-title {
grid-column: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: var(--text-primary);
}
.ctpl-editor-close-btn {
grid-column: 2;
grid-row: 1 / span 2;
justify-self: end;
align-self: center;
}
.ctpl-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 8px;
border-radius: 8px;
cursor: pointer;
background: color-mix(in srgb, var(--bg-dark-secondary) 76%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ctpl-item:hover,
.ctpl-item:focus-visible {
border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-color));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-primary) 12%, transparent);
outline: none;
}
.ctpl-item.active {
background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-secondary));
border-color: color-mix(in srgb, var(--accent-primary) 62%, var(--border-color));
box-shadow: inset 3px 0 0 var(--accent-primary), inset 0 1px 0 color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.ctpl-card-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ctpl-card-title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-width: 0;
}
.ctpl-card-meta {
justify-self: end;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ctpl-card-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctpl-card-pill {
justify-self: end;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-badge-min-size);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 20px;
background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-secondary));
}
.ctpl-card-preview {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-attachment-card {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
margin: 6px 0;
background: color-mix(in srgb, var(--bg-dark-secondary) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
max-width: min(340px, 100%);
vertical-align: top;
}
.atlas-attachment-ext {
width: 36px;
height: 36px;
border-radius: 8px;
background: color-mix(in srgb, var(--attachment-color, #9aa7b2) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--attachment-color, #9aa7b2) 35%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
color: var(--attachment-color, #9aa7b2);
flex-shrink: 0;
}
.atlas-attachment-meta {
flex: 1;
min-width: 0;
}
.atlas-attachment-name {
font-size: 13px;
font-weight: 650;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atlas-attachment-type {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.62;
margin-top: 2px;
}
.atlas-attachment-download {
width: 32px;
height: 32px;
border-radius: 8px;
background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-primary);
text-decoration: none;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.atlas-attachment-download:hover {
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
border-color: color-mix(in srgb, var(--accent-primary) 42%, transparent);
color: var(--text-primary);
}
.composer-quill-wrap .ql-editor {
color: var(--text-primary) !important;
font-size: 13px !important;
font-family: inherit !important;
line-height: 1.5 !important;
padding: 8px 12px !important;
min-height: 90px !important;
max-height: 220px !important;
overflow-y: auto !important;
background: transparent !important;
}
.ql-editor {
scrollbar-width: none !important;
}
.ql-editor::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
background: transparent !important;
}
.ql-editor::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.ql-editor::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12) !important;
border-radius: 4px !important;
box-shadow: none !important;
border: none !important;
}
.ql-editor::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.12) !important;
box-shadow: none !important;
}
.ql-editor::-webkit-scrollbar-button {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
.ql-editor::-webkit-scrollbar-corner {
background: transparent !important;
}
#atlas-mail-composer .composer-quill-wrap .ql-editor {
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
}
#atlas-mail-composer #composer-agent-grid {
max-height: min(168px, 24vh) !important;
overflow-y: auto !important;
}
.composer-quill-wrap .ql-editor.ql-blank::before {
color: rgba(255,255,255,0.3) !important;
font-style: italic !important;
left: 12px !important;
}
.composer-quill-wrap .ql-editor a { color: var(--accent-primary) !important; }
.composer-quill-wrap .ql-editor strong { font-weight: 700 !important; }
.composer-quill-wrap .ql-editor em { font-style: italic !important; }

/* Quills standard-tooltip är ljus och lågmäld, vilket gör länkflödet lätt
att missa i Atlas mörka teman. Färga den med samma tema-tokens som resten
av composern så att länkrutan syns konsekvent i alla lägen. */
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip {
background: var(--bg-dark-secondary) !important;
background-color: var(--bg-dark-secondary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)) !important;
border-radius: 8px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
padding: 7px 10px !important;
z-index: 99999 !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip[data-mode=link]::before {
content: "Klistra in URL:";
color: var(--text-secondary) !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip input[type=text] {
background: var(--bg-dark-tertiary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color)) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
/* Återställ Quills default-storlek. Den globala .glass-modal-body input-regeln
(style.css:1041) ger annars padding 12px 15px + width 100% + margin-bottom 12px,
vilket blåser upp tooltipen med 12px (= synlig svans under inputen). */
width: 170px !important;
height: 26px !important;
padding: 3px 5px !important;
margin: 0 !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip a {
color: var(--accent-primary) !important;
}

/* Mailmallarvyn använder en separat global Quill utanför composer-wrap.
Ge den samma läsbara länk-tooltip utan att flytta in den i composer-reglerna. */
#view-templates .ql-container.ql-snow .ql-tooltip {
background: var(--bg-dark-secondary) !important;
background-color: var(--bg-dark-secondary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)) !important;
border-radius: 8px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
padding: 7px 10px !important;
z-index: 99999 !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip[data-mode=link]::before {
content: "Klistra in URL:";
color: var(--text-secondary) !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip input[type=text] {
background: var(--bg-dark-tertiary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color)) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
width: 170px !important;
height: 26px !important;
padding: 3px 5px !important;
margin: 0 !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip a {
color: var(--accent-primary) !important;
}

/* Korta svarsrutor har toolbar direkt ovanför editorn. När Quill flippar
länk-tooltipen uppåt ska den ligga ovanför hela fältet, inte ovanpå toolbaren. */
.reply-quill-wrap .ql-container.ql-snow .ql-tooltip.ql-flip[data-mode=link] {
top: auto !important;
bottom: calc(100% + 40px) !important;
transform: none !important;
}

/* Mail-composern har hög editor så Quills automatiska ql-flip aktiveras aldrig
— tooltipen hamnar då mitt i meddelandeytan under markeringen. Tvinga den
ovanför toolbaren oavsett ql-flip-status (samma princip som .reply-quill-wrap). */
#atlas-mail-composer .composer-quill-wrap .ql-container.ql-snow .ql-tooltip[data-mode=link] {
top: auto !important;
bottom: calc(100% + 40px) !important;
transform: none !important;
}

/* Reader/ticket-modaler kan ha overflow: hidden på sina kroppar — släpp
temporärt när Quills länk-tooltip är öppen, annars klipps popovern. */
#atlas-reader-modal .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)),
#customer-reader-modal .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)),
#atlas-reader-modal .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)),
#customer-reader-modal .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}

/* === Quill Storlekspicker — korta sifferetiketter + mörkt tema ===
Använder SizeStyle inline-style attributor (data-value="18px" etc.)
Etiketter visas som korta px-siffror (10, 14, 18…) istället för
långa svenska ord — smalare picker, renare UI.                    */

/* Smal picker — bara siffror behöver plats. 28px matchar Quills color-picker
och ligger nära B/I/U-knapparnas 24px. Padding stramas åt på labeln så
"—"/"10" får plats utan att arrow-SVG:n trycker breddet uppåt.        */
.ql-snow .ql-picker.ql-size {
width: 38px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label {
padding: 0 2px 0 4px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label svg {
right: 0 !important;
width: 14px !important;
}

/* Fallback: visa data-value rakt av om inget annat matchar */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: attr(data-value);
}

/* "12" när inget data-value är satt (default-storlek) */
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before {
content: '12';
}

/* Korta sifferetiketter per px-värde */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32'; }

/* === Quill picker-dropdown — tema-medvetet mörkt tema ===
Snow-temat renderar .ql-picker-options vit som default.
Reglerna nedan täcker ALLA pickers (size, align, color, background) i
både composer-quill-wrap och templates-editor (#view-templates), och
använder --bg-dark-secondary + --border-color så bakgrunden följer
aktivt tema (sunset-horizon, apple-road osv) i stället för hårdkodad
färg. Dropdowns öppnar NEDÅT som Quill default — clipping löses via
:has(.ql-picker.ql-expanded) på wrapparna ovan + hög z-index här.    */
.composer-quill-wrap .ql-toolbar .ql-picker-options,
#view-templates .ql-toolbar .ql-picker-options,
#ctpl-editor .ql-toolbar .ql-picker-options {
background: var(--bg-dark-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px color-mix(in srgb, #000 45%, transparent) !important;
padding: 4px !important;
z-index: 99999 !important;
position: absolute !important;
}
.composer-quill-wrap .ql-toolbar .ql-picker-item,
#view-templates .ql-toolbar .ql-picker-item,
#ctpl-editor .ql-toolbar .ql-picker-item {
color: var(--text-secondary) !important;
border-radius: 4px !important;
padding: 3px 8px !important;
}
.composer-quill-wrap .ql-toolbar .ql-picker-item:hover,
.composer-quill-wrap .ql-toolbar .ql-picker-item.ql-selected,
#view-templates .ql-toolbar .ql-picker-item:hover,
#view-templates .ql-toolbar .ql-picker-item.ql-selected,
#ctpl-editor .ql-toolbar .ql-picker-item:hover,
#ctpl-editor .ql-toolbar .ql-picker-item.ql-selected {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
color: var(--text-primary) !important;
}
/* #118-B: mätt 2026-08-07 att color-deklarationen här är ÖVERKÖRD på alla tre ytor —
   style-admin.css vinner för .composer-quill-wrap (:2871) och #view-templates (:2761),
   och regeln ovan för #ctpl-editor. Den är alltså ingen aktiv färgkälla i dag utan en
   RESERV för en framtida Quill-yta som bara matchar den här selektorn. Reserven ska
   bära samma korrigerade avsikt som de vinnande reglerna, annars ärver nästa yta
   det underkända värdet. Byte verifierat som nolländring i alla tio teman. */
.composer-quill-wrap .ql-toolbar .ql-picker-label,
#view-templates .ql-toolbar .ql-picker-label,
#ctpl-editor .ql-toolbar .ql-picker-label {
color: var(--text-primary) !important;
border: 1px solid color-mix(in srgb, var(--text-secondary) 24%, transparent) !important;
border-radius: 4px !important;
}
/* Size-pickerns alternativ får siffer-font så 10/14/18… ser jämna ut.   */
.composer-quill-wrap .ql-toolbar .ql-picker.ql-size .ql-picker-item,
#view-templates .ql-toolbar .ql-picker.ql-size .ql-picker-item,
#ctpl-editor .ql-toolbar .ql-picker.ql-size .ql-picker-item {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
}
/* Color/background-rutornas inre färgceller får inte ärva text-color    */
.composer-quill-wrap .ql-toolbar .ql-color-picker .ql-picker-item,
#view-templates .ql-toolbar .ql-color-picker .ql-picker-item,
#ctpl-editor .ql-toolbar .ql-color-picker .ql-picker-item {
padding: 0 !important;
}


/* Kundvyns nya-mail-modal: stora inklistrade bilder ska inte trycka bort actions. */
#customer-mail-compose-modal .cust-mail-compose-box {
width: min(560px, 92vw) !important;
max-height: min(720px, 92vh) !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
#customer-mail-compose-modal .cust-mail-compose-header {
flex-shrink: 0 !important;
}
#customer-mail-compose-modal .cust-mail-compose-body {
min-height: 0 !important;
overflow: hidden !important;
}
/* När Quill-picker eller länk-tooltip öppnas i customer-mail-modalen
måste box/body få visible så popovers inte klipps av outer hidden.    */
#customer-mail-compose-modal .cust-mail-compose-body:has(.ql-picker.ql-expanded),
#customer-mail-compose-modal .cust-mail-compose-box:has(.ql-picker.ql-expanded),
#customer-mail-compose-modal .cust-mail-compose-body:has(.ql-tooltip:not(.ql-hidden)),
#customer-mail-compose-modal .cust-mail-compose-box:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}
#customer-mail-compose-modal .cust-mail-message-field,
#customer-mail-compose-modal .cust-mail-editor-stack {
min-height: 0 !important;
}
#customer-mail-compose-modal .cust-mail-compose-actions {
flex-shrink: 0 !important;
min-height: 38px !important;
}
#customer-mail-compose-modal #cust-mail-quill-wrap {
min-height: 0 !important;
flex: 0 1 auto !important;
}
#customer-mail-compose-modal #cust-mail-quill-wrap .ql-editor {
min-height: 120px !important;
max-height: clamp(160px, 34vh, 260px) !important;
overflow-y: auto !important;
}