/* ============================================
style-admin.css
VAD DEN GÖR: Huvudstylesheet för Atlas admin-UI.
Hanterar layout-lås, admin-vyarkitektur,
toast-notifikationer, knappar, bulk-mode,
reader-modaler, Quill-editors, notifpanel
och inloggningsskärm.
ANVÄNDS AV:  index.html (länkas in via style.css eller direkt)
SENAST STÄDAD: 2026-05-15
============================================ */

/* =============================================================================
LAYOUT-LÅS & VYARKITEKTUR
============================================================================= */
/* 1. RESET & GRUNDSTRUKTUR (Hanterar .chat-view och .templates-view) */
#view-chat, #view-inbox, #view-my-tickets, #view-archive, 
#view-settings, #view-templates, #view-admin,
.chat-view, .templates-view {
display: none; 
flex: 1 !important;
height: 100vh !important;
width: 100% !important;
overflow: hidden !important;
background: transparent !important;
}

/* Garaget (archive) är column: filter ovanpå, sedan split under */
#view-archive[style*="display: flex"] {
flex-direction: column !important;
}

/* 2. LAYOUT: SPLIT-VYER (De med lista + detalj) - main är KOLUMN */
.layout-split[style*="display: flex"] {
display: flex !important;
flex-direction: column !important;
}

/* Den inre horisontella split-raden - KONSOLIDERAD */
.templates-container {
display: flex !important;
flex-direction: row !important;
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
width: 100% !important;
border-bottom: none !important;
}

/* Låser sidolistan (Hanterar #template-list, #admin-main-list, .template-list-container) */
.layout-split .template-list-container {
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
border-right: 1px solid var(--border-color) !important;
background: var(--bg-frosty-sidebar) !important;
overflow-y: auto !important;
--panel-bleed: var(--spacing-lg);
padding: var(--spacing-lg) !important;
border-radius: 0 !important;
}

#admin-main-list {
width: 350px !important;
min-width: 350px !important;
max-width: 350px !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
border-right: 1px solid var(--border-color) !important;
background: var(--bg-frosty-sidebar) !important;
overflow-y: auto !important;
padding: 8px !important;
}

/* ADMIN LIST — Korrigerar overflow ur .admin-sidebar-list */
#view-admin #admin-main-list {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
flex-shrink: 1 !important;
border-right: none !important;
}

/* 3. LAYOUT: SOLO-VYER (Hem & Inställningar) */
.layout-solo[style*="display: flex"] {
display: flex !important;
flex-direction: column !important;
}

/* =============================================================================
ADMIN LAYOUT ENGINE
============================================================================= */

/* 1. Huvud-containern för Admin — flex:1+min-height:0 istf height:100% så headern räknas bort */
#view-admin .admin-grid-container {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
}

/* 2. Sidolistan i Admin */
#view-admin .admin-sidebar-list {
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
flex-shrink: 0 !important;
background: var(--bg-frosty-sidebar) !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
/* Dölj scrollbar i admin-sidolistan (Electron/Webkit) */
#view-admin .admin-sidebar-list::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}

#admin-main-list {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}

#admin-main-list::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}

/* Garaget: filtergrid matchar rubrikrutan – frostad header med accentglow */
#view-archive .archive-filter-grid {
background: var(--bg-frosty-header) !important;
border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-color)) !important;
box-shadow: 0 4px 24px -6px color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
}

/* 3. Detaljytan i Admin */
/* OBS: display utan !important — JS kontrollerar show/hide */
#admin-detail-content {
flex: 1 !important;
display: flex;
flex-direction: column !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
background: transparent !important;
overflow: hidden !important;
}

/* 4. ADMIN & MODAL LAYOUT */
#admin-list-title { padding: 20px !important; border-bottom: 1px solid var(--border-color) !important; }
#admin-list-actions { padding: 10px 10px 10px 4px !important; display: flex !important; gap: 10px !important; }
#notes-list-container { flex: 1 !important; overflow-y: auto !important; }
#composer-body-container { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 300px !important; }

