/* =============================================================================
Renderer/assets/css/style.css
VAD DEN GÖR: Huvud-stylesheet — CSS-variabler, layout, navigering,
knappar, chattvy, ärendekort, animationer och hem-widgets.
ANVÄNDS AV:  index.html (primär stylesheet)
SENAST STÄDAD: 2026-05-15
============================================================================= */

/* =============================================================================
CSS VARIABLER & TEMAN
============================================================================= */

:root {
/* FÄRGPALETT */
--bg-dark-primary: #1e1e1e;
--bg-dark-secondary: #252525;
--bg-dark-tertiary: #333333;
--text-primary: #f5f5f7;
--text-secondary: #a1a1a6;
--accent-primary: #0071e3;
--accent-hover: #0077ed;
--bubble-user: #0071e3;
--bubble-atlas: #3a3a3c;
--bubble-neutral-bg: var(--bg-dark-tertiary);
--bubble-neutral-border: rgba(255, 255, 255, 0.08);
--border-color: rgba(255, 255, 255, 0.08);
--blur-amount: 20px;

/* FROST GLAS-EFFEKTER */
--bg-frosty-sidebar: rgba(30, 30, 30, 0.35);
--bg-frosty-header: rgba(37, 37, 37, 0.7);
--bg-frosty-content: rgba(18, 18, 22, 0.78);
--bg-frosty-bubble-atlas: rgba(58, 58, 60, 0.85);
--bg-frosty-bubble-user: rgba(0, 113, 227, 0.9);
--bg-frosty-input-area: rgba(37, 37, 37, 0.7);
--bg-frosty-input-field: rgba(51, 51, 51, 0.6);

/* TYPOGRAFI & FORM */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;

--border-radius-xl: 20px;
--border-radius-lg: 16px;
--border-radius-md: 12px;
--border-radius-sm: 8px;
--border-radius-xs: 6px;

--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;

/* Rubrikrutans höjd. panel-label-total = höjd + gap (förblir konstant
så att innehållet under linjen håller sin position när höjden justeras) */
--panel-label-height: 117px;
--panel-label-total: 129px;

--shadow-small: 0 2px 8px rgba(0, 0, 0, 0.15);
--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.25);
--shadow-large: 0 8px 32px rgba(0, 0, 0, 0.35);

--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

/* STATUS FÄRGER (TEAM) */
--status-danger: #ff4444;
--status-success: #00C851;

/* GLOW-TOKENS (baserade på --accent-primary via color-mix) */
--glow-soft:   0 0 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
--glow-medium: 0 0 16px color-mix(in srgb, var(--accent-primary) 45%, transparent);
--glow-strong: 0 0 30px color-mix(in srgb, var(--accent-primary) 60%, transparent);

/* STATUS-TOKENS (--status-success behålls oförändrad ovan) */
--status-warning: #ff9f0a;
--status-info:    #5ac8fa;

/* BADGE-TOKENS */
--badge-bg:   color-mix(in srgb, var(--accent-primary) 15%, transparent);
--badge-text: var(--accent-primary);
}

/* =============================================================================
RESET & BASTYLER
============================================================================= */

/* === GLOBAL RESET === */
button, input, select, textarea {
background: transparent !important;
border: none;
color: inherit;
font-family: inherit;
font-size: inherit;
outline: none !important;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
button, select {
cursor: pointer !important;
}
input, textarea {
cursor: text !important;
}

/* =============================================================================
GRUNDLÄGGANDE (Base & Layout)
============================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Ta bort spinner-pilar på number-inputs i alla webbläsare */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

body, html {
height: 100%;
width: 100%;
font-family: var(--font-family);
background-color: var(--bg-dark-secondary);
color: var(--text-primary);
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-size: 15px;
line-height: 1.5;
}

/* FOUC-gate - pre-paint hide tills checkAuth() i renderer.js
bekraftat session. Satts av inline-script i index.html `<head>`.
visibility istf display for att bevara layout-berakning. */
html.auth-pending .app-container {
visibility: hidden;
}

.glass-effect {
background: rgba(20, 18, 28, 0.50) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
transform: translateZ(0);
}

/* === SCROLLBAR (global, diskret, ingen glow) ===
Base-regeln. Teman har också scrollbar-regler men är neutraliserade där. */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: transparent !important; }
::-webkit-scrollbar-track { background: transparent !important; margin: 4px 0; box-shadow: none !important; border: none !important; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 3px !important;
box-shadow: none !important;
border: none !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; }
::-webkit-scrollbar-corner { background: transparent !important; }
/* Dölj upp/ned-pilarna helt (de kan dyka upp på vissa element) */
::-webkit-scrollbar-button { display: none !important; height: 0 !important; width: 0 !important; background: transparent !important; }

#inbox-list::-webkit-scrollbar-track {
background: transparent !important;
}

#inbox-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08) !important;
}

.app-container {
display: flex;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 1;
filter: none !important;
}

/* =============================================================================
SIDEBAR & NAVIGATION
============================================================================= */
.sidebar {
width: 260px !important;
flex-shrink: 0 !important;
background: var(--bg-frosty-sidebar);
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-color);
z-index: 10;
height: 100%;
border-radius: 0 !important;
}

/* Sidomeny: enhetlig opacitet över alla vyer (issue 2026-05-14).
   Body-bilden (var(--bg-image)) bleeds genom temats translucenta
   --bg-frosty-sidebar (0.92–0.99 alfa). I HEM-vyn är vy-innehållet glest
   så body-bilden syns rikligt på högersidan, vilket gör att de 5–8 %
   bleed-through på sidomenyn ser starkare ut än i Inkorg/Mina/Garaget
   där täta paneler täcker body. Lägger solid var(--bg-color) som
   bottenlager via background-image-stack så body-bilden blockeras under
   sidomenyn medan temats translucent ton (--bg-frosty-sidebar) bevaras
   som överlager. Skapar konsekvent intryck oavsett vy. Högre specificitet
   (html body .sidebar) vinner mot teman som sätter `background: ...` direkt
   på `.sidebar` (inkl. atlas-minimal som har !important). */
html body .sidebar {
background-image:
linear-gradient(var(--bg-frosty-sidebar), var(--bg-frosty-sidebar)),
linear-gradient(var(--bg-color), var(--bg-color));
}

.sidebar-header {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
background: linear-gradient(180deg, rgba(0, 113, 227, 0.08) 0%, transparent 100%);
border-bottom: 1px solid var(--border-color);
margin-bottom: var(--spacing-md);
/* Logo-ytan fungerar också som drag-zon */
-webkit-app-region: drag;
user-select: none;
}

.sidebar-logo {
/* Logga 180px bred — background/border/shadow nollställda */
width: 180px; 
height: auto;
margin-bottom: var(--spacing-md);
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;

/* Skugga som följer ATLAS-bokstäverna istället för rutan */
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.5));
transition: transform 0.3s ease, filter 0.3s ease;
cursor: pointer;
}

.sidebar-logo:hover {
transform: none; 

/* Hover-glow runt bokstäverna — blå/vit glow matchar Atlas-stilen */
filter: drop-shadow(0px 0px 10px rgba(0, 113, 227, 0.35)) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.12));
}

#app-name-display { display: none; }

.sidebar-menu {
list-style: none;
padding: 0 var(--spacing-md);
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
height: calc(100% - 150px);
}

/* =============================================================================
SIDEBAR MENU - HOVER & ACTIVE — MINIMALISTISK STIL (matchar header-flikar)
Använder .sidebar .menu-item för att vinna mot tema-overrides utan !important
============================================================================= */
.menu-item {
padding: 10px var(--spacing-md);
border-radius: 0;
border-left: 2px solid transparent;
margin-bottom: 2px;
font-weight: 500;
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
display: flex !important;
align-items: center !important;
gap: 12px;
position: relative;
}

.menu-item .menu-text { color: inherit; font-weight: inherit; letter-spacing: 0; }
.menu-item .menu-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; opacity: 1; flex-shrink: 0; }

/* Gammal animerad bar — dold */
.menu-item::before { display: none !important; }
.menu-item:hover::before { display: none !important; }
.menu-item.active::before { display: none !important; }

/* 1. HOVER — högre specificitet (.sidebar prefix) för att slå tema-CSS */
.sidebar .menu-item:hover {
background: none !important;
background-color: transparent !important;
color: rgba(255, 255, 255, 0.85) !important;
transform: none !important;
box-shadow: none !important;
}

/* 2. AKTIVT LÄGE — bara en accent-border-left, ingen bakgrund */
.sidebar .menu-item.active {
background: none !important;
background-color: transparent !important;
background-image: none !important;
color: var(--accent-primary) !important;
box-shadow: none !important;
border-left: 2px solid var(--accent-primary) !important;
font-weight: 600 !important;
}

.menu-item.active svg {
color: var(--accent-primary) !important;
}

