/* Atlas Navigator — Premium Automotive Theme
Inspirerat av: Audi Virtual Cockpit, Tesla UI, Premium Navigation
Design: Cyan & Mint accents, Deep blacks, Soft glows, Luxury feels
-------------------------------------------------------------------- */

:root {
/* Bakgrund */
--bg-image: url("./atlas-navigator-bg.jpg");
--bg-color: #0a0e1a;

/* Färger - Deep Premium Blacks med Cyan/Mint accents */
--bg-dark-primary:   #0d1117;
--bg-dark-secondary: #12181f;
--bg-dark-tertiary:  #1a1f2e;
--text-primary:      #e8f1f5;
--text-secondary:    #a0c4d9;
--accent-primary:    #00d4ff;
--accent-hover:      #00ffa3;
--bubble-neutral-bg: var(--bg-dark-tertiary);
--bubble-neutral-border: rgba(255,255,255,0.08);
--border-color:      rgba(0, 212, 255, 0.10);

/* === MAILMALLAR & INKORG – ATLAS NAVIGATOR (cyan/mint) === */
--group-bg:          rgba(0, 212, 255, 0.08);
--group-hover:       rgba(0, 212, 255, 0.18);
--group-text:        #00f2ea;
--group-border:      rgba(0, 212, 255, 0.18);
--group-shadow:      rgba(0, 212, 255, 0.2);
--group-shadow-hover:rgba(0, 212, 255, 0.6);
--item-bg:           rgba(0, 212, 255, 0.1);
--item-hover:        rgba(0, 212, 255, 0.25);
--item-border:       rgba(0, 212, 255, 0.35);
--accent:            #00f2ea;

/* Mailmall-grupper — cyan/mint/teal-nyanser för Atlas Navigator */
--tmpl-am:       #8ed6e8;
--tmpl-bil:      #5ac8e8;
--tmpl-mc:       #00d4ff;
--tmpl-slap:     #7fa8b8;
--tmpl-lastbil:  #4fc8c0;
--tmpl-engelska: #5fd9a8;
--tmpl-ovriga:   #708898;
--tmpl-privata:  #98e0c8;

/* Glassmorfism - Ultra Premium med Glow */
--bg-frosty-sidebar:      rgba(13, 17, 23, 0.92);
--bg-frosty-header:       rgba(13, 17, 23, 0.92);
--bg-frosty-content:      rgba(6, 20, 26, 0.68);
--bg-frosty-bubble-atlas: rgba(8, 24, 32, 0.88);
--bg-frosty-input-area:   rgba(18, 24, 31, 0.75);
--bg-frosty-input-field:  rgba(26, 31, 46, 0.8);
--ticket-history-bg:      rgba(13, 17, 23, 0.92);
--blur-amount: 25px;

/* Glow-token för user-bubblan (Session 3 — glow-harmonisering) */
--bubble-glow-user: 0 4px 20px color-mix(in srgb, var(--accent-primary) 40%, transparent), 0 0 35px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* Applicera bakgrund */
body {
background: var(--bg-image) center/cover no-repeat fixed;
background-color: var(--bg-color);
color: var(--text-primary);
}

/* === PREMIUM SIDEBAR STYLING === */
.sidebar {
backdrop-filter: blur(var(--blur-amount)) saturate(150%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(150%);
box-shadow: 2px 0 12px rgba(0, 212, 255, 0.04);
}

/* Tar bort vänster-bordern på listpanelen — den dubblar med sidomenyns
   border-right (style.css) och skapade visuell tjock cyan-rand vid boundaryn.
   Behåller övriga tre sidor så panelens form bevaras. */
.template-list-container {
border-left: 0 !important;
}

.sidebar-logo {
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
border: 1px solid rgba(0, 212, 255, 0.2);
}

.sidebar-logo:hover {
box-shadow: 0 8px 28px rgba(0, 212, 255, 0.22), 0 0 40px rgba(0, 255, 163, 0.12);
}

/* Menystil hanteras av style.css — inga temaoverrides */

/* === PREMIUM HEADER === */
.chat-header {
backdrop-filter: blur(var(--blur-amount)) saturate(140%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(140%);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(0, 212, 255, 0.2);
}

.chat-header h2 {
text-shadow:
0 2px 10px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.2);
}

/* === PREMIUM MESSAGES === */
.message .bubble {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.message.user .bubble {
background: var(--bg-frosty-bubble-user);
border: 1px solid rgba(0, 255, 163, 0.3);
box-shadow: var(--bubble-glow-user);
}

.message.user .bubble:hover {
box-shadow:
0 4px 20px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.15);
}

/* === PREMIUM INPUT AREA === */
.chat-input-area {
backdrop-filter: blur(var(--blur-amount)) saturate(140%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(140%);
box-shadow:
0 -4px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(0, 212, 255, 0.15);
}

#chat-form {
background: var(--bg-frosty-input-field);
border: 1px solid rgba(0, 212, 255, 0.2);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(0, 212, 255, 0.05);
}

#chat-form:focus-within {
border-color: rgba(0, 255, 163, 0.4);
box-shadow:
0 0 30px rgba(0, 212, 255, 0.3),
0 0 60px rgba(0, 255, 163, 0.2),
inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

#send-button {
background: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
box-shadow:
0 4px 16px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#send-button:hover {
background: linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%);
box-shadow:
0 6px 24px rgba(0, 212, 255, 0.6),
0 0 50px rgba(0, 255, 163, 0.4);
}

