/* ============================================
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: 20px; right: 20px;
display: flex; flex-direction: column-reverse; gap: 8px;
z-index: 10000; pointer-events: none;
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: 360px;
line-height: 1.45;
cursor: default;
word-break: break-word;
}
.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;
}

/* ── NÄTVERKS-SERVER-URL (använder CSS-variabel för temafärg) ────────────── */
.network-server-url {
color: var(--live-server-url-color);
}

/* ── NÄTVERKS-ADRESSKORT ──────────────────────────────────────────────────
   Ramen är temabunden med samma formel som .admin-section-divider. En
   hårdkodad vit rgba-ram (tidigare inline) är osynlig på ljusa teman. */
.network-address-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid color-mix(in srgb, var(--text-secondary, #aab4c3) 34%, transparent);
}

.ki-guide-box {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.72);
}

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

.ki-guide-column,
.ki-guide-grid > div,
.ki-guide-example {
padding: 10px 12px;
border-radius: 8px;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.07);
}

.ki-guide-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #ffd58a;
margin-bottom: 4px;
}

/* "Lägg inte här" får subtil röd varningston (IRL-fynd 2026-06-10) —
   samma röda mönster som varningsrutan i Drift & Säkerhet, fungerar i ljusa+mörka teman */
.ki-guide-grid > .ki-guide-avoid {
background: rgba(255,107,107,0.08);
border-color: rgba(255,107,107,0.28);
}
.ki-guide-avoid .ki-guide-label {
color: #ff6b6b;
}

.ki-guide-example {
color: rgba(255,255,255,0.62);
font-style: italic;
}

.ki-guide-example span {
font-style: normal;
font-weight: 700;
color: rgba(255,255,255,0.82);
}

.ki-guide-dedup-note {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
background: rgba(96,165,250,0.07);
border: 1px solid rgba(96,165,250,0.18);
font-size: 11px;
line-height: 1.5;
color: rgba(255,255,255,0.60);
}

.ki-input-warnings {
margin-top: 10px;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.32);
color: #ffd58a;
}

.ki-warning-title {
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2px;
margin-bottom: 4px;
}

.ki-input-warnings ul {
margin: 6px 0 0;
padding-left: 18px;
}

.ki-input-warnings li + li {
margin-top: 3px;
}

@media (max-width: 720px) {
.ki-guide-grid {
grid-template-columns: 1fr;
}
}

.ki-price-warning,
.ki-permanent-warning {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.32);
color: #ffd58a;
margin-bottom: 12px;
}

.ki-permanent-warning {
margin: 12px 0 0;
}

.ki-next-step {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
}

.ki-next-step span {
font-size: 12px;
line-height: 1.45;
color: rgba(198,246,213,0.78);
}

.ki-save-note {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(34,197,94,0.10);
border: 1px solid rgba(34,197,94,0.24);
color: rgba(198,246,213,0.90);
margin: 12px 0 0;
}

.kb-guide-container {
width: 100%;
}

.kb-guide-body {
padding: 20px;
overflow-y: auto;
}

.kb-guide-fallback-title {
margin-bottom: 18px;
font-size: 16px;
font-weight: 800;
color: var(--accent-primary);
}

.kb-guide-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 18px;
align-items: stretch;
padding: 18px;
margin: 0 0 18px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
}

.kb-guide-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.55px;
text-transform: uppercase;
color: #ffd58a;
margin-bottom: 8px;
}

.kb-guide-hero h3 {
margin: 0;
font-size: 18px;
line-height: 1.25;
color: rgba(255,255,255,0.92);
}

.kb-guide-hero p {
/* Patriks IRL 2026-09-18: en fast max-width (760px) utan centrering lät texten hänga kvar vid vänsterkanten
   medan rutan blev bredare vid utzoomning. Texten fyller nu rutans innerbredd, så avståndet till vänster och
   höger vägg är alltid lika (rutans padding). */
max-width: none;
margin: 10px 0 0;
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.66);
}

.kb-guide-summary {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 14px;
border-radius: 8px;
background: rgba(0,0,0,0.16);
border: 1px solid rgba(255,255,255,0.07);
}

.kb-guide-summary span {
display: block;
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.76);
}

.kb-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

.kb-guide-card {
min-width: 0;
padding: 14px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
}

.kb-guide-card-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 8px;
}

.kb-guide-card h4 {
margin: 0;
font-size: 14px;
line-height: 1.3;
color: rgba(255,255,255,0.90);
}

.kb-guide-card p {
margin: 9px 0 0;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.64);
}

.kb-guide-card ul {
margin: 10px 0 0;
padding-left: 18px;
font-size: 12px;
line-height: 1.5;
color: rgba(255,255,255,0.70);
}

.kb-guide-card li + li {
margin-top: 5px;
}

.kb-guide-action {
margin-top: 12px;
}

.kb-guide-candidate-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}

.kb-guide-candidate-row + .kb-guide-candidate-row {
margin-top: 8px;
}

.kb-guide-candidate-row .kb-guide-action {
flex: 1 1 auto;
display: inline-flex;
margin-top: 0;
min-width: 0;
justify-content: flex-start;
}

.kb-guide-icon-action {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 75%, var(--accent-primary));
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--accent-primary) 16%);
color: var(--text-primary);
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.kb-guide-icon-action:hover:not(:disabled) {
background: color-mix(in srgb, var(--bg-dark-secondary) 70%, var(--accent-primary) 30%);
border-color: var(--accent-primary);
transform: translateY(-1px);
}

.kb-guide-icon-action:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
}

.kb-guide-dismissed-label {
flex: 1 1 auto;
min-width: 0;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(148,163,184,0.08);
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
line-height: 1.25;
}

.kb-guide-dismissed-state {
border-color: rgba(148,163,184,0.24);
background: rgba(148,163,184,0.07);
}

.kb-guide-action:disabled,
.kb-guide-action:disabled:hover {
cursor: not-allowed !important;
border-style: dashed !important;
border-color: color-mix(in srgb, var(--text-secondary) 42%, var(--border-color)) !important;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--text-secondary) 10%) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
transform: none !important;
filter: saturate(0.62);
}

.kb-guide-flow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

.kb-guide-flow > div {
padding: 12px 14px;
border-radius: 8px;
background: rgba(59,130,246,0.10);
border: 1px solid rgba(96,165,250,0.22);
}

.kb-guide-flow strong,
.kb-guide-flow span {
display: block;
}

/* 🔴 #510 rev 3 (Patrik 2026-09-02): stegen är en span var nu. Luft mellan raderna så
   siffrorna går att skanna, och en tydlig paus före avslutningshänvisningen som inte
   är ett steg. */
.kb-guide-flow span + span {
margin-top: 5px;
}
.kb-guide-flow .kb-guide-flow-note {
margin-top: 9px;
opacity: 0.78;
}

.kb-guide-flow strong {
font-size: 12px;
color: #bfdbfe;
margin-bottom: 5px;
}

.kb-guide-flow span {
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.66);
}

.kb-guide-hero--single {
grid-template-columns: 1fr;
}

.kb-guide-cta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 12px 16px;
margin: 0 0 18px;
border-radius: 8px;
background: rgba(59,130,246,0.08);
border: 1px solid rgba(96,165,250,0.20);
}

.kb-guide-cta span {
display: block;
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.76);
}

.kb-guide-cta span:first-child {
font-weight: 600;
color: rgba(255,255,255,0.88);
}

@media (max-width: 1100px) {
.kb-guide-hero,
.kb-guide-grid,
.kb-guide-flow {
grid-template-columns: 1fr;
}
}

.ki-section-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.ki-select-all-row {
display: flex;
gap: 8px;
margin-bottom: 6px;
}

.ki-section-card {
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.07);
border-left: 3px solid rgba(255,255,255,0.15);
padding: 14px 16px;
background: rgba(255,255,255,0.03);
transition: border-color 0.2s, opacity 0.2s;
}

.ki-section-card.ki-sc--new {
border-left-color: rgba(74,222,128,0.65);
background: rgba(74,222,128,0.04);
}

.ki-section-card.ki-sc--similar {
border-left-color: rgba(251,191,36,0.6);
background: rgba(251,191,36,0.03);
}

.ki-section-card.ki-sc--uncertain {
border-left-color: rgba(239,68,68,0.45);
background: rgba(239,68,68,0.03);
}

.ki-section-card.ki-sc--excluded {
opacity: 0.42;
border-left-color: rgba(255,255,255,0.1);
}

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

.ki-sc-check-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
min-width: 0;
}

.ki-sc-checkbox {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #4ade80;
flex: 0 0 auto;
-webkit-appearance: checkbox !important;
appearance: auto !important;
background: initial !important;
border: revert !important;
}

.ki-sc-status-label {
font-size: 0.75rem;
color: var(--text-secondary);
opacity: var(--text-help-opacity);
letter-spacing: 0;
line-height: 1.35;
}

.ki-sc-remove {
background: none;
border: none;
color: var(--text-secondary);
opacity: 0.48;
cursor: pointer;
font-size: 0.8rem;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s;
flex: 0 0 auto;
}

.ki-sc-remove:hover {
color: rgba(239,68,68,0.7);
opacity: 1;
}

.ki-sc-fields {
display: flex;
flex-direction: column;
}

.ki-section-title,
.ki-section-answer,
.ki-sc-input,
.ki-sc-textarea {
width: 100%;
background: var(--surface-raise);
border: 1px solid var(--surface-line);
border-radius: 6px;
color: var(--text-primary);
padding: 8px 10px;
font-size: 0.85rem;
line-height: 1.45;
margin-bottom: 8px;
box-sizing: border-box;
outline: none;
}

.ki-section-title:focus,
.ki-section-answer:focus,
.ki-sc-input:focus,
.ki-sc-textarea:focus {
border-color: var(--accent-primary);
}

.ki-section-answer,
.ki-sc-textarea {
resize: vertical;
min-height: 96px;
}

.ki-kw-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}

.ki-kw-chip {
font-size: 0.72rem;
padding: 2px 8px;
background: var(--surface-raise);
border: 1px solid var(--surface-line);
border-radius: 10px;
color: var(--on-surface-strong);
}

.ki-section-summary {
font-size: 0.8rem;
color: var(--text-secondary);
opacity: var(--text-help-opacity);
margin-bottom: 14px;
padding: 0 2px;
}

.ki-import-badge {
background: #f59e0b;
color: #000;
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
margin-left: 8px;
}

.ki-draft-list {
display: flex;
flex-direction: column;
gap: 0;
}

.ki-draft-row {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.70);
font-size: 12px;
text-align: left;
cursor: pointer;
}

.ki-draft-row:hover {
color: #fff;
}

.ki-validation {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
margin-bottom: 12px;
}

.ki-validation ul {
margin: 8px 0 0;
padding-left: 18px;
}

.ki-validation--ok {
background: rgba(46,204,113,0.10);
border: 1px solid rgba(46,204,113,0.24);
color: #8ff0b1;
}

.ki-validation--error {
background: rgba(255,77,109,0.10);
border: 1px solid rgba(255,77,109,0.24);
color: #ff9cac;
}

.ki-manifest-summary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 12px 0;
}

.ki-manifest-summary div {
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
min-width: 0;
}

.ki-manifest-summary span {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.42);
margin-bottom: 4px;
}

.ki-manifest-summary strong,
.ki-office-row strong {
font-size: 12px;
color: rgba(255,255,255,0.86);
overflow-wrap: anywhere;
}

.ki-office-list {
border-top: 1px solid rgba(255,255,255,0.07);
margin-top: 10px;
}

.ki-office-row span {
font-size: 11px;
color: rgba(255,255,255,0.48);
overflow-wrap: anywhere;
}

.ki-loading-text {
margin-top: 10px;
font-size: 12px;
color: rgba(255,255,255,0.55);
}

.ki-qa-table-wrap {
overflow-x: auto;
}

.ki-qa-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}

.ki-qa-table th,
.ki-qa-table td {
padding: 9px 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
vertical-align: top;
text-align: left;
}

.ki-qa-table th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.42);
}

.ki-pass {
color: #8ff0b1;
font-weight: 700;
}

.ki-fail {
color: #ff9cac;
font-weight: 700;
}

@media (max-width: 768px) {
.ki-status-grid,
.ki-manifest-summary {
grid-template-columns: 1fr;
}

.ki-panel-header {
align-items: flex-start;
flex-direction: column;
}

.ki-step {
flex: 1 1 calc(50% - 8px);
justify-content: center;
min-width: 130px;
}
}

.btn-glass-icon {
width: 38px;
height: 38px;
border-radius: 8px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.btn-glass-icon:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: currentColor;
opacity: 1;
transform: scale(1.08);
filter: drop-shadow(0 0 6px currentColor);
}

/* =============================================================================
GARAGET — Filter-kontrast (fungerar i alla teman, inkl. ljusa)
============================================================================= */
.filter-select,
.filter-input {
background: rgba(0, 0, 0, 0.28) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: var(--text-primary) !important;
}
.filter-select:focus,
.filter-input:focus {
background: rgba(0, 0, 0, 0.38) !important;
border-color: var(--accent-primary) !important;
outline: none !important;
}
.filter-select option {
background: #1a1825 !important;
color: var(--text-primary) !important;
}
.filter-select option:checked {
background: var(--accent-primary) !important;
color: #fff !important;
}

/* Mallmallar — avstånd mellan mallkort i listan */
.template-item {
margin-bottom: 8px !important;
}

/* Admin — service-dropdowns matchar .filter-input (rgba(0,0,0,0.28), fungerar
   i alla teman inkl. ljusa) istf hårdkodad --bg-dark-secondary som alltid är
   mörkgrå oavsett tema (IRL-fynd 2026-06-11). */
#admin-detail-content select,
#new-service-select {
background: rgba(0, 0, 0, 0.28) !important;
color: var(--text-primary) !important;
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent) !important;
}
#admin-detail-content select option,
#new-service-select option {
background: var(--bg-dark-primary, #1a1825);
color: var(--text-primary, #ffffff);
}

/* *** === OM-VY & AVSLUTANDE === *** */

/* =============================================================================
Chat-inputs: Blå linje
============================================================================= */
#inbox-chat-input {
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
outline: none !important;
}

/* =============================================================================
Om-vyn: 4-rutors grid
============================================================================= */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
padding: 20px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}

/* Modifieraren .about-grid--with-platform-note är borttagen 2026-08-24. Den lade en
   tredje grid-rad för en fristående förklaringsrad som upprepade (i)-tooltipen
   ordagrant och stal ~22px höjd från var och en av de fyra boxarna. Om-vyn har
   därmed alltid två rader — se .about-grid ovan. */

.about-cell {
border-radius: 14px;
padding: 12px 14px;
/* Temaföljande yta: mörk på mörka teman, ljus på ljusa teman. Tidigare var
   detta hårdkodat rgba(15,15,20,0.85), vilket blev mörka partier i OM-vyn på
   ljusa teman om style-admin.css/dess inline-klon laddades EFTER temafilen
   (t.ex. live-injektion). --bg-dark-secondary är definierad i alla teman. */
background: color-mix(in srgb, var(--bg-dark-secondary) 85%, transparent) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
overflow-y: auto;
scrollbar-width: none !important;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* =============================================================================
   #445 / #445B — Om-vyns rutor: lika stora, kompakta rader, linjerade kolumner
   -----------------------------------------------------------------------------
   Ursprung `#445`: de nedre rutorna fyllde bara ~40 % av sin höjd och såg
   nedtunga ut. Första försöket lät raderna växa med rutan upp till `68px`.
   🔴 Det var fel lösning, och Patrik såg varför direkt: *"Hade det inte gått
   att göra de översta rutorna lika stora, så att inte raderna nu i de nedre
   korten känns så luftiga och stora? ... Jag vet inte om det har att göra med
   att innehållet inte zoomar tillsammans med raderna?"* Han hade rätt på båda
   punkterna — kortets innehåll är `16px` och växer inte med raden, så en `68px`
   rad är mest luft.

   Rotorsaken låg i rutnätet, inte i raderna: `grid-template-rows` var
   `max-content minmax(0,1fr)`, vilket låste övre raden vid `314.5px` oavsett
   upplösning och lät nedre raden svälja allt överskott (`988px` @1920x1440).
   Den regeln är rättad längre ned i filen; se `#445B`-kommentaren där.

   Här hanteras följderna: rader med tak som följer fönsterhöjden, delade
   radspår så kolumnerna alltid linjerar, och överbliven höjd centrerad i
   stället för samlad nedtill.

   Mätt över fyra upplösningar efter ändringen (`690`/`768`/`900`/`1080`):
   rutorna lika stora, kolumnerna linjerade och `0px` dolt innehåll överallt.
   Före: dolt innehåll `75px` @1366x690 och osynkade kolumner upp till `1080`.

   🔴 Endast desktop. Under `768px` ger mobile.css rutorna `height:auto`, alltså
   finns ingen överbliven höjd att fördela — men gränsen sätts explicit så att
   mobilen aldrig kan påverkas av en framtida ändring här.
   ========================================================================== */
@media (min-width: 769px) {
/* Överbliven höjd hamnar lika mycket ovanför som under innehållet, i stället
   för som en klump nedtill. Rubriken är en `h3` och rörs inte av detta. */
#view-about .about-cell > div:first-of-type { margin-top: auto; }
#view-about .about-cell > div:last-child { margin-bottom: auto; }

#about-stats-content { align-items: center; }

/* 🔴 Kolumnerna delar SAMMA radspår. Två fristående flexkolumner med 5 mot 6
   kort fördelade höjden olika och hamnade osynkat — mätt @1366x768: vänster
   `48px` mellan raderna, höger `40px`. Med `grid-auto-flow: column` följer
   linjeringen av layouten och kan inte glida isär.
   Radhöjden följer fönsterhöjden: `clamp()` håller korten kompakta på stora
   skärmar (taket `44px` — utan tak blev de `68–92px` och kändes luftiga,
   eftersom innehållet bara är `16px` och inte växer med raden) och låter dem
   krympa på låga fönster i stället för att klippas. */
.about-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto repeat(6, minmax(0, clamp(28px, 4vh, 44px)));
grid-auto-flow: column;
gap: 8px;
width: 100%;
}

#about-system-info .info-item {
min-height: clamp(24px, 3.2vh, 34px);
align-items: center;
}
}

