/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 3403-4119, byte-exakt; knowledge gaps cards, bulk select, inbox search, KB save/quick questions, reader modals, glow. Laddas direkt efter föregående del i index.html. */
/* ===================================================
ADMIN — Kunskapsluckor-kort
=================================================== */
#view-admin .admin-mini-card.gap-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
padding: 10px 12px !important;
border-radius: 8px !important;
}

#view-admin .gap-card-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
width: 100%;
min-width: 0;
}

#view-admin .gap-card-query {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
line-height: 1.45;
color: var(--text-primary);
word-break: break-word;
}

#view-admin .gap-card-meta {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
flex: 0 0 auto;
max-width: 48%;
min-width: 0;
margin-left: auto;
flex-wrap: wrap;
}

#view-admin .gap-card-pills {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-wrap: wrap;
min-width: 0;
}

#view-admin .gap-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 17px;
padding: 0 5px;
border-radius: 4px;
font-size: var(--text-badge-min-size);
font-weight: 650;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
opacity: 1;
background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent);
color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

#view-admin .gap-status-pill.is-ts-ok {
background: color-mix(in srgb, var(--success-text, #34c759) 9%, transparent);
border-color: color-mix(in srgb, var(--success-text, #34c759) 24%, transparent);
color: color-mix(in srgb, var(--success-text, #34c759) 56%, var(--text-primary));
}

#view-admin .gap-status-pill.is-ts-miss {
background: color-mix(in srgb, var(--warning-text, #ff9f0a) 9%, transparent);
border-color: color-mix(in srgb, var(--warning-text, #ff9f0a) 24%, transparent);
color: color-mix(in srgb, var(--warning-text, #ff9f0a) 54%, var(--text-primary));
}

#view-admin .gap-status-pill.is-repeat {
background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
border-color: color-mix(in srgb, var(--accent-primary) 22%, transparent);
color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary));
}

#view-admin .gap-card-date {
font-size: 10px;
line-height: 1;
color: var(--text-secondary);
opacity: 0.42;
white-space: nowrap;
}

/* 🔴 #315 (2026-08-18): knappen var `23×23` med RAM och en rå emoji `🤖` som glyf —
   tre avvikelser mot `#78`-kontraktet på en gång (`32×32` knappyta, `16×16` glyf, ingen ram,
   en källa per symbol via ikonuppsättningen). Glyfen är nu `UI_ICONS.AI`, som redan används
   i SAMMA fil (`admin-gaps.js:104`) — emojin var alltså den ensamma avvikaren.
   🔵 Titeln bar dessutom ordet `RAG` i en kundvänd tooltip, förbjudet enligt `L-078` punkt 2. */
#view-admin .gap-ai-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;
border-radius: 8px;
border: none;
background: transparent;
color: color-mix(in srgb, var(--text-secondary) 64%, var(--text-primary));
font-size: 11px;
line-height: 1;
cursor: pointer;
opacity: 0.7;
transition: color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s;
}

/* #78: glyfen är 16×16 i en 32×32 knappyta. SVG:n bär width/height 18 i markup —
   attributen skrivs över här i stället för att röra den delade ikonkonstanten. */
#view-admin .gap-ai-btn svg {
width: 16px;
height: 16px;
}

/* Hovern satte tidigare `border-color` på en knapp som nu saknar ram (död deklaration) och
   rå `--accent-primary` som ikonfärg. Accenten är AGENTENS profilfärg — samma fälla som
   `#315` batch 2a mätte. Plattan är i stället accent lagd ovanpå ytan, som lås-ikonknapparna. */
#view-admin .gap-ai-btn:hover {
opacity: 1;
color: var(--sel-text);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
transform: translateY(-1px);
}

@media screen and (max-width: 640px) {
#view-admin .gap-card-topline {
flex-direction: column;
gap: 7px;
}

#view-admin .gap-card-meta {
max-width: 100%;
width: 100%;
justify-content: flex-start;
margin-left: 0;
}
}

/* ===================================================
BULK MODE — Inkorg, Mina Ärenden, Garaget (global)
=================================================== */
.bulk-mode-active .team-ticket-card {
cursor: pointer;
opacity: 0.72;
transition: box-shadow 0.15s, opacity 0.15s;
}
.bulk-mode-active .team-ticket-card:hover {
opacity: 1;
}
.team-ticket-card.bulk-selected {
opacity: 1 !important;
/* Kraftig ram vid flerval */
border-color: var(--agent-color, #0071e3) !important;
background: color-mix(in srgb, var(--agent-color, #0071e3) 12%, rgba(255,255,255,0.05)) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-color) 40%, transparent) !important;
}

/* Flytande bulk-toolbar */
.bulk-action-toolbar {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 5000;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 22px;
border-radius: 14px;
background: rgba(28, 28, 32, 0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55);
animation: bulkToolbarIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bulkToolbarIn {
from { opacity: 0; transform: translateX(-50%) translateY(14px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bulk-count-label {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
min-width: 56px;
}
.bulk-count-label .bulk-n { color: rgba(255,255,255,0.9); }
.bulk-select-search-btn {
height: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 34%, rgba(255,255,255,0.14));
background: color-mix(in srgb, var(--accent-primary) 12%, rgba(255,255,255,0.04));
color: var(--accent-primary);
font-size: 11px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s, filter 0.15s;
}
.bulk-select-search-btn svg {
width: 15px;
height: 15px;
stroke: currentColor;
flex: 0 0 auto;
}
.bulk-select-search-btn:hover {
background: color-mix(in srgb, var(--accent-primary) 18%, rgba(255,255,255,0.06));
border-color: color-mix(in srgb, var(--accent-primary) 56%, rgba(255,255,255,0.18));
transform: translateY(-1px);
filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 45%, transparent));
}
.bulk-select-search-btn.all-selected {
color: rgba(255,255,255,0.72);
border-color: rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
}
.bulk-toolbar-sep {
width: 1px;
height: 22px;
background: rgba(255,255,255,0.10);
margin: 0 2px;
flex-shrink: 0;
}
/* Ikon-knappar (ny design — ingen text, hover-tooltip via title) */
.bulk-icon-btn {
width: 34px;
height: 34px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(255,255,255,0.65);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, transform 0.15s, filter 0.15s;
flex-shrink: 0;
box-shadow: none;
}
.bulk-icon-btn:hover              { background: transparent; border-color: transparent; color: rgba(255,255,255,1); transform: scale(1.08); filter: drop-shadow(0 0 6px currentColor); }
.bulk-btn-cancel                  { color: rgba(255,255,255,0.40); border-color: transparent; background: transparent; }
.bulk-btn-cancel:hover            { background: transparent; color: rgba(255,255,255,0.75); }
.bulk-btn-claim                   { color: #4db8ff; border-color: rgba(77,184,255,0.2); }
.bulk-btn-claim:hover             { background: transparent; color: #80ccff; }
.bulk-btn-assign                  { color: rgba(255,255,255,0.60); }
.bulk-btn-assign:hover            { background: transparent; color: #fff; }
.bulk-btn-archive                 { color: #ff9f0a; border-color: rgba(255,159,10,0.2); }
.bulk-btn-archive:hover           { background: transparent; color: #ffb340; }
.bulk-btn-restore                 { color: #4db8ff; border-color: rgba(77,184,255,0.2); }
.bulk-btn-restore:hover           { background: transparent; color: #80ccff; }
.bulk-btn-spam                    { color: #ff6b6b; border-color: rgba(255,69,58,0.2); }
.bulk-btn-spam:hover              { background: transparent; color: #ff8f8f; }
.bulk-btn-delete                  { color: #ff453a; border-color: rgba(255,69,58,0.25); }
.bulk-btn-delete:hover            { background: transparent; color: #ff6b6b; }
.bulk-btn-delete svg {
fill: currentColor !important;
stroke: none !important;
}

/* === INKORG-SÖKNING: Döljer ej matchande kort — vinner över display:flex !important === */
.search-hidden { display: none !important; }

/* =============================================================================
Bakgrundsbild — scroll-attachment för korrekt skalning i Electron
Teman sätter background-attachment: fixed vilket kan ge zoom-effekt i Electron
============================================================================= */
body {
background-attachment: scroll !important;
}

/* =============================================================================
KB global save button — diskettikon utan bakgrundsruta
Inaktiv tills ändringar görs, grön glow när dirty
============================================================================= */
/* 🔴 #315: `padding: 6px` gav uppmätt `32×28` respektive `28×28` — kontraktet säger `32×32`
   knappyta. Fast storlek i stället för padding-härledd, så syskonknapparna blir lika. */
.kb-save-icon-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
color: var(--ctpl-muted-affordance, color-mix(in srgb, var(--text-secondary) 85%, var(--bg-dark-secondary) 15%)) !important;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease !important;
border-radius: 6px !important;
}

.kb-header-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.kb-save-icon-btn:hover {
color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary) 12%) !important;
background: transparent !important;
}

/* 🔴 #315: hårdkodad vit på 34 % — nära osynlig i ljusa teman. Samma defektklass som
   hover-buggen i batch 2a. Följer nu temats egen dämpade textfärg. */
.kb-download-icon-btn {
color: color-mix(in srgb, var(--text-secondary) 82%, transparent) !important;
}

.kb-download-icon-btn:hover {
color: var(--accent-primary) !important;
filter: drop-shadow(0 0 7px var(--accent-primary));
}

.kb-save-icon-btn.dirty {
color: #4cd964 !important;
filter: drop-shadow(0 0 5px #4cd964);
animation: pulse-kb-save 2.5s ease-in-out infinite;
}
.kb-save-icon-btn.dirty:hover {
color: #4cd964 !important;
filter: drop-shadow(0 0 10px #4cd964) !important;
animation: none !important;
}
@keyframes pulse-kb-save {
0%, 100% { filter: drop-shadow(0 0 3px #4cd964); opacity: 0.85; }
50% { filter: drop-shadow(0 0 8px #4cd964); opacity: 1; }
}
.kb-standard-template-badge {
flex-shrink: 0;
font-size: 10px;
color: color-mix(in srgb, var(--accent-primary) 72%, rgba(255,255,255,0.72));
border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, rgba(255,255,255,0.15));
background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
border-radius: 4px;
padding: 2px 6px;
line-height: 1.4;
white-space: nowrap;
cursor: help;
}
.kb-unpublished-template-badge {
flex-shrink: 0;
font-size: 10px;
color: color-mix(in srgb, var(--accent-primary) 74%, var(--text-primary) 26%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, var(--border-color));
background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
border-radius: 4px;
padding: 2px 6px;
line-height: 1.4;
white-space: nowrap;
cursor: help;
}
.kb-vehicle-inactive-badge {
flex-shrink: 0;
font-size: 10px;
color: color-mix(in srgb, var(--status-danger, #ef4444) 74%, var(--text-primary) 26%);
border: 1px solid color-mix(in srgb, var(--status-danger, #ef4444) 38%, var(--border-color));
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent);
border-radius: 4px;
padding: 2px 6px;
line-height: 1.4;
white-space: nowrap;
cursor: help;
}
.kb-file-nav-item.is-vehicle-inactive,
.kb-guide-candidate-row.is-vehicle-inactive,
#view-admin .admin-kb-section-card[data-kb-placeholder="true"]:not([data-kb-template-edited="true"]),
#view-admin .admin-kb-section-card.is-vehicle-inactive {
background: color-mix(in srgb, var(--status-danger, #ef4444) 7%, transparent) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 24%, var(--border-color)) !important;
}
.kb-file-nav-item.is-vehicle-inactive {
opacity: 0.72;
}
.kb-file-nav-item.is-vehicle-inactive .kb-service-count-badge,
.kb-guide-candidate-row.is-vehicle-inactive .kb-guide-action {
opacity: 0.78;
}
.kb-vehicle-inactive-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--status-danger, #ef4444) 30%, var(--border-color));
border-radius: 8px;
background: color-mix(in srgb, var(--status-danger, #ef4444) 8%, transparent);
color: var(--text-secondary);
font-size: 11px;
line-height: 1.45;
}
.kb-quick-question-badge {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
font-size: 10px;
font-weight: 750;
line-height: 1.4;
white-space: nowrap;
border-radius: 4px;
padding: 2px 6px;
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
cursor: help;
}
.kb-quick-question-badge svg {
width: 12px;
height: 12px;
flex: 0 0 12px;
stroke: currentColor;
}
.admin-kb-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 8px;
margin-bottom: 8px;
}
.admin-kb-section-head-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.kb-quick-question-tools {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 8px;
min-height: 34px;
}
.kb-quick-question-primary {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.kb-quick-question-tools .admin-config-icon-btn {
width: 32px;
height: 32px;
min-width: 32px;
}
.kb-quick-question-tools .kb-quick-question-create-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border: none !important;
color: var(--status-success, #22c55e);
}
.kb-quick-question-tools .kb-quick-question-create-btn svg {
width: 18px;
height: 18px;
}
.kb-quick-question-tools .kb-quick-question-create-btn:hover,
.kb-quick-question-tools .kb-quick-question-create-btn:focus-visible {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
}
body.atlas-light-theme .kb-quick-question-tools .kb-quick-question-create-btn {
color: #166534;
}
.kb-quick-question-tools .admin-config-icon-btn.danger {
color: rgba(255, 69, 58, 0.78);
border-color: rgba(255, 69, 58, 0.32);
}
.kb-quick-question-label-editor {
display: grid;
grid-template-columns: auto minmax(180px, 320px) 32px;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 11px;
font-weight: 650;
color: var(--text-muted);
}
.kb-quick-question-label-editor input {
width: 100%;
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 5px 8px;
background: var(--input-bg, rgba(255, 255, 255, 0.06));
color: var(--text-primary);
font-size: 12px;
line-height: 1.3;
}
.kb-quick-question-help {
font-size: 11px;
line-height: 1.35;
color: var(--text-muted);
max-width: 520px;
}
.kb-quick-question-status {
flex: 1 1 100%;
font-size: 11px;
line-height: 1.35;
color: var(--text-muted);
}
.kb-quick-question-status.is-error {
color: rgba(255, 69, 58, 0.9);
}
.kb-quick-question-status.is-saving {
color: var(--accent-primary);
}
.kb-quick-question-status.is-success {
color: var(--status-success, #22c55e);
}
body.atlas-light-theme .kb-quick-question-status.is-success {
color: #166534;
}
.kb-quick-question-warning {
flex: 1 1 100%;
padding: 7px 9px;
border: 1px solid color-mix(in srgb, var(--warning, #ff9f0a) 38%, transparent);
border-radius: 6px;
background: color-mix(in srgb, var(--warning, #ff9f0a) 10%, transparent);
color: var(--text-primary);
font-size: 11px;
line-height: 1.4;
}
@media (max-width: 560px) {
.admin-kb-section-head {
grid-template-columns: minmax(0, 1fr);
}
.admin-kb-section-head-actions {
justify-content: flex-start;
}
.kb-quick-question-primary {
align-items: flex-start;
flex: 1 1 100%;
width: 100%;
}
.kb-quick-question-label-editor {
flex: 1 1 auto;
grid-template-columns: minmax(0, 1fr) 32px;
}
.kb-quick-question-label-editor > span {
grid-column: 1 / -1;
}
}
.kb-template-publish-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 24px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 42%, var(--border-color));
border-radius: 6px;
padding: 3px 8px;
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-primary) 22%);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.kb-template-publish-btn svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
}
.kb-template-publish-btn:hover {
border-color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary) 30%);
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.kb-template-publish-btn:disabled {
cursor: progress;
box-shadow: none;
}
.admin-kb-answer-meta {
display: flex;
justify-content: flex-end;
margin: 3px 0 4px;
}
.admin-kb-answer-count {
font-size: 11px;
line-height: 1.35;
opacity: 0.42;
color: var(--text-secondary);
}
.admin-kb-answer-count.is-low {
opacity: 0.85;
color: #ff9f0a;
}
.admin-kb-answer-count.is-over {
opacity: 1;
color: #ff453a;
font-weight: 600;
}

/* ================================================
READER MODAL (Kunder + Admin)
Fast storlek, sticky header, scroll bara i meddelanden
================================================ */

/* ============================================================
ÄRENDEREADER-MODALER: Adaptiv höjd, fast header-position
Overlay förankras uppifrån så att header-raden alltid sitter
på samma Y-koordinat oavsett hur lång konversationen är.
============================================================ */
#customer-reader-modal,
#atlas-reader-modal {
align-items: flex-start !important;   /* Förankra uppifrån */
padding-top: 11vh !important;         /* Fast avstånd från toppen */
}

#customer-reader-modal .glass-modal-box,
#atlas-reader-modal .glass-modal-box {
width: 680px !important;
max-width: 92vw !important;
height: auto !important;              /* Anpassas till innehåll */
min-height: 220px !important;         /* Aldrig hoptryckt */
max-height: min(72vh, 720px) !important; /* Mer luft för composer + mall, tak på stora skärmar */
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#customer-reader-modal .glass-modal-header {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: rgba(30,30,30,0.95) !important;
backdrop-filter: blur(12px) !important;
padding: 16px 20px !important;
}

#customer-reader-modal .glass-modal-body {
overflow-y: auto !important;
max-height: calc(100% - 68px) !important;   /* Header = 68px */
padding: 16px 20px !important;
}

/* Bredare header så det inte känns hoptryckt */
#customer-reader-modal .glass-modal-header > div:first-child {
gap: 16px !important;
}

/* Datum syns tydligt i varje ärende (redan i din kod) */
.ticket-meta {
font-size: 11px !important;
color: #aaa !important;
margin: 4px 0 12px !important;
}

/* =============================================================================
Scrollbar-glow: nedbantad mot temaöverdrift
Teman sätter box-shadow upp till 25px på scrollbar-thumbs — ta bort
============================================================================= */
::-webkit-scrollbar-thumb {
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: none !important;
}

/* =============================================================================
Header-ikoners glow: dämpad mot teman
Teman applicerar gradient + box-shadow på .header-button i default-läge vilket
skapar ett för kraftigt glow-utseende. Begränsa till subtilt utseende här.
============================================================================= */
.header-button {
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
}
.header-button:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
transform: scale(1.06) !important;
filter: drop-shadow(0 0 7px currentColor) !important;
}
.header-button:not([style*="color:"]) {
color: var(--text-secondary) !important;
}
.header-button:not([style*="color:"]):hover {
color: var(--text-primary) !important;
}
.header-button::before,
.header-button::after {
display: none !important;
}