/* pointer-events säkerställs explicit — åsidosätter eventuella tema-regler */
.active { pointer-events: auto !important; }

#logout-btn {
margin-top: auto !important;
border-top: 1px solid var(--border-color);
padding-top: var(--spacing-md);
}

.new-chat-btn {
background: var(--accent-primary);
color: white;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}

/* =============================================================================
AGENT AVATAR & PROFIL
============================================================================= */
.user-avatar {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
color: #fff; 
}

.status-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background-color: var(--status-success);
border: 2px solid #1e1e1e;
border-radius: 50%;
}

/* =============================================================================
AGENT PROFIL (SIDEBAR FOOTER)
============================================================================= */

/* 1. Själva rutan (Containern) - Här sätter vi den låga höjden */
.sidebar-footer {
margin-top: auto !important;
padding: 8px 12px !important; /* Minimal padding = lägre ruta */
border-top: 3px solid var(--border-color) !important;
background: rgba(0, 0, 0, 0.15) !important;
min-height: 60px !important; /* Räcker för namn + statusrad */
}

/* Kopplar både klass och ID för att tysta audit-varning */
#user-profile-container, 
.user-profile {
display: flex !important;
flex-direction: row !important; 
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
width: 100% !important;
}

/* Audit-varning: profil och editor */
#user-profile-container { display: flex !important; }

/* 3. Text-delen (Namn & Status) - Tar upp mittenplatsen */
.user-details {
flex: 1 !important; 
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
min-width: 0 !important;
}

.user-name {
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin: 0 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}

.user-role {
font-size: 10px !important;
line-height: 1 !important;
margin: 0 !important;
opacity: 0.6 !important;
}

/* 4. Login/Logout-knappen (Dörren) - Flyttas till höger */
.logout-icon-btn {
margin-left: auto !important; 
padding: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0.5 !important;
transition: opacity 0.15s ease, background 0.15s ease !important;
}

.logout-icon-btn:hover {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 6px !important;
}

/* =============================================================================
AGENT CARD (Tilldela-modal)
============================================================================= */
.agent-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
/* min-width:0 → tillåt kortet att krympa till sin grid-/flex-kolumn. Utan denna
   tvingar long nowrap-text (t.ex. kontorens status) kortet bredare än 1fr-spåret
   och hela rutnätet svämmar ut till höger utanför modalen. */
min-width: 0;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.agent-card:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--accent-primary); }

.agent-card-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
position: relative;
flex-shrink: 0;
}

.presence-dot {
position: absolute;
bottom: 1px;
right: 1px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #1a1a1a;
}
.presence-dot.online { background: var(--status-success); }
.presence-dot.offline { background: #95a5a6; }

.agent-card-name { font-weight: 600; font-size: 13px; color: #fff; overflow-wrap: anywhere; }
.agent-card-status { font-size: 10px; color: #aaa; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bär flex-barnet som rymmer namn+status — min-width:0 krävs för att ellipsis på
   .agent-card-status faktiskt ska slå till och inte tvinga kortet bredare. */
.agent-card-info { flex: 1; min-width: 0; }

/* Stadsrubrik i tilldelningsmodalens KONTOR-flik (grupperar kontor per stad). */
.assign-group-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin: 2px 2px 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
SETTINGS & AVATAR PICKER
============================================================================= */
.settings-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.settings-group input[type="text"] { width: 100%; padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); border-radius: 6px; color: white; }

.avatar-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.avatar-option {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px;
transition: background 0.15s, transform 0.15s;
}
.avatar-option svg { width: 100%; height: 100%; }
.avatar-option:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); }
.avatar-option.selected { background: var(--accent-primary); border-color: #fff; color: #fff !important; }

/* =============================================================================
CHATTVY & FORMULÄR
============================================================================= */

/* =============================================================================
CHAT MESSAGES & MAIL MODES
============================================================================= */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}

/* Mail Mode */
.mail-mode .chat-messages { gap: 0; }
.mail-mode .message { max-width: 100%; }
.mail-mode .message .bubble {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
color: var(--text-primary) !important;
white-space: pre-wrap;
}

/* Agent Mode / Template Editor - Behåller design, layout styrs av Brandvägg */
.template-editor-container .message.atlas .bubble {
background: var(--bg-frosty-bubble-atlas) !important;
backdrop-filter: blur(var(--blur-amount)) !important;
-webkit-backdrop-filter: blur(var(--blur-amount)) !important;
border: 1px solid var(--border-color) !important;
color: #ffffff !important;
box-shadow: var(--shadow-small) !important;
}

/* =============================================================================
HEM-VYN (Home) - MASTER LAYOUT KONSOLIDERAD
============================================================================= */
#view-chat:not(.home-chat-active) #chat-messages {
flex: 0 0 0 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}

#view-chat #home-brand-watermark {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 clamp(24px, 3vw, 48px) 0 20px;
pointer-events: none;
user-select: none;
overflow: hidden;
}

#view-chat #home-brand-watermark img {
width: clamp(190px, 21vw, 285px);
max-height: min(150px, 82%);
height: auto;
object-fit: contain;
opacity: 0.13;
mix-blend-mode: screen;
filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.35));
}

#view-chat.home-chat-active #home-brand-watermark {
display: none !important;
}

#view-chat.home-chat-active #chat-messages {
flex: 1 1 auto !important;
}

/* HEM SKRIVRUTA */
#home-chat-footer.chat-input-area {
display: flex !important;
width: 100% !important;
min-height: 100px !important;
padding: 20px 40px !important;
background: transparent !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border-radius: 0 !important;
}

#home-chat-footer #chat-form {
display: flex !important;
width: 100% !important;
max-width: 1000px !important;
background: var(--bg-frosty-input-area) !important;
border-radius: 20px !important;
padding: 8px 8px 8px 22px !important; /* <--- Ändrad! Endast 8px till höger nu */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#home-chat-footer #chat-form:focus-within {
/* transform: translateY(-2px) !important; <-- TA BORT! */
border-color: rgba(255, 255, 255, 0.2) !important; /* Dämpa färgen */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* Standard skugga */
}

#home-chat-footer #my-chat-input {
flex: 1 !important;
background: transparent !important;
border: none !important;
outline: none !important;
color: var(--text-primary) !important;
font-size: 16px !important;
}

#home-chat-footer #send-button {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: var(--accent-primary) !important;
color: white !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: 15px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

#home-chat-footer #send-button:hover {
background: var(--accent-hover) !important;
}

#home-chat-footer #send-button svg {
width: 16px !important;
height: 16px !important;
stroke-width: 3px !important;
}

/* =============================================================================
CHAT FORM MASTER CLASS - UNIFIED PREMIUM LOOK (HEM-1)
============================================================================= */
/* 7. FOOTERS - Chat-input för ärenden */
#inbox-footer, 
#my-tickets-footer, 
#archive-footer {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: rgba(10, 8, 20, 0.6) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
flex-shrink: 0 !important;
padding: 0 !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ===  MINA ÄRENDEN: FOOTER FORM (targeting rätt IDs från index.html) === */
/* OBS: display utan !important — JS kontrollerar show/hide via style="display:none/flex" */
#my-ticket-chat-form {
display: flex;
flex-direction: column !important;
gap: 0 !important;
padding: 8px 16px 4px !important;
background: transparent !important;
border: none !important;
}

/* Textrutan */
#my-ticket-chat-input {
flex: 1 !important;
background: rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 10px !important;
color: var(--text-primary) !important;
font-size: 13px !important;
padding: 8px 12px !important;
resize: vertical !important;
min-height: 40px !important;
max-height: 250px !important;
overflow-y: auto !important;
outline: none !important;
transition: border-color 0.2s ease, height 0.15s ease !important;
font-family: inherit !important;
line-height: 1.5 !important;
cursor: text !important;
}

#my-ticket-chat-input::placeholder {
color: var(--text-secondary) !important;
opacity: 0.55 !important;
font-style: italic !important;
}

/* Textpekare (I-beam) på alla svars-textareor */
#quick-reply-input,
.detail-footer-area textarea {
cursor: text !important;
}

#my-ticket-chat-input:focus {
/* Döda gamla koden och sätt in denna */
outline: none !important;
box-shadow: none !important;
border-color: rgba(255, 255, 255, 0.25) !important;
background: rgba(255, 255, 255, 0.05) !important;
}

/* Nollställer blå fokuskontur i Inkorg & Mina Ärenden */
#my-chat-input:focus {
outline: none !important;
border-color: rgba(255,255,255,0.2) !important;
box-shadow: none !important;
}

/* Send-knappen (class send-button-ticket) — cirkulär, matchar Inkorgens stil */
.send-button-ticket {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 50% !important;
background: var(--accent-primary) !important;
border: none !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
color: var(--accent-primary) !important;
transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
flex-shrink: 0 !important;
box-shadow: none !important;
}