/* Kompletterande klasser */
.archive-filter-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; background: rgba(0,0,0,0.15) !important; }
.detail-footer-toolbar { 
padding: 8px 16px !important; 
display: flex !important; 
align-items: center !important;
justify-content: flex-end !important; /* Knappar till höger */
gap: 10px !important; 
background: rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
flex-shrink: 0 !important;
}
.admin-helper-text {
font-size: 11px;
line-height: 1.45;
color: rgba(255,255,255,0.54);
}
.admin-danger-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
min-height: 40px;
padding: 6px 12px;
border-top: 1px solid rgba(255,69,58,0.28);
border-bottom: 1px solid rgba(255,69,58,0.12);
background:
linear-gradient(90deg, rgba(255,69,58,0.11), rgba(255,69,58,0.03) 42%, rgba(0,0,0,0.24)),
rgba(0,0,0,0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
flex-shrink: 0;
margin: 0;
}

#view-admin .new-agent-form-shell {
min-height: 0;
}

#view-admin .new-agent-form-body {
min-height: 0;
}

#view-admin .new-agent-main-grid,
#view-admin .new-agent-lower-grid {
min-width: 0;
}

#view-admin .new-agent-fields-panel,
#view-admin .new-agent-avatar-panel,
#view-admin .new-agent-office-section {
min-width: 0;
}

#view-admin #new-agent-avatar-grid {
grid-template-columns: repeat(6, 40px) !important;
gap: 8px !important;
justify-content: start !important;
align-items: center !important;
}

#view-admin #new-agent-avatar-grid .new-agent-avatar-opt {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border-radius: 8px !important;
}

#view-admin #new-agent-avatar-grid .new-agent-avatar-opt span {
width: 22px !important;
height: 22px !important;
}

#view-admin .new-agent-office-list {
scrollbar-width: none !important;
}

#view-admin .new-agent-office-label {
box-sizing: border-box;
min-height: 32px;
background: color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--accent-primary) 6%) !important;
border-color: color-mix(in srgb, var(--border-color) 78%, var(--accent-primary) 22%) !important;
color: var(--text-primary) !important;
}

#view-admin .new-agent-office-label:has(.new-agent-office-cb:checked) {
background: color-mix(in srgb, var(--bg-dark-secondary) 78%, var(--accent-primary) 16%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color) 28%) !important;
}

#view-admin .new-agent-office-cb {
appearance: none !important;
-webkit-appearance: none !important;
width: 15px !important;
height: 15px !important;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 28%);
background: color-mix(in srgb, var(--bg-dark-secondary) 92%, #ffffff 8%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
flex: 0 0 auto;
}

#view-admin .new-agent-office-cb:checked {
background: var(--accent-primary);
border-color: var(--accent-primary);
box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bg-dark-secondary) 88%, transparent);
}

#view-admin .new-agent-view-panel {
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 7%) !important;
border-color: color-mix(in srgb, var(--border-color) 76%, var(--accent-primary) 24%) !important;
box-shadow: none !important;
}

#view-admin .new-agent-view-panel .na-view-pill {
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--accent-primary) 6%) !important;
border-color: color-mix(in srgb, var(--border-color) 78%, var(--accent-primary) 22%) !important;
color: var(--text-secondary) !important;
}

#view-admin .new-agent-view-panel .na-view-pill[data-active="true"] {
background: color-mix(in srgb, var(--bg-dark-secondary) 78%, var(--accent-primary) 16%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 74%, var(--border-color) 26%) !important;
color: var(--accent-primary) !important;
}

#view-admin #na-form-footer {
min-height: 52px;
background: color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--accent-primary) 7%) !important;
border-top-color: color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 28%) !important;
}

#view-admin #na-form-footer .footer-icon-btn {
width: 36px;
height: 36px;
}

