/* ============================================
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;
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(5, 40px) !important;
gap: 10px 12px !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: 7px !important;
border-radius: 12px !important;
}

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

#view-admin .new-agent-office-list {
scrollbar-width: thin;
}

#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 .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: 8px;
font-weight: 750;
letter-spacing: 0.06em;
margin: 0 0 5px;
opacity: 0.58;
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: color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--accent-primary) 5%) !important;
border-color: color-mix(in srgb, var(--border-color) 76%, var(--accent-primary) 14%) !important;
color: var(--text-primary) !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-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: color-mix(in srgb, var(--bg-dark-secondary) 78%, var(--accent-primary) 14%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color) 54%) !important;
color: color-mix(in srgb, var(--accent-primary) 82%, var(--text-primary) 18%) !important;
}

#box-office-master .admin-danger-footer {
width: calc(100% + 50px);
margin-left: -25px;
margin-right: -25px;
margin-bottom: -25px;
box-sizing: border-box;
}

.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;
}
.btn-glass-small:hover {
background: var(--accent-primary);
color: white;
}

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

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

#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: thin;
scrollbar-color: rgba(255,255,255,0.24) transparent;
}

.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 {
color: var(--info-text);
background: var(--info-bg);
border-color: var(--info-border);
}
.admin-note-danger {
color: var(--danger-text);
background: var(--danger-bg);
border-color: var(--danger-border);
}
.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 var(--border-color);
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);
}

.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;
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 {
max-width: 760px;
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-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;
}

.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-top: 14px;
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;
}

.ki-sc-status-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
letter-spacing: 0;
line-height: 1.35;
}

.ki-sc-remove {
background: none;
border: none;
color: rgba(255,255,255,0.2);
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);
}

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

.ki-section-title,
.ki-section-answer,
.ki-sc-input,
.ki-sc-textarea {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
color: rgba(255,255,255,0.85);
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: rgba(255,255,255,0.2);
}

.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: rgba(255,255,255,0.06);
border-radius: 10px;
color: rgba(255,255,255,0.4);
}

.ki-section-summary {
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
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;
}

.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: thin;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.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;
}

/* Tvingar all text inuti cellerna att vara vit för maximal läsbarhet */
.about-cell, .about-cell span, .about-cell div, .about-cell label {
color: #ffffff !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 {
gap: 4px;
margin-top: 4px;
}
#view-about .guide-step {
padding: 5px 9px;
gap: 9px;
border-left-width: 2px;
border-radius: 8px;
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: 9px;
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: 10px;
color: var(--text-secondary) !important;
opacity: 0.85;
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;
}

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

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

.about-kbd-sep {
font-size: 10px;
opacity: 0.4;
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: 9px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}

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

.about-platform-note {
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: 9px !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-icon-btn svg {
width: 15px !important;
height: 15px !important;
stroke: currentColor !important;
}

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

.qq-topbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 22%);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--accent-primary) 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.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 p {
margin: 5px 0 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;
}

#view-admin .qq-main-lock-btn {
min-height: 30px !important;
height: 30px !important;
padding: 0 11px !important;
border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-color)) !important;
background: color-mix(in srgb, var(--bg-dark-secondary) 80%, var(--accent-primary) 13%) !important;
color: var(--accent-primary) !important;
font-weight: 800 !important;
opacity: 1 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#view-admin .qq-main-lock-btn.unlocked {
border-color: color-mix(in srgb, var(--status-warning, #f59e0b) 42%, var(--border-color)) !important;
background: color-mix(in srgb, var(--status-warning, #f59e0b) 13%, var(--bg-dark-secondary)) !important;
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) 82%, var(--accent-primary) 16%);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--accent-primary) 5%);
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;
}

.qq-count-btn.active {
background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-dark-secondary));
border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
color: var(--accent-primary);
}

.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) 90%, var(--accent-primary) 5%) !important;
border: 1px solid color-mix(in srgb, var(--border-color) 80%, var(--accent-primary) 18%) !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-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) 72%, var(--accent-primary) 18%);
background: color-mix(in srgb, var(--bg-dark-secondary) 91%, var(--accent-primary) 5%);
}