.send-button-ticket:hover {
opacity: 1 !important;
transform: scale(1.06) !important;
filter: drop-shadow(0 0 7px var(--accent-primary)) !important;
}

.send-button-ticket:active { opacity: 0.7 !important; transform: scale(0.95) !important; }
.send-button-ticket svg { width: 18px !important; height: 18px !important; fill: none !important; }

/* === HEADER BUTTON (Standard) === */
.header-button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.18s ease, filter 0.18s ease;
border: none;
border-radius: 10px;
color: rgba(255, 255, 255, 0.75);
background: transparent;
box-shadow: none;
}

.header-button:hover {
background: transparent;
border-color: transparent;
color: white;
transform: scale(1.05);
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent));
}

.header-button:active { opacity: 0.8; }

/* =============================================================================
KNAPPAR, BADGES & INKORGSKOMPONENTER
============================================================================= */

/* =============================================================================
SMART BADGES (MAIL & INBOX)
============================================================================= */
.group-badge,
.group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: color-mix(in srgb, var(--accent-primary) 75%, white);
box-shadow: none;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
border: none;
}

.live-badge, .mail-badge {
background: #ff4444 !important; 
border-color: rgba(255, 68, 68, 0.5) !important;
animation: pulse-badge 2s infinite;
}

.picked-badge {
background: var(--accent-primary) !important;
border-color: rgba(0, 113, 227, 0.5) !important;
}

.group-count.empty,
.group-badge:empty, 
span.group-count.empty {
background: transparent !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
}

@keyframes pulse-badge {
0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.3); }
70% { box-shadow: 0 0 0 2px rgba(255, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

/* =============================================================================
SETTINGS VIEW & SECTIONS
============================================================================= */
.settings-view {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
background-color: transparent;
overflow: hidden;
}

.about-container {
flex: 1;
padding: var(--spacing-lg) var(--spacing-xl);
overflow-y: auto !important;
max-width: 700px;
max-height: calc(100vh - 120px);
margin: var(--spacing-lg) auto;
background-color: var(--bg-frosty-content);
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
}

.about-container > * { flex-shrink: 0; }
.about-container::after { content: ''; display: block; height: 40px; flex-shrink: 0; }

.about-container .section,
#quick-guide-section,
#appearance-section,
#app-info-section {
margin-bottom: var(--spacing-lg);
}

.guide-section { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.guide-step {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 8px;
background-color: rgba(58, 58, 60, 0.4);
border-radius: var(--border-radius-md);
border-left: 4px solid var(--accent-primary);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
cursor: pointer;
}

.guide-step:hover { background: rgba(0, 113, 227, 0.06); }

.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #007aff, #0056b3);
color: white;
border-radius: 50%;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}

.step-content { flex: 1; padding-top: 2px; font-size: 13px; line-height: 1.5; }
.step-content strong { color: var(--accent-primary); font-weight: 600; }

.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
background-color: rgba(58, 58, 60, 0.3);
border-radius: var(--border-radius-sm);
margin-bottom: var(--spacing-sm);
}

.setting-item label { font-weight: 600; color: var(--text-primary); font-size: 15px; }

#theme-select {
background-color: var(--bg-dark-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: 8px 12px;
color: var(--text-primary);
font-family: var(--font-family);
font-size: 14px;
cursor: pointer;
min-width: 180px;
}

#theme-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1); }
#theme-select option { background-color: var(--bg-dark-secondary); color: var(--text-primary); padding: 8px; }

.status-item, .info-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px; font-size: 15px; }
.status-lamp-container { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 500; }
.status-lamp-dot { width: 14px; height: 14px; border-radius: 50%; }
.status-lamp-dot.green { 
background-color: var(--status-success); 
opacity: 1; 
box-shadow: 0 0 8px var(--status-success); 
}
.status-info, #app-version-display, #server-version-display { color: var(--text-secondary); font-family: 'SF Mono', 'Monaco', 'Courier New', monospace; font-size: 13px; }
.info-label { font-weight: 600; color: var(--text-primary); }

.shortcut-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-md); }

.shortcut-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px var(--spacing-md);
background-color: rgba(58, 58, 60, 0.3);
border-radius: var(--border-radius-sm);
transition: background-color var(--transition-fast);
}

.shortcut-item:hover { background-color: rgba(58, 58, 60, 0.5); }

.shortcut-item kbd {
display: inline-block;
padding: 6px 12px;
background: linear-gradient(180deg, #3a3a3c, #2c2c2e);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
font-size: 12px;
color: var(--text-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
INBOX & MINI CHAT COMPONENTS
============================================================================= */
.inbox-mode-controls {
display: flex;
gap: 10px;
margin-bottom: 15px;
padding: 6px;
background: rgba(0,0,0,0.1);
border-radius: 8px;
border: 1px solid var(--border-color);
}

.inbox-mode-btn {
flex: 1;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.15s, color 0.15s;
font-size: 13px;
}

.inbox-mode-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

.inbox-mode-btn.active {
background: var(--accent-primary);
color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* =============================================================================
MODALER & DIALOGER
============================================================================= */

/* =============================================================================
MASTER MODAL DESIGN (Popup & Confirmation)
============================================================================= */
.custom-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.35) !important;
z-index: 10000 !important;
display: none; /* Ändras till flex av JS */
align-items: center !important; /* Centrerar vertikalt */
justify-content: center !important; /* Centrerar horisontellt */
pointer-events: auto;
}

.modal-close {
position: absolute;
top: 12px;
right: 12px;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: background 0.15s ease, transform 0.15s ease;
z-index: 10;
}
.modal-close:hover { 
background: rgba(255,255,255,0.06); 
color: var(--text-primary);
transform: rotate(90deg);
}

.glass-modal-header h3, #confirm-title {
margin-top: 0 !important;
margin-bottom: 15px !important;
font-size: 18px !important;
font-weight: 800 !important;
color: var(--accent-primary) !important;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 12px;
}

.glass-modal-body p {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 25px;
}

.glass-modal-body input, 
.glass-modal-body textarea {
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-primary) !important;
padding: 12px 15px !important;
border-radius: 8px !important;
width: 100% !important;
margin-bottom: 12px !important;
transition: border-color 0.15s ease, background 0.15s ease;
font-family: inherit;
}

.glass-modal-body input:focus,
.glass-modal-body textarea:focus {
background: rgba(0, 0, 0, 0.6) !important;
border-color: rgba(255, 255, 255, 0.25) !important; /* Mjuk färg */
outline: none !important;
box-shadow: none !important; /* Ta bort glöden */
}

.glass-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; }

.btn-modal-confirm {
background: var(--accent-primary) !important; 
color: #000 !important;
border: none !important;
padding: 10px 24px !important;
border-radius: 8px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-modal-confirm:hover {
background: var(--accent-hover) !important;
}

.btn-modal-cancel {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--text-secondary) !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}

.btn-modal-cancel:hover { 
background: rgba(255, 255, 255, 0.1) !important; 
color: var(--text-primary) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-modal-logout {
background: rgba(255, 59, 48, 0.1) !important;
border: 1px solid rgba(255, 59, 48, 0.2) !important;
color: #ff4444 !important;
padding: 10px 20px !important;
border-radius: 8px !important;
cursor: pointer !important;
font-weight: 700 !important;
margin-right: auto;
transition: all 0.2s ease !important;
}

.btn-modal-logout:hover {
background: #ff4444 !important;
color: white !important;
box-shadow: 0 0 10px rgba(255, 68, 68, 0.25);
}

.btn-modal-confirm:active, .btn-modal-cancel:active, .btn-modal-logout:active {
transform: translateY(0) scale(0.98) !important;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 
from { transform: scale(0.95); opacity: 0; } 
to { transform: scale(1); opacity: 1; } 
}

.custom-modal-overlay[style*="display: none"] { pointer-events: none !important; }

/* Bekräftelsedialog MÅSTE alltid ligga ovanpå allt */
#atlas-confirm-modal        { z-index: 35000 !important; }

/* Kompakt och lätt confirm-dialog — override av den tunga .glass-modal-box */
#atlas-confirm-modal .glass-modal-box {
width: 340px !important;
max-width: 92vw !important;
padding: 22px 24px 20px !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#atlas-confirm-modal .glass-modal-header h3 {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: rgba(255,255,255,0.88) !important;
margin-bottom: 8px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
#atlas-confirm-modal .glass-modal-body p {
font-size: 12.5px !important;
line-height: 1.55 !important;
color: rgba(255,255,255,0.45) !important;
margin-bottom: 20px !important;
}
#atlas-confirm-modal .glass-modal-footer {
margin-top: 0 !important;
justify-content: flex-end !important;
gap: 8px !important;
}
#atlas-confirm-modal .btn-modal-confirm {
padding: 7px 18px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
box-shadow: none !important;
gap: 0 !important;
}
#atlas-confirm-modal .btn-modal-cancel {
padding: 7px 14px !important;
font-size: 12px !important;
font-weight: 500 !important;
border-radius: 6px !important;
}
/* Flytande popupar (notes, historik, prioritet) ligger ovanför reader (10000/26000)
   och global-sök-overlay (25000) men under confirm (35000) */