/* === PREMIUM BUTTONS === */
.header-button {
background: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
box-shadow:
0 4px 16px rgba(0, 212, 255, 0.3),
0 0 30px rgba(0, 255, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.header-button:hover {
background: linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%);
box-shadow:
0 6px 24px rgba(0, 212, 255, 0.5),
0 0 50px rgba(0, 255, 163, 0.3);
transform: translateY(-2px);
}

/* === PREMIUM CONTAINERS === */
.template-editor-container,
.about-container,
.template-list-container {
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.15);
}

/* === PREMIUM GUIDE STEPS === */
.guide-step {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.08) 0%,
rgba(0, 255, 163, 0.05) 100%);
border-left: 3px solid #00d4ff;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

.guide-step:hover {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.12) 0%,
rgba(0, 255, 163, 0.08) 100%);
box-shadow:
0 6px 24px rgba(0, 212, 255, 0.3),
0 0 40px rgba(0, 255, 163, 0.1);
}

.step-number {
background: linear-gradient(135deg, #00d4ff, #00ffa3);
box-shadow:
0 4px 12px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.3);
}

/* === PREMIUM SHORTCUTS === */
.shortcut-item {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.05) 0%,
rgba(0, 255, 163, 0.03) 100%);
border-left: 2px solid transparent;
transition: all 0.3s ease;
}

.shortcut-item:hover {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.1) 0%,
rgba(0, 255, 163, 0.06) 100%);
border-left: 2px solid #00d4ff;
box-shadow:
0 4px 16px rgba(0, 212, 255, 0.2),
0 0 30px rgba(0, 255, 163, 0.1);
transform: translateX(4px);
}

.shortcut-item kbd {
background: linear-gradient(180deg, #1a1f2e 0%, #12181f 100%);
border: 1px solid rgba(0, 212, 255, 0.3);
box-shadow:
0 3px 0 rgba(0, 0, 0, 0.5),
0 0 15px rgba(0, 212, 255, 0.2),
inset 0 1px 0 rgba(0, 212, 255, 0.2);
color: #00d4ff;
}

/* === SCROLLBAR === */
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: none !important;
}

.status-lamp-dot.green {
background-color: #00ffa3;
box-shadow:
0 0 20px #00ffa3,
0 0 40px rgba(0, 255, 163, 0.5);
}

/* tema-override: avviker medvetet från global regel */
.tag-chatt {
background: rgba(0, 255, 157, 0.1) !important;
color: #00ff9d !important;
text-shadow: 0 0 8px rgba(0, 255, 157, 0.6);
border: 1px solid rgba(0, 255, 157, 0.3);
}

/* tema-override: avviker medvetet från global regel */
.tag-form {
background: rgba(0, 212, 255, 0.1) !important;
color: #00d4ff !important;
text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
border: 1px solid rgba(0, 212, 255, 0.3);
}

/* ==================================================
ATLAS TEAM / TAGS PATCH (NAVIGATOR)
================================================== */

.team-ticket-card.taken {
border-left-color: #00d4ff;
background: rgba(0, 212, 255, 0.05);
}
.team-ticket-card.mine {
border-left-color: #00ffa3;
background: linear-gradient(90deg, rgba(0, 255, 163, 0.15) 0%, transparent 100%);
}

/* tema-override: avviker medvetet från global regel */
.ticket-tag.tag-chatt {
background: rgba(0, 255, 163, 0.1);
color: #00ffa3;
border-color: rgba(0, 255, 163, 0.4);
}
/* tema-override: avviker medvetet från global regel */
.ticket-tag.tag-form {
background: rgba(80, 100, 255, 0.15);
color: #6a8eff;
border-color: rgba(80, 100, 255, 0.4);
}
.ticket-tag.owner {
background: linear-gradient(135deg, #00d4ff, #00ffa3);
color: #081016;
border: none;
}

/* MINI CHAT */
#view-my-tickets .message.agent .bubble {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 163, 0.1));
border: 1px solid rgba(0, 255, 163, 0.3);
}

#view-my-tickets .mini-chat-input input {
background: var(--bg-frosty-input-field);
color: var(--text-primary);
border: 1px solid rgba(0, 212, 255, 0.3);
}

#view-my-tickets .mini-chat-input button {
background: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
color: #081016;
box-shadow: 0 4px 18px rgba(0, 212, 255, 0.45);
}

/* =================================================================
DETALJVY — teal-navy, matchar bakgrundsbildens mörka ton.
Selektorer hämtade från style-admin.css (P-READER-HISTORY-SOLID-BG).
================================================================= */

#inbox-detail-body,
#my-chat-scroll-area,
#archive-detail .detail-body,
#atlas-reader-modal #reader-chat-scroll,
#customer-reader-modal #cust-reader-chat-scroll {
background: var(--ticket-history-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow:
inset 0 1px 0 rgba(0, 212, 255, 0.06) !important;
}

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

/* Sidebar motion normalization */
@media screen and (min-width: 769px) {
.sidebar,
.sidebar:hover {
transform: none !important;
}

.sidebar-logo {
transition: transform 0.18s ease, filter 0.18s ease !important;
}

.sidebar:hover .sidebar-logo,
.sidebar-logo:hover {
transform: none !important;
filter: none !important;
}
}