.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-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: grid;
grid-template-columns: 30px minmax(0, 1fr) auto 30px 26px;
align-items: center;
gap: 7px;
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-index {
font-size: 11px;
font-weight: 800;
text-align: right;
color: var(--text-secondary);
opacity: 0.78;
}

.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;
}

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

.qq-test-row-btn,
.qq-row-action {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 8%);
border: 1px solid color-mix(in srgb, var(--border-color) 70%, var(--accent-primary) 22%);
color: var(--text-secondary);
cursor: pointer;
transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.qq-test-row-btn {
gap: 5px;
height: 28px;
padding: 0 8px;
font-size: 10.5px;
font-weight: 800;
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));
border-color: color-mix(in srgb, var(--accent-primary) 44%, var(--border-color));
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%, var(--bg-dark-secondary));
border-color: color-mix(in srgb, var(--qq-lock-color, var(--accent-primary)) 38%, var(--border-color));
}

.atlas-light-theme #view-admin .qq-topbar,
.atlas-light-theme #view-admin .qq-test-panel {
background: color-mix(in srgb, var(--accent-primary) 7%, #ffffff 78%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 25%, 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,
.atlas-light-theme #view-admin .qq-test-row-btn,
.atlas-light-theme #view-admin .qq-row-action {
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;
}

.atlas-light-theme #view-admin .qq-count-btn.active {
background: color-mix(in srgb, var(--accent-primary) 17%, #ffffff 70%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 46%, rgba(0,0,0,0.14)) !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,
.drift-logo-actions .btn-glass-small {
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
white-space: nowrap !important;
}

.drift-logo-actions .admin-save-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: 120px !important;
min-height: 120px !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;
}

#view-templates .ql-editor {
color: rgba(255, 255, 255, 0.90) !important;
font-size: 15px !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: 9px;
font-weight: 650;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
opacity: 0.62;
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: rgba(76, 217, 100, 0.075);
border-color: rgba(76, 217, 100, 0.20);
color: color-mix(in srgb, #4cd964 72%, var(--text-primary));
}

#view-admin .gap-status-pill.is-ts-miss {
background: rgba(255, 159, 10, 0.075);
border-color: rgba(255, 159, 10, 0.20);
color: color-mix(in srgb, #ff9f0a 72%, 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;
}

#view-admin .gap-ai-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 23px;
height: 23px;
padding: 0;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent);
background: color-mix(in srgb, var(--text-secondary) 5%, 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;
}

#view-admin .gap-ai-btn:hover {
opacity: 1;
color: var(--accent-primary);
border-color: color-mix(in srgb, var(--accent-primary) 34%, 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
============================================================================= */
.kb-save-icon-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 6px !important;
color: rgba(255, 255, 255, 0.18) !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: rgba(255, 255, 255, 0.45) !important;
background: transparent !important;
}

.kb-download-icon-btn {
color: rgba(255, 255, 255, 0.34) !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 {
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;
}
.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: 9.5px;
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;
}

/* 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); }
.notif-tab.active {
color: var(--accent-primary, #7c5cbf);
border-bottom-color: var(--accent-primary, #7c5cbf);
}

/* 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;
}
.notif-history-tool-btn:hover,
.notif-history-tool-btn.active {
color: var(--accent-primary, #7c5cbf);
border-color: color-mix(in srgb, var(--accent-primary, #7c5cbf) 42%, transparent);
background: color-mix(in srgb, var(--accent-primary, #7c5cbf) 14%, transparent);
}

.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;
}
#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 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: 9px;
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;
}
@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: 9px;
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: 9px;
color: rgba(255,255,255,0.44);
letter-spacing: 1.5px;
}

/* Footer */
.ln-version {
font-size: 9px;
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);
}

