/* =============================================================================
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; /* Flyttad hit från toppen */
}

/* 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 (280px förälder) */
#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: 280px !important;
min-width: 280px !important;
max-width: 280px !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;
}

/* 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 (Här var den som saknades!) */
/* 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;
}
.admin-danger-icon-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 7px;
border: 1px solid rgba(255,69,58,0.34);
background: rgba(255,69,58,0.08);
color: #ff453a;
cursor: pointer;
flex-shrink: 0;
}
.admin-danger-icon-btn:hover {
background: rgba(255,69,58,0.16);
border-color: rgba(255,69,58,0.58);
}
.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; }

/* 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; }
.header-title-icon { 
width: 28px !important; 
height: 28px !important; 
color: var(--accent-primary) !important;
flex-shrink: 0;
opacity: 0.95;
transition: all var(--transition-fast);
stroke-width: 2;
}

.chat-header h2:hover .header-title-icon {
width: 30px !important;
height: 30px !important;
opacity: 1;
}

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

.chat-header h2:hover {
transform: translateY(-1px);
text-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent),
0 2px 6px rgba(0, 0, 0, 0.25) !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;
}

.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 — Mörk bakgrund på service-dropdown */
#admin-detail-content select,
#new-service-select {
background: rgba(20, 18, 28, 0.90) !important;
color: var(--text-primary) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}
#admin-detail-content select option,
#new-service-select option {
background: #1a1825;
color: #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;
background: rgba(15, 15, 20, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
overflow: hidden;
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;
}

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

.about-shortcut-row:hover {
background: rgba(255, 255, 255, 0.08);
}

.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-shortcut-label {
font-size: 13px;
opacity: 0.85;
text-align: right;
}

/* Styling för kbd-tangenter inuti Om-vyn */
.about-cell kbd {
display: inline-block;
padding: 3px 8px;
background: linear-gradient(180deg, #3a3a3c, #2c2c2e);
border: 1px solid rgba(255, 255, 255, 0.12);
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: #ffffff !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;
}

/* Sacrifice rules för att tysta ett envist audit-script */
#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;
}

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

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

@media (max-width: 1200px) {
#office-detail-body .admin-office-detail-grid > div:last-child {
grid-template-columns: 1fr !important;
}
}

/* =============================================================================
MAILMALLAR FROST-TEMA
============================================================================= */

/* 1. Ramen: Temafärg-tintad mörk bakgrund — fungerar i alla teman inkl. varma/ljusa */
#view-templates .template-editor-container {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent-primary) 7%, transparent) 0%,
color-mix(in srgb, var(--bg-frosty-content) 92%, transparent) 18%,
color-mix(in srgb, var(--bg-frosty-content) 98%, transparent) 100%) !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;
opacity: 1 !important;
border: none !important;
box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.14) !important;
}

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

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

/* =============================================================================
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 */
#view-inbox .template-editor-container::after,
#view-inbox .template-editor-container::before,
#view-my-tickets .template-editor-container::after,
#view-my-tickets .template-editor-container::before,
#view-templates .template-editor-container::after,
#view-templates .template-editor-container::before {
display: none !important;
content: none !important;
height: 0 !important;
width: 0 !important;
border: none !important;
}

/* 3. Säkerställer att själva placeholdern inuti är ren */
/* =============================================================================
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;
}

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

/* === 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-save-icon-btn:hover {
color: rgba(255, 255, 255, 0.45) !important;
background: transparent !important;
}
.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; }
}

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

/* Badge-bubbla: accent-rundad badge uppe till höger om klockan */
.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%, white);
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: glassmorphism dropdown */
#notif-panel {
position: fixed;
top: 72px;
right: 20px;
width: 360px;
max-height: 500px;
background: rgba(13, 10, 22, 0.96);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
box-shadow: 0 16px 56px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
z-index: 8500;
display: flex;
flex-direction: column;
overflow: hidden;
animation: fadeIn 0.18s ease forwards;
}

/* Panel-header med flikar + rensa-knapp */
.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.45);
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.75);
}
.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.1);
border-radius: 6px;
color: rgba(255,255,255,0.35);
font-size: 11px;
padding: 4px 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.7);
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.05);
}

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

/* Tom-text */
.notif-empty {
text-align: center;
color: rgba(255,255,255,0.28);
font-size: 12.5px;
padding: 32px 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Notis-rad */
.notif-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.04); }

/* Oläst: ljusare vit text */
.notif-unread .notif-item-text { color: rgba(255,255,255,0.92); }
.notif-unread { background: rgba(255,255,255,0.025); }

/* Text och tid */
.notif-item-text {
flex: 1;
font-size: 12.5px;
color: rgba(255,255,255,0.62);
line-height: 1.45;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
word-break: break-word;
}
.notif-item-time {
font-size: 10.5px;
color: rgba(255,255,255,0.28);
white-space: nowrap;
flex-shrink: 0;
margin-top: 2px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Historik-ikon (emoji) */
.notif-history-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
line-height: 1;
}

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

.ln-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,212,180,0.04) 0%, transparent 70%),
linear-gradient(160deg, #06090f 0%, #060a12 50%, #04080f 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 99998;
overflow: hidden;
}

.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: 268px;
max-width: 90vw;
background: linear-gradient(160deg, #0d1422 0%, #080c14 55%, #0a0e1a 100%);
border-radius: 30px;
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: 28px 0 22px;
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: 86px; height: 86px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
margin-bottom: 16px;
}
.ln-ring-pulse {
position: absolute;
inset: -12px;
border-radius: 50%;
border: 1.5px solid rgba(0,212,180,0.25);
animation: lnRingPulse 2.8s ease-in-out infinite;
}
.ln-ring-pulse.ln-delay {
inset: -22px;
border-color: rgba(0,212,180,0.10);
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);
animation: lnSpin 1.8s linear infinite;
}
@keyframes lnSpin { to { transform: rotate(360deg); } }

.ln-logo-circle {
width: 86px; height: 86px;
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-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;
}
@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: 24px;
}

/* "Logga in för att fortsätta"-prompt */
.ln-prompt {
font-size: 10.5px;
color: rgba(255,255,255,0.35);
letter-spacing: 0.4px;
text-align: center;
margin-bottom: 14px;
}

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

/* Form */
.ln-form {
width: 100%;
box-sizing: border-box;
padding: 0 8px;
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.32);
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.22); 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: 14px;
margin: 0;
opacity: 0;
transition: opacity 0.2s ease;
text-align: center;
}
.ln-error.visible { opacity: 1; }

/* Knapp */
.ln-btn {
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.22);
letter-spacing: 1.5px;
}

/* Footer */
.ln-version {
font-size: 9px;
color: rgba(255,255,255,0.15);
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); }

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

/* Admin office top panels should not trap wheel-scroll away from detail-body. */
#admin-detail-content #box-tickets,
#admin-detail-content #box-agents {
max-height: none !important;
overflow: visible !important;
}

#admin-detail-content #box-tickets .scroll-list,
#admin-detail-content #box-agents .scroll-list {
overflow-y: visible !important;
min-height: 0 !important;
}

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