#atlas-notes-modal          { z-index: 27000 !important; }
#atlas-ticket-history-modal { z-index: 27000 !important; }
.priority-flyout            { z-index: 27000 !important; }

/* Notes- och historik-modalen är mer ogenomskinliga för att inte stapla
   halvtransparenta lager ovanpå reader + global-sök-overlay */
#atlas-notes-modal .glass-modal-box,
#atlas-ticket-history-modal .glass-modal-box {
  background: rgba(22, 20, 32, 0.93) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* =============================================================================
INTERNAL NOTES MODAL
============================================================================= */
.notes-modal-content {
gap: 15px;
max-height: 70vh;
}

.notes-list {
overflow-y: auto;
padding-right: 5px;
}

.note-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px;
position: relative;
}

.note-header {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.65) !important;
text-transform: uppercase;
font-weight: bold;
white-space: normal !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
line-height: 1.4 !important;
/* Layout (display, margin) raderad */
}

.note-actions {
gap: 10px;
justify-content: flex-end;
}

.note-action-btn {
background: none;
border: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
padding: 4px;
}

.note-action-btn:hover { opacity: 1; }

.note-input-area {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
gap: 10px;
}

#note-textarea {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: white;
padding: 10px;
resize: none;
height: 80px;
font-family: inherit;
}

/* =============================================================================
CUSTOMER AVATAR — Klickbar avatar-ring med editpenna i nedre högra hörnet.
Klick på ringen ELLER pennan triggar edit-läget för kundprofilen.
============================================================================= */
.customer-avatar-edit {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.customer-avatar-edit:not(.no-email):hover {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.customer-avatar-edit .avatar-edit-pen {
position: absolute;
bottom: -3px;
right: -3px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-secondary, #1a1a2e);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
transition: transform 0.15s ease;
}
.customer-avatar-edit:not(.no-email):hover .avatar-edit-pen {
transform: scale(1.15);
}
.customer-avatar-edit.no-email {
opacity: 0.6;
}

/* =============================================================================
NOTES BUTTON STYLING (HELT TEMASTYRD - INGA RAMAR)
============================================================================= */

.notes-trigger-btn {
position: relative;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 6px !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
outline: none !important;
}

.notes-trigger-btn svg {
width: 18px !important;
height: 18px !important;
/* Ärver färgen från parent via style="color:${styles.main}" */
stroke: currentColor !important;
stroke-width: 2.2px !important;
fill: none !important;
opacity: 0.6;
transition: all 0.2s ease !important;
}

.notes-trigger-btn:hover svg {
opacity: 1;
}

.notes-trigger-btn:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transform: scale(1.08);
filter: drop-shadow(0 0 5px currentColor);
}

/* AKTIV STATUS: Subtilt glöd i kontorets färg när anteckningar finns */
.notes-trigger-btn.has-notes-active svg {
stroke: currentColor !important;
opacity: 1 !important;
filter: drop-shadow(0 0 3px currentColor) !important;
}

.notes-count-badge {
position: absolute;
display: block;
top: -4px;
right: -4px;
min-width: 15px;
height: 15px;
padding: 0 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: color-mix(in srgb, var(--accent-primary) 75%, white);
font-size: 9px;
font-weight: 800;
line-height: 15px;
text-align: center;
box-shadow: none;
pointer-events: none;
box-sizing: border-box;
z-index: 10;
}

.team-ticket-card .notes-count-badge,
.profile-ticket-row .notes-count-badge {
display: none !important;
}

.ticket-footer-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
flex-shrink: 0;
}

.priority-flyout {
position: fixed;
/* z-index sätts via #atlas-ticket-history-modal + .priority-flyout !important-regler ovan */
display: flex;
gap: 10px;
align-items: center;
padding: 10px 14px;
background: rgba(20,20,35,0.95);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
backdrop-filter: blur(12px);
}

.priority-circle {
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
transition: transform .15s, outline .15s;
flex-shrink: 0;
}

.priority-circle:hover { transform: scale(1.15); }
.priority-circle.active { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }

.card-prio-btn {
width: 10px;
height: 10px;
min-width: 10px;
border-radius: 50% !important;
background: transparent !important;
border: none !important;
box-shadow: 0 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 38%, transparent);
padding: 0 !important;
cursor: pointer;
flex-shrink: 0;
transition: transform .15s, box-shadow .15s;
outline: none !important;
}
.card-prio-btn:hover {
transform: scale(1.3);
box-shadow: 0 0 0 2px currentColor, 0 0 14px color-mix(in srgb, currentColor 60%, transparent);
}

.card-action-pending {
opacity: .55;
pointer-events: none;
}

/* =============================================================================
BUBBLOR & CHATTMEDDELANDEN
============================================================================= */

/* =============================================================================
MESSAGE TIMESTAMPS
============================================================================= */
.msg-time {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
font-family: 'SF Mono', monospace;
opacity: 0.8;
}

/* AVATARER */
.msg-avatar {
flex-shrink: 0; 
width: 32px; 
height: 32px; 
border-radius: 50%;
display: flex; 
align-items: center; 
justify-content: center; 
font-size: 14px;
border: 1px solid rgba(255,255,255,0.1);
}

.help-footer { 
font-size: 11px; color: rgba(255,255,255,0.4) !important;
border-top: 1px solid rgba(255,255,255,0.08); 
padding-top: 14px; margin-top: 18px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Help modal bredare än standard glass-modal-box */
.atlas-help-overlay .help-modal-box {
width: 700px !important;
}

/* =============================================
HJÄLP-TRIGGER (placeholder-knapp)
============================================= */
.help-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 22px;
padding: 7px 18px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.55);
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.help-trigger:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
}

/* =============================================
MANUAL-NEDLADDNINGSKNAPP (help footer)
============================================= */
.help-download-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.5);
font-size: 11px;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
flex-shrink: 0;
}
.help-download-btn:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
background: rgba(0, 113, 227, 0.07);
}

/* =============================================================================
CHAT MESSAGE ALIGNMENT (KONSOLIDERAD)
============================================================================= */
/* Hem-vyn (column: avatar ovanpå bubbla) */
.message.user { 
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; 
align-self: flex-start !important; 
}
.message.atlas { 
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important; 
align-self: flex-end !important; 
}

/* Detaljvyer (row: avatar brevid bubbla) */
.msg-row.user { 
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important; 
justify-content: flex-start !important;
align-self: flex-start !important; 
}
.msg-row.atlas { 
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-end !important; 
align-self: flex-end !important; 
}

.message, .msg-row {
position: relative !important; 
flex-shrink: 0 !important;
}

/* =============================================================================
BADGES & NAVIGATION
============================================================================= */
.nav-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
border-radius: 6px !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 5px !important;
font-size: 10px !important;
font-weight: 500 !important;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: color-mix(in srgb, var(--accent-primary) 75%, white) !important;
text-shadow: none !important;
}

#badge-inbox {
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
box-shadow: none !important;
border: none !important;
}

/* Inkorgen har TVÅ räknare: nya oplockade (primär, fylld) + plockade/routade
   (sekundär, outline). Gruppen knuffas högerut som helhet; varje badge döljs
   oberoende (display:none vid 0) så den synliga alltid hamnar längst till höger. */
.nav-badge-group {
margin-left: auto !important;
display: inline-flex;
align-items: center;
gap: 7px;
}
.nav-badge-group .nav-badge { margin-left: 0 !important; }
/* Sekundär = plockade/routade: samma fyllda stil som övriga badges (ingen kant),
   men dämpad fyllnad/text så den läses som sekundär mot primär-räknaren. */
.nav-badge-secondary {
background: color-mix(in srgb, var(--accent-primary) 11%, transparent) !important;
border: none !important;
color: color-mix(in srgb, var(--accent-primary) 58%, white) !important;
}

#badge-my-tickets {
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
box-shadow: none !important;
border: none !important;
color: color-mix(in srgb, var(--accent-primary) 75%, white) !important;
}


/* =============================================================================
BUTTONS & ICONS (CLEANED & MERGED)
============================================================================= */
.action-icon-btn {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.7) !important;
border: none !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
}

.action-icon-btn:hover {
background: transparent !important;
color: white !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
}

.ql-container.ql-snow, .ql-editor {
background: transparent !important;
color: var(--text-primary) !important;
min-height: 160px !important;
max-height: 38vh !important;
overflow-y: auto !important;
opacity: 0.95 !important;
}
.ql-editor p { margin: 0; }