.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-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:
linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.075)) !important;
border-color: rgba(34,197,94,0.46) !important;
box-shadow: inset 0 0 0 1px rgba(34,197,94,0.08), 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: rgba(34,197,94,0.10);
border-color: rgba(34,197,94,0.42);
box-shadow: 0 0 0 1px rgba(34,197,94,0.08) inset;
opacity: 1;
color: color-mix(in srgb, #4cd964 76%, var(--text-primary));
}
.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: 8.5px;
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: 8px;
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: 170px;
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: #ffd166;
font-size: 8px;
letter-spacing: 0;
white-space: nowrap;
opacity: 0.85 !important;
}
.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: 30px;
height: 28px;
padding: 0;
flex: 0 0 auto;
}

.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;
}

.campaign-summary-card:hover,
.campaign-summary-card.active {
border-color: color-mix(in srgb, var(--accent-primary) 44%, rgba(255,255,255,0.10));
background: color-mix(in srgb, var(--accent-primary) 9%, rgba(255,255,255,0.04)) !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);
}

#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);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item:hover {
background: color-mix(in srgb, var(--accent-primary) 16%, rgba(255,255,255,0.04));
color: color-mix(in srgb, var(--accent-primary) 82%, var(--text-primary));
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item.selected {
background: color-mix(in srgb, var(--accent-primary) 24%, rgba(255,255,255,0.05));
color: var(--accent-primary);
}

#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);
}

.campaign-footer-icon-btn.is-save {
color: #fff;
background: color-mix(in srgb, var(--accent-primary) 84%, #111);
}

.campaign-footer-icon-btn.is-save:hover {
color: #fff;
background: color-mix(in srgb, var(--accent-primary) 94%, #fff);
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: 9px;
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-main-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;
}
.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);
}
.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;
}
.catalog-section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.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;
}
.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: 9px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
opacity: 0.55;
}
.catalog-ai-source-row {
display: flex;
justify-content: flex-end;
margin-bottom: 5px;
}
.catalog-description-input {
min-height: 112px;
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;
}
.catalog-save-btn {
color: #4cd964 !important;
}
.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)); }
}
.catalog-cancel-btn {
color: rgba(255,255,255,0.38) !important;
}
.catalog-delete-btn {
color: #ff453a !important;
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: 9px;
background: rgba(0,113,227,0.22);
border-radius: 4px;
padding: 1px 5px;
margin-left: auto;
color: rgba(255,255,255,0.65);
vertical-align: middle;
white-space: nowrap;
flex-shrink: 0;
}
.kb-linked-services-panel {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px 14px;
margin: 0 0 12px;
background: rgba(0,113,227,0.1);
border-radius: 8px;
font-size: 11px;
color: rgba(255,255,255,0.7);
}
.kb-linked-services-label {
font-weight: 600;
margin-right: 4px;
}
.kb-linked-services-panel span:not(.kb-linked-services-label) {
background: rgba(255,255,255,0.07);
border-radius: 4px;
padding: 2px 7px;
}
.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: rgba(255,255,255,0.05);
opacity: 1;
}
.catalog-list-section-label--clickable.active {
background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
opacity: 1;
}
.catalog-guide-label-hint {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9px;
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: 9px;
}

.catalog-ai-source-row {
justify-content: flex-start;
}

.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: 9px;
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 rgba(255,209,102,0.28);
border-radius: 5px;
background: rgba(255,209,102,0.08);
color: #ffd166;
}
.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;
}
#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;
}
#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: 9.5px;
}
}

/* 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: 8px !important;
}
#box-prices .office-service-note-btn.has-note {
color: var(--accent-primary) !important;
border-color: var(--accent-primary) !important;
background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
opacity: 1 !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;
}
#box-prices .office-service-note-textarea:disabled {
background: rgba(255,255,255,0.03) !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: 50% !important;
font-size: 0 !important;
}
#box-prices .price-delete-btn svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
stroke: none !important;
}
#box-prices .price-delete-btn:hover {
background: rgba(255,69,58,0.18) !important;
border-color: rgba(255,69,58,0.42) !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. */
#admin-detail-content #box-tickets,
#admin-detail-content #box-agents {
max-height: min(520px, 58vh) !important;
overflow: hidden !important;
min-height: 120px !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;
}

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

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

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;
}