#view-admin .admin-user-detail .agent-counter-pill,
#view-admin .admin-user-detail .agent-office-group-pill,
#view-admin .admin-user-detail .agent-office-pill,
#view-admin .admin-user-detail .agent-view-pill {
border-radius: 999px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#view-admin .agent-ticket-counter-cell span,
#view-admin #office-ticket-counter-cell span {
color: var(--counter-pill-text) !important;
}

/* Å1b-efterfix: temats dynamic-color-kontrakt (1,2,0) slår det generiska
   span-golvet (1,1,1) på den fyllda aktiva pillen. Höj specificiteten så
   texten golvas i alla teman; border/bg-identiteten lämnas till kontraktet. */
#view-admin .agent-ticket-counter-cell span[data-counter-kind="active"] {
color: var(--counter-pill-text) !important;
}

#view-admin .agent-ticket-counter-cell span[style*="font-weight:500"],
#view-admin #office-ticket-counter-cell span[style*="font-weight:500"] {
color: var(--counter-pill-empty-text) !important;
}

#view-admin .agent-ticket-counter-cell div[style*="text-micro-size"],
#view-admin #office-ticket-counter-cell div[style*="text-micro-size"] {
color: var(--counter-pill-muted-text) !important;
}

#view-admin .admin-user-detail .agent-view-permission-panel {
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 7%) !important;
border-color: color-mix(in srgb, var(--border-color) 76%, var(--accent-primary) 24%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#view-admin .admin-user-detail .agent-view-subtitle {
color: var(--text-secondary);
font-size: var(--text-micro-size);
font-weight: 750;
letter-spacing: 0.06em;
margin: 0 0 5px;
opacity: var(--text-help-opacity);
text-transform: uppercase;
width: 100%;
}

#view-admin .admin-user-detail .agent-view-subtitle--admin {
margin-top: 8px;
}

#view-admin .admin-user-detail .agent-view-pill-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: flex-start;
}

#view-admin .admin-user-detail .agent-office-pill input[type="checkbox"],
#view-admin .admin-user-detail .agent-view-pill input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
inline-size: 0 !important;
block-size: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
}

#view-admin .admin-user-detail .agent-view-admin-lock {
color: var(--text-secondary);
display: inline-flex;
font-size: 10px;
font-style: italic;
line-height: 1.35;
opacity: 0.7;
}

#view-admin .admin-user-detail .agent-office-group-pill,
#view-admin .admin-user-detail .agent-office-pill,
#view-admin .admin-user-detail .agent-view-pill {
background: var(--pill-state-idle-bg) !important;
border-color: var(--pill-state-idle-border) !important;
color: var(--pill-state-idle-text) !important;
}

#view-admin .admin-user-detail .agent-office-group-pill.is-selected,
#view-admin .admin-user-detail .agent-office-pill.is-selected,
#view-admin .admin-user-detail .agent-view-pill.is-selected,
#view-admin .admin-user-detail .agent-counter-pill.is-selected {
background: var(--pill-state-active-bg) !important;
border-color: var(--pill-state-active-border) !important;
color: var(--pill-state-active-text) !important;
font-weight: 650 !important;
}

#view-admin .admin-user-detail .agent-counter-pill {
background: var(--pill-state-idle-bg) !important;
border: 1px solid var(--pill-state-idle-border) !important;
color: var(--pill-state-idle-text) !important;
border-radius: 24px !important;
box-sizing: border-box !important;
}

#view-admin .admin-user-detail .agent-view-pill {
border-width: 1px !important;
border-style: solid !important;
box-sizing: border-box !important;
}

#view-admin .admin-user-detail .agent-office-permission-block {
display: flex;
flex-direction: column;
gap: 4px;
}

#view-admin .agent-office-permission-panel .agent-office-permission-block-groups ~ .agent-office-permission-block-single {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

#view-admin .admin-user-detail .agent-office-subpanel.is-expanded {
background: color-mix(in srgb, var(--sel-fill) 58%, transparent) !important;
border-left: 2px solid color-mix(in srgb, var(--sel-edge) 58%, transparent) !important;
border-radius: 0 8px 8px 0 !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel-edge) 16%, transparent),
  0 4px 14px -8px color-mix(in srgb, var(--sel-edge) 44%, transparent) !important;
