/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 3194-3402, byte-exakt; mail templates, placeholders, Quill toolbar. Laddas direkt efter föregående del i index.html. */
/* =============================================================================
MAILMALLAR FROST-TEMA
============================================================================= */

/* 1. Ramen: Temafärg-tintad mörk bakgrund — fungerar i alla teman inkl. varma/ljusa */
#view-templates .template-editor-container {
/* Matchar bas-regelns solida bg så placeholdern inte ser ljusare ut än
   övriga vyers placeholders (Kunder/Admin/Inkorg/Mina/Garaget). Tidigare
   linear-gradient med color-mix(..., transparent) på alla stops lät
   body-bilden blöda genom hela containern + 7%-accent på topp gjorde
   det lite ljusare än övriga. Solid var(--bg-frosty-content) ger samma
   tonkonsekvens. */
background-color: var(--bg-frosty-content) !important;
background-image: none !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
display: flex !important;
flex-direction: column !important;
}

/* 2. Placeholdern: Matchar container-bakgrunden */
#view-templates #editor-placeholder {
background: transparent !important;
color: inherit !important;
font-style: normal !important;
opacity: 1 !important;
border: none !important;
box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.14) !important;
}

#view-templates #template-search-input::placeholder,
#view-templates #template-title-input::placeholder,
#view-templates #template-subgroup-input::placeholder {
color: var(--text-secondary) !important;
opacity: 0.72 !important;
font-style: italic;
}

/* 3. Quill-editorn: Tema-oberoende mörk bakgrund — fungerar i alla teman */
#view-templates .ql-toolbar.ql-snow {
background: color-mix(in srgb, var(--bg-frosty-content) 90%, rgba(0, 0, 0, 0.15)) !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Toolbar-ikoner: alltid vita/synliga */
#view-templates .ql-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.65) !important;
}
#view-templates .ql-toolbar.ql-snow .ql-fill {
fill: rgba(255, 255, 255, 0.65) !important;
}
#view-templates .ql-toolbar.ql-snow button:hover .ql-stroke,
#view-templates .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
stroke: #ffffff !important;
}
#view-templates .ql-toolbar.ql-snow button:hover .ql-fill {
fill: #ffffff !important;
}
#view-templates .ql-toolbar.ql-snow .ql-picker-label {
color: rgba(255, 255, 255, 0.65) !important;
}

#view-templates .ql-container {
background: color-mix(in srgb, var(--bg-frosty-content) 94%, rgba(0, 0, 0, 0.10)) !important;
border: none !important;
max-height: none !important;
overflow-y: hidden !important;
flex: 1 !important;
min-height: 0 !important;
}

/* #192 (2026-08-10): basstorleken MÅSTE ligga strikt mellan 10 och 14.
   Size-pickerns "12" är inte ett eget px-värde utan Quills default-alternativ
   (`false` i toolbar-configen, renderer.js:3178), etiketterat "12" av
   style.css:2794-2798. Default renderas därför i .ql-editor:s EGEN basstorlek.
   Mätt live på Box4 2026-08-10: här gav 15px att menyns "12" renderades STÖRRE
   än "14" (14px) — exakt Patriks fynd. Övriga sju Quill-ytor ligger på 13px
   (style.css:2618 och :2432), där monotoniciteten redan höll. 13px här ger en
   enda basstorlek för alla åtta ytor. Ändringen påverkar ENDAST skrivytan:
   text utan explicit storlek bär ingen inline font-size, så utgående mail
   renderas fortsatt av mottagarens mailklient. Byt inte tillbaka till 15px
   utan att först lösa etiketten — då ljuger menyn igen. */
#view-templates .ql-editor {
color: rgba(255, 255, 255, 0.90) !important;
font-size: 13px !important;
line-height: 1.6 !important;
background: transparent !important;
text-shadow: none !important;
min-height: 0 !important;
max-height: none !important;
height: 100% !important;
overflow-y: auto !important;
}

#view-templates .ql-editor.ql-blank::before {
color: var(--text-secondary) !important;
opacity: 0.72 !important;
font-style: italic !important;
}

/* 4. Header: Fargad toppkant (matchar Kunder/Admin-vyer) */
#view-templates .detail-header-top,
#template-header-row {
border-top-color: var(--accent-primary) !important;
display: grid !important;
grid-template-columns: 2fr 1fr !important;
align-items: start !important;
gap: 15px !important;
}

/* 5. Footer: Tydligt mörkare än redigeringsytan */
#view-templates .detail-footer-toolbar {
background: rgba(0, 0, 0, 0.42) !important;
border-top: 1px solid color-mix(in srgb, var(--accent-primary) 25%, rgba(255,255,255,0.10)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -10px 22px rgba(0,0,0,0.22) !important;
}

/* Fyll editor-ytan hela vägen ner i formuläret (utan hård nedre glipa) */
#view-templates #quill-editor {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 0 !important;
}

#view-templates #quill-editor:has(.ql-picker.ql-expanded),
#view-templates #quill-editor:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}

#view-templates #template-editor-form:has(.ql-tooltip:not(.ql-hidden)),
#view-templates .template-editor-container:has(.ql-tooltip:not(.ql-hidden)),
#view-templates #template-editor-form > div:has(> #quill-editor):has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}

#view-templates #quill-editor:has(.ql-tooltip:not(.ql-hidden)) {
opacity: 1 !important;
}

#view-templates .ql-toolbar.ql-snow {
position: relative !important;
z-index: 3 !important;
}

/* =============================================================================
Admin placeholder: overflow
============================================================================= */
#admin-placeholder {
max-height: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}

/* =============================================================================
Döljer agent-linjer i detaljvyn
============================================================================= */

/* 1. Huvudcontainern i de drabbade vyerna */
#view-inbox .template-editor-container,
#view-my-tickets .template-editor-container {
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
}

/* 2. Dödar "spök-elementen" (::after/::before) som JS ofta använder för färglinjer.
Globalt på klassen — täcker alla vyer och modaler. Ingen ::before-kant ska synas. */
.template-editor-container::after,
.template-editor-container::before {
display: none !important;
content: none !important;
height: 0 !important;
width: 0 !important;
border: none !important;
}

/* Quill toolbar: size picker label uses theme text color for contrast on all themes */
.composer-quill-wrap .ql-toolbar.ql-snow .ql-picker-label,
#quick-reply-area .ql-toolbar.ql-snow .ql-picker-label,
.detail-footer-area .ql-toolbar.ql-snow .ql-picker-label {
color: var(--text-primary, #333) !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke,
#quick-reply-area .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke,
.detail-footer-area .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke {
stroke: var(--text-primary, #333) !important;
}

/* =============================================================================
Quill-toolbar: dold i placeholder-läge
============================================================================= */
#editor-placeholder:not([style*="display: none"]) ~ #template-editor-form .ql-toolbar,
#editor-placeholder:not([style*="display: none"]) ~ #template-editor-form {
display: none !important;
}

/* Sidebar-ikon glow: borttagen för minimalistisk stil */
.menu-item.active .menu-icon svg,
.menu-item:hover .menu-icon svg {
filter: none !important;
}