#atlas-mail-composer .glass-modal-box {
width: min(640px, 96vw) !important;
height: min(680px, 96vh) !important;
max-height: 96vh !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .glass-modal-body {
flex: 1 !important;
overflow: hidden !important;
max-height: none !important;
min-height: 0 !important;
padding: 12px 20px 8px !important;
}
/* Släpp modalens hidden tillfälligt när Quill-picker eller länk-tooltip
är öppen, annars kan popovern klippas av glass-modal-box/body.       */
#atlas-mail-composer .glass-modal-box:has(.ql-picker.ql-expanded),
#atlas-mail-composer .glass-modal-body:has(.ql-picker.ql-expanded),
#atlas-mail-composer .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)),
#atlas-mail-composer .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}
#atlas-mail-composer .glass-modal-footer {
background: transparent;
justify-content: flex-end !important;
gap: 12px !important;
padding: 10px 18px 14px !important;
margin-top: 0 !important;
flex-shrink: 0 !important;
}
/* Minska h3-marginalen i composer-headern */
#atlas-mail-composer .glass-modal-header h3 {
margin-bottom: 6px !important;
font-size: 14px !important;
}

#atlas-mail-composer[data-internal-only="true"] .glass-modal-box {
height: auto !important;
max-height: min(620px, 95vh) !important;
}

#atlas-mail-composer[data-internal-only="true"] .glass-modal-body {
flex: 0 0 auto !important;
overflow: hidden !important;
padding-bottom: 8px !important;
}

#atlas-mail-composer[data-internal-only="true"] #composer-mode-toggle,
#atlas-mail-composer[data-internal-only="true"] #composer-subject-row {
display: none !important;
}

#atlas-mail-composer[data-internal-only="true"] .composer-quill-wrap .ql-editor {
min-height: 110px !important;
max-height: 180px !important;
}

#atlas-mail-composer[data-internal-only="true"] #composer-info-box {
margin-top: 8px !important;
}

/* === Quill Compose Editor (Nytt meddelande / Nytt mail) === */
.composer-quill-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
transition: border-color 0.2s;
}
.composer-quill-wrap:focus-within {
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.05);
}
.composer-quill-wrap:has(.ql-picker.ql-expanded),
.composer-quill-wrap:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible;
}
.composer-quill-wrap:has(.ql-tooltip:not(.ql-hidden)) .ql-container.ql-snow {
overflow: visible !important;
opacity: 1 !important;
}
#atlas-mail-composer #composer-message-row {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#atlas-mail-composer .composer-quill-wrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#atlas-mail-composer .composer-quill-wrap .ql-container.ql-snow {
flex: 1 1 auto !important;
min-height: 0 !important;
}
.composer-quill-wrap .ql-container.ql-snow {
border: none !important;
background: transparent !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow {
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.035) !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: wrap !important;
position: relative !important;
z-index: 3 !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-formats {
margin-right: 4px !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow button {
width: 24px !important;
height: 24px !important;
padding: 3px !important;
border-radius: 5px !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow button:hover,
.composer-quill-wrap .ql-toolbar.ql-snow button.ql-active {
background: rgba(255,255,255,0.1) !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-stroke {
stroke: rgba(255,255,255,0.72) !important;
}
.composer-quill-wrap .ql-toolbar.ql-snow .ql-fill {
fill: rgba(255,255,255,0.72) !important;
}
.composer-quill-wrap .ql-editor {
color: var(--text-primary) !important;
font-size: 13px !important;
font-family: inherit !important;
line-height: 1.5 !important;
padding: 8px 12px !important;
min-height: 90px !important;
max-height: 220px !important;
overflow-y: auto !important;
background: transparent !important;
}
.ql-editor {
scrollbar-width: thin !important;
scrollbar-color: rgba(255,255,255,0.12) transparent !important;
}
.ql-editor::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
background: transparent !important;
}
.ql-editor::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.ql-editor::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12) !important;
border-radius: 4px !important;
box-shadow: none !important;
border: none !important;
}
.ql-editor::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.12) !important;
box-shadow: none !important;
}
.ql-editor::-webkit-scrollbar-button {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
.ql-editor::-webkit-scrollbar-corner {
background: transparent !important;
}
#atlas-mail-composer .composer-quill-wrap .ql-editor {
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
}
#atlas-mail-composer #composer-agent-grid {
max-height: min(168px, 24vh) !important;
overflow-y: auto !important;
}
.composer-quill-wrap .ql-editor.ql-blank::before {
color: rgba(255,255,255,0.3) !important;
font-style: italic !important;
left: 12px !important;
}
.composer-quill-wrap .ql-editor a { color: var(--accent-primary) !important; }
.composer-quill-wrap .ql-editor strong { font-weight: 700 !important; }
.composer-quill-wrap .ql-editor em { font-style: italic !important; }

/* Quills standard-tooltip är ljus och lågmäld, vilket gör länkflödet lätt
att missa i Atlas mörka teman. Färga den med samma tema-tokens som resten
av composern så att länkrutan syns konsekvent i alla lägen. */
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip {
background: var(--bg-dark-secondary) !important;
background-color: var(--bg-dark-secondary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)) !important;
border-radius: 8px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
padding: 7px 10px !important;
z-index: 99999 !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip[data-mode=link]::before {
content: "Klistra in URL:";
color: var(--text-secondary) !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip input[type=text] {
background: var(--bg-dark-tertiary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color)) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
/* Återställ Quills default-storlek. Den globala .glass-modal-body input-regeln
(style.css:1041) ger annars padding 12px 15px + width 100% + margin-bottom 12px,
vilket blåser upp tooltipen med 12px (= synlig svans under inputen). */
width: 170px !important;
height: 26px !important;
padding: 3px 5px !important;
margin: 0 !important;
}
.composer-quill-wrap .ql-container.ql-snow .ql-tooltip a {
color: var(--accent-primary) !important;
}

/* Mailmallarvyn använder en separat global Quill utanför composer-wrap.
Ge den samma läsbara länk-tooltip utan att flytta in den i composer-reglerna. */
#view-templates .ql-container.ql-snow .ql-tooltip {
background: var(--bg-dark-secondary) !important;
background-color: var(--bg-dark-secondary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)) !important;
border-radius: 8px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
padding: 7px 10px !important;
z-index: 99999 !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip[data-mode=link]::before {
content: "Klistra in URL:";
color: var(--text-secondary) !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip input[type=text] {
background: var(--bg-dark-tertiary) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color)) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
width: 170px !important;
height: 26px !important;
padding: 3px 5px !important;
margin: 0 !important;
}
#view-templates .ql-container.ql-snow .ql-tooltip a {
color: var(--accent-primary) !important;
}

/* Korta svarsrutor har toolbar direkt ovanför editorn. När Quill flippar
länk-tooltipen uppåt ska den ligga ovanför hela fältet, inte ovanpå toolbaren. */
.reply-quill-wrap .ql-container.ql-snow .ql-tooltip.ql-flip[data-mode=link] {
top: auto !important;
bottom: calc(100% + 40px) !important;
transform: none !important;
}

/* Mail-composern har hög editor så Quills automatiska ql-flip aktiveras aldrig
— tooltipen hamnar då mitt i meddelandeytan under markeringen. Tvinga den
ovanför toolbaren oavsett ql-flip-status (samma princip som .reply-quill-wrap). */
#atlas-mail-composer .composer-quill-wrap .ql-container.ql-snow .ql-tooltip[data-mode=link] {
top: auto !important;
bottom: calc(100% + 40px) !important;
transform: none !important;
}

/* Reader/ticket-modaler kan ha overflow: hidden på sina kroppar — släpp
temporärt när Quills länk-tooltip är öppen, annars klipps popovern. */
#atlas-reader-modal .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)),
#customer-reader-modal .glass-modal-body:has(.ql-tooltip:not(.ql-hidden)),
#atlas-reader-modal .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)),
#customer-reader-modal .glass-modal-box:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}

/* === Quill Storlekspicker — korta sifferetiketter + mörkt tema ===
Använder SizeStyle inline-style attributor (data-value="18px" etc.)
Etiketter visas som korta px-siffror (10, 14, 18…) istället för
långa svenska ord — smalare picker, renare UI.                    */