padding: 5px 6px 3px 10px !important;
}

#view-admin .admin-user-detail .agent-office-group-pill.is-expanded {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--sel-edge) 40%, transparent) !important;
}

#view-admin .admin-user-detail .agent-office-section-heading {
font-size: var(--text-micro-size);
font-weight: 800;
letter-spacing: 0.055em;
line-height: 1.2;
text-transform: uppercase;
color: var(--text-secondary);
}

#view-admin .admin-user-detail .agent-office-section-help {
margin-top: -1px;
font-size: 10px;
line-height: 1.2;
color: var(--text-secondary);
opacity: var(--text-help-opacity);
}

#view-admin .admin-user-detail .agent-office-row-break {
flex-basis: 100%;
height: 0;
}

#view-admin .admin-user-detail .agent-office-group-pill.is-selected,
#view-admin .admin-user-detail .agent-office-pill.is-selected,
#view-admin .admin-user-detail .agent-office-pill:has(input:checked),
#view-admin .admin-user-detail .agent-view-pill.is-selected,
#view-admin .admin-user-detail .agent-view-pill:has(input:checked) {
background: var(--pill-state-active-bg) !important;
border-color: var(--pill-state-active-border) !important;
color: var(--pill-state-active-text) !important;
}

#box-office-master .admin-danger-footer {
width: calc(100% + 50px);
margin-left: -25px;
margin-right: -25px;
margin-bottom: -25px;
box-sizing: border-box;
}
#box-office-master .admin-danger-footer .footer-icon-btn,
#box-office-master .admin-danger-footer .admin-danger-icon-btn {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
}
#box-office-master .admin-danger-footer .footer-icon-btn svg,
#box-office-master .admin-danger-footer .admin-danger-icon-btn svg {
width: 16px !important;
height: 16px !important;
display: block !important;
}

.admin-danger-icon-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 7px;
border: none;
background: transparent;
box-shadow: none;
color: rgba(255,69,58,0.55);
cursor: pointer;
flex-shrink: 0;
transition: color 0.18s ease, filter 0.18s ease;
}
.admin-danger-icon-btn:hover {
background: transparent;
border: none;
color: #ff453a;
filter: drop-shadow(0 0 6px rgba(255,69,58,0.7));
}
.admin-danger-icon-btn svg {
fill: currentColor !important;
stroke: none !important;
}
.claim-action { margin-top: 10px !important; display: flex !important; gap: 8px !important; justify-content: flex-end !important; }
.save-actions { padding: 15px !important; display: flex; justify-content: flex-end !important; gap: 12px !important; border-top: 1px solid var(--border-color) !important; }
.inbox-chat-history { flex: 1 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 20px !important; }

/* Ticket history needs a stable reading surface in glass themes.
Frame/header/footer keep the glass look; only the bubble/history area is solid.
Each theme can override --ticket-history-bg in :root to match its palette. */
#inbox-detail-body,
#my-chat-scroll-area,
#archive-detail .detail-body,
#atlas-reader-modal #reader-chat-scroll,
#customer-reader-modal #cust-reader-chat-scroll {
background: var(--ticket-history-bg, rgba(12, 14, 18, 0.94)) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(255,255,255,0.04) !important;
}

#inbox-detail .inbox-chat-history,
#archive-detail .inbox-chat-history {
background: transparent !important;
}

/* Mina Ärenden + reader-modaler: chatthistoriken och svarsfältet ska mötas
utan extra rand. Inbox har egen fungerande struktur och lämnas orörd. */
#view-my-tickets #my-chat-scroll-area,
#atlas-reader-modal #reader-chat-scroll,
#customer-reader-modal #cust-reader-chat-scroll {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#customer-reader-modal [id^="cust-typing-indicator-"] {
background: var(--ticket-history-bg, rgba(12, 14, 18, 0.94)) !important;
}