.about-cell-title {
margin: 0 0 4px 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-primary);
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
flex-shrink: 0;
}

/* Följ temat i Om-vyn; hårdkodad vit text faller på ljusa about-celler. */
.about-cell, .about-cell span, .about-cell div, .about-cell label {
color: var(--text-primary) !important;
}

.about-stat-row {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
text-align: center;
cursor: pointer;
}

/* System & Status-rutan: ingen scroll, kompakt info-rad */
.about-cell.no-scroll {
overflow: hidden;
font-size: 12px;
}

/* Om-vyn: kompakta arbetsflödessteg — title + description, utan scroll */
#view-about .guide-section {
flex: 1;
justify-content: space-between;
gap: 4px;
margin-top: 4px;
}
#view-about .guide-step {
padding: 5px 9px;
gap: 9px;
border-left-width: 2px;
border-radius: 8px;
align-items: center;
background: rgba(255,255,255,0.025) !important;
}
#view-about .guide-step:hover {
background: color-mix(in srgb, var(--accent-primary) 9%, transparent) !important;
}
#view-about .step-number {
width: 18px;
height: 18px;
font-size: var(--text-badge-min-size);
flex-shrink: 0;
align-self: flex-start;
margin-top: 1px;
background: var(--accent-primary) !important;
color: #fff !important;
box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
}
#view-about .step-content {
display: flex;
flex-direction: column;
gap: 1px;
padding-top: 0;
}
#view-about .step-content strong {
font-size: 11.5px;
line-height: 1.25;
color: var(--accent-primary) !important;
font-weight: 600;
}
#view-about .step-desc {
font-size: var(--text-micro-size);
color: var(--text-secondary) !important;
opacity: var(--text-help-opacity);
line-height: 1.25;
}
/* Om-vyn: Prio-stat-kort röd fade (gäller alla mörka teman; ljusa teman har egna regler) */
#view-about .about-stat-card--priority {
background: rgba(255, 59, 48, 0.08) !important;
border-color: rgba(255, 59, 48, 0.3) !important;
}
#view-about .about-stat-card--priority strong {
color: #ff3b30 !important;
}

/* =============================================================================
   #453 — Medelprio-kortet ska vara gult, inte rött.
   -----------------------------------------------------------------------------
   🔴 Prioritetskortets färg sätts INTE av inline-stilen i admin-audit.js.
   Mätt: regeln ovan plus en egen kopia i **alla tio** temafiler sätter
   `background`/`border`/`strong` med `!important` på `.about-stat-card--priority`.
   De slår varje inline-stil, så när medelprio-kortet lades till ärvde det den
   röda faden och blev omöjligt att skilja från högprio.

   Därför en högre specificitet i stället: temats regel är
   `body #view-about #about-stats-content .about-stat-card--priority`
   (2 id + 1 klass + 1 element). Att lägga till `.about-stat-card--medium` ger
   2 id + 2 klasser + 1 element och vinner i alla tio teman — utan att tio
   temafiler behöver ändras.

   Färgerna är temats egna `--warning-*`. Mätt i alla tio teman: gul text mot
   kortets yta `5.37–8.79:1` (ljusa teman får `#92400e`, mörka `#ff9f0a`/`#ffb340`).
   🔵 Bara 4 av 10 teman definierar tokenen själva; de övriga sex ärver
   basvärdena i `style.css:154-166`. Faller de bort tappar sex teman färgen.
   ========================================================================== */
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium,
#view-about .about-stat-card--priority.about-stat-card--medium {
background: var(--warning-bg) !important;
border: 1px solid var(--warning-border) !important;
}

body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium strong,
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium span,
#view-about .about-stat-card--priority.about-stat-card--medium strong,
#view-about .about-stat-card--priority.about-stat-card--medium span {
color: var(--warning-text) !important;
}

/* 🔴 Högprio-kortets ETIKETT hade tappat sin färg. Inline-stilen sätter den till
   en ljusröd, men temats generiska `.about-cell span { color: … !important }`
   vinner — mätt i Apple Light Green blev etiketten `rgb(61,107,80)`, alltså
   samma gröna som brödtexten, medan siffran var röd. Korten ska vara ett
   matchat par, så etiketten får samma behandling som medelprios. */
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--high span,
#view-about .about-stat-card--priority.about-stat-card--high span {
color: var(--danger-text) !important;
}

/* Compact info-items inuti Om-cellerna (override av globala 10px padding) */
.about-cell .info-item {
padding: 2px 4px;
font-size: 12px;
}

/* Setting-item i Om-cellen mer kompakt */
.about-cell .setting-item {
margin-bottom: 0;
}
.about-cell .setting-item label {
font-size: 13px !important;
}
.about-cell .setting-item select {
font-size: 12px !important;
padding: 4px 8px !important;
}

/* =============================================================================
Om-vyn: Tangentbordsgenvägar-cell (CELL 1)
============================================================================= */
.about-shortcut-list {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
overflow-y: auto;
}

.about-shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.07);
transition: background 0.15s ease;
cursor: pointer;
color: var(--text-primary);
}

.about-shortcut-row:hover {
background: color-mix(in srgb, var(--accent-primary) 7%, rgba(255,255,255,0.04));
}

/* FASG-SLICE-4/#275: Båda utgåvornas två övre Om-celler har exakt fyra rader
   vardera. Klientnoten ligger som en fullbreddsrad utanför cellerna, så den
   får inte längre reservera eller konsumera höjd i vänstercellen. */
@media (min-width: 769px) {
/* 🔴 #445B: alla fyra rutor lika stora. Tidigare stod här `max-content
   minmax(0, 1fr)`, vilket låste ÖVRE raden vid sitt innehåll — mätt `314.5px`
   oavsett upplösning — och lät nedre raden svälja allt överskott: `315px`
   @1366x768 men `988px` @1920x1440. Det var orsaken till att de nedre kortens
   rader kändes luftiga medan de övre rutorna såg trånga ut.
   `minmax(max-content, 1fr)` ger raderna samma höjd när det finns plats, men
   låter dem växa till sitt innehåll när fönstret är för lågt — då scrollar
   vyn i stället för att klippa. Mätt: dolt innehåll `75px → 0` @1366x690. */
#view-about .about-grid {
grid-template-rows: repeat(2, minmax(max-content, 1fr));
overflow-y: auto;
}

#view-about #about-grid > .about-cell:nth-child(1),
#view-about #about-grid > .about-cell:nth-child(2) {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}

#view-about .about-shortcut-list,
#view-about .guide-section {
display: grid;
grid-template-rows: repeat(4, minmax(40px, 62px));
min-height: 0;
gap: 4px;
margin-top: 4px;
align-content: start;
overflow: visible;
}

#view-about .guide-section {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
}

#view-about .about-shortcut-row,
#view-about .guide-step {
height: 100%;
min-height: 0;
box-sizing: border-box;
}
}

.about-kbd-group {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}

.about-kbd-sep {
font-size: 10px;
color: var(--text-secondary) !important;
opacity: 0.9;
padding: 0 1px;
}

.about-cell .about-kbd-badge {
margin-left: 5px;
padding: 2px 5px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, rgba(255, 255, 255, 0.12));
border-radius: 5px;
background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
color: color-mix(in srgb, var(--accent-primary) 78%, #ffffff) !important;
font-size: var(--text-badge-min-size);
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
body.atlas-light-theme .about-cell .about-kbd-badge {
color: color-mix(in srgb, var(--accent-primary) 43%, #000) !important;
}
body:not(.atlas-light-theme) .about-cell .about-kbd-badge {
color: color-mix(in srgb, var(--accent-primary) 35%, var(--text-primary)) !important;
}

.about-shortcut-label {
font-size: 13px;
opacity: 0.85;
text-align: right;
color: var(--text-primary);
}

.about-platform-note {
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-secondary) !important;
font-size: 10px;
line-height: 1.45;
}

/* Styling för kbd-tangenter inuti Om-vyn */
.about-cell kbd {
display: inline-block;
padding: 3px 8px;
background: color-mix(in srgb, var(--text-primary) 12%, rgba(0,0,0,0.6));
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
border-bottom: 2px solid rgba(0, 0, 0, 0.45);
border-radius: 5px;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
color: var(--text-primary) !important;
}

/* Roll-badge bredvid inloggat användarnamn (ersätter faded text) */
.about-role-badge {
display: inline-block;
font-size: var(--text-badge-min-size) !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 2px 5px;
border-radius: 4px;
background: rgba(0, 113, 227, 0.3) !important;
border: 1px solid rgba(0, 113, 227, 0.5);
color: var(--accent-primary) !important;
vertical-align: middle;
margin-left: 5px;
line-height: 1.6;
}


/* =========================================================
Hem-vy: Skärprendering
========================================================= */
/* Tar bort blur på chat-messages i hem-vyn (#view-chat) */
#view-chat #chat-messages {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
}




/* =============================================================================
Mail Composer: knappar auto-bredd
============================================================================= */
#atlas-mail-composer .btn-modal-confirm {
width: 38px !important;
height: 38px !important;
flex: none !important;
padding: 0 !important;
}

#atlas-mail-tooltip {
background: var(--mail-tooltip-bg, rgba(18,18,28,0.97)) !important;
border-color: var(--mail-tooltip-border, rgba(255,255,255,0.12)) !important;
color: var(--mail-tooltip-text, #fff) !important;
box-shadow: var(--mail-tooltip-shadow, 0 4px 20px rgba(0,0,0,0.5)) !important;
}

#atlas-mail-tooltip span {
color: var(--mail-tooltip-muted, rgba(255,255,255,0.45)) !important;
}

#atlas-mail-tooltip span:first-child,
#atlas-mail-tooltip span[style*="font-weight:700"] {
color: var(--mail-tooltip-text, #fff) !important;
}

#atlas-mail-composer label[for="composer-file-input"],
#customer-mail-compose-modal label[for="cust-mail-file-input"],
#reader-upload-label,
#cust-reader-upload-label,
#btn-agent-upload-my {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--detail-accent, var(--accent-primary)) !important;
font-size: 0 !important;
line-height: 1 !important;
}

#atlas-mail-composer label[for="composer-file-input"] svg,
#customer-mail-compose-modal label[for="cust-mail-file-input"] svg,
#reader-upload-label svg,
#cust-reader-upload-label svg,
#btn-agent-upload-my svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
}

#atlas-mail-composer label[for="composer-file-input"]:hover,
#customer-mail-compose-modal label[for="cust-mail-file-input"]:hover,
#reader-upload-label:hover,
#cust-reader-upload-label:hover,
#btn-agent-upload-my:hover {
background: color-mix(in srgb, currentColor 9%, transparent) !important;
}

.qq-icon-btn {
width: 32px !important;
height: 30px !important;
min-width: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}

.qq-toolbar-actions .qq-icon-btn[hidden],
.qq-toolbar-actions .qq-icon-btn[aria-hidden="true"],
.qq-toolbar-actions .qq-icon-btn[style*="display:none"],
.qq-toolbar-actions .qq-icon-btn[style*="display: none"],
.qq-toolbar-actions .qq-save-btn[hidden],
.qq-toolbar-actions .qq-save-btn[aria-hidden="true"],
.qq-toolbar-actions .qq-save-btn[style*="display:none"],
.qq-toolbar-actions .qq-save-btn[style*="display: none"] {
display: none !important;
}

.qq-icon-btn svg {
width: 15px !important;
height: 15px !important;
stroke: currentColor !important;
}

.qq-admin-panel {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 0;
}

.qq-section-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.qq-title-block h4 {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-primary);
}

.qq-title-block h4 svg {
width: 15px;
height: 15px;
stroke: currentColor;
}

.qq-title-block span {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
opacity: 0.82;
}

.qq-status-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}

.qq-count-badge,
.qq-loading {
font-size: 11px;
line-height: 1;
color: var(--text-secondary);
opacity: 0.78;
white-space: nowrap;
}

/* 🔴 #315 (2026-08-18): knappen var en RAMAD TEXTKNAPP (mätt 66×30). Nu är den ett
   ikonlås enligt #78-kontraktet, och storleks-/ram-/bakgrundsdeklarationerna nedan var
   kvarlevor som slog med `!important` mot 32×32-regeln — utfallet blev 32×30.
   Kvar behålls ENDAST färgsignalen, som är knappens enda kvarvarande jobb här. */
#view-admin .qq-main-lock-btn {
color: var(--accent-primary) !important;
opacity: 1 !important;
}

#view-admin .qq-main-lock-btn.unlocked {
color: color-mix(in srgb, var(--status-warning, #f59e0b) 84%, var(--text-primary)) !important;
}

.qq-control-row,
.qq-add-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.qq-control-label {
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
opacity: 0.82;
}

.qq-count-btn {
min-width: 34px;
height: 30px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--border-color) 90%, var(--accent-primary) 8%);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

/* SEL-standard Fas 2: rå --accent-primary som text ersatt av golvad --sel-text.
   Plattan läggs som background-IMAGE ovanpå knappens egen opaka bakgrund —
   background-color skulle annars slå ut basens yta och göra aktiv knapp
   mörkare än de ovalda i flera teman. */
#view-admin .qq-count-btn.active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
color: var(--sel-text) !important;
}

.qq-count-btn.is-disabled {
cursor: not-allowed;
opacity: 0.58;
}

.qq-toolbar-actions {
display: flex;
align-items: center;
gap: 7px;
margin-left: auto;
}

.qq-save-btn {
white-space: nowrap !important;
}

.qq-add-input,
.qq-test-panel textarea {
width: 100%;
min-width: 0;
box-sizing: border-box;
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%) !important;
border: 1px solid color-mix(in srgb, var(--border-color) 88%, var(--accent-primary) 10%) !important;
border-radius: 9px !important;
color: var(--text-primary) !important;
outline: none;
}

.qq-add-input {
flex: 1;
height: 34px;
padding: 0 11px;
font-size: 12px;
}

.qq-candidate-panel .qq-test-heading {
align-items: center;
}

.qq-candidate-panel .qq-test-heading .qq-add-candidates-btn {
margin-left: auto;
}

#view-admin .qq-admin-panel .qq-add-candidates-btn:disabled,
#view-admin .qq-admin-panel .qq-add-candidates-btn[disabled] {
cursor: not-allowed;
opacity: 0.42;
}

.qq-candidate-row {
border-radius: 7px;
transition: background 0.15s, outline-color 0.15s;
}

.qq-candidate-row.is-selected {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
outline: 1px solid color-mix(in srgb, var(--accent-primary) 34%, transparent);
}

.qq-candidate-row input[type="checkbox"] {
accent-color: var(--accent-primary);
}

.qq-test-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 10px;
padding: 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--border-color) 86%, var(--accent-primary) 10%);
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%);
}

.qq-test-heading {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}

.qq-test-heading strong {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-primary);
}

.qq-test-heading span {
font-size: 10.5px;
line-height: 1.3;
color: var(--text-secondary);
opacity: 0.68;
}

.qq-test-panel textarea {
grid-column: 1;
min-height: 56px;
resize: vertical;
padding: 8px 10px;
font-size: 12px;
line-height: 1.4;
}

.qq-test-actions {
grid-column: 2;
display: flex;
flex-direction: column;
gap: 7px;
align-items: stretch;
}

.qq-test-actions .btn-glass-small {
min-height: 30px !important;
justify-content: center !important;
white-space: nowrap;
}

.qq-test-help {
grid-column: 1 / -1;
margin: -2px 0 0;
font-size: 10.5px;
line-height: 1.4;
color: var(--text-secondary);
opacity: 0.72;
}

.qq-test-result {
grid-column: 1 / -1;
padding: 10px 11px;
border-radius: 9px;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--accent-primary) 8%);
border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 20%);
}

.qq-test-result.is-loading {
color: var(--text-secondary);
}

.qq-test-result.is-error {
color: var(--status-danger, #ef4444);
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 38%, var(--border-color));
background: color-mix(in srgb, var(--status-danger, #ef4444) 9%, var(--bg-dark-secondary));
}

.qq-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}

.qq-empty {
padding: 10px 12px;
border-radius: 9px;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--text-secondary) 4%);
border: 1px dashed color-mix(in srgb, var(--border-color) 82%, var(--text-secondary) 18%);
color: var(--text-secondary);
font-size: 12px;
opacity: 0.78;
}

.qq-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
min-height: 38px;
padding: 7px 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--accent-primary) 15%);
border-radius: 9px;
background: color-mix(in srgb, var(--bg-dark-secondary) 91%, #ffffff 4%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.qq-row:nth-child(even) {
background: color-mix(in srgb, var(--bg-dark-secondary) 87%, var(--accent-primary) 5%);
}

.qq-row:hover {
border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-color));
}

.qq-row.is-recently-added {
border-color: color-mix(in srgb, var(--status-success, #22c55e) 62%, var(--border-color));
background: color-mix(in srgb, var(--status-success, #22c55e) 10%, var(--bg-dark-secondary));
}

.qq-row-summary {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
min-width: 0;
}

.qq-row-index {
font-size: 11px;
font-weight: 800;
text-align: right;
color: var(--text-secondary);
opacity: 0.78;
}

.qq-row-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.qq-row-text {
appearance: none;
background: none;
border: 0;
padding: 0;
min-width: 0;
text-align: left;
font: inherit;
font-size: 12px;
font-weight: 650;
line-height: 1.35;
color: var(--text-primary);
word-break: break-word;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}

.qq-row-text:hover {
color: var(--accent-primary);
}

.qq-row-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 6px;
color: var(--text-secondary);
transition: transform 0.15s, color 0.15s, background 0.15s;
flex: 0 0 auto;
}

.qq-row.is-expanded .qq-row-chevron {
transform: rotate(180deg);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
}

.qq-source-chip {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
width: fit-content;
max-width: 100%;
font-size: 10.5px;
line-height: 1.25;
color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent-primary));
}

.qq-source-chip svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
stroke: currentColor;
}