/* Smal picker — bara siffror behöver plats. 28px matchar Quills color-picker
och ligger nära B/I/U-knapparnas 24px. Padding stramas åt på labeln så
"—"/"10" får plats utan att arrow-SVG:n trycker breddet uppåt.        */
.ql-snow .ql-picker.ql-size {
width: 38px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label {
padding: 0 2px 0 4px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label svg {
right: 0 !important;
width: 14px !important;
}

/* Fallback: visa data-value rakt av om inget annat matchar */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: attr(data-value);
}

/* "12" när inget data-value är satt (default-storlek) */
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before {
content: '12';
}

/* Korta sifferetiketter per px-värde */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32'; }

/* === Quill picker-dropdown — tema-medvetet mörkt tema ===
Snow-temat renderar .ql-picker-options vit som default.
Reglerna nedan täcker ALLA pickers (size, align, color, background) i
både composer-quill-wrap och templates-editor (#view-templates), och
använder --bg-dark-secondary + --border-color så bakgrunden följer
aktivt tema (sunset-horizon, apple-road osv) i stället för hårdkodad
färg. Dropdowns öppnar NEDÅT som Quill default — clipping löses via
:has(.ql-picker.ql-expanded) på wrapparna ovan + hög z-index här.    */
.composer-quill-wrap .ql-toolbar .ql-picker-options,
#view-templates .ql-toolbar .ql-picker-options {
background: var(--bg-dark-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
padding: 4px !important;
z-index: 99999 !important;
position: absolute !important;
}
.composer-quill-wrap .ql-toolbar .ql-picker-item,
#view-templates .ql-toolbar .ql-picker-item {
color: var(--text-secondary) !important;
border-radius: 4px !important;
padding: 3px 8px !important;
}
.composer-quill-wrap .ql-toolbar .ql-picker-item:hover,
.composer-quill-wrap .ql-toolbar .ql-picker-item.ql-selected,
#view-templates .ql-toolbar .ql-picker-item:hover,
#view-templates .ql-toolbar .ql-picker-item.ql-selected {
background: rgba(255,255,255,0.1) !important;
color: var(--text-primary) !important;
}
.composer-quill-wrap .ql-toolbar .ql-picker-label,
#view-templates .ql-toolbar .ql-picker-label {
color: rgba(255,255,255,0.72) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 4px !important;
}
/* Size-pickerns alternativ får siffer-font så 10/14/18… ser jämna ut.   */
.composer-quill-wrap .ql-toolbar .ql-picker.ql-size .ql-picker-item,
#view-templates .ql-toolbar .ql-picker.ql-size .ql-picker-item {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
}
/* Color/background-rutornas inre färgceller får inte ärva text-color    */
.composer-quill-wrap .ql-toolbar .ql-color-picker .ql-picker-item,
#view-templates .ql-toolbar .ql-color-picker .ql-picker-item {
padding: 0 !important;
}


/* Kundvyns nya-mail-modal: stora inklistrade bilder ska inte trycka bort actions. */
#customer-mail-compose-modal .cust-mail-compose-box {
width: min(560px, 92vw) !important;
max-height: min(720px, 92vh) !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
#customer-mail-compose-modal .cust-mail-compose-header {
flex-shrink: 0 !important;
}
#customer-mail-compose-modal .cust-mail-compose-body {
min-height: 0 !important;
overflow: hidden !important;
}
/* När Quill-picker eller länk-tooltip öppnas i customer-mail-modalen
måste box/body få visible så popovers inte klipps av outer hidden.    */
#customer-mail-compose-modal .cust-mail-compose-body:has(.ql-picker.ql-expanded),
#customer-mail-compose-modal .cust-mail-compose-box:has(.ql-picker.ql-expanded),
#customer-mail-compose-modal .cust-mail-compose-body:has(.ql-tooltip:not(.ql-hidden)),
#customer-mail-compose-modal .cust-mail-compose-box:has(.ql-tooltip:not(.ql-hidden)) {
overflow: visible !important;
}
#customer-mail-compose-modal .cust-mail-message-field,
#customer-mail-compose-modal .cust-mail-editor-stack {
min-height: 0 !important;
}
#customer-mail-compose-modal .cust-mail-compose-actions {
flex-shrink: 0 !important;
min-height: 38px !important;
}
#customer-mail-compose-modal #cust-mail-quill-wrap {
min-height: 0 !important;
flex: 0 1 auto !important;
}
#customer-mail-compose-modal #cust-mail-quill-wrap .ql-editor {
min-height: 120px !important;
max-height: clamp(160px, 34vh, 260px) !important;
overflow-y: auto !important;
}

/* === Quill Reply Editor (Svarsrutor) - Slimmad version === */
.composer-quill-wrap.reply-quill-wrap .ql-editor {
min-height: 44px !important;   /* Matchar din gamla textarea exakt */
max-height: 280px !important;
padding: 8px 12px !important;
line-height: 1.4 !important;
}

/* Tar bort marginaler som gör rutan onödigt hög */
.reply-quill-wrap .ql-editor p {
margin-bottom: 0 !important;
}

.internal-select {
transition: all 0.14s ease;
border-radius: 8px;
}
.internal-select.selected, .internal-select:focus, .internal-select:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
border: 1px solid var(--accent-primary) !important;
background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
}

.action-icon-btn svg,
.footer-icon-btn svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
}

.footer-icon-btn {
width: 38px !important;
height: 38px !important;
border-radius: 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.75);
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
}

.footer-icon-btn:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #fff;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
}

.admin-save-icon-btn {
width: 32px;
height: 28px;
min-width: 32px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
border-radius: 7px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(76,217,100,0.32);
color: #4cd964 !important;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.admin-save-icon-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
flex-shrink: 0;
}

.admin-save-icon-btn:hover {
background: rgba(76,217,100,0.08);
border-color: rgba(76,217,100,0.55);
transform: scale(1.06);
filter: drop-shadow(0 0 6px rgba(76,217,100,0.58));
}

/* VARIANTER (RÖD) */
.footer-icon-btn.danger,
#archive-delete-btn {
background: transparent !important;
color: #ff4757 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.footer-icon-btn.danger:hover,
#archive-delete-btn:hover {
background: transparent !important;
border-color: transparent !important;
color: #ff6b6b !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 7px #ff4757) !important;
}

/* === MALL-GENERATOR AI-STRIP === */
.template-ai-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(165,94,234,0.04);
flex-shrink: 0;
}

#template-ai-desc {
flex: 1;
min-width: 0;
height: 34px;
padding: 5px 10px;
font-size: 12.5px;
font-family: inherit;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 7px;
color: rgba(255,255,255,0.75);
resize: none;
line-height: 1.5;
transition: border-color 0.15s ease;
overflow: hidden;
}

#template-ai-desc:focus {
outline: none;
border-color: rgba(165,94,234,0.4);
}

#template-ai-desc::placeholder {
color: rgba(255,255,255,0.22);
}

#template-ai-gen-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 11px;
height: 30px;
border-radius: 7px;
background: rgba(165,94,234,0.08);
border: 1px solid rgba(165,94,234,0.22);
color: rgba(165,94,234,0.75);
font-size: 12px;
font-weight: 500;
font-family: inherit;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

#template-ai-gen-btn svg {
flex-shrink: 0;
stroke: currentColor;
}

#template-ai-gen-btn:hover:not(:disabled) {
background: rgba(165,94,234,0.14);
border-color: rgba(165,94,234,0.4);
color: rgba(165,94,234,0.95);
filter: drop-shadow(0 0 5px rgba(165,94,234,0.3));
}

#template-ai-gen-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}

/* VARIANTER (LILA) */
#btn-ai-draft {
background: transparent !important;
color: #a55eea !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-ai-draft:hover {
background: transparent !important;
border-color: transparent !important;
color: #c79cff !important;
filter: drop-shadow(0 0 7px rgba(165, 94, 234, 0.75)) !important;
transform: scale(1.08) !important;
}

/* VARIANTER (GULD — AI Sammanfattning) */
#btn-summarize {
background: transparent !important;
color: #ffc400 !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-summarize:hover {
background: transparent !important;
border-color: transparent !important;
color: #ffd85a !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 7px rgba(255, 196, 0, 0.75)) !important;
}

/* Inkorgens snabbsvar-knapp (hover glow) */
/* AI Förslag-knapp i inkorg — lila, transparent box, glow hover */
#btn-quick-reply-ai {
background: transparent !important;
color: #a55eea !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-quick-reply-ai:hover {
background: transparent !important;
border-color: transparent !important;
color: #c79cff !important;
filter: drop-shadow(0 0 7px rgba(165, 94, 234, 0.75)) !important;
transform: scale(1.08) !important;
}

#btn-quick-reply-send {
transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
#btn-quick-reply-send:hover {
filter: brightness(1.2) !important;
box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
transform: translateY(-1px) scale(1.05) !important;
}
#btn-quick-reply-send:active {
transform: scale(0.95) !important;
}

.pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}

.pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }

/* =============================================================================
LAYOUT & HEADER ACTIONS
============================================================================= */
#new-chat-btn-header,
#new-mail-btn-my-tickets,
.header-icon-only {
width: 42px !important;
height: 42px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
cursor: pointer;
transition: color 0.2s ease, transform 0.18s ease, filter 0.18s ease !important;
/* Säkerställ klickbarhet och synlighet */
position: relative !important;
z-index: 50 !important;
pointer-events: auto !important;
box-shadow: none !important;
}

#new-chat-btn-header:hover,
#new-mail-btn-my-tickets:hover,
.header-icon-only:hover {
background: transparent !important;
border-color: transparent !important;
color: #fff !important;
transform: scale(1.06);
box-shadow: none !important;
filter: drop-shadow(0 0 7px currentColor) !important;
}