/* Reader-scroll: helt dold men funktionell scrollbar — eliminerar synlig
   scrollbar samt "blink"/storlekshopp vid ärendebyte (full innerHTML-ersättning).
   Hover-reveal räckte inte: tummen syntes så fort muspekaren var i modalen. */
#atlas-reader-modal #reader-chat-scroll,
#customer-reader-modal #cust-reader-chat-scroll {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
scroll-behavior: auto !important;
contain: layout paint style !important;
will-change: scroll-position;
}
#atlas-reader-modal #reader-chat-scroll::-webkit-scrollbar,
#customer-reader-modal #cust-reader-chat-scroll::-webkit-scrollbar {
display: none !important;
}

#atlas-reader-modal .msg-row,
#customer-reader-modal .msg-row {
content-visibility: auto;
contain-intrinsic-size: auto 80px;
}

#view-my-tickets [id^="typing-indicator-"] {
height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
background: transparent !important;
}

#view-my-tickets [id^="typing-indicator-"][style*="visibility: visible"] {
height: auto !important;
padding: 3px 18px 5px !important;
background: var(--ticket-history-bg, rgba(12, 14, 18, 0.94)) !important;
}

#view-my-tickets .detail-footer-area,
#atlas-reader-modal div:has(> div > #reader-quick-reply-wrap),
#customer-reader-modal div:has(> div > #cust-reader-quick-reply-wrap) {
border-top: none !important;
}

/* Knappar & UI */
.icon-only-btn { padding: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; }
.user-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.15); color: var(--accent-primary); font-weight: bold; border-radius: 50%; }

/* Notifikationer — Toast */
@keyframes toastSlideIn {
from { opacity: 0; transform: translateX(24px) scale(0.96); }
to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
@keyframes toastSlideOut {
from { opacity: 1; transform: translateX(0)    scale(1);    }
to   { opacity: 0; transform: translateX(24px) scale(0.96); }
}
#atlas-toast-container {
position: fixed;
bottom: var(--atlas-toast-bottom-runtime, var(--atlas-toast-bottom, 20px));
right: var(--atlas-toast-right, 20px);
left: var(--atlas-toast-left, auto);
width: var(--atlas-toast-width, auto);
display: flex; flex-direction: column-reverse; gap: 8px;
z-index: 10000; pointer-events: none;
max-width: var(--atlas-toast-max-width, 360px);
}
.toast-notification {
background: rgba(13, 10, 24, 0.93);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--text-primary, #fff);
padding: 11px 16px 11px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.1);
border-left: 3px solid var(--accent-primary, #7c5cbf);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
animation: toastSlideIn 0.28s cubic-bezier(.22,.68,0,1.2) forwards;
font-size: 13.5px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
pointer-events: auto;
max-width: var(--atlas-toast-max-width, 360px);
line-height: 1.45;
cursor: default;
word-break: break-word;
}

/* KAN-388 AT-50: toastar ligger ovanfor aktiva footers. */
body:has(#view-chat:not([style*="display: none"]) #home-chat-footer),
body:has(#view-my-tickets:not([style*="display: none"]) #my-ticket-detail:not([style*="display: none"]) :is(#my-tickets-footer, .detail-footer-area)),
body:has(#view-inbox:not([style*="display: none"]) #inbox-detail:not([style*="display: none"]) #quick-reply-area),
body:has(#customer-reader-modal:not([style*="display: none"]) #cust-reader-quick-reply-wrap),
body:has(#atlas-reader-modal:not([style*="display: none"]) #reader-quick-reply-wrap),
body:has(#view-templates:not([style*="display: none"]) #template-editor-form:not([style*="display: none"]) .detail-footer-toolbar),
body:has(#view-admin:not([style*="display: none"]) #admin-detail-content:not([style*="display: none"]) :is(#na-form-footer, .admin-danger-footer)) {
--atlas-toast-bottom: calc(96px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 768px) {
body:has(#view-chat:not([style*="display: none"]) #home-chat-footer),
body:has(#view-my-tickets:not([style*="display: none"]) #my-ticket-detail:not([style*="display: none"]) :is(#my-tickets-footer, .detail-footer-area)),
body:has(#view-inbox:not([style*="display: none"]) #inbox-detail:not([style*="display: none"]) #quick-reply-area),
body:has(#customer-reader-modal:not([style*="display: none"]) #cust-reader-quick-reply-wrap),
body:has(#atlas-reader-modal:not([style*="display: none"]) #reader-quick-reply-wrap),
body:has(#view-templates:not([style*="display: none"]) #template-editor-form:not([style*="display: none"]) .detail-footer-toolbar),
body:has(#view-admin:not([style*="display: none"]) #admin-detail-content:not([style*="display: none"]) :is(#na-form-footer, .admin-danger-footer)) {
--atlas-toast-left: 12px;
--atlas-toast-right: 12px;
--atlas-toast-width: auto;
--atlas-toast-max-width: none;
}
}
/* /KAN-388 AT-50 toast-footer */
.toast-notification.toast-slide-out {
animation: toastSlideOut 0.25s ease forwards;
}
.toast-notification.toast-success { border-left-color: #4cd137; }
.toast-notification.toast-warning { border-left-color: #ffa502; }
.toast-notification.toast-error   { border-left-color: #ff4444; }
.toast-notification.toast-info    { border-left-color: var(--accent-primary, #7c5cbf); }

/* 6. STRUKTURELLA REGLER */
.header-actions { display: flex !important; align-items: center !important; gap: 12px !important; }

/* =============================================================================
VYRUBRIKER — ikon-tile + integrerad titel (2026-06-13)
Ersätter den tidigare "påklistrade" glow-texten. Ikonen sitter nu i en mjuk,
temafärgad bricka som hör ihop med ytan, och titeln har en lugn djup-skugga
i stället för yttre glöd. Temats --accent-primary styr färgvariationen.
============================================================================= */
.header-title-icon {
width: 22px !important;
height: 22px !important;
box-sizing: content-box !important;
padding: 8px;
color: var(--accent-primary) !important;
flex-shrink: 0;
stroke-width: 2;
border-radius: 11px;
background:
linear-gradient(150deg,
color-mix(in srgb, var(--accent-primary) 24%, transparent) 0%,
color-mix(in srgb, var(--accent-primary) 9%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
0 2px 8px color-mix(in srgb, var(--accent-primary) 16%, transparent);
transition: all var(--transition-normal);
}

.chat-header h2:hover .header-title-icon {
background:
linear-gradient(150deg,
color-mix(in srgb, var(--accent-primary) 32%, transparent) 0%,
color-mix(in srgb, var(--accent-primary) 13%, transparent) 100%);
border-color: color-mix(in srgb, var(--accent-primary) 46%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
0 4px 14px color-mix(in srgb, var(--accent-primary) 26%, transparent);
transform: translateY(-1px);
}

/* Vyrubriker — Premium & elegant styling */
.chat-header h2 {
color: var(--accent-primary) !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: 0.4px;
text-shadow: 0 1px 1px color-mix(in srgb, var(--accent-primary) 16%, transparent),
0 1px 2px rgba(0, 0, 0, 0.18) !important;
display: flex !important;
align-items: center !important;
gap: 13px !important;
padding: 4px 2px;
transition: all var(--transition-normal);
}

.chat-header h2:hover {
text-shadow: 0 1px 1px color-mix(in srgb, var(--accent-primary) 22%, transparent),
0 2px 4px rgba(0, 0, 0, 0.22) !important;
}

/* =============================================================================
KOMPLETTERANDE STILREGLER
============================================================================= */

/* 3. CHATT: Egna meddelanden (Klass .mine) */
.message.mine {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
}

.message.mine .bubble {
background: var(--accent-primary) !important;
color: white !important;
border-bottom-right-radius: 4px !important;
}

/* Garaget: bred header ovanför; flex:1 hanterar höjden automatiskt */
#view-archive .templates-container {
margin-top: 0 !important;
}

/* =============================================================================
ADMIN — KNAPPAR (btn-glass-small & btn-glass-icon)
============================================================================= */
.btn-glass-small {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
/* 🔴 #315 (2026-08-18), Patriks IRL-fynd: *"när jag hoovrar över alla knappar blir det vit
   text vilket är svårt att se på ljus bakgrund."* Mätt och bekräftat — men defekten var
   BREDARE än ljust tema.
   🔴 `--accent-primary` är AGENTENS PROFILFÄRG, satt på documentElement vid inloggning
   (se `:4730`) — den är alltså per ANVÄNDARE, inte per tema. Hårdkodad `white` ovanpå den
   föll i tre av fyra mätta fall: ljus/grön `3.77:1`, mörk/blå `3.35:1`, ljus agentfärg
   `1.42:1`. Endast en mörk agentfärg klarade AA. En ljus-tema-override hade alltså inte
   räckt — vilken användare som helst med ljus profilfärg drabbas i vilket tema som helst.
   🟢 Löst med husets EGEN standard i stället för en per-tema-gissning: SEL-tokens
   (`style.css:60-80`) lägger accenten OVANPÅ temats egen yta och tar texten ur temats
   `--text-primary`. Polariteten blir därmed rätt av konstruktion.
   🔴 Mätt att `--sel-text` på en FYLLD accentplatta är SÄMRE (`3.25` / `2.59`) — tokenen är
   gjord för temats yta, inte för solid accent. Därför byts även bakgrunden.
   Värsta uppmätta fall med denna regel: `8.91:1` över fyra tema-/agentfärgskombinationer. */
.btn-glass-small:hover {
background: var(--sel-fill);
border-color: var(--sel-edge);
color: var(--sel-text);
}

#view-admin .ai-chip,
#view-admin .ai-source-chip {
vertical-align: middle;
}

#view-admin .admin-nav-ai-chip {
margin-left: auto;
}

body.atlas-light-theme #view-admin .admin-nav-ai-chip {
color: color-mix(in srgb, #64d2ff 43%, #000) !important;
}

#view-admin .admin-chat-nav-item {
gap: 10px;
}

#view-admin .admin-chat-nav-item > span:nth-child(2) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#view-admin .admin-mobile-kb-guide-btn {
display: none;
}

#view-admin .btn-glass-small.ai-action-glow,
#view-admin .report-preset-btn.ai-action-glow,
#view-admin .report-action-btn.ai-action-glow {
border-color: color-mix(in srgb, #64d2ff 22%, rgba(255,255,255,0.12));
}

#view-admin .btn-glass-small.ai-action-glow:hover:not(:disabled),
#view-admin .report-preset-btn.ai-action-glow:hover:not(:disabled),
#view-admin .report-action-btn.ai-action-glow:hover:not(:disabled) {
box-shadow: 0 0 12px color-mix(in srgb, #64d2ff 18%, transparent);
}

.btn-glass-tiny {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.55);
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.btn-glass-tiny:hover {
background: rgba(255,255,255,0.09);
color: rgba(255,255,255,0.85);
}

/* Kunskapsimportstudio (Mål 2 Fas 11B) */
.ki-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
scrollbar-width: none !important;
}

.ki-scroll::-webkit-scrollbar {
width: 8px;
}

.ki-scroll::-webkit-scrollbar-track {
background: transparent;
}

.ki-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.20);
border-radius: 999px;
}

.ki-shell {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
min-width: 0;
padding-bottom: 28px;
}

.ki-panel {
padding: 16px;
border-radius: 8px;
min-width: 0;
}

.ki-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}

.ki-panel-header h4,
.ki-status-grid h5 {
margin: 0;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.88);
}

.ki-panel-header span {
font-size: 11px;
color: rgba(255,255,255,0.46);
white-space: nowrap;
}

.ki-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.ki-status-grid h5 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--accent-primary);
margin-bottom: 8px;
}

.ki-file-row,
.ki-office-row,
.ki-draft-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
min-width: 0;
}

.ki-file-row:last-child,
.ki-office-row:last-child {
border-bottom: 0;
}

.ki-file-name,
.ki-draft-id {
font-size: 12px;
color: rgba(255,255,255,0.82);
overflow-wrap: anywhere;
}

.ki-file-date,
.ki-empty {
font-size: 11px;
color: rgba(255,255,255,0.42);
}

.ki-stepper {
display: flex;
gap: 8px;
margin: 2px 0 4px;
flex-wrap: wrap;
}

.ki-step {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.36);
user-select: none;
}

.ki-step span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
font-size: 10px;
}

.ki-step--active {
background: rgba(0,113,227,0.18);
border-color: rgba(0,113,227,0.60);
color: #fff;
}

.ki-step--disabled {
pointer-events: none;
}

.ki-help {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.58);
}

.ki-raw-text {
width: 100%;
min-height: 210px;
resize: vertical;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.18);
color: rgba(255,255,255,0.88);
font-size: 13px;
line-height: 1.5;
padding: 12px;
outline: none;
}

.ki-raw-text:focus {
border-color: rgba(0,113,227,0.65);
box-shadow: 0 0 0 2px rgba(0,113,227,0.14);
}

.ki-category-select {
width: 100%;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.22);
color: rgba(255,255,255,0.88);
font-size: 13px;
padding: 10px 12px;
outline: none;
}

.ki-category-select:focus {
border-color: rgba(0,113,227,0.65);
box-shadow: 0 0 0 2px rgba(0,113,227,0.14);
}

.ki-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}

.ki-warning {
font-size: 11px;
color: #ffcf70;
line-height: 1.4;
margin-top: 8px;
}

.ki-guide-panel {
border-color: rgba(245,158,11,0.26);
background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(255,255,255,0.025));
}

/* ── ADMIN NOTE BANNERS (ersätter inline-stilade ⚠️/ℹ️-banners) ─────────── */
.admin-note {
font-size: 11px;
border-radius: 6px;
padding: 7px 11px;
margin: 0 0 12px 0;
border-width: 1px;
border-style: solid;
display: flex;
gap: 7px;
align-items: flex-start;
}
.admin-note-warning {
color: var(--warning-text);
background: var(--warning-bg);
border-color: var(--warning-border);
}
.admin-note-info {
/* Info upplyser neutralt; warning/danger/success behåller färgad text eftersom de signalerar. */
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-dark-secondary, #12181f) 92%, var(--info-text, #3b82f6) 8%);
border-color: var(--info-border);
}
.admin-note-info span,
.admin-note-info strong {
color: inherit;
}
.admin-note-danger {
color: var(--danger-text);
background: var(--danger-bg);
border-color: var(--danger-border);
}
/* Patrik IRL 2026-07-31: E-postkonfigurationens .kb-guide-cta togs bort. Notisen som
   följer direkt efter hero-rutan har margin-top:0 och satt då dikt an mot den —
   samma trängda intryck som CTA:n tidigare maskerade. 18px matchar rubrikluften i
   Drift & Säkerhet och Nätverksinställningar. Träffar idag exakt en plats
   (admin-config.js, e-postsektionen); heron följs annars av .kb-guide-cta eller h4. */
.kb-guide-hero + .admin-note {
margin-top: 0;
}
.admin-note-success {
color: var(--success-text);
background: var(--success-bg);
border-color: var(--success-border);
}

/* ── ADMIN SECTION DIVIDER ───────────────────────────────────────────────── */
.admin-section-divider {
border: none;
border-top: 1px solid color-mix(in srgb, var(--text-secondary, #aab4c3) 34%, transparent) !important;
margin: 0 0 24px 0;
}