.qq-source-chip span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.qq-row-actions {
display: flex;
align-items: center;
gap: 4px;
}

.qq-test-row-btn,
.qq-row-action {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: transparent;
border: 0;
color: var(--text-secondary);
cursor: pointer;
transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.qq-test-row-btn {
color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary));
}

.qq-test-row-btn svg,
.qq-row-action svg {
width: 14px;
height: 14px;
stroke: currentColor;
}

.qq-row-action {
width: 28px;
height: 28px;
padding: 0;
font-size: 15px;
line-height: 1;
}

.qq-lock-action {
color: var(--qq-lock-color, var(--text-secondary));
}

.qq-remove-action {
font-size: 16px;
font-weight: 700;
}

.qq-test-row-btn:hover,
.qq-row-action:hover {
opacity: 1;
background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-dark-secondary));
color: var(--accent-primary);
}

.qq-row-action.is-disabled,
.qq-row-action:disabled {
cursor: not-allowed;
opacity: 0.66;
}

.qq-row.is-locked .qq-lock-action {
background: color-mix(in srgb, var(--qq-lock-color, var(--accent-primary)) 12%, transparent);
}

.qq-answer-preview {
margin: 8px 0 1px 37px;
padding: 10px 11px;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 6%);
border: 1px solid color-mix(in srgb, var(--border-color) 80%, var(--accent-primary) 12%);
}

.qq-answer-preview.is-loading,
.qq-answer-preview.is-idle,
.qq-answer-preview.is-missing {
color: var(--text-secondary);
}

.qq-answer-preview.is-error {
color: var(--status-danger, #ef4444);
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 38%, var(--border-color));
background: color-mix(in srgb, var(--status-danger, #ef4444) 9%, var(--bg-dark-secondary));
}

.atlas-light-theme #view-admin .qq-test-panel {
background: color-mix(in srgb, var(--accent-primary) 4%, #ffffff 82%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 18%, rgba(0,0,0,0.16)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
}

.atlas-light-theme #view-admin .qq-row {
background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 84%);
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(20,35,30,0.18));
box-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 5px 14px rgba(35,55,48,0.035);
}

.atlas-light-theme #view-admin .qq-row:nth-child(even) {
background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 80%);
}

.atlas-light-theme #view-admin .qq-add-input,
.atlas-light-theme #view-admin .qq-test-panel textarea,
.atlas-light-theme #view-admin .qq-count-btn {
background: color-mix(in srgb, var(--accent-primary) 4%, #ffffff 88%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(0,0,0,0.16)) !important;
}

/* SEL-standard Fas 2: ljus-override:en behövs fortfarande — men bara för att
   ÅTERSTÄLLA plattan, eftersom basens ljusa .qq-count-btn-regel ovan sätter
   background-shorthand med !important och därmed nollar background-image.
   Färgvärdena kommer nu från --sel-*, inte från en egen recept-kopia. */
.atlas-light-theme #view-admin .qq-count-btn.active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
}

.drift-logo-url-row {
/* admin-config-row är display:flex på rad — utan column hamnar förklarings-<p>
   som tredje flex-barn ovanpå logotyp-thumben och radera-ikonen */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
margin-bottom: 14px !important;
}

.drift-logo-url-row > label {
display: block !important;
margin-bottom: 5px !important;
font-size: 12px !important;
color: var(--text-secondary) !important;
}

.drift-logo-url-line {
display: grid !important;
grid-template-columns: minmax(420px, 1fr) auto !important;
gap: 8px !important;
align-items: center !important;
}

.drift-logo-url-line #drift-company-logo-url {
width: 100% !important;
min-width: 0 !important;
}

.drift-logo-actions {
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
}

.drift-logo-actions .admin-lock-btn:not(.admin-config-icon-btn),
.drift-logo-actions .btn-glass-small:not(.admin-config-icon-btn) {
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
white-space: nowrap !important;
}

.drift-logo-actions .admin-save-icon-btn:not(.admin-config-icon-btn) {
width: 30px !important;
padding: 0 !important;
}

.drift-logo-preview {
width: 84px !important;
height: 30px !important;
border-radius: 7px !important;
border: 1px solid rgba(255,255,255,0.12) !important;
background: rgba(255,255,255,0.045) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px 6px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}

.drift-logo-preview span {
color: var(--text-secondary) !important;
opacity: 0.45 !important;
font-size: 10px !important;
line-height: 1 !important;
text-align: center !important;
}

.drift-logo-url-row > p {
font-size: 11px !important;
color: var(--text-secondary) !important;
opacity: 0.55 !important;
margin: 5px 0 0 0 !important;
}

@media (max-width: 900px) {
.drift-logo-url-line {
grid-template-columns: 1fr !important;
}
.drift-logo-actions {
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
}

/* Nytt meddelande: behåll editorhöjden när mottagar-/agentläge växlar. */
#atlas-mail-composer #composer-body-container {
min-height: 0 !important;
}

#atlas-mail-composer #composer-message-row {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap .ql-container {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap .ql-editor {
flex: 1 1 auto !important;
min-height: 100px !important;
max-height: none !important;
overflow-y: auto !important;
}

#atlas-mail-composer #composer-agent-grid {
height: auto !important;
min-height: 0 !important;
max-height: min(168px, 24vh) !important;
align-items: start !important;
}

#atlas-mail-composer #composer-info-box {
min-height: 34px !important;
box-sizing: border-box !important;
}

/* Om-vyn: nedersta informationsraderna får bryta istället för att klämmas. */
.about-cell .info-item {
gap: 10px !important;
min-width: 0 !important;
}

.about-cell .info-item .info-label {
flex: 0 0 auto !important;
white-space: nowrap !important;
}

.about-cell .info-item span:last-child {
min-width: 0 !important;
overflow-wrap: anywhere !important;
text-align: right !important;
line-height: 1.3 !important;
}

.about-cell #about-user-info span:last-child {
white-space: normal !important;
}

/* Tvingar pointer-events active på templates-vy (override av eventuella audit-regler) */
#view-templates { pointer-events: auto !important; }
.template-editor-container {
min-height: 0 !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
overflow: hidden !important;
margin: var(--spacing-lg) !important;
background-color: var(--bg-frosty-content) !important;
border-radius: var(--border-radius-lg) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
outline: none !important;
}

/* =============================================================================
RESPONSIVE ADMIN OFFICES — SMÅSKÄRMAR (⩽1500px)
============================================================================= */

@media (max-width: 1500px) {
#office-detail-body {
gap: 15px !important;
padding: 18px !important;
}

#box-office-master .admin-danger-footer {
margin-bottom: -18px;
}

#office-detail-body .admin-office-detail-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}

}


/* =============================================================================
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;
}

/* ===================================================
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;
}

/* =============================================================================
Notifikationsklocka — Bell, Badge & Panel
============================================================================= */

/* Bell-knapp: ärver .header-button + position:relative för badge */
.notif-bell-btn {
position: relative !important;
order: 999 !important;
}

/* ═══════════════════════════════════════════
   NOTIFIKATIONSPANEL v2
═══════════════════════════════════════════ */

/* Badge-bubbla */
.notif-badge-bubble {
position: absolute;
top: -12px;
right: -12px;
min-width: 15px;
height: 15px;
padding: 0 4px;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary));
font-size: var(--text-badge-min-size);
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}

/* Panel */
#notif-panel {
position: fixed;
top: 72px;
right: 20px;
width: 400px;
max-height: 540px;
background: var(--notif-panel-bg, rgba(11, 9, 20, 0.97));
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px;
box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.45);
z-index: 8500;
display: flex;
flex-direction: column;
overflow: hidden;
animation: fadeIn 0.16s ease forwards;
will-change: transform;
isolation: isolate;
}

#notif-panel.notif-panel-keep-open {
z-index: 9500;
}

/* Electron: notispanelen kan ligga ovanpå .chat-header, som är window-drag-zon.
   Panelens egna kontroller måste alltid vinna klick och hover över draglagret. */
#notif-panel,
#notif-panel * {
-webkit-app-region: no-drag;
}

/* Panel-header */
.notif-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 0;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
padding-bottom: 0;
}

/* Flik-knappar */
.notif-tabs { display: flex; gap: 0; }
.notif-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: rgba(255,255,255,0.4);
font-size: 13px;
font-weight: 600;
padding: 8px 14px 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-tab:hover { color: rgba(255,255,255,0.72); }
/* SEL-standard Fas 2: notisflikarna använde RÅ --accent-primary som text
   (mättes 3,35-4,23:1 i nio av tio teman) och saknade platta helt (ΔL = 0 mot
   ovald flik i sex teman). Nu identiskt recept med huvudflikarna. */
.notif-tab.active {
color: var(--sel-text) !important;
border-bottom-color: var(--sel-edge) !important;
background: var(--sel-fill) !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.notif-tab:not(.active):hover {
background: var(--sel-fill-hover) !important;
}

/* Rensa-knapp */
.notif-clear-btn {
background: none;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 6px;
color: rgba(255,255,255,0.3);
font-size: 11px;
padding: 3px 9px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-bottom: 8px;
}
.notif-clear-btn:hover {
color: rgba(255,255,255,0.65);
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
}

.notif-history-tool-btn {
width: 28px;
height: 28px;
margin: 0 8px 8px auto;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.09);
background: none;
color: rgba(255,255,255,0.36);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* SEL-standard Fas 2: hover och aktiv var hopslagna och gav identiskt utseende
   (ingen skillnad mellan "kan klickas" och "är vald"). Nu: aktiv = full
   vald-markering, hover = den svagare hover-plattan. */
.notif-history-tool-btn.active {
color: var(--sel-text);
border-color: var(--sel-edge);
background: var(--sel-fill);
}

.notif-history-tool-btn:not(.active):hover {
color: var(--sel-text);
border-color: color-mix(in srgb, var(--sel-edge) 42%, transparent);
background: var(--sel-fill-hover);
}

.notif-ticket-history-panel {
position: absolute;
top: 50px;
right: 12px;
width: 300px;
max-height: 360px;
overflow-y: auto;
padding: 8px;
background: rgba(13, 11, 22, 0.98);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 16px 44px rgba(0,0,0,0.55);
z-index: 2;
}
.notif-ticket-history-row {
width: 100%;
border: 0;
background: transparent;
color: var(--text-primary);
display: grid;
grid-template-columns: 28px 1fr 14px;
gap: 9px;
align-items: center;
text-align: left;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
.notif-ticket-history-row:hover { background: rgba(255,255,255,0.055); }
.notif-ticket-history-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-primary, #7c5cbf);
background: color-mix(in srgb, var(--accent-primary, #7c5cbf) 12%, transparent);
}
.notif-ticket-history-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.notif-ticket-history-label {
font-size: 12px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-ticket-history-meta {
font-size: 10px;
color: rgba(255,255,255,0.38);
}

/* Tab-innehåll */
.notif-tab-content {
overflow-y: auto;
flex: 1;
padding: 4px 0 8px;
min-height: 0;
}
.notif-tab-content::-webkit-scrollbar { width: 3px; }
.notif-tab-content::-webkit-scrollbar-track { background: transparent; }
.notif-tab-content::-webkit-scrollbar-thumb { background: transparent; transition: background 0.2s; }
.notif-tab-content:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
max-width: min(320px, 80vw);
width: max-content;
padding: 8px 10px;
border-radius: 8px;
background: rgba(10, 9, 16, 0.98);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
color: rgba(255,255,255,0.82);
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translateY(3px);
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 10020;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translateY(0);
}

/* Datumseparator */
.notif-date-sep {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: rgba(255,255,255,0.2);
padding: 12px 16px 4px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Tom-state */
.notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.22);
font-size: 12px;
padding: 36px 20px;
gap: 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ikon-block (SVG i färgad cirkel) */
.notif-icon-block {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid;
margin-top: 1px;
}

/* Notis-rad */
.notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px 10px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.12s;
position: relative;
overflow: hidden;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.035); }

/* Oläst: accent-rand vänster */
.notif-unread {
border-left: 2px solid var(--accent-primary, #7c5cbf);
padding-left: 14px;
background: rgba(255,255,255,0.018);
}
.notif-unread .notif-item-text { color: rgba(255,255,255,0.9); }

/* Klickbar: cursor-pointer satt via inline-style i JS */
.notif-history-clickable:hover .notif-item-text { color: rgba(255,255,255,0.85); }

/* Text-block */
.notif-item-body {
flex: 1;
min-width: 0;
}
.notif-item-text {
display: block;
font-size: 12.5px;
color: rgba(255,255,255,0.58);
line-height: 1.48;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
word-break: break-word;
}

/* Tid + pil-rad */
.notif-item-meta {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
}
.notif-item-time {
font-size: 10.5px;
color: rgba(255,255,255,0.24);
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-open-arrow {
color: rgba(255,255,255,0.18);
flex-shrink: 0;
transition: color 0.15s;
}
.notif-history-clickable:hover .notif-open-arrow { color: rgba(255,255,255,0.5); }

/* Dismiss-knapp — visas vid hover på raden */
.notif-item-dismiss {
opacity: 0;
width: 22px;
height: 22px;
border-radius: 5px;
border: none;
background: none;
color: rgba(255,255,255,0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.15s, background 0.15s, color 0.15s;
flex-shrink: 0;
align-self: flex-start;
margin-top: 6px;
padding: 0;
}
.notif-item:hover .notif-item-dismiss { opacity: 1; }
.notif-item-dismiss:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.75);
}

/* Premium admin controls: subtle semantic states and icon-only destructive buttons. */
#view-admin .status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
box-shadow: none !important;
}
#view-admin .status-pill.is-active {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-success, #22c55e) 32%, transparent) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 82%, var(--text-primary, #fff)) !important;
}
#view-admin .status-pill.is-inactive {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-danger, #ef4444) 28%, transparent) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 78%, var(--text-primary, #fff)) !important;
opacity: 1 !important;
}
body.atlas-light-theme #view-admin .status-pill.is-active {
color: color-mix(in srgb, var(--status-success, #22c55e) 43%, #000) !important;
}
body.atlas-light-theme #view-admin .status-pill.is-inactive {
color: color-mix(in srgb, var(--status-danger, #ef4444) 43%, #000) !important;
}
#view-admin .status-pill.is-warning {
background: color-mix(in srgb, var(--status-warning, #ff9f0a) 12%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-warning, #ff9f0a) 34%, transparent) !important;
color: color-mix(in srgb, var(--status-warning, #ff9f0a) 78%, var(--text-primary, #fff)) !important;
}
#view-admin .admin-effective-reason {
min-width: 180px;
flex: 1 1 240px;
color: var(--text-secondary);
font-size: var(--text-micro-size);
line-height: 1.45;
}
#view-admin .admin-lock-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}
#view-admin .admin-lock-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
#view-admin .widget-install-actions .admin-lock-btn svg {
width: 16px;
height: 16px;
}
#view-admin button[id^="kb-delete-"] {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 72%, var(--text-secondary, #fff)) !important;
box-shadow: none !important;
font-size: 0 !important;
}
#view-admin button[id^="kb-delete-"] svg {
width: 15px;
height: 15px;
fill: currentColor !important;
stroke: none !important;
}
#view-admin button[id^="kb-delete-"]:hover {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
color: var(--status-danger, #ef4444) !important;
}

/* Chatt/mail-typspill i notis-text */
.notif-type-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-badge-min-size);
font-weight: 700;
border-radius: 4px;
padding: 1px 5px;
letter-spacing: 0.4px;
vertical-align: middle;
margin-left: 5px;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-type-chat {
background: rgba(90, 200, 250, 0.12);
color: #5ac8fa;
border: 1px solid rgba(90, 200, 250, 0.22);
}
.notif-type-mail {
background: rgba(77, 184, 255, 0.12);
color: #4db8ff;
border: 1px solid rgba(77, 184, 255, 0.22);
}
/* Internt ärende — gul signalfärg (samma som ärendekorten) */
.notif-type-internal {
background: rgba(255, 214, 10, 0.12);
color: #ffd60a;
border: 1px solid rgba(255, 214, 10, 0.25);
}
/* Typspillet sitter nu i meta-raden (tid · typ · pil) — gap sköter avståndet */
.notif-item-meta .notif-type-pill { margin-left: 1px; }

/* =============================================================================
PREMIUM LOGIN SCREEN  (.ln-* prefix = login namespace)
============================================================================= */

.ln-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 22%, rgba(0,212,180,0.09) 0%, transparent 66%),
linear-gradient(160deg, rgba(6,9,15,0.88) 0%, rgba(6,10,18,0.94) 52%, rgba(4,8,15,0.98) 100%),
var(--bg-image);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
z-index: 99998;
overflow: hidden;
padding: clamp(18px, 4vh, 42px);
box-sizing: border-box;
}

.ln-blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(80px);
}
.ln-blob1 {
width: 400px; height: 400px;
top: -100px; left: -100px;
background: radial-gradient(circle, rgba(0,212,180,0.05) 0%, transparent 70%);
}
.ln-blob2 {
width: 350px; height: 350px;
bottom: -80px; right: -60px;
background: radial-gradient(circle, rgba(0,100,255,0.04) 0%, transparent 70%);
}

.ln-card {
width: min(372px, calc(100vw - 42px));
max-width: 92vw;
background: linear-gradient(160deg, #0d1422 0%, #080c14 55%, #0a0e1a 100%);
border-radius: 26px;
border: 1px solid rgba(0,212,180,0.12);
box-shadow:
0 32px 90px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.03),
inset 0 1px 0 rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
padding: 34px 0 26px;
animation: lnCardIn 0.55s cubic-bezier(0.34, 1.52, 0.64, 1) both;
}

html.atlas-light-theme #login-modal .ln-card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}

html.atlas-light-theme #login-modal .ln-input {
transition: none !important;
}