/* 2. Själva info-knappen (ihopslagen och städad) */
.info-icon-trigger {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.18s ease, filter 0.18s ease;
opacity: 1;
color: rgba(255, 255, 255, 0.7);
background: transparent;
border: none;
box-shadow: none;
/* TVINGA LÄNGST TILL HÖGER */
order: 99 !important;
/* Säkerställ klickbarhet */
pointer-events: auto !important;
position: relative;
z-index: 10;
}

.info-icon-trigger:hover {
background: transparent;
border-color: transparent;
opacity: 1;
color: white;
transform: scale(1.06);
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent));
}

.info-icon-svg { width: 18px; height: 18px; stroke-width: 2px; }

/* =============================================================================
SEKTIONS-TOOLTIP (.sh-tip) — liten i-ikon bredvid rubriker i admin-vyer
Tooltip-bubblan positioneras dynamiskt av JS (admin-core.js)
============================================================================= */
.sh-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
font-size: 8px;
color: rgba(255,255,255,0.35);
cursor: help;
margin-left: 7px;
vertical-align: middle;
transition: border-color 0.18s, color 0.18s, background 0.18s;
flex-shrink: 0;
font-family: serif;
font-style: italic;
line-height: 1;
user-select: none;
}
.sh-tip:hover {
border-color: rgba(255,255,255,0.55);
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.07);
}

/* Shared tooltip-bubbla — skapas och positioneras av JS */
#atlas-sh-tooltip {
position: fixed;
z-index: 99999;
width: 230px;
background: rgba(14,14,24,0.97);
border: 1px solid rgba(255,255,255,0.11);
border-radius: 9px;
padding: 9px 13px;
font-size: 11.5px;
line-height: 1.58;
color: rgba(255,255,255,0.8);
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
pointer-events: none;
white-space: normal;
text-transform: none;
font-weight: normal;
letter-spacing: 0;
font-style: normal;
opacity: 0;
transition: opacity 0.13s;
display: none;
}

/* ================================================================
PC-LAYOUT MINIMUM WIDTHS (tillagd för att förhindra "långsmal" layout)
Aktiveras enbart när skärmen är ≥ 769px (mobil-override sker i mobile.css).
Gäller: split-view list-container och editor-container.
Om skärmen är för liten → tillåt horisontell scroll istället för komprimering.
================================================================ */
@media screen and (min-width: 769px) {
.layout-split .template-list-container {
min-width: 300px !important;
}

.layout-split .template-editor-container {
min-width: 400px !important;
}

/* Tillåt horisontell scroll om allt inte får plats */
.layout-split .templates-container {
overflow-x: auto !important;
min-width: 0 !important;
}
}

/* =============================================================================
HEM-VY DASHBOARD WIDGETS
============================================================================= */

/* Grundkort */
.hw-card {
background: rgba(15, 15, 25, 0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px 18px;
box-sizing: border-box;
}

/* PRIVAT-kort: fast bredd, krymper/växer aldrig */
.hw-private-card {
flex: 0 0 auto;
width: 280px;
}

/* Todo-kort: fyller resterande bredd i sin flex-rad */
.hw-todo-card {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
min-height: 130px;
}

/* Kontor-kort: fast bredd, matchar hw-stats-card (200px) */
.hw-offices-card {
flex: 0 0 auto;
width: 200px;
display: flex;
flex-direction: column;
gap: 0;
min-height: 130px;
}

/* Offices-lista: scrollbar om många kontor */
.hw-offices-list {
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: auto;
flex: 1;
}

/* Enskilt kontors-chip */
.hw-office-chip {
display: flex;
align-items: center;
gap: 7px;
border-radius: 8px;
padding: 8px 10px;
cursor: default;
border: 1px solid;
box-sizing: border-box;
min-height: 34px;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Färgad punktmarkör */
.hw-office-dot,
.hw-office-chip-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.9;
filter: drop-shadow(0 0 5px currentColor);
}

.hw-office-chip.is-clickable:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 0 14px color-mix(in srgb, currentColor 16%, transparent);
}

/* Kontorsnamn inuti chip */
.hw-office-chip-name {
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
font-weight: 700;
letter-spacing: 0.04em;
}

/* Kort label-pill (t.ex. ULLEVI) */
.hw-office-chip-label {
font-size: 10px;
font-weight: 700;
padding: 2px 5px;
border-radius: 4px;
flex-shrink: 0;
letter-spacing: 0.3px;
}

/* Välkomst-kort: fyller resterande bredd */
.hw-welcome-card {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}

/* Ärenderäknare-kort */
.hw-stats-card {
flex: 0 0 auto;
width: 200px;
}

/* Kortets rubrikrad */
.hw-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.hw-card-icon {
color: var(--accent-primary);
display: flex;
align-items: center;
}
.hw-card-title {
flex: 1;
}
.hw-todo-count {
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
}
.hw-todo-feedback {
display: flex;
align-items: center;
min-height: 22px;
margin: -2px 0 4px;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, rgba(255,255,255,0.10));
border-radius: 6px;
background: color-mix(in srgb, var(--accent-primary) 15%, rgba(255,255,255,0.05));
color: var(--text-primary);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hw-todo-bulk-row {
display: flex;
align-items: center;
gap: 6px;
margin: -1px 0 5px;
min-width: 0;
flex-wrap: wrap;
}
.hw-todo-bulk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 26px;
min-width: 0;
padding: 0 8px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.05);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.hw-todo-bulk-btn svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
stroke: currentColor;
}
.hw-todo-bulk-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hw-todo-bulk-btn:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.24);
color: var(--text-primary);
transform: translateY(-1px);
}
.hw-todo-bulk-btn.primary {
border-color: color-mix(in srgb, var(--accent-primary) 45%, rgba(255,255,255,0.14));
background: color-mix(in srgb, var(--accent-primary) 13%, rgba(255,255,255,0.04));
color: var(--accent-primary);
}

/* Todo-lista */
.hw-todo-list {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 140px;
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent-primary) 72%, transparent) transparent;
}
.hw-todo-list::-webkit-scrollbar {
width: 4px !important;
height: 4px !important;
background: transparent !important;
}
.hw-todo-list::-webkit-scrollbar-track,
.hw-todo-list::-webkit-scrollbar-track-piece {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.hw-todo-list::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent-primary) 72%, transparent) !important;
border-radius: 999px !important;
box-shadow: none !important;
border: none !important;
}
.hw-todo-list::-webkit-scrollbar-thumb:hover {
background: var(--accent-primary) !important;
box-shadow: none !important;
}
.hw-todo-list::-webkit-scrollbar-button {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
.hw-todo-empty {
font-size: 12px;
color: rgba(255,255,255,0.3);
font-style: italic;
padding: 6px 0;
}
.hw-todo-item {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 5px;
border-radius: 6px;
transition: background 0.15s;
}
.hw-todo-item:hover {
background: rgba(255,255,255,0.05);
}
.hw-todo-item.is-sla {
border-left: 2px solid rgba(255, 193, 7, 0.44);
padding-left: 6px;
}
.hw-todo-item.done .hw-todo-text {
text-decoration: line-through;
opacity: 0.4;
}
.hw-todo-check {
width: 17px;
height: 17px;
min-width: 17px;
border-radius: 4px;
border: 1.5px solid rgba(255,255,255,0.25);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: #fff;
transition: background 0.15s, border-color 0.15s;
}
.hw-todo-item.done .hw-todo-check {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.hw-todo-bell {
width: 17px;
height: 17px;
min-width: 17px;
border-radius: 4px;
border: 1.5px solid rgba(255,255,255,0.18);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: rgba(255,255,255,0.62);
opacity: 0.45;
transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.hw-todo-bell:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.32);
background: rgba(255,255,255,0.06);
}
.hw-todo-bell.has-remind {
width: auto;
min-width: 48px;
gap: 4px;
padding: 0 5px;
color: var(--accent-primary);
border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
opacity: 1;
}
.hw-todo-bell.has-remind::after {
content: attr(data-time);
font-size: 10px;
font-weight: 600;
line-height: 1;
color: var(--accent-primary);
}
.hw-todo-text {
flex: 1;
font-size: 13px;
color: var(--text-primary);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hw-todo-sla-link {
cursor: pointer;
}
.hw-todo-sla-link:hover {
text-decoration: underline;
opacity: 0.85;
}

/* Tidsstämpel-pill till vänster om texten */
.hw-todo-ts {
font-size: 10px;
color: rgba(255,255,255,0.55);
white-space: nowrap;
flex-shrink: 0;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
padding: 1px 5px;
margin-right: 6px;
}
.hw-todo-del {
opacity: 0;
width: 17px;
height: 17px;
min-width: 17px;
border-radius: 4px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: rgba(255,255,255,0.35);
transition: opacity 0.15s, color 0.15s;
}
.hw-todo-item:hover .hw-todo-del {
opacity: 1;
}
.hw-todo-del:hover {
color: #e74c3c !important;
}
.hw-todo-group-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 28px;
padding: 5px 8px;
border-radius: 6px;
border: 1px dashed rgba(255,255,255,0.16);
background: rgba(255,255,255,0.04);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
cursor: pointer;
text-align: left;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hw-todo-group-toggle:hover {
background: rgba(255,255,255,0.08);
border-color: color-mix(in srgb, var(--accent-primary) 35%, rgba(255,255,255,0.18));
color: var(--text-primary);
}
.hw-todo-group-toggle span:last-child {
flex: 0 0 auto;
color: var(--accent-primary);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hw-todo-reminder-popover {
position: absolute;
z-index: 10050;
display: grid;
grid-template-columns: 124px 86px;
gap: 7px;
padding: 8px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(20,22,30,0.88);
backdrop-filter: blur(18px);
box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.hw-todo-reminder-fields {
display: contents;
}
.hw-todo-reminder-actions {
grid-column: 1 / -1;
display: flex;
gap: 6px;
align-items: center;
}
.hw-todo-reminder-date,
.hw-todo-reminder-time {
height: 28px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.08);
color: var(--text-primary);
font-size: 12px;
padding: 0 7px;
outline: none;
color-scheme: dark;
}
.hw-todo-reminder-date {
width: 124px;
}
.hw-todo-reminder-time {
width: 86px;
}
.hw-todo-reminder-date:focus,
.hw-todo-reminder-time:focus {
border-color: var(--accent-primary);
}
.hw-todo-reminder-save,
.hw-todo-reminder-clear {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: var(--text-primary);
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, filter 0.15s;
}
.hw-todo-reminder-save svg,
.hw-todo-reminder-clear svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
.hw-todo-reminder-save {
color: var(--accent-primary);
border-color: color-mix(in srgb, var(--accent-primary) 40%, rgba(255,255,255,0.14));
}
.hw-todo-reminder-clear {
color: #ff6b6b;
border-color: rgba(255,69,58,0.28);
}
.hw-todo-reminder-save:hover,
.hw-todo-reminder-clear:hover {
background: rgba(255,255,255,0.14);
transform: scale(1.04);
filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent));
}
.hw-todo-input-row {
display: flex;
gap: 6px;
align-items: center;
margin-top: 4px;
}
.hw-todo-input {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: var(--text-primary);
font-size: 12px;
padding: 5px 10px;
outline: none;
transition: border-color 0.15s;
}
.hw-todo-input:focus {
border-color: var(--accent-primary);
}
.hw-todo-add-btn {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--accent-primary);
transition: background 0.15s;
}
.hw-todo-add-btn:hover {
background: rgba(255,255,255,0.12);
}

/* Välkomst-vänster (hälsning + klocka) */
.hw-welcome-left {
flex: 0 0 auto;
text-align: center;
}
.hw-welcome-greeting {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.hw-welcome-name {
color: var(--accent-primary);
font-weight: 600;
}
.hw-welcome-time {
font-size: 30px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 1px;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.hw-welcome-date {
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
text-transform: capitalize;
}

/* Statistik-pills (nu i eget kort) */
#hw-stats {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
width: 100%;
}
.hw-stat-item {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 7px 12px;
font-size: 13px;
color: var(--text-secondary);
}
.hw-stat-item.hw-stat-link {
cursor: pointer;
transition: all 0.2s ease;
}
.hw-stat-item.hw-stat-link:hover {
background: rgba(255,255,255,0.12);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.hw-stat-item.hw-stat-warn {
border-color: rgba(241,196,15,0.35);
background: rgba(241,196,15,0.07);
color: #f1c40f;
}
/* Home-widget rad för interna ärenden — gul accent, subtilare border än hw-stat-warn */
.hw-stat-item.hw-stat-internal {
border-color: rgba(241,196,15,0.22);
color: #f1c40f;
}
.hw-sla-badge {
font-size: 11px;
font-weight: 600;
color: #f1c40f;
}
.hw-stat-skeleton {
opacity: 0.35;
}
.hw-skeleton-bar {
height: 13px;
background: rgba(255,255,255,0.18);
border-radius: 4px;
animation: hw-pulse 1.5s ease-in-out infinite;
}
@keyframes hw-pulse {
0%, 100% { opacity: 0.3; }
50%       { opacity: 0.7; }
}

/* =============================================================================
PLACEHOLDER / HERO-SURFACES (tema-agnostisk — använder --accent-primary)
Tidigare dupliceringar i atlas-navigator, sunset-horizon, atlas-nebula och
standard-theme — flyttades hit eftersom color-mix-formlerna redan följer
aktivt tema via --accent-primary / --text-primary.
============================================================================= */
#view-inbox.templates-view .template-editor-container,
#view-my-tickets.templates-view .template-editor-container,
#view-templates.templates-view .template-editor-container {
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
border-radius: var(--border-radius-lg) !important;
overflow: hidden !important;
}

#view-inbox .hero-placeholder .hero-subtitle,
#view-my-tickets .hero-placeholder .hero-subtitle,
#view-archive .hero-placeholder .hero-subtitle,
#view-templates .hero-placeholder .hero-subtitle {
color: color-mix(in srgb, var(--text-primary) 82%, var(--accent-primary) 18%) !important;
opacity: 0.88 !important;
}

#view-inbox .hero-placeholder .hero-bg-icon,
#view-my-tickets .hero-placeholder .hero-bg-icon,
#view-archive .hero-placeholder .hero-bg-icon,
#view-templates .hero-placeholder .hero-bg-icon,
#view-customers .hero-placeholder .hero-bg-icon,
#view-admin .hero-placeholder .hero-bg-icon {
opacity: 0.10 !important;
}

#view-inbox .hero-placeholder .hero-fg-icon,
#view-my-tickets .hero-placeholder .hero-fg-icon,
#view-archive .hero-placeholder .hero-fg-icon,
#view-templates .hero-placeholder .hero-fg-icon {
opacity: 1 !important;
}

#view-inbox .hero-placeholder .help-trigger,
#view-my-tickets .hero-placeholder .help-trigger,
#view-archive .hero-placeholder .help-trigger,
#view-templates .hero-placeholder .help-trigger {
background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
border-color: color-mix(in srgb, var(--accent-primary) 34%, transparent) !important;
color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-primary) 24%) !important;
}

#view-inbox .filter-input::placeholder,
#view-my-tickets .filter-input::placeholder,
#view-customers .filter-input::placeholder,
#view-archive .filter-input::placeholder,
#view-templates #template-search-input::placeholder,
#view-templates #template-title-input::placeholder,
#view-templates #template-subgroup-input::placeholder,
#view-templates .ql-editor.ql-blank::before {
color: var(--text-secondary) !important;
opacity: 0.72 !important;
font-style: italic;
}

/* =============================================================================
STATUS-PILLS (standard — används av admin-drift, admin-config, etc.)
============================================================================= */
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.status-pill.is-active {
background: color-mix(in srgb, var(--status-success, #00C851) 12%, transparent);
color: var(--status-success, #00C851);
border: 1px solid color-mix(in srgb, var(--status-success, #00C851) 35%, transparent);
}
.status-pill.is-inactive {
background: color-mix(in srgb, var(--status-danger, #ff4444) 12%, transparent);
color: var(--status-danger, #ff4444);
border: 1px solid color-mix(in srgb, var(--status-danger, #ff4444) 35%, transparent);
}
.status-pill.is-warning {
background: color-mix(in srgb, var(--status-warning, #ff9f0a) 12%, transparent);
color: var(--status-warning, #ff9f0a);
border: 1px solid color-mix(in srgb, var(--status-warning, #ff9f0a) 35%, transparent);
}

/* Tomt-tillstånd i listor (inkorg, sökresultat, etc.) */
.empty-state {
padding: 30px;
text-align: center;
opacity: 0.5;
font-style: italic;
font-size: 13px;
color: var(--text-secondary, rgba(255,255,255,0.5));
}

/* Focus-stil på Kunder-sökfältet (inline-style har ingen :focus) */
#customer-search-main:focus {
border-color: var(--accent-primary);
box-shadow: var(--glow-soft);
}

/* =============================================================================
CLOSE-REASON PILL (Avslutad av X / Kunden avslutade / Inaktivitet)
============================================================================= */
/* Headers (detail-view / customers-view / admin-reader) använder ren .pill från
regeln ovan. Garaget-kort använder .close-pill.pill-mini för att passa
ticket-footer-bar (32px hög). */
.close-pill.pill-mini {
font-size: 9px !important;
padding: 2px 7px !important;
border-radius: 10px !important;
gap: 3px !important;
font-weight: 600 !important;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}

/* Footer-bar layout: gruppera tid + pill till vänster, tag stannar till höger. */
.ticket-footer-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}