@keyframes lnCardIn {
from { opacity: 0; transform: scale(0.82) translateY(16px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ln-card-glow {
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(0,212,180,0.07) 0%, transparent 68%);
pointer-events: none;
}

/* Logo */
.ln-logo-wrap {
position: relative;
width: 100px; height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 16px;
}
.ln-ring-pulse {
position: absolute;
inset: -12px;
border-radius: 50%;
border: 1.5px solid rgba(0,212,180,0.32);
box-shadow:
0 0 26px rgba(0,212,180,0.12),
inset 0 0 18px rgba(0,212,180,0.06);
animation: lnRingPulse 2.8s ease-in-out infinite;
}
.ln-ring-pulse.ln-delay {
inset: -22px;
border-color: rgba(0,212,180,0.14);
animation-delay: 0.7s;
}
@keyframes lnRingPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50%       { opacity: 1;   transform: scale(1.03); }
}
.ln-ring-spin {
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: #00d4b4;
border-right-color: rgba(0,212,180,0.2);
filter: drop-shadow(0 0 8px rgba(0,212,180,0.45));
animation: lnSpin 1.8s linear infinite;
}
@keyframes lnSpin { to { transform: rotate(360deg); } }

.ln-logo-circle {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(145deg, #101826, #070b11);
border: 1.5px solid rgba(0,212,180,0.18);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden;
}
.ln-logo-wrap.tenant-logo-mode {
width: 110px;
height: 100px;
margin-bottom: 18px;
}
.ln-logo-wrap.tenant-logo-mode ~ .ln-app-name {
display: none !important;
}
.ln-logo-circle.has-tenant-logo {
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle at 50% 42%, rgba(0,212,180,0.12) 0%, rgba(7,11,17,0.86) 58%, #060a10 100%);
box-shadow:
0 16px 34px rgba(0,0,0,0.34),
0 0 0 1px rgba(0,212,180,0.2),
0 0 30px rgba(0,212,180,0.14);
padding: 6px;
box-sizing: border-box;
}
.ln-logo-img {
width: 54px; height: 54px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0,212,180,0.5));
animation: lnLogoPulse 3s ease-in-out infinite;
}
.ln-logo-circle.has-tenant-logo .ln-logo-img {
width: 100%;
height: 100%;
filter:
drop-shadow(0 0 10px rgba(255,255,255,0.18))
drop-shadow(0 0 14px rgba(0,212,180,0.28));
animation: none;
opacity: 1;
}
@keyframes lnLogoPulse {
0%, 100% { filter: drop-shadow(0 0 8px  rgba(0,212,180,0.45)); }
50%       { filter: drop-shadow(0 0 18px rgba(0,212,180,0.75)); }
}
.ln-logo-fallback {
display: none;
font-size: 26px;
font-weight: 900;
letter-spacing: 4px;
color: #fff;
text-shadow: 0 0 16px rgba(0,212,180,0.7);
}

/* Text */
.ln-app-name {
font-size: 17px;
font-weight: 800;
letter-spacing: 6px;
color: #ffffff;
text-shadow: 0 0 24px rgba(0,212,180,0.35);
margin-bottom: 4px;
}
.ln-tagline {
font-size: var(--text-badge-min-size);
letter-spacing: 2.5px;
color: rgba(0,212,180,0.5);
text-transform: uppercase;
margin-bottom: 20px;
}
.ln-tagline.tenant-brand {
width: 230px;
max-width: 86%;
font-size: 10.5px;
line-height: 1.35;
letter-spacing: 0.8px;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
color: rgba(0,212,180,0.72);
margin-bottom: 14px;
}

/* "Logga in för att fortsätta"-prompt */
.ln-prompt {
display: none;
}

/* Divider */
.ln-divider {
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,180,0.18), transparent);
margin-bottom: 14px;
}

/* Form */
.ln-form {
width: 100%;
box-sizing: border-box;
max-width: 286px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ln-field { position: relative; }
.ln-field-icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: rgba(255,255,255,0.48);
pointer-events: none;
}
#login-modal .ln-input,
#login-form .ln-input {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
height: 40px;
line-height: 40px;
padding: 0 12px 0 52px !important;
color: rgba(255,255,255,0.9);
font-size: 12px;
font-family: inherit;
letter-spacing: 0.2px;
outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ln-input::placeholder { color: rgba(255,255,255,0.48); font-size: 11.5px; }
.ln-input:-webkit-autofill,
.ln-input:-webkit-autofill:hover,
.ln-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #0d1422 inset !important;
-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.ln-input:focus {
border-color: rgba(0,212,180,0.4);
background: rgba(0,212,180,0.05);
box-shadow: 0 0 0 3px rgba(0,212,180,0.08);
}

/* Felmeddelande */
.ln-error {
font-size: 10px;
color: #ff6b6b;
min-height: 0;
height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.2s ease;
text-align: center;
}
.ln-error.visible {
height: auto;
min-height: 14px;
opacity: 1;
}

.ln-company-name {
min-height: 14px;
margin: -2px 0 -2px;
font-size: 10.5px;
line-height: 1.2;
letter-spacing: 0.8px;
text-align: center;
text-transform: uppercase;
color: rgba(0,212,180,0.72);
white-space: normal;
overflow-wrap: anywhere;
}
.ln-company-name:empty {
display: none;
}

/* Knapp */
.ln-btn {
display: block;
width: 100%;
max-width: 240px;
height: 36px;
background: linear-gradient(135deg, #00b89d 0%, #00d4b4 100%) !important;
border: none !important;
border-radius: 10px;
color: #040d12 !important;
font-weight: 700;
font-size: 12px;
letter-spacing: 1.5px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: opacity 0.2s, transform 0.15s;
margin: 2px auto 0;
text-transform: uppercase;
}
.ln-btn:hover  { opacity: 0.88; }
.ln-btn:active  { transform: scale(0.98); }
.ln-btn:disabled {
opacity: 0.28;
cursor: not-allowed;
}
.ln-btn-shimmer {
position: absolute;
top: 0; left: -80px;
width: 50px; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
animation: lnShimmer 2.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes lnShimmer {
0%   { left: -80px; opacity: 0; }
30%  { opacity: 1; }
100% { left: 110%; opacity: 0; }
}

/* Progress-rad + "Redo." — visuell statusindikator under login-knappen */
.ln-progress-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-top: 6px;
}
.ln-progress-bar {
width: 100%;
max-width: 160px;
height: 2px;
background: linear-gradient(90deg, rgba(0,212,180,0.65), rgba(0,212,180,0.35));
border-radius: 1px;
}
.ln-progress-bar::after {
content: none;
}
.ln-progress-label {
font-size: var(--text-badge-min-size);
color: rgba(255,255,255,0.44);
letter-spacing: 1.5px;
}

/* Footer */
.ln-version {
font-size: var(--text-badge-min-size);
color: rgba(255,255,255,0.3);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 22px;
margin-bottom: 4px;
}
.ln-dots { display: flex; gap: 7px; margin-top: 10px; }
.ln-dot  { width: 6px; height: 6px; border-radius: 50%; }
.ln-dot.ln-red    { background: #ff3b30; box-shadow: 0 0 6px rgba(255,59,48,0.7); }
.ln-dot.ln-yellow { background: #ffd60a; box-shadow: 0 0 6px rgba(255,214,10,0.7); }
.ln-dot.ln-green  { background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,0.7); }

body.capacitor-client .ln-overlay {
align-items: stretch;
padding: 0;
background:
radial-gradient(ellipse 95% 52% at 50% 14%, rgba(0,212,180,0.14) 0%, transparent 68%),
linear-gradient(180deg, rgba(7,12,20,0.98) 0%, rgba(6,10,18,0.98) 56%, rgba(3,7,13,1) 100%),
var(--bg-image);
background-position: center;
background-size: cover;
}

body.capacitor-client .ln-blob {
display: none;
}

body.capacitor-client .ln-card {
width: 100%;
max-width: none;
min-height: 100dvh;
border-radius: 0;
border: 0;
border-top: 3px solid rgba(0,212,180,0.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
justify-content: center;
padding: max(34px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
}

body.capacitor-client .ln-logo-wrap {
width: 124px;
height: 118px;
margin-top: 0;
margin-bottom: 18px;
}

body.capacitor-client .ln-logo-wrap.tenant-logo-mode {
width: 132px;
height: 124px;
}

body.capacitor-client .ln-ring-pulse {
inset: -18px;
}

body.capacitor-client .ln-ring-pulse.ln-delay {
inset: -31px;
}

body.capacitor-client .ln-ring-spin {
inset: -8px;
border-width: 3px;
}

body.capacitor-client .ln-logo-circle,
body.capacitor-client .ln-logo-circle.has-tenant-logo {
width: 100px;
height: 100px;
}

body.capacitor-client .ln-form {
max-width: 328px;
}

body.capacitor-client .ln-version {
margin-top: 28px;
}

/* === ADMIN SCROLL: en primär scroll-yta i detaljvyn === */
#admin-detail-content .detail-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
padding-bottom: 0 !important;
}

#admin-detail-content .detail-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: auto;
}

/* === SYSTEMKONFIG: Webbplats-widget === */
.widget-install-body {
display: block;
}

.widget-install-panel {
margin-top: 18px;
padding: 16px;
border-radius: 8px;
background: rgba(255,255,255,0.032);
border: 1px solid rgba(255,255,255,0.08);
}

.widget-preview-frame {
display: flex;
align-items: center;
min-height: 76px;
margin-bottom: 14px;
padding: 12px;
border-radius: 8px;
background: rgba(255,255,255,0.028);
border: 1px dashed rgba(255,255,255,0.10);
}

.widget-preview-frame.is-left {
justify-content: flex-start;
}

.widget-preview-frame.is-right {
justify-content: flex-end;
}

.widget-preview-bubble {
display: inline-flex;
align-items: center;
gap: 8px;
height: 52px;
max-width: 100%;
padding: 0 20px 0 16px;
border: none;
border-radius: 26px;
background: var(--widget-preview-bg, #1a56db) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
cursor: default;
user-select: none;
}

.widget-preview-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}

.widget-preview-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

.widget-install-controls {
display: grid;
grid-template-columns: 140px minmax(0, 1fr) 150px;
gap: 12px;
align-items: end;
margin-bottom: 12px;
}

.widget-install-controls label {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}

.widget-install-controls label span {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-secondary);
}

.widget-install-color {
width: 100%;
height: 36px;
padding: 2px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.05);
cursor: pointer;
}

.widget-install-label {
width: 100%;
height: 36px;
}

.widget-install-position {
width: 100%;
height: 36px;
}

.widget-snippet-code {
margin: 0;
min-height: 72px;
max-width: 100%;
padding: 14px;
border-radius: 8px;
border: 1px solid rgba(96,165,250,0.24);
background: rgba(4,12,24,0.58);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}

.widget-snippet-code code {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.90);
}

.widget-install-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}

#view-admin .admin-lock-btn.widget-install-primary {
border-color: rgba(96,165,250,0.45);
color: #bfdbfe;
background: rgba(59,130,246,0.14);
}

body.atlas-light-theme #view-admin .widget-install-panel .admin-lock-btn.widget-install-primary {
border-color: color-mix(in srgb, var(--accent-primary, #047857) 72%, #000) !important;
color: #fff !important;
background: color-mix(in srgb, var(--accent-primary, #047857) 72%, #000) !important;
}

body.atlas-light-theme #view-admin .widget-install-panel .admin-lock-btn.widget-install-primary svg {
color: #fff !important;
}

.widget-demo-link {
text-decoration: none;
display: inline-flex;
align-items: center;
}

.widget-platform-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}

.widget-platform-steps > div {
padding: 13px 14px;
border-radius: 8px;
background: rgba(255,255,255,0.028);
border: 1px solid rgba(255,255,255,0.07);
}

.widget-platform-steps strong,
.widget-platform-steps span {
display: block;
}

.widget-platform-steps strong {
font-size: 12px;
color: rgba(255,255,255,0.90);
margin-bottom: 6px;
}

.widget-platform-steps span {
font-size: 12px;
line-height: 1.48;
color: rgba(255,255,255,0.66);
}

@media (max-width: 700px) {
.widget-install-controls,
.widget-platform-steps {
grid-template-columns: 1fr;
}

.widget-install-actions {
align-items: stretch;
}

.widget-install-actions > * {
justify-content: center;
}
}

/* === ADMIN TJÄNSTER & PAKET === */
.catalog-active-vehicles-panel {
position: relative;
margin: 0;
padding: 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(255,255,255,0.025);
}

.catalog-duration-variance-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: var(--text-small-size);
color: var(--text-secondary);
}

#view-admin .catalog-duration-variance-pill {
min-width: 72px;
height: 24px;
padding: 0 10px;
font-size: 11px;
font-weight: 800;
line-height: 1;
cursor: pointer !important;
}

#view-admin .catalog-duration-variance-pill:disabled {
opacity: 1;
cursor: default !important;
}

#view-admin .catalog-duration-variance-pill:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 70%, transparent);
outline-offset: 2px;
}

/* Patriks begäran 2026-09-16: denna pill har omvänd färgsemantik mot övriga status-pills —
   "Samma" (is-inactive) ska vara grön (det normala/enkla läget), "Varierar" (is-active) röd
   (kräver mer admin-arbete per enhet). Override:as här specifikt, rör INTE delade
   .status-pill.is-active/.is-inactive-reglerna ovan som andra togglar använder. */
#view-admin .catalog-duration-variance-pill.is-active {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 28%, transparent) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 78%, var(--text-primary, #fff)) !important;
}

#view-admin .catalog-duration-variance-pill.is-inactive {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
border-color: color-mix(in srgb, var(--status-success, #22c55e) 32%, transparent) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 82%, var(--text-primary, #fff)) !important;
}

body.atlas-light-theme #view-admin .catalog-duration-variance-toggle {
color: color-mix(in srgb, var(--text-secondary) 84%, #000);
}

body.atlas-light-theme #view-admin .catalog-duration-variance-pill.is-active {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, #fff) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 36%, #000) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 43%, #000) !important;
}

body.atlas-light-theme #view-admin .catalog-duration-variance-pill.is-inactive {
background: color-mix(in srgb, var(--status-success, #22c55e) 18%, #fff) !important;
border-color: color-mix(in srgb, var(--status-success, #22c55e) 44%, #000) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 43%, #000) !important;
}
.catalog-active-vehicles-panel.is-list-panel {
margin: 10px 10px 12px;
}
.catalog-active-vehicles-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
padding-right: 104px;
}
.catalog-active-vehicles-heading h4 {
margin: 0 0 3px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--accent-primary);
}
.catalog-active-vehicles-heading p,
.drift-active-vehicles-summary p {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
opacity: 0.62;
}
.catalog-active-vehicles-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.catalog-active-vehicles-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card {
position: relative;
padding: 7px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
background: rgba(255,255,255,0.025);
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 70%, transparent);
outline-offset: 2px;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card.is-active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel-edge) 10%, transparent), 0 10px 24px rgba(0,0,0,0.08);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card.is-inactive {
background: rgba(239,68,68,0.045);
border-color: rgba(239,68,68,0.18);
}
.catalog-active-vehicle-btn {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 8px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
background: rgba(255,255,255,0.035);
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
cursor: not-allowed;
transition: background 0.18s, border-color 0.18s, opacity 0.18s, box-shadow 0.18s;
}
.catalog-active-vehicle-btn.is-active {
background: var(--sel-fill);
border-color: var(--sel-edge);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sel-edge) 10%, transparent) inset;
opacity: 1;
color: var(--sel-text);
}
.catalog-active-vehicle-btn.is-inactive {
background: rgba(239,68,68,0.08);
border-color: rgba(239,68,68,0.24);
color: color-mix(in srgb, var(--status-danger, #ef4444) 72%, var(--text-secondary, #fff));
opacity: 1;
}
.catalog-active-vehicle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.catalog-active-vehicle-icon svg {
width: 24px;
height: 24px;
display: block;
}
.catalog-active-vehicle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.catalog-active-vehicles-grid[data-locked="false"] .catalog-active-vehicle-btn {
cursor: pointer;
}
.catalog-active-vehicles-grid .vehicle-coverage-details {
min-height: 0;
font-size: var(--text-badge-min-size);
line-height: 1.25;
text-align: center;
}
.catalog-active-vehicles-grid .vehicle-coverage-facts {
align-items: center;
gap: 1px;
}
.catalog-active-vehicles-grid .vehicle-coverage-warning {
font-size: var(--text-badge-min-size);
line-height: 1.25;
padding: 3px 4px;
text-align: center;
}
.catalog-active-vehicle-popover {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
width: max-content;
max-width: min(260px, 78vw);
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
border-radius: 8px;
background: color-mix(in srgb, #0a0910 96%, var(--accent-primary, #93c5fd) 4%);
box-shadow: 0 12px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.035);
color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary));
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: left;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 4px);
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 10020;
}
.catalog-active-vehicle-popover strong {
display: block;
margin-bottom: 5px;
color: var(--accent-primary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.catalog-active-vehicle-popover ul {
max-height: 260px;
margin: 0;
padding: 0 0 0 14px;
overflow: auto;
}
.catalog-active-vehicle-popover li {
margin: 0 0 3px;
padding: 0;
}
.catalog-active-vehicle-popover p {
margin: 0;
color: var(--text-secondary);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child .catalog-active-vehicle-popover {
left: 0;
right: auto;
transform: translate(0, 4px);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child .catalog-active-vehicle-popover {
left: auto;
right: 0;
transform: translate(0, 4px);
}
.catalog-active-vehicle-popover::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 8px;
}
.catalog-active-vehicle-card:hover .catalog-active-vehicle-popover,
.catalog-active-vehicle-card:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicle-card:focus-visible .catalog-active-vehicle-popover {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:hover .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:focus-visible .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:hover .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:focus-visible .catalog-active-vehicle-popover {
transform: translate(0, 0);
}
.catalog-feature-group {
padding: 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.catalog-feature-card {
justify-content: space-between;
/* --accent-primary = agentens profilfärg (sätts på documentElement vid inloggning
   och livesyncas vid färgbyte) — ingen hårdkodad blå (IRL-fynd A14 2026-06-10) */
border-left: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 45%, transparent);
}
.catalog-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.catalog-guide-card {
padding: 11px 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(255,255,255,0.025);
min-width: 0;
}
.catalog-guide-card strong {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 5px;
}
.catalog-guide-card p {
margin: 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-secondary);
opacity: 0.68;
}
.catalog-vehicle-group {
padding: 0 10px 10px;
}
.catalog-vehicle-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 4px 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--text-secondary);
}
.catalog-vehicle-heading span {
opacity: 0.5;
}
.catalog-vehicle-heading-main,
.catalog-vehicle-tools {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.catalog-vehicle-heading-main {
flex-wrap: wrap;
}
.catalog-vehicle-tools,
.catalog-vehicle-name {
opacity: 1 !important;
flex-shrink: 0;
}
.catalog-vehicle-tools {
gap: 10px;
}
.catalog-group-heading.is-active,
.catalog-vehicle-heading.is-active {
border-left: 2px solid rgba(52, 199, 89, 0.4);
padding-left: 6px;
}
.catalog-group-heading.is-inactive,
.catalog-vehicle-heading.is-inactive {
border-left: 2px solid rgba(255, 59, 48, 0.45);
padding-left: 6px;
}
.catalog-vehicle-publish-status.is-inactive {
display: none;
}
.catalog-vehicle-coverage-warning {
color: var(--warning-text);
font-size: var(--text-badge-min-size);
letter-spacing: 0;
white-space: nowrap;
}
.catalog-vehicle-add-btn {
background: none;
border: none;
color: rgba(0,210,100,0.65);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
opacity: 1;
}
.catalog-vehicle-add-btn:hover {
color: rgba(0,210,100,1);
}
#view-admin .catalog-list-card {
justify-content: space-between;
}

.catalog-campaign-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
margin-bottom: 12px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(255,255,255,0.10));
border-radius: 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 6%, rgba(255,255,255,0.035)), rgba(255,255,255,0.025));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.catalog-campaign-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.catalog-campaign-heading > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.catalog-campaign-heading .catalog-list-section-label-text {
display: inline-flex;
align-items: center;
gap: 7px;
color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-primary));
}

.campaign-heading-icon,
.campaign-list-meta span,
.campaign-create-btn,
.campaign-icon-btn,
.campaign-modal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}

.campaign-heading-icon {
width: 18px;
height: 18px;
}

.campaign-heading-icon svg {
width: 15px;
height: 15px;
}

.catalog-campaign-heading small {
color: var(--text-secondary);
font-size: 11px;
}

.campaign-create-btn {
gap: 6px;
white-space: nowrap;
border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
background: color-mix(in srgb, var(--accent-primary) 9%, rgba(255,255,255,0.04));
color: color-mix(in srgb, var(--accent-primary) 72%, var(--text-primary));
}

.campaign-create-btn svg {
width: 14px;
height: 14px;
}

.campaign-create-icon-btn {
width: 32px;
height: 32px;
padding: 0;
flex: 0 0 auto;
border: none;
}

.campaign-create-icon-btn svg {
width: 16px;
height: 16px;
}

.campaign-summary-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px;
cursor: pointer;
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 72%, transparent);
background: color-mix(in srgb, var(--bg-dark-secondary) 72%, rgba(255,255,255,0.045)) !important;
}

/* SEL-standard Fas 2: hover och vald var hopslagna → vald gick inte att skilja
   från "muspekaren råkar vara här". Nu: vald = --sel-fill + accentkant,
   hover = den svagare hover-plattan. */
/* Plattan som background-IMAGE ovanpå kortets egen opaka yta — se motiveringen
   vid .admin-sysconfig-nav-item.active i style-modals.css. */
#view-admin .campaign-summary-card.active {
border-color: var(--sel-edge) !important;
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
color: var(--sel-text) !important;
}

#view-admin .campaign-summary-card:not(.active):hover {
border-color: color-mix(in srgb, var(--sel-edge) 44%, rgba(255,255,255,0.10)) !important;
background-image: linear-gradient(0deg, var(--sel-fill-hover), var(--sel-fill-hover)) !important;
}

.campaign-list {
display: flex;
flex-direction: column;
gap: 8px;
}

#view-admin .campaign-list-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 72%, transparent);
background: color-mix(in srgb, var(--bg-dark-secondary) 72%, rgba(255,255,255,0.045)) !important;
}

#view-admin .campaign-list-card.is-upcoming {
border-left-color: color-mix(in srgb, var(--text-primary) 42%, var(--accent-primary));
}

#view-admin .campaign-list-card.is-expired,
#view-admin .campaign-list-card.is-inactive {
opacity: 0.72;
border-left-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
}

.campaign-list-main {
appearance: none;
border: 0;
background: transparent;
color: inherit;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 0;
text-align: left;
cursor: pointer;
}

.campaign-list-title,
.campaign-list-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.campaign-list-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}

.campaign-list-meta {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 2px;
min-width: 0;
color: var(--text-secondary);
font-size: 11px;
}

.campaign-list-meta span {
gap: 4px;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.campaign-list-meta svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
opacity: 0.75;
}

.campaign-list-description {
color: var(--text-secondary);
font-size: 11px;
opacity: 0.78;
}

.campaign-list-side {
display: flex;
align-items: center;
flex-direction: row;
gap: 6px;
min-width: 0;
}

.campaign-list-actions {
display: flex;
align-items: center;
gap: 4px;
}

.campaign-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
padding: 4px 7px;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
background: rgba(255,255,255,0.035);
color: var(--text-primary);
font-size: 10px;
font-weight: 700;
line-height: 1;
}

.campaign-status-badge.is-active {
border-color: color-mix(in srgb, var(--accent-primary) 48%, transparent);
background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
color: color-mix(in srgb, var(--accent-primary) 86%, var(--text-primary));
}

.campaign-status-badge.is-upcoming {
color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary));
}

.campaign-status-badge.is-expired,
.campaign-status-badge.is-inactive {
color: var(--text-secondary);
}

.campaign-icon-btn {
width: 24px;
height: 24px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.campaign-icon-btn svg {
width: 15px;
height: 15px;
}

.campaign-icon-btn:hover {
color: var(--accent-primary);
background: transparent;
transform: translateY(-1px);
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-primary) 40%, transparent));
}

.campaign-icon-btn.is-danger:hover {
color: var(--status-danger, #ef4444);
background: transparent;
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--status-danger, #ef4444) 40%, transparent));
}

.catalog-campaign-empty {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 12px;
border: 1px dashed color-mix(in srgb, var(--text-secondary) 24%, transparent);
border-radius: 8px;
color: var(--text-secondary);
background: rgba(255,255,255,0.025);
}

.catalog-campaign-empty strong {
color: var(--text-primary);
font-size: 12px;
}

.catalog-campaign-empty small {
font-size: 11px;
}

.catalog-campaign-empty.is-error {
color: var(--status-danger, #ef4444);
}

.campaign-detail-view .detail-body {
gap: 14px;
}

.campaign-detail-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, rgba(255,255,255,0.08));
border-radius: 8px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 9%, rgba(255,255,255,0.035)), rgba(255,255,255,0.02));
}

.campaign-detail-hero-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.campaign-detail-hero h3 {
margin: 0;
font-size: 15px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--accent-primary);
}

.campaign-detail-hero p {
margin: 4px 0 0;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}

.campaign-detail-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}

.campaign-detail-stats span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent);
border-radius: 8px;
background: rgba(255,255,255,0.025);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
text-align: center;
}

.campaign-detail-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
align-items: stretch;
}

.campaign-detail-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 76%, rgba(255,255,255,0.035));
min-width: 0;
}

.campaign-detail-card.is-expired,
.campaign-detail-card.is-inactive {
opacity: 0.74;
border-left-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
}

.campaign-detail-main {
appearance: none;
border: 0;
background: transparent;
color: inherit;
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
padding: 0;
text-align: left;
cursor: pointer;
}

.campaign-detail-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}

.campaign-detail-title-row strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: var(--text-primary);
}

.campaign-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
color: var(--text-secondary);
font-size: 11px;
}

.campaign-detail-meta span,
.campaign-detail-actions {
display: inline-flex;
align-items: center;
gap: 5px;
}

.campaign-detail-meta svg {
width: 12px;
height: 12px;
opacity: 0.75;
}

.campaign-detail-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-secondary);
font-size: 11px;
line-height: 1.45;
}

.campaign-detail-url {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: color-mix(in srgb, var(--accent-primary) 74%, var(--text-primary));
font-size: 10px;
}

.campaign-detail-actions {
align-self: start;
gap: 6px;
}

#atlas-campaign-modal .campaign-modal-box {
width: min(620px, 94vw) !important;
max-width: 94vw !important;
max-height: min(84vh, 720px) !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
border-top: 3px solid var(--accent-primary) !important;
background: color-mix(in srgb, var(--bg-frosty-content, rgba(13,16,28,0.94)) 88%, #ffffff 3%) !important;
}

#atlas-campaign-modal .glass-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px 14px;
margin: 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent);
flex: 0 0 auto;
}

.campaign-modal-title-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.campaign-modal-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 42%, rgba(255,255,255,0.16));
background: color-mix(in srgb, var(--accent-primary) 14%, rgba(255,255,255,0.04));
color: var(--accent-primary);
}

.campaign-modal-icon svg {
width: 19px;
height: 19px;
}

#atlas-campaign-modal .glass-modal-header h3 {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 14px !important;
line-height: 1.2 !important;
letter-spacing: 0.5px !important;
color: var(--accent-primary) !important;
}

.campaign-modal-title-row small {
display: block;
margin-top: 4px;
font-size: 11px;
line-height: 1.35;
font-weight: 500;
color: var(--text-secondary);
text-transform: none;
letter-spacing: 0;
}

.campaign-modal-close {
width: 32px;
height: 32px;
color: var(--text-secondary);
}

#atlas-campaign-modal .campaign-modal-body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 20px 14px;
overflow-y: auto;
min-height: 0;
flex: 1 1 auto;
}

#atlas-campaign-modal .catalog-field span {
color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

#atlas-campaign-modal .filter-input {
margin-bottom: 0 !important;
border-color: color-mix(in srgb, var(--text-primary) 16%, transparent) !important;
background: rgba(0, 0, 0, 0.28) !important;
}

#atlas-campaign-modal .filter-input:focus {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent) !important;
background: rgba(0, 0, 0, 0.36) !important;
}

#atlas-campaign-modal .campaign-modal-box.is-readonly .filter-input[readonly],
#atlas-campaign-modal .campaign-modal-box.is-readonly select.filter-input:disabled {
opacity: 1 !important;
color: var(--text-primary) !important;
cursor: default !important;
}

#atlas-campaign-modal .campaign-modal-box.is-readonly .campaign-toggle-row,
#atlas-campaign-modal .campaign-modal-box.is-readonly .campaign-toggle-row input {
cursor: default !important;
}

.campaign-description-input {
min-height: 116px;
line-height: 1.45;
resize: vertical;
}

.campaign-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.campaign-toggle-row {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
position: relative;
min-height: 38px;
padding: 6px 2px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.campaign-toggle-row:hover {
color: color-mix(in srgb, var(--accent-primary) 72%, var(--text-primary));
background: transparent;
}

.campaign-toggle-row input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 2;
}

.campaign-toggle-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 7px;
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
background: rgba(0,0,0,0.26);
color: var(--accent-primary);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.campaign-toggle-box svg {
width: 14px;
height: 14px;
opacity: 0;
transform: scale(0.72);
transition: opacity 0.14s ease, transform 0.14s ease;
}

.campaign-toggle-row input:checked + .campaign-toggle-box {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent);
background: color-mix(in srgb, var(--accent-primary) 18%, rgba(0,0,0,0.18));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
}

.campaign-toggle-row input:checked + .campaign-toggle-box svg {
opacity: 1;
transform: scale(1);
}

/* K5 batch 2 (punkt F): komprimera kampanjmodalen på låga skärmar (Patrik kör
   1366×768) så den ryms utan intern scroll. Träffar ENDAST viewporthöjd ≤800px
   — 1920×1080 (höjd 1080) påverkas inte och behåller sin luftiga layout. */
@media (max-height: 800px) {
#atlas-campaign-modal .campaign-modal-box { max-height: 94vh !important; }
#atlas-campaign-modal .glass-modal-header { padding: 11px 20px 10px; }
#atlas-campaign-modal .campaign-modal-body { gap: 10px; padding: 12px 20px 10px; }
.campaign-description-input { min-height: 82px; }
.campaign-form-grid { gap: 10px; }
.campaign-modal-footer-info { padding: 9px 12px; line-height: 1.4; }
.campaign-toggle-row { min-height: 32px; padding: 3px 2px; }
}

#atlas-campaign-modal .atlas-filter-dd {
width: 100%;
min-height: 36px;
border-color: color-mix(in srgb, var(--text-primary) 16%, transparent);
background: rgba(0, 0, 0, 0.28);
color: var(--text-primary);
font-size: 12px;
}

#atlas-campaign-modal .atlas-filter-dd:hover,
#atlas-campaign-modal .atlas-filter-dd.open {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent);
background: rgba(0, 0, 0, 0.36);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-panel {
border-color: color-mix(in srgb, var(--accent-primary) 32%, rgba(255,255,255,0.12));
background: color-mix(in srgb, var(--bg-frosty-content, #101827) 92%, #000 8%);
box-shadow: 0 18px 42px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.04);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item {
color: var(--text-primary);
}

/* SEL-standard Fas 2: kampanjmodalens dropdown enad med basreceptet. */
body:has(#atlas-campaign-modal) .atlas-filter-dd-item:not(.selected):hover {
background: var(--sel-fill-hover);
color: var(--text-primary);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item.selected {
background: var(--sel-fill);
color: var(--sel-text);
}

#atlas-campaign-modal .glass-modal-footer {
display: flex;
align-items: stretch;
flex-direction: row;
gap: 16px;
padding: 20px 22px;
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--accent-primary) 24%, rgba(255,255,255,0.08));
box-shadow: 0 -12px 28px rgba(0,0,0,0.14);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 12%, rgba(0,0,0,0.2)), rgba(0,0,0,0.12));
flex: 0 0 auto;
}

.campaign-modal-footer-info {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
max-width: none;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, rgba(255,255,255,0.08));
border-radius: 8px;
background: color-mix(in srgb, var(--accent-primary) 8%, rgba(255,255,255,0.025));
color: var(--text-secondary);
font-size: 12px;
line-height: 1.58;
}

.campaign-modal-footer-info strong {
color: color-mix(in srgb, var(--accent-primary) 86%, var(--text-primary));
font-weight: 800;
}

.campaign-footer-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--accent-primary);
margin-top: 2px;
}

.campaign-footer-info-icon svg {
width: 16px;
height: 16px;
}

.campaign-modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex: 0 0 128px;
min-height: 42px;
}

.campaign-footer-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
min-width: 112px;
height: 38px;
padding: 0 16px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 46%, rgba(255,255,255,0.12));
border-radius: 8px;
background: color-mix(in srgb, var(--accent-primary) 82%, #111);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
cursor: pointer;
transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.campaign-footer-icon-btn svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
}

.campaign-footer-icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

#atlas-campaign-modal .glass-modal-footer .campaign-footer-icon-btn.is-save {
color: #111;
background: color-mix(in srgb, var(--accent-primary) 72%, #fff) !important;
}

#atlas-campaign-modal .glass-modal-footer .campaign-footer-icon-btn.is-save:hover {
color: #111;
background: color-mix(in srgb, var(--accent-primary) 82%, #fff) !important;
border-color: color-mix(in srgb, var(--accent-primary) 66%, rgba(255,255,255,0.25));
}

@media (max-width: 720px) {
#view-admin .campaign-list-card {
grid-template-columns: 1fr;
}

.campaign-detail-hero {
align-items: flex-start;
flex-direction: column;
}

.campaign-detail-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-detail-list {
grid-template-columns: 1fr;
}

.campaign-detail-card {
grid-template-columns: 1fr;
}

.campaign-detail-actions {
justify-content: flex-end;
}

.campaign-list-side {
justify-content: space-between;
}

.campaign-form-grid {
grid-template-columns: 1fr;
}

#atlas-campaign-modal .glass-modal-header {
align-items: flex-start;
padding: 14px 16px 12px;
}

#atlas-campaign-modal .campaign-modal-body {
padding: 14px 16px;
}

#atlas-campaign-modal .glass-modal-footer {
padding: 16px;
gap: 12px;
flex-direction: column;
}

.campaign-modal-actions {
justify-content: stretch;
}

.campaign-footer-icon-btn {
width: 100%;
}
}

.catalog-list-copy {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.catalog-list-copy strong,
.catalog-list-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-list-copy strong {
font-size: 12px;
font-weight: 600;
}
.catalog-list-copy small,
.catalog-muted {
font-size: 10px;
opacity: 0.45;
}
.svc-type-pill {
flex-shrink: 0;
font-size: var(--text-badge-min-size);
padding: 3px 7px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
color: var(--text-secondary);
background: color-mix(in srgb, var(--bg-dark-secondary) 82%, var(--text-secondary) 6%);
font-weight: 650;
line-height: 1;
}
.svc-type-pill.is-package {
border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.svc-type-pill.svc-type-kurs {
border-color: color-mix(in srgb, #a78bfa 42%, transparent);
color: color-mix(in srgb, #a78bfa 82%, var(--text-primary));
background: color-mix(in srgb, #a78bfa 10%, transparent);
}
.svc-type-pill.svc-type-lesson {
border-color: color-mix(in srgb, #60a5fa 40%, transparent);
color: color-mix(in srgb, #60a5fa 78%, var(--text-primary));
background: color-mix(in srgb, #60a5fa 9%, transparent);
}
.svc-type-pill.svc-type-theory {
border-color: color-mix(in srgb, #f59e0b 42%, transparent);
color: color-mix(in srgb, #f59e0b 76%, var(--text-primary));
background: color-mix(in srgb, #f59e0b 9%, transparent);
}
.catalog-detail .detail-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.catalog-active-vehicles-detail .detail-body {
gap: 0;
}
.catalog-main-panel,
.catalog-description-panel,
.catalog-quick-question-panel,
.catalog-components-panel {
padding: 18px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
}
.catalog-chain-panel,
.catalog-new-service-guide {
padding: 16px 18px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent-primary) 6%, rgba(255,255,255,0.025));
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(255,255,255,0.08)) !important;
}

/* KAN-191 etapp 3: separation for adminpaneler i ljusa teman.
   #449 IRL-refix 2026-08-28 efter Patriks fynd — TVA fel rattade:

   1. TONEN. Forsta versionen anvande var(--surface-raise), som ar
      color-mix mot var(--text-primary). Den textfargen ar nastan svart
      (#0f2918 gront, #111827 blatt), sa 13 % av den over en mattad gron yta
      AVMATTAR den mot gratt i stallet for att fordjupa den. Patrik:
      "du har fargat gratt valdigt fel". Tokenen ar luminansmedveten men inte
      fargtonsmedveten. Ytan bar darfor temats EGEN accentfarg i stallet, vilket
      ger ratt kulor i alla tre ljusa teman utan att rora --surface-raise
      (etapp 1:s modallager anvander samma token och ar Patrik-godkant).

   2. SELEKTORMANGDEN. .admin-ticket-preview (matte 1.351) och
      .agent-view-permission-panel (matte 1.265) lag REDAN over 1.12-troskeln
      fore rundan och skulle aldrig ha varit med. De kom med for att de visade
      storst tapp mot morkt tema — men ett tapp ar inget fel nar det absoluta
      vardet ar bra. De ar borttagna och aterstallda till sitt tidigare utseende.

   Matt 2026-08-28 pa catalog-main-panel, barande kanal per ljust tema:
   apple-light-green 1.329 · nordic-dawn 1.317 · onyx-ultradark 1.294 (krav 1.12).
   Foregaende version lag pa 1.532-1.580, alltsa markbart starkare an bestallt. */
body.atlas-light-theme #view-admin .office-catalog-link-help,
body.atlas-light-theme #view-admin #box-prices .price-row,
body.atlas-light-theme #view-admin .catalog-main-panel,
body.atlas-light-theme #view-admin #agent-ticket-list-panel,
body.atlas-light-theme #view-admin .catalog-chain-panel,
body.atlas-light-theme #view-admin .catalog-description-panel,
body.atlas-light-theme #view-admin .catalog-quick-question-panel,
body.atlas-light-theme #view-admin .catalog-components-panel {
background: color-mix(in srgb, var(--accent-primary) 5%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
}

/* #463 (Patriks IRL 2026-08-28): "jag gillar inte se vita fyrkantiga boxar i
   fargboxarna pa denna sida ... kanns sa fyrkantig jamfort med ex ai motor-fliken".

   Matt orsak: .catalog-field ar en LAYOUT-wrapper (en <label> runt etikett + falt +
   hjalptext) och har i basen INGEN bakgrund — style-admin.css:6212 satter bara
   display:flex, riktning, gap och typografi. De tre ljusa temana buntar anda in den i
   sin INPUT-regel (t.ex. onyx-ultradark.css:2609, i samma selektorlista som
   .ki-raw-text och .ki-input-warnings) och malar en OPAK bakgrund med
   border-radius: 0 bakom hela gruppen. Resultatet ar en fyrkantig vit platta per
   faltgrupp, inuti en rundad panel.

   Matt per tema: onyx-ultradark rgb(237,243,246) opak · apple-light-green opak
   gronvit · carbon-theme (mork) REDAN transparent. Felet finns alltsa bara i de ljusa.

   Aterstaller den till det basen och de morka temana redan gor. En egen regel i
   stallet for kirurgi i fem delade selektorlistor per temafil: lagre risk, en plats. */
body.atlas-light-theme #view-admin .catalog-field {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.catalog-quick-question-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.catalog-quick-question-row .filter-input {
flex: 1 1 auto;
min-width: 0;
}
.catalog-quick-question-row .catalog-field-hint {
flex: 1 1 auto;
min-width: 0;
}
.catalog-header-help {
margin-left: auto;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.catalog-title-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
margin-left: 6px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, rgba(255,255,255,0.18));
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
color: var(--accent-primary);
font-size: 11px;
font-weight: 800;
font-style: italic;
line-height: 1;
cursor: help;
}
.catalog-chain-list {
display: grid;
gap: 8px;
}
.catalog-chain-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-chain-row.is-ok {
color: color-mix(in srgb, var(--status-success, #22c55e) 72%, var(--text-primary));
border-color: color-mix(in srgb, var(--status-success, #22c55e) 30%, rgba(255,255,255,0.08));
background: color-mix(in srgb, var(--status-success, #22c55e) 8%, rgba(255,255,255,0.025));
}
.catalog-chain-row.is-warning {
color: color-mix(in srgb, var(--status-warning, #f59e0b) 78%, var(--text-primary));
border-color: color-mix(in srgb, var(--status-warning, #f59e0b) 34%, rgba(255,255,255,0.08));
background: color-mix(in srgb, var(--status-warning, #f59e0b) 9%, rgba(255,255,255,0.025));
}
.catalog-chain-row.is-muted {
opacity: 0.72;
}
.catalog-chain-icon {
width: 18px;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
background: rgba(255,255,255,0.08);
}
.catalog-new-service-guide ol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
list-style: none;
counter-reset: catalog-guide-step;
margin: 0;
padding: 0;
}
.catalog-new-service-guide li {
counter-increment: catalog-guide-step;
min-width: 0;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}
/* Ljusa desktop-teman: samma inneslutning som Capacitor-regeln i mobile.css —
   den vit-transparenta basen är osynlig mot ljusa panelbakgrunder. */
body.atlas-light-theme #view-admin .catalog-new-service-guide li {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 80%);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(0, 0, 0, 0.13));
}
.catalog-new-service-guide li::before {
content: counter(catalog-guide-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 6px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: var(--accent-primary);
font-size: 10px;
font-weight: 800;
}
.catalog-new-service-guide strong {
display: inline;
font-size: 11px;
color: var(--text-primary);
}
.catalog-new-service-guide span {
display: block;
margin-top: 5px;
}
/* 🔴 #510 rev 2 (Patriks IRL 2026-09-02): rubriken hade 0px ovanför och 14px under.
   Närhetsprincipen band den därför till KORTEN OVANFÖR i stället för till den
   sektion den inleder — "Kopplingen till Kunskapsbanken och AI" såg ut att höra
   till de tre korten före den. Avståndet är vänt: tydlig luft ovanför, tätare under.
   `:first-child` nollar toppen så en rubrik som inleder sin behållare inte får en
   tom rad över sig. */
.catalog-section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: 30px;
margin-bottom: 10px;
}
.catalog-section-heading:first-child {
margin-top: 0;
}
.catalog-section-heading h4 {
margin: 0 0 4px;
font-size: 11px;
text-transform: uppercase;
color: var(--accent-primary);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.catalog-section-heading p {
margin: 0;
font-size: 11px;
line-height: 1.5;
opacity: 0.5;
max-width: 620px;
}
.catalog-edit-only {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.catalog-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

/* 🔴 #315 `P-2` (Patriks IRL-fynd): med UDDA antal fält blev det sista ensamt i
   vänsterkolumnen med tom högerkolumn ⇒ raggad högerkant. Mätt på sandbox: rutnätet är
   `485px 485px`, och fältantalet varierar med tjänstetypen (`Lektionslängd` renderas bara
   för lektioner), så pariteten kan inte antas — den måste hanteras.
   Ett ensamt sistafält spänner därför över båda kolumnerna. Självjusterande: ingen
   markupändring, och rätt oavsett hur många fält typen råkar ha.
   🔵 I mobilens enkolumnsläge (`:6775`) är `1 / -1` redan hela bredden ⇒ ingen effekt där. */
.catalog-field-grid > *:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.catalog-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-secondary);
}
.catalog-field small {
font-size: var(--text-badge-min-size);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
opacity: 0.55;
}
.catalog-description-input {
min-height: 88px;
line-height: 1.45;
resize: vertical;
}
.catalog-keywords-block {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 14px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-secondary);
}
.catalog-keywords-block .admin-kb-keywords {
margin-top: 0 !important;
}
.catalog-kw-label-row {
display: flex;
align-items: center;
gap: 8px;
}
.catalog-keywords-block > .ai-source-chip,
.catalog-kw-label-row > .ai-source-chip {
margin-left: 0;
}
.catalog-kw-unlock-btn {
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
padding: 2px 7px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
background: rgba(255,255,255,0.04);
color: var(--text-secondary);
cursor: pointer;
}
.catalog-field-hint {
font-size: 10px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
opacity: 0.6;
margin: 2px 0 4px;
}
.catalog-package-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 12px;
cursor: pointer;
}
.catalog-component-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 72px 28px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.catalog-remove-component {
width: 26px;
height: 26px;
border: 1px solid rgba(255,69,58,0.3);
border-radius: 50%;
background: rgba(255,69,58,0.12);
color: #ff453a;
cursor: pointer;
}
.catalog-empty-components {
padding: 16px;
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 8px;
font-size: 11px;
text-align: center;
opacity: 0.45;
}
.catalog-heading-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.catalog-form-actions {
display: flex;
align-items: center;
gap: 4px;
}
.catalog-form-actions[hidden],
.catalog-edit-only[hidden],
.catalog-remove-component[hidden],
#catalog-unlock-btn[hidden],
#catalog-kw-unlock-btn[hidden] {
display: none !important;
}
/* #78 yta 4: katalogformulärets åtgärder följer det delade 32px-kontraktet.
   Scoped till catalog-form-actions — rör inte btn-glass-icon på andra ytor. */
.catalog-form-actions .btn-glass-icon {
width: 32px !important;
height: 32px !important;
border: none !important;
}
/* Lås save-/cancel-glyfen till 16px överallt så framtida ikonbyten inte driftar. */
.admin-save-icon-btn svg,
.catalog-form-actions .btn-glass-icon svg {
width: 16px;
height: 16px;
}

/* #78 yta 4: samma ikonknappskontrakt för katalogens lås och
   kategoribyggarens rubrikåtgärder.
   2026-08-05 (listnivån, F4): `.category-builder-heading-actions`,
   `.category-builder-group-tools` och `.category-builder-children-label`
   tillagda i SAMMA selektorgrupper i stället för
   en egen CSS-familj. Kontrollerna där (`Ny kategori`, `Ny tjänst i <namn>`,
   `Ändra kategoriordning`) låg tidigare på 27-28 px med hårdkodad
   rgba(73,150,255,...) i ett inline-<style> i admin-category-builder.js — en blå
   accent som ignorerade temavariablerna i alla tio teman. */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;
border: none !important;
border-radius: 8px;
background: transparent !important;
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: none !important;
cursor: pointer;
transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn svg {
width: 16px;
height: 16px;
}
/* #78 F1 (Claude-verifiering 2026-08-05): rollfärgerna MÅSTE vara !important här.
   Knapparna bär även .btn-glass-icon, och ALLA tio temafiler deklarerar
   `.btn-glass-icon { color: … !important }` (apple-light-green.css:1642-1656 m.fl.).
   Utan !important vann temat och avbryt/ta bort/spara renderade identisk färg i
   alla tre teman — mätt live 2026-08-05. Temafilerna delas med de LÅSTA Box1-3,
   så de får inte scopas om; därför kontras temats !important här i stället.
   Se atlas_dev_log.md 2026-08-05 för den öppet loggade mönsteravvikelsen. */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn {
color: var(--text-secondary) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn {
color: var(--status-danger, #ef4444) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn {
color: var(--status-success, #22c55e) !important;
}
/* Ljusa teman (apple-light-green OCH onyx-ultradark bär båda .atlas-light-theme):
   temavariablernas #ff4444 / #00C851 är för lätta mot ljus panelbakgrund — mätt
   1,89-3,08 innan denna override. Samma mörkare toner som .admin-config-row-ytorna
   redan använder, så hela adminen håller ihop. */
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn {
color: #b91c1c !important;
}
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn {
color: #166534 !important;
}
/* Hover/fokus-återkoppling som på .admin-config-row-ytorna. Utan detta blir
   knapparna helt stumma, eftersom .btn-glass-icon:hover tvingar transparent
   bakgrund och vi låser färgen ovan. Bakgrund bär återkopplingen — färgen står
   still, vilket också håller kontrasten stabil (#114-lärdomen). */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn:focus-visible {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn:focus-visible,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn:focus-visible {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn:focus-visible {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
}
/* Listnivåns neutrala kontroller (Ny kategori, Ny tjänst i <namn>, Ändra
   kategoriordning) har ingen rollklass, så ingen av rollreglerna ovan träffar
   dem. De får samma accentåterkoppling som lås/redigera. `!important` krävs
   eftersom basregeln i samma grupp sätter `background: transparent !important`. */
#view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:hover,
#view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
/* Ljusa teman: `apple-light-green` OCH `onyx-ultradark` bär båda
   `body.atlas-light-theme` — mätt på `document.body.className` 2026-08-05, inte
   antaget. Deras `--accent-primary` är för ljus mot listytans bakgrund: plusset
   mätte 2,02-3,29:1 (WCAG 1.4.11 kräver 3,0:1 för ikoner). Det gick att leva med
   som ett fetstilt 19px-texttecken, men glyfen är nu en 16px SVG med 2px stroke,
   så samma ratio blir märkbart svagare. Tonen HÄRLEDS ur temavariabeln i stället
   för att hårdkodas, så temana fortsätter styra. Vilotonen gäller bara
   skapa-knapparna; sorteringsknappen ska stå kvar på --text-secondary. */
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) :is(.category-builder-add, .category-builder-group-add),
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:hover,
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
color: color-mix(in srgb, var(--accent-primary) 60%, #000);
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.catalog-kb-save-btn {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, color 0.2s;
}
.catalog-kb-save-btn.is-dirty {
opacity: 1;
pointer-events: auto;
color: #4cd964 !important;
animation: kb-save-pulse 1.8s ease-in-out infinite;
}
@keyframes kb-save-pulse {
0%, 100% { filter: drop-shadow(0 0 3px rgba(76,217,100,0.5)); }
50%       { filter: drop-shadow(0 0 7px rgba(76,217,100,0.9)); }
}
/* #78 F1: .catalog-cancel-btn hade `color: rgba(255,255,255,0.38) !important` —
   vit 38 % är nära osynlig i de ljusa temana (samma mönsterfel som
   .kb-save-icon-btn). Färgen ägs nu av ikonkontraktet ovan; endast layout
   blir kvar här. .catalog-delete-btn tappar likaså sin hårdkodade #ff453a
   till förmån för var(--status-danger), så temana kan styra tonen. */
.catalog-delete-btn {
margin-left: 4px;
}
.catalog-delete-btn svg {
fill: currentColor !important;
stroke: none !important;
}
.catalog-kb-jump-btn {
background: none;
border: none;
cursor: pointer;
font-size: 13px;
opacity: 0.55;
padding: 0 4px;
vertical-align: middle;
}
.catalog-kb-jump-btn:hover {
opacity: 1;
}
.kb-service-count-badge {
font-size: var(--text-badge-min-size);
background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-secondary));
border-radius: 4px;
padding: 1px 5px;
margin-left: auto;
color: color-mix(in srgb, var(--accent-primary) 58%, var(--text-primary));
vertical-align: middle;
white-space: nowrap;
flex-shrink: 0;
}
.kb-linked-services-panel {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
padding: 8px 14px;
margin: 0 0 12px;
background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-secondary) 90%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
border-radius: 8px;
font-size: 11px;
color: var(--text-primary);
line-height: 1.45;
max-height: min(280px, 32dvh);
overflow-y: auto;
}
.kb-linked-services-label {
font-weight: 600;
margin-right: 4px;
color: var(--text-primary);
}
.kb-linked-services-panel span:not(.kb-linked-services-label) {
background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-secondary) 88%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, transparent);
border-radius: 4px;
padding: 2px 7px;
color: var(--text-primary);
max-width: 100%;
overflow-wrap: anywhere;
}
.catalog-kb-section-panel {
margin-top: 12px;
padding: 18px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
}
.catalog-kb-answer {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 90px;
}
.catalog-kb-section-meta,
#catalog-kb-section-status {
font-size: 10px;
opacity: 0.5;
}
.catalog-kb-section-actions {
margin-top: 8px;
display: flex;
gap: 8px;
align-items: center;
}
.catalog-kb-section-error {
color: #ff6b6b;
font-size: 10px;
}
.catalog-list-section-label {
margin: 14px 4px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-primary);
opacity: 0.85;
}
.catalog-list-section-label--clickable {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.catalog-list-section-label--clickable:hover {
background: var(--sel-fill-hover);
opacity: 1;
}
/* SEL-standard Fas 2: egen 16 %-platta ersatt av den delade --sel-fill (14 %)
   + golvad --sel-text, så katalogetiketten markeras exakt som flik/meny/subnav.
   Ingen kant här: elementet har ingen border i viloläge och en tillagd 2px-kant
   skulle flytta innehållet (layoutändring är utanför scope). */
.catalog-list-section-label--clickable.active {
background: var(--sel-fill);
color: var(--sel-text);
opacity: 1;
}
.catalog-guide-label-hint {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-badge-min-size);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
opacity: 0.55;
}
.catalog-guide-label-arrow {
transition: transform 0.15s;
}
.catalog-list-section-label--clickable:hover .catalog-guide-label-arrow {
transform: translateX(2px);
}
.catalog-kb-link-block {
margin-bottom: 12px;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-kb-link-label {
margin: 0 0 8px;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}
.catalog-kb-link-row {
display: flex;
gap: 8px;
align-items: center;
}
.catalog-kb-link-row select {
flex: 1;
min-width: 0;
}
.catalog-kb-link-row option:disabled {
opacity: 0.45;
}
.catalog-kb-locked-note {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-kb-locked-icon {
font-size: 16px;
line-height: 1;
}
.catalog-kb-locked-copy {
flex: 1;
min-width: 0;
}
.catalog-kb-locked-copy strong {
display: block;
font-size: 11px;
color: var(--text-primary);
margin-bottom: 4px;
}
.catalog-kb-locked-copy p {
margin: 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-secondary);
}
.catalog-kb-lock-row {
margin-top: 10px;
}
.catalog-kb-lock-link {
background: none;
border: none;
padding: 0;
font-size: 10px;
color: var(--text-secondary);
opacity: 0.65;
cursor: pointer;
text-align: left;
}
.catalog-kb-lock-link:hover {
opacity: 1;
text-decoration: underline;
}
@media (max-width: 768px) {
.ai-chip,
.ai-source-chip {
font-size: var(--text-badge-min-size);
}

.catalog-kb-link-row {
flex-direction: column;
align-items: stretch;
}
.catalog-kb-locked-note {
flex-direction: column;
}
}
.drift-vehicle-coverage-card {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.vehicle-coverage-details {
min-height: 42px;
font-size: var(--text-badge-min-size);
line-height: 1.35;
color: var(--text-secondary);
}
.vehicle-coverage-facts {
display: flex;
flex-direction: column;
gap: 2px;
}
.vehicle-publish-status {
font-weight: 700;
}
.vehicle-publish-status.is-active {
color: #4cd964;
}
.vehicle-publish-status.is-inactive,
.vehicle-coverage-muted {
opacity: 0.5;
}
.vehicle-coverage-warning {
margin-top: 4px;
padding: 4px 6px;
border: 1px solid var(--warning-border);
border-radius: 5px;
background: var(--warning-bg);
color: var(--warning-text);
}
.drift-active-vehicles-summary {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
}
.drift-vehicle-pill {
display: inline-flex;
align-items: center;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.3);
background: transparent;
font-weight: 400;
transition: all 0.15s;
}
.drift-vehicle-pill.is-active {
border-color: rgba(76,217,100,0.55);
color: #4cd964;
background: rgba(76,217,100,0.10);
font-weight: 600;
}
.drift-vehicle-pill:not(.is-active) {
border-color: rgba(239,68,68,0.22);
color: color-mix(in srgb, var(--status-danger, #ef4444) 62%, var(--text-secondary, #fff));
background: rgba(239,68,68,0.055);
opacity: 1;
}
.office-catalog-link-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 5px;
border-radius: 5px;
border: 1px solid color-mix(in srgb, var(--status-success, #22c55e) 42%, transparent);
background: color-mix(in srgb, var(--status-success, #22c55e) 10%, transparent);
color: var(--status-success, #22c55e);
font-size: 10px;
font-weight: 800;
vertical-align: middle;
cursor: help;
}
.office-catalog-link-help {
margin-top: 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.075);
font-size: 10px;
line-height: 1.45;
color: var(--text-secondary);
}
.office-catalog-link-help span {
color: var(--status-success, #22c55e);
font-weight: 800;
}

/* Admin office price list: compact, quiet price controls on all shells. */
#box-prices .price-row {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.075) !important;
box-shadow: none !important;
}
#view-admin .category-builder-group.is-inactive > .category-builder-card,
#box-prices .price-row.is-vehicle-inactive {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, rgba(255,255,255,0.035)) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 30%, rgba(255,255,255,0.075)) !important;
}
#view-admin .category-builder-group.is-inactive > .category-builder-card {
opacity: 0.82;
}
/* Patriks begäran 2026-09-16: en inset box-shadow-"kant" på prisraden är redan
   reserverad för data-row-kind="info" (rad nedan) — inaktiv-fordonstyp fick av misstag
   samma signal, vilket blandade två olika betydelser. Inaktiv-fordonstyp ska bara vara en
   röd fade över hela raden, ingen kant. */
body.atlas-light-theme #view-admin #box-prices .price-row.is-vehicle-inactive {
/* Mätt 2026-09-16: body.atlas-light-theme #view-admin #box-prices .price-row (rad ~6583)
   har högre specificitet (två id:n) än #box-prices .price-row.is-vehicle-inactive och
   vann alltid i de tre ljusa temana — röd fade syntes aldrig, bara den nu borttagna kanten.
   Denna regel matchar samma id-antal och lägger till en tredje klass för att vinna. */
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 30%, transparent) !important;
}
#box-prices .price-inp {
width: 74px !important;
min-width: 68px !important;
height: 28px !important;
padding: 2px 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,0.14) !important;
background: rgba(255,255,255,0.045) !important;
color: var(--text-primary) !important;
font-size: 12px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
#box-prices .price-inp:not(:disabled) {
border-color: color-mix(in srgb, var(--status-success, #22c55e) 34%, rgba(255,255,255,0.14)) !important;
background: color-mix(in srgb, var(--status-success, #22c55e) 8%, rgba(255,255,255,0.045)) !important;
}
#view-admin #box-prices .price-row[data-row-kind="info"] {
box-shadow: inset 3px 0 0 var(--office-row-kind-accent, var(--accent-primary)) !important;
}
#box-prices .office-row-kind-fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
max-width: 100%;
}
#box-prices .office-row-kind-fieldset legend {
display: flex;
align-items: center;
margin: 0 0 5px;
padding: 0;
font-size: var(--text-micro-size);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
#box-prices .office-row-kind-help {
margin-left: 6px;
}
#box-prices .office-row-kind-picker {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 3px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 9px;
background: rgba(0,0,0,0.16);
}
#box-prices .office-row-kind-option {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
transition: background .15s, color .15s, box-shadow .15s;
}
#box-prices .office-row-kind-option.is-disabled {
cursor: default;
}
#box-prices .office-row-kind-option svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
#box-prices .office-row-kind-radio {
margin: 0;
accent-color: var(--office-row-kind-accent, var(--accent-primary));
}
#box-prices .office-row-kind-option:focus-within {
outline: 2px solid var(--office-row-kind-accent, var(--accent-primary));
outline-offset: 2px;
}
#office-package-actions {
max-width: 100%;
}
@media (max-width: 560px) {
/* Håll rubriken "Tjänster & Priser" och Lås upp-knappen på SAMMA rad i låst läge.
   Tidigare tvingade flex-direction:column ner Lås upp på en egen andra rad.
   I redigeringsläge wrappar fordons-/paketknapparna till egen rad under rubriken. */
#box-prices > div:first-child {
align-items: center !important;
gap: 8px 10px !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
#box-prices > div:first-child > div {
justify-content: flex-end !important;
}
#office-package-actions {
width: 100% !important;
justify-content: flex-end !important;
}
#price-list-grid .price-row > div:first-child {
align-items: flex-start !important;
gap: 8px !important;
}
#price-list-grid .price-row > div:first-child > span:first-child {
max-width: 100% !important;
white-space: normal !important;
}
.office-catalog-link-help {
font-size: var(--text-badge-min-size);
}
}

/* Office services: clearer local-info and delete controls. */
#box-booking .office-booking-row {
gap: 7px !important;
}
#box-booking .office-booking-row > span:first-child {
width: 38px !important;
}
#box-booking .office-booking-row > input {
min-width: 0 !important;
}
#box-prices .office-service-note-btn {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
margin-left: 0 !important;
align-self: center !important;
cursor: pointer !important;
font-size: var(--text-badge-min-size) !important;
transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s !important;
}
#box-prices .office-service-note-btn.has-note {
color: #fff !important;
border-color: var(--accent-primary) !important;
background: var(--accent-primary) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent-primary) 24%, transparent),
0 0 12px color-mix(in srgb, var(--accent-primary) 58%, transparent) !important;
opacity: 1 !important;
text-shadow: 0 1px 1px color-mix(in srgb, #000 35%, transparent) !important;
}
#box-prices .office-service-note-btn.has-note:hover {
border-color: color-mix(in srgb, var(--accent-primary) 74%, #fff 26%) !important;
background: color-mix(in srgb, var(--accent-primary) 88%, #fff 12%) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent-primary) 30%, transparent),
0 0 15px color-mix(in srgb, var(--accent-primary) 68%, transparent) !important;
}
#box-prices .office-service-note-editor {
width: 100% !important;
box-sizing: border-box !important;
margin-top: 8px !important;
padding: 10px !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
display: grid !important;
gap: 8px !important;
animation: officeServiceNoteIn 120ms ease-out both;
}
@keyframes officeServiceNoteIn {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
#box-prices .office-service-note-head,
#box-prices .office-service-note-foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
#box-prices .office-service-note-head {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--text-secondary) !important;
}
#box-prices .office-service-note-textarea {
width: 100% !important;
min-height: 70px !important;
box-sizing: border-box !important;
resize: vertical !important;
font-size: 12px !important;
line-height: 1.45 !important;
border-radius: 9px !important;
border: 1px solid rgba(255,255,255,0.12) !important;
background: rgba(255,255,255,0.06) !important;
color: var(--text-primary) !important;
padding: 9px 10px !important;
}
body.atlas-light-theme #box-prices .office-service-note-editor {
background: color-mix(in srgb, var(--bg-color) 90%, var(--accent-primary) 5%) !important;
border-color: color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 24%) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea {
background: color-mix(in srgb, var(--bg-color) 94%, #ffffff 6%) !important;
border-color: color-mix(in srgb, var(--border-color) 68%, var(--accent-primary) 26%) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea:focus {
border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color) 28%) !important;
outline: 2px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
outline-offset: 1px !important;
}
#box-prices .office-service-note-textarea:disabled,
#box-prices .office-price-booking-url:disabled {
opacity: 1 !important;
cursor: not-allowed !important;
border-color: color-mix(in srgb, var(--text-secondary) 42%, rgba(255,255,255,0.16)) !important;
background: color-mix(in srgb, var(--bg-dark-secondary, #202632) 90%, #ffffff 5%) !important;
color: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea:disabled,
body.atlas-light-theme #box-prices .office-price-booking-url:disabled {
border-color: color-mix(in srgb, var(--border-color) 70%, var(--text-secondary) 30%) !important;
background: color-mix(in srgb, var(--bg-color) 82%, var(--text-secondary) 10%) !important;
color: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary) 16%) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 76%, transparent) !important;
}
#box-prices .office-service-note-count,
#box-prices .office-service-note-save-hint {
font-size: 10px !important;
color: var(--text-secondary) !important;
opacity: 0.62 !important;
}
#box-prices .office-custom-service-toggle {
position: relative !important;
width: 32px !important;
height: 28px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
color: #4cd964 !important;
}
#box-prices .price-delete-btn {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
border-radius: 8px !important;
font-size: 0 !important;
}
#box-prices .price-delete-btn svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
stroke: none !important;
}
/* #78: knappen är ramfri sedan 2026-08-05 — border-color här var död kod utan
   border-style. Hovertonen följer samma 12 %-konvention som de konverterade
   admin-ikonknapparna. */
#box-prices .price-delete-btn:hover,
#box-prices .price-delete-btn:focus-visible {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
/* #78 kontrast: den röda standardfärgen mäter 2,88:1 mot ljusa temapaneler
   (apple-light-green, onyx-ultradark). Samma mörkare röd som de övriga
   admin-ikonknapparna redan använder i ljust tema. */
body.atlas-light-theme #box-prices .price-delete-btn {
color: #b91c1c !important;
}
@media (max-width: 900px) {
.catalog-field-grid {
grid-template-columns: 1fr;
}
.catalog-new-service-guide ol {
grid-template-columns: 1fr;
}
.catalog-section-heading {
flex-direction: column;
}
.catalog-active-vehicles-heading {
flex-direction: column;
}
.catalog-guide-grid {
grid-template-columns: 1fr;
}
.catalog-vehicle-heading-main {
gap: 5px;
}
}

/* Admin office top panels keep their own bounded lists so many tickets/agents
   do not stretch the whole office detail page. */
/* #78 etablerade golvet: 220px behövs för att kontorets ärende- och agentpaneler
   ska bära rubrik/padding utan att spränga sin ram.
   🔴 RÖR INTE TAKET UTAN ATT LÄSA DETTA. #460 tog först bort taket helt, så att
   panelerna fyllde hela detaljkortet. Patriks IRL 2026-08-30 (60 % och 90 % zoom):
   *"Varför är dessa boxar så stora nu?"* — mätt bar de 73px innehåll i en 985px
   hög ruta vid 60 % zoom, alltså över 900px tomrum. Taket är återställt.
   Kontorsvyn skiljer sig från Personal: här ÄR topp-raden ofta glest fylld
   (tom kö, en enskild agent), och då ska rutan vara liten. I Personal är
   ärendepanelen sista sektionen och SKA fylla ut — den behåller därför
   fyllnadsmodellen nedan. Samma regel för båda gav fel resultat i en av dem. */
#admin-detail-content #box-tickets,
#admin-detail-content #box-agents {
max-height: min(360px, 46vh) !important;
overflow: hidden !important;
min-height: 220px !important;
}

#admin-detail-content #box-tickets .scroll-list,
#admin-detail-content #box-agents .scroll-list {
overflow-y: auto !important;
min-height: 0 !important;
flex: 1 1 auto !important;
/* #78 F5: scoped exception from style-tickets.css master contain so kontorsboxen
   can pass wheel/touch gestures to #office-detail-body when its own list ends. */
overscroll-behavior: auto !important;
}

/* #460 / KAN-214: desktop-webb/Electron använder samma fyllnadsmodell för de tre
   adminpanelerna som annars fick växande tomrum vid zoom-ut. Mobil har egna
   body.capacitor-client-regler i mobile.css och ska inte ärva denna höjdmodell. */
body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-section {
flex: 1 0 auto !important;
display: flex !important;
flex-direction: column !important;
min-height: 220px !important;
}

body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-panel {
flex: 1 1 220px !important;
min-height: 220px !important;
max-height: none !important;
overflow: hidden !important;
}

/* 🔴 Kontorsvyns topp-rad ska INTE tvingas fylla kortet (se takkommentaren ovan).
   `align-items: stretch` behålls så de två boxarna följer varandra — det är #78:s
   uttryckliga krav från Patrik: *"så att det inte blir en sådan osymmetrisk kant
   till nästa box"*. `auto` i stället för `1fr` gör att raden växer med innehållet
   upp till taket, i stället för att sträckas ut av kortets höjd. */
body:not(.capacitor-client) #office-detail-body #office-top-grid.admin-zoom-fill-grid {
flex: 0 0 auto !important;
min-height: 220px !important;
align-items: stretch !important;
grid-auto-rows: minmax(220px, auto) !important;
}

body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-panel > .scroll-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}

input[type="color"] {
cursor: pointer !important;
}

/* =============================================================================
GLOBAL BILDHANTERING FÖR ALLA QUILL-EDITORS (v4.0)
Ersätter gamla centrerade block-regler. Möjliggör textflöde och justering.
============================================================================= */
.ql-editor img {
/* Gör bilden 'inline' så den kan ligga på samma rad som text */
display: inline-block !important; 

/* Rimliga gränser för editorn */
max-width: 100% !important;
max-height: 220px !important; 

/* Snygg presentation */
object-fit: contain !important;
margin: 4px 6px !important;
vertical-align: bottom !important;
border-radius: 6px !important;

/* Visuell indikation vid hover */
cursor: default !important;
transition: outline 0.1s ease;
}

/* Markera bilden med agentfärgen när man hovrar för att visa att den kan styras */
.ql-editor img:hover {
outline: 2px solid var(--accent-primary);
}

/* Fix för att Quills justeringsknappar (Vänster/Center/Höger) ska fungera på bilder */
.ql-editor .ql-video, 
.ql-editor img {
float: none;
}
/* ============================================================
MALL-FOOTER: ta bort boxen/fyrkanten runt save/delete-knappar.
Overridar style-modals.css (.config-save-btn har border+bg).
Scoped till footern så övriga config-save-btn-användningar
i admin-vyn inte påverkas.
============================================================ */
#view-templates .detail-footer-toolbar .config-save-btn,
#view-templates .detail-footer-toolbar #delete-template-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: color 0.18s ease, filter 0.18s ease !important;
}
/* Spara: grön glow vid hover */
#view-templates .detail-footer-toolbar .config-save-btn:hover {
background: transparent !important;
filter: drop-shadow(0 0 6px rgba(76,217,100,0.7)) !important;
}
/* Radera: röd glow vid hover */
#view-templates .detail-footer-toolbar #delete-template-btn {
color: rgba(255,69,58,0.55) !important;
}
#view-templates .detail-footer-toolbar #delete-template-btn:hover {
background: transparent !important;
color: #ff453a !important;
filter: drop-shadow(0 0 6px rgba(255,69,58,0.7)) !important;
}
#view-templates .detail-footer-toolbar #delete-template-btn svg {
fill: currentColor !important;
stroke: none !important;
}

/* Sidopanel-sök: mjukare tema-tonad look, tydligt ljusare än standardfilter.
   Ligger sent i cascade för att vinna över global filter-kontrast. */
#inbox-search,
#my-tickets-search,
#customer-search-top,
#template-search-input,
#view-archive #filter-search {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--bg-frosty-header) 64%, rgba(255,255,255,0.22)) 0%,
color-mix(in srgb, var(--bg-frosty-content) 68%, rgba(255,255,255,0.16)) 100%) !important;
border-color: color-mix(in srgb, var(--text-secondary) 34%, rgba(255,255,255,0.18)) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 0 0 1px rgba(0,0,0,0.06) !important;
backdrop-filter: blur(8px) saturate(125%) !important;
-webkit-backdrop-filter: blur(8px) saturate(125%) !important;
}

#inbox-search:focus,
#my-tickets-search:focus,
#customer-search-top:focus,
#template-search-input:focus,
#view-archive #filter-search:focus {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--bg-frosty-header) 60%, rgba(255,255,255,0.24)) 0%,
color-mix(in srgb, var(--bg-frosty-content) 64%, rgba(255,255,255,0.18)) 100%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 70%, rgba(255,255,255,0.18)) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 0 1px color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
}

/* Kundchatt-/expertmarkörer i adminrubriker */
/* 🔴 #315 (fyndet inlämnat av #312, 2026-08-18): `Kundchatt & Kunskap` trunkerades på
   Box3/Box4-kodlinjen men inte på Box1/Box2 — mätt `scrollWidth 151 / clientWidth 125`.
   Rotorsak: `width/max-width: calc(100% - 65px)` reserverade `65px` åt syskonet
   `#admin-list-actions` OVILLKORLIGT, även när den är tom. Föräldern `.pane-header` är redan
   flex med `space-between`, så syskonet tar sin naturliga bredd av sig självt.
   ⇒ Den fasta reservationen ersatt med rätt flex-idiom: gruppen växer och krymper, `min-width:0`
   låter den krympa under sitt innehåll när utrymmet faktiskt tar slut.
   🔵 `L-037`: `125px` pinnas ALDRIG som facit — bredden ska följa av tillgängligt utrymme. */
.admin-list-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}

#admin-list-chat-affects {
  display: inline-flex;
  align-items: center;
}

.chat-affects-badge,
.expert-setting-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: help;
}

.chat-affects-badge {
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
  border: 1px solid rgba(52, 199, 89, 0.30);
}

.expert-setting-badge {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.28);
}

#view-admin .header-tab .chat-affects-badge {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: none;
  background: transparent;
}

#view-admin .header-tab .chat-affects-badge svg {
  width: 12px;
  height: 12px;
}

/* Tenant-obligatoriska konfigurationsfält — amber vänsterbård */
.tenant-required-row {
  border-left: 2px solid rgba(255, 196, 0, 0.45) !important;
  padding-left: 10px !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(255, 196, 0, 0.04) !important;
}

#view-admin .admin-config-threshold-grid > .admin-config-row {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(140px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px 10px;
}

#view-admin .admin-config-threshold-grid > .admin-config-row > label {
  min-width: 0;
  margin: 0;
}

#view-admin .admin-config-threshold-grid > .admin-config-row > .admin-config-field {
  width: 100%;
  min-width: 0;
}

#view-admin .admin-config-checkbox-pill {
  flex: none;
  min-width: 52px;
}

#view-admin .admin-config-checkbox-pill:disabled {
  opacity: 1;
  cursor: default;
}

@media (max-width: 900px) {
  #view-admin .admin-config-threshold-grid > .admin-config-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  #view-admin .admin-config-threshold-grid > .admin-config-row > label {
    grid-column: 1 / -1;
  }

  #view-admin .admin-config-threshold-grid > .admin-config-row > .admin-config-field {
    grid-column: 1;
  }
}

/* =============================================================================
   SINGLETON-LAGE - dolj multi-office/multi-agent UI-element
   Aktiveras via body.atlas-single-office / .atlas-no-colleagues / .atlas-singleton
   ============================================================================= */

body.atlas-no-colleagues .menu-item[data-view="inbox"],
body.atlas-no-colleagues #inbox-tab-btn-claimed,
body.atlas-no-colleagues #inbox-tab-badge-claimed,
body.atlas-no-colleagues #btn-mode-internal,
body.atlas-no-colleagues #composer-agent-grid,
body.atlas-no-colleagues #composer-mode-toggle,
body.atlas-no-colleagues #atlas-assign-modal .assign-tab-btn[data-tab="agenter"],
body.atlas-no-colleagues #atlas-bulk-assign-modal .assign-tab-btn[data-tab="agenter"],
body.atlas-no-colleagues .claim-mini-btn,
body.atlas-no-colleagues .claim-action,
body.atlas-no-colleagues .assign-action,
body.atlas-no-colleagues [data-action="assign"],
body.atlas-no-colleagues .ask-colleague-btn,
body.atlas-no-colleagues [onclick*="askColleague"],
body.atlas-no-colleagues [id*="ask-colleague"],
body.atlas-no-colleagues [data-action="eye"],
body.atlas-no-colleagues .hw-stat-internal {
  display: none !important;
}

body.atlas-single-office #atlas-assign-modal .assign-tab-btn[data-tab="kontor"],
body.atlas-single-office #atlas-bulk-assign-modal .assign-tab-btn[data-tab="kontor"],
body.atlas-single-office #hw-offices-card,
body.atlas-single-office .office-routing-select {
  display: none !important;
}

body.atlas-single-office .menu-item[data-view="inbox"],
body.atlas-single-office #badge-inbox,
body.atlas-single-office #badge-inbox-claimed {
  display: none !important;
}

/* =============================================================================
   K5c/§A (2026-07-25) — PRE-PAINT: dölj Inkorgen för icke-admin.
   SEPARAT mekanism från singleton-klasserna ovan: de hänger på ANTAL kontor/
   användare och är aldrig sanna i en multi-enhets-tenant. Denna hänger på
   ROLLEN, satt pre-paint av PRE-PAINT AUTH-GATE i index.html.
   !important krävs — style.css sätter `.menu-item { display: flex !important }`,
   så en regel utan det hade tyst inte gjort någonting alls.
   Rent kosmetisk: serverns auth är oberoende och switchView('inbox') har sin
   egen grind. updateInboxVisibility() tar bort klassen i sin isSupport-gren
   innan den nollställer inline-stilen, så en admin med stale cachad roll får
   tillbaka Inkorgen så fort servern svarat.
   ============================================================================= */
html.atlas-role-agent .menu-item[data-view="inbox"] {
  display: none !important;
}

/* Delat tomt-läge för listor och adminpaneler. Tema-tokens och riktig textfärg
   används i stället för opacity så copy behåller kontrast i alla teman. */
.atlas-empty-state{
  box-sizing: border-box;
  min-width: 0;
  margin: 4px 10px 10px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-primary) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-dark-secondary) 94%, var(--accent-primary) 6%);
  overflow-wrap: anywhere;
}

.atlas-empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
}

.atlas-empty-state p {
  margin: 0;
  color: color-mix(in srgb, var(--text-secondary) 70%, var(--text-primary) 30%);
  font-size: 12px;
  line-height: 1.5;
}

.domain-admin-panel > .atlas-empty-state {
  margin: 0;
}

body.atlas-singleton #atlas-assign-modal,
body.atlas-singleton #atlas-bulk-assign-modal,
body.atlas-singleton .open-assign-modal,
body.atlas-singleton .menu-item[data-view="inbox"],
body.atlas-singleton #badge-inbox,
body.atlas-singleton #badge-inbox-claimed,
body.atlas-singleton .bulk-btn-assign {
  display: none !important;
}

/* ============================================================
   #86/#100 — "Testa"-ikonknapp i hemlighetsrader (Patrik IRL 2026-08-04:
   "gillar fortfarande inte textknappar med en rektangel runt, vill ha svg
   ikoner med hoovertext"). Ingen ram i viloläge — bakgrunden tänds först vid
   hover/fokus. Semantiska tokens, aldrig hårdkodad vit rgba, så den håller
   i alla tio teman inklusive de ljusa.
   ============================================================ */
/* #219 (2026-08-12): förälderkravet `.admin-config-row` är BORTTAGET ur selektorn.
   Mätt rotorsak: `#mail-test-btn` renderas i `<div data-mail-test-actions>`
   (`admin-config.js:838-840`), inte i en `.admin-config-row`, så regeln matchade
   aldrig och knappen föll till innehållsstorlek 15x20 med 15x15-glyf. Positiv
   kontroll samma runda: `#openai-test-btn`, samma klass men MED `.admin-config-row`
   som förälder, renderade 32x32/16x16. Klassen är specifik nog i sig — kravet på
   föräldern var oavsiktligt och gjorde standarden beroende av var knappen placeras. */
#view-admin .admin-config-test-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin .admin-config-test-btn svg {
  width: 16px;
  height: 16px;
}
#view-admin .admin-config-test-btn:hover,
#view-admin .admin-config-test-btn:focus-visible {
  opacity: 1;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
#view-admin .admin-config-test-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: var(--text-secondary);
}

/* 🔴 #78 (Patriks IRL-fynd 2026-08-05): ikonkontraktet sätter `display: inline-flex`
   med specificitet 1,2,0 och slog därmed ut webbläsarens `[hidden] { display: none }`
   (0,1,0). Följden: hänglåset i kategoridetaljen låg kvar synligt mitt på raden efter
   upplåsning, trots att `unlockCategoryBuilderEdit` sätter `unlock.hidden = true`.
   Samma fälla fanns redan lappad ad hoc för `#catalog-kw-unlock-btn`; denna regel
   gäller alla scopen på en gång så nästa konverterade yta inte återupptäcker den.
   Måste ligga FÖRE kontraktsblocken den skyddar är irrelevant — !important avgör. */
#view-admin .admin-config-icon-btn[hidden] {
  display: none !important;
}

/* #78-pilot — AI-motorns ikonåtgärder använder samma 32px-ytor som den
   godkända testknappen. Scoped så övriga adminytor väntar på huvudrundan.
   🟢 #315 (2026-08-18) ÄR den huvudrundan för Kundchatt & Kunskap-flikarna.
   `.qq-admin-panel` och `.admin-kb-section-card`
   (Kunskapsbankens sektioner) tillkommer därför här. Mätt före ändringen:
   deras lås var ramade TEXTknappar (66×30 respektive 79×27) medan
   Bokningslänkar/TS-länkar redan hade det korrekta 32×32-ikonlåset — det är
   alltså de här två ytorna som avvek, inte länkflikarna. */
#view-admin .admin-config-row .admin-config-icon-btn,
#view-admin .admin-config-section-heading .admin-config-icon-btn,
#view-admin .domain-admin-panel .admin-config-icon-btn,
#view-admin .qq-admin-panel .admin-config-icon-btn,
#view-admin .admin-kb-section-card .admin-config-icon-btn,
#view-admin .ctpl-surface .admin-config-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transform: none !important;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin .admin-config-row .admin-config-icon-btn svg,
#view-admin .admin-config-section-heading .admin-config-icon-btn svg,
#view-admin .domain-admin-panel .admin-config-icon-btn svg,
#view-admin .qq-admin-panel .admin-config-icon-btn svg,
#view-admin .ctpl-surface .admin-config-icon-btn svg,
#view-admin .admin-section-heading-icon svg {
  width: 16px;
  height: 16px;
}
#view-admin .admin-config-row .admin-config-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-icon-btn:focus-visible,
#view-admin .qq-admin-panel .admin-config-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-icon-btn:focus-visible,
#view-admin .admin-operation-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
#view-admin .admin-config-row .admin-edit-icon-btn,
#view-admin .admin-config-row .admin-config-lock-icon-btn,
#view-admin .admin-config-section-heading .admin-edit-icon-btn,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn,
#view-admin .domain-admin-panel .admin-edit-icon-btn,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn,
#view-admin .ctpl-surface .admin-edit-icon-btn,
#view-admin .ctpl-surface .admin-config-lock-icon-btn {
  color: var(--text-secondary);
}
#view-admin .admin-config-row .admin-edit-icon-btn:hover,
#view-admin .admin-config-row .admin-edit-icon-btn:focus-visible,
#view-admin .admin-config-row .admin-config-lock-icon-btn:hover,
#view-admin .admin-config-row .admin-config-lock-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-edit-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-edit-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-edit-icon-btn:hover,
#view-admin .domain-admin-panel .admin-edit-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn:hover,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-edit-icon-btn:hover,
#view-admin .ctpl-surface .admin-edit-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-lock-icon-btn:hover,
#view-admin .ctpl-surface .admin-config-lock-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
/* #78 F2 (Claude-verifiering 2026-08-05): admin-reset-icon-btn namngavs i
   ikonkontraktet men saknade CSS helt — den renderade som odefinierad brödtext.
   Återställ-till-standard är en neutral åtgärd, inte en fara, därför samma
   sekundärton som lås/redigera. */
#view-admin .admin-config-row .admin-reset-icon-btn,
#view-admin .admin-config-section-heading .admin-reset-icon-btn {
  color: var(--text-secondary);
}
#view-admin .admin-config-row .admin-reset-icon-btn:hover,
#view-admin .admin-config-row .admin-reset-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-reset-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-reset-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
#view-admin .admin-config-row .admin-cancel-icon-btn,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn,
#view-admin .domain-admin-panel .admin-cancel-icon-btn,
#view-admin .domain-admin-panel .admin-delete-icon-btn,
#view-admin .qq-admin-panel .admin-delete-icon-btn,
#view-admin .ctpl-surface .admin-cancel-icon-btn,
#view-admin .ctpl-surface .admin-delete-icon-btn {
  color: var(--status-danger, #ef4444);
}
body.atlas-light-theme #view-admin .admin-config-row .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .admin-config-section-heading .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-delete-icon-btn,
body.atlas-light-theme #view-admin .qq-admin-panel .admin-delete-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-delete-icon-btn {
  color: #b91c1c;
}
#view-admin .admin-config-row .admin-cancel-icon-btn:hover,
#view-admin .admin-config-row .admin-cancel-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-cancel-icon-btn:hover,
#view-admin .domain-admin-panel .admin-cancel-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-delete-icon-btn:hover,
#view-admin .domain-admin-panel .admin-delete-icon-btn:focus-visible,
#view-admin .qq-admin-panel .admin-delete-icon-btn:hover,
#view-admin .qq-admin-panel .admin-delete-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-cancel-icon-btn:hover,
#view-admin .ctpl-surface .admin-cancel-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-delete-icon-btn:hover,
#view-admin .ctpl-surface .admin-delete-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn {
  color: var(--status-success, #22c55e);
}
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
}
body.atlas-light-theme #view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn {
  color: #166534;
}
#view-admin .ctpl-surface .kb-save-icon-btn:not(.dirty) {
  color: var(--ctpl-muted-affordance, color-mix(in srgb, var(--text-secondary) 85%, var(--bg-dark-secondary) 15%)) !important;
}
#view-admin .kb-save-icon-btn.dirty,
#view-admin .kb-save-icon-btn.dirty:hover,
#view-admin .kb-save-icon-btn.dirty:focus-visible {
  color: #4cd964 !important;
}
#view-admin .admin-section-heading-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 5px;
}
#view-admin .admin-config-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
#view-admin .admin-config-section-heading h4 {
  min-width: 0;
}
#view-admin .admin-config-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* ============================================================
   #78 delfix 2 (Patriks IRL-fråga 2026-08-05: "går det att få hovertexten på
   dessa PÅ/AV att synas utan att man måste låsa upp fältet först?").
   I låst läge bär pillret `pointer-events: none` — det ÄR låset, och det får
   inte avväpnas (AGENTS.md: försvaga aldrig ett skyddslager). Följden är att
   webbläsaren aldrig får en hover-träff på knappen och därför aldrig visar dess
   `title`. Omslaget tar emot hovern i stället och bär samma text, medan pillret
   behåller `pointer-events: none`. Det hybrida beteendet (none låst / auto
   upplåst) står orört.
   ============================================================ */
#view-admin .admin-toggle-hover-wrap {
display: inline-flex;
align-items: center;
pointer-events: auto;
}

/* Resultatet är ren text under raden — ingen ruta, ingen ram. */
#view-admin .admin-config-test-result {
  font-size: var(--text-micro-size);
  line-height: 1.5;
  min-height: 1.2em;
}
#view-admin .admin-config-test-result .is-ok { color: var(--success-text); }
#view-admin .admin-config-test-result .is-error { color: var(--danger-text); }
#view-admin .admin-config-test-result .is-pending {
  color: var(--text-secondary);
  opacity: var(--text-help-opacity);
}
.widget-preview-launch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-primary, #5fa8ff) 42%, var(--border-color, transparent));
  border-radius: 14px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-primary, #5fa8ff) 16%, transparent), color-mix(in srgb, var(--bg-dark-secondary, #202632) 96%, transparent));
}
.widget-preview-launch-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--accent-primary, #5fa8ff) 20%, transparent); color: var(--accent-primary, #5fa8ff); }
.widget-preview-launch-copy { display: grid; min-width: 0; gap: 3px; }
.widget-preview-launch-copy strong { color: var(--text-primary); font-size: 14px; }
.widget-preview-launch-copy > span:last-child { color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
.widget-preview-launch-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 42px; text-decoration: none; white-space: nowrap; }
.widget-preview-launch-button svg { width: 17px; height: 17px; }
.widget-test-bubble-button {
  min-height: 42px;
  padding: 0 17px 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--widget-preview-bg, #1a56db) 44%, #000 56%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  font-weight: 700;
}
.widget-test-bubble-button:hover { filter: brightness(.94); }
.company-website-preview-status { border: 1px solid var(--border-color); background: var(--bg-secondary); }
.company-website-preview-status[data-preview-tone="success"] { border-color: color-mix(in srgb, #2fb171 45%, var(--border-color)); background: color-mix(in srgb, #2fb171 10%, var(--bg-secondary)); }
.company-website-preview-status[data-preview-tone="error"] { border-color: color-mix(in srgb, #ff6b6b 45%, var(--border-color)); background: color-mix(in srgb, #ff6b6b 10%, var(--bg-secondary)); }
.company-website-preview-status[data-preview-tone="warning"] { border-color: color-mix(in srgb, #e6a23c 45%, var(--border-color)); background: color-mix(in srgb, #e6a23c 10%, var(--bg-secondary)); }

@media (max-width: 700px) {
  .widget-preview-launch { grid-template-columns: auto minmax(0, 1fr); }
  .widget-preview-launch-button { grid-column: 1 / -1; width: 100%; }
}

/* KAN-146: vissa adminrader har en egen display-deklaration och läckte därför
   ur stängda details även på desktop. Grid-rader är summary-layoutrader och
   undantas enligt det befintliga mobilkontraktet. */
#view-admin details:not([open]) .admin-config-row:not([style*="display:grid"]) {
  display: none !important;
}