/* =============================================================================
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
AUTO-RELOAD TESTTRIGGER: 2026-06-29 no-op Renderer change.
============================================================================= */

/* =============================================================================
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-text: color-mix(in srgb, var(--accent-primary) 18%, var(--text-primary));
--theme-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;
/* Mail-/ärendebubbel-länkfärg. Default = ljus blå, läslig på mörka teman.
   Ljusa teman överrider till djupare blå i sin egen :root. */
--mail-link: #5BA8FF;

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

/* LÄSBARHETSGOLV FÖR DÄMPAD SMÅTEXT (K5 Å1a, 2026-07-21)
   Enda källan för hur liten och hur dämpad sekundär text får bli. Hjälptexter,
   fältetiketter och skrivskyddsnoter dubbeldämpades tidigare (egen färg PLUS
   inline-opacity 0.35-0.55) och mättes ner till 1,61:1 — långt under WCAG AA.
   Ändra ALDRIG dessa värden uppåt i dämpning utan att mäta om kontrasten.
   Hierarkin bärs av FÄRGEN (--text-secondary), inte av extra opacity:
   0.92 mättes live på Box4 till 4,38:1 / 4,31:1 / 4,08:1 i ljust tema —
   fortfarande under AA. Vid 1.0 klarar samma ytor 5,1 / 5,0 / 4,7:1. */
--text-micro-size: 11px;      /* hjälptext, fältetikett, skrivskyddsnot */
--text-badge-min-size: 10px;  /* absolut golv: badges/pills/räknare */
--text-help-opacity: 1;       /* ingen extra dämpning av sekundär text */
--counter-pill-text: var(--text-primary);
--counter-pill-empty-text: var(--text-primary);
--counter-pill-muted-text: var(--text-primary);
--template-preview-text: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary) 12%);

/* VALD-/AKTIV-STANDARD FÖR NAVIGERING (K5 SEL-standard, 2026-07-24)
   ENDA källan för hur "vald flik / vald meny" markeras. Bygger på temats
   accent (--accent-primary) — ALDRIG på ärendekortens identitetsfärg
   (--dynamic-pill-color / office-/agentfärg i ärendehanteringen), som är ett
   SKILT färgsystem och inte får blandas in här.
   Plattan är accent lagd OVANPÅ temats egen yta ⇒ den ljusnar automatiskt på
   mörka teman och fördjupas på ljusa. Riktningen blir rätt av konstruktion —
   ingen per-tema-gissning behövs.
   Teman äger sin accent, men markeringsreceptet ägs här. De får ALDRIG
   återuppfinna egna per-yta-regler för
   .header-tab.active / .menu-item.active. Det var just den improvisationen
   som gjorde markeringen spretig (vissa teman visade ingenting alls). */
--sel-text:       var(--accent-text);
--sel-edge:       var(--accent-primary);
--sel-fill-alpha: 14%;
--sel-fill-hover-alpha: 7%;
--sel-fill:       color-mix(in srgb, var(--accent-primary) var(--sel-fill-alpha), transparent);
--sel-fill-hover: color-mix(in srgb, var(--accent-primary) var(--sel-fill-hover-alpha), transparent);
--pill-state-active-bg:     var(--sel-fill);
--pill-state-active-border: color-mix(in srgb, var(--sel-edge) 46%, var(--border-color) 54%);
--pill-state-active-text:   var(--sel-text);
--pill-state-idle-bg:       color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--text-secondary) 5%);
--pill-state-idle-border:   color-mix(in srgb, var(--border-color) 76%, var(--text-secondary) 12%);
--pill-state-idle-text:     color-mix(in srgb, var(--text-secondary) 84%, var(--text-primary) 16%);

/* OVALD navigeringstext (Fas 2, 2026-07-24). Motpolen till --sel-text: den
   ska vara tydligt dämpad mot vald, men aldrig oläslig. Tidigare hårdkodad
   som rgba(255,255,255,0.65) i basen — oläslig på ljus yta — vilket tvingade
   ljusa teman att skriva egna .header-tab-färger; två av dem mättes under AA
   (nordic-dawn 3,25:1, carbon 3,96:1). 70 % av temats EGEN --text-primary ger
   rätt polaritet i alla tio teman och landar 5,1-8,4:1 utan att sudda ut
   hierarkin mot vald flik. Dämpa den ALDRIG med extra opacity (Å1a-läxan). */
--tab-idle-text:  color-mix(in srgb, var(--text-primary) 70%, transparent);

/* Luminansmedvetna lyftytor för gamla inline-stilar från mörktema-eran. */
--surface-raise-alpha:     5%;
--surface-line-alpha:      10%;
--on-surface-strong-alpha: 70%;
--on-surface-muted-alpha:  55%;
--on-surface-dim-alpha:    38%;

--surface-raise:        color-mix(in srgb, var(--text-primary) var(--surface-raise-alpha), transparent);
--surface-raise-strong: color-mix(in srgb, var(--text-primary) calc(var(--surface-raise-alpha) * 1.7), transparent);
--surface-line:         color-mix(in srgb, var(--text-primary) var(--surface-line-alpha), transparent);
--surface-line-strong:  color-mix(in srgb, var(--text-primary) calc(var(--surface-line-alpha) * 1.5), transparent);
--on-surface:           var(--text-primary);
--on-surface-strong:    color-mix(in srgb, var(--text-primary) var(--on-surface-strong-alpha), transparent);
--on-surface-muted:     color-mix(in srgb, var(--text-primary) var(--on-surface-muted-alpha), transparent);
--on-surface-dim:       color-mix(in srgb, var(--text-primary) var(--on-surface-dim-alpha), transparent);

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

/* SEMANTISKA TEMAVARIABLER — banners, pills, server-URL */
--modal-backdrop-opacity: rgba(0, 0, 0, 0.6);
--warning-bg:     rgba(255, 159, 10, 0.08);
--warning-border: rgba(255, 159, 10, 0.2);
--warning-text:   #ff9f0a;
--info-bg:        rgba(10, 132, 255, 0.08);
--info-border:    rgba(10, 132, 255, 0.2);
--info-text:      #0a84ff;
--danger-bg:      rgba(255, 59, 48, 0.08);
--danger-border:  rgba(255, 59, 48, 0.2);
--danger-text:    #ff3b30;
--success-bg:     rgba(52, 199, 89, 0.08);
--success-border: rgba(52, 199, 89, 0.2);
--success-text:   #34c759;
--live-server-url-color: #4cd964;
}

html.atlas-theme-changing,
html.atlas-theme-changing *,
html.atlas-theme-changing *::before,
html.atlas-theme-changing *::after {
transition: none !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
}

/* KAN-400: structural cascade guard. The broad guard above is (0,1,1) for
   normal elements and loses to later/ID-based !important transitions. This
   selector matches every element but carries (2,2,1), and (2,2,2) for pseudos. */
html.atlas-theme-changing.atlas-theme-changing :is(#atlas-theme-transition-guard#atlas-theme-transition-guard2, *),
html.atlas-theme-changing.atlas-theme-changing :is(#atlas-theme-transition-guard#atlas-theme-transition-guard2, *)::before,
html.atlas-theme-changing.atlas-theme-changing :is(#atlas-theme-transition-guard#atlas-theme-transition-guard2, *)::after {
transition: none !important;
transition-property: none !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}

html.atlas-theme-changing #view-admin .admin-mini-card,
html.atlas-theme-changing #view-admin .catalog-active-vehicles-grid .catalog-active-vehicle-card,
html.atlas-theme-changing #view-admin .catalog-active-vehicles-grid .catalog-active-vehicle-btn,
/* KAN-400: Mailmallar. Patriks fynd 2026-08-24 — titelfältet blinkar ljust vid
   temabyte. Mätt: #template-editor-form input[type="text"] (style-tickets.css:1818)
   har transition: all !important med specificitet (1,1,1) och slår den breda
   vaktens (0,1,1) på rad 149. Samma för #new-template-btn (1,0,0). Dessa
   selektorer ger (1,2,2) respektive (1,1,1) och vinner. */
html.atlas-theme-changing #template-editor-form input[type="text"],
html.atlas-theme-changing #template-editor-form textarea,
html.atlas-theme-changing #new-template-btn,
/* KAN-400: anteckknings-/historikikonen pa arendekorten (Inkorgen, Mina arenden).
   Matt live 2026-08-24: .notes-trigger-btn svg (style.css:1861) har
   transition !important med specificitet (0,1,1) — EXAKT LIKA med den breda
   vaktens html.atlas-theme-changing * (0,1,1). Vid lika specificitet vinner
   den senare regeln, och vakten star tidigare i samma fil. Denna selektor ger
   (0,2,2) och vinner. */
html.atlas-theme-changing .notes-trigger-btn svg {
transition: none !important;
transition-property: none !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}

/* KAN-149: fixed statusrad innebär noll reflow när nätet går ned/upp.
   Färgerna kommer enbart från semantiska tema-tokens. */
.atlas-offline-status {
position: fixed;
z-index: 10050;
top: max(8px, env(safe-area-inset-top));
left: 50%;
transform: translateX(-50%);
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 6px 12px;
border: 1px solid var(--warning-border);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--warning-text) 10%);
box-shadow: var(--shadow-small);
color: var(--text-primary);
font-size: var(--text-micro-size);
font-weight: 650;
line-height: 1.25;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
.atlas-offline-status[hidden] { display: none !important; }

/* "Glide" — mjuk intoning när en vy eller detaljpanel just blivit synlig.
   Triggas enbart av window._atlasAnimateEnter (switchView + detalj-öppnarna),
   aldrig vid rerender av samma innehåll. atlas-minimal opt:ar ut med
   animation:none — temats "inga blink blink"-kontrakt gäller även denna. */
@keyframes atlasViewEnter {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: none; }
}
.atlas-view-enter {
animation: atlasViewEnter 130ms ease-out both;
}

/* Gamla inline-stilar från mörktema-eran: nedtonad vit metadata blir osynlig
   i ljusa teman. Avatars och starka accentytor med ren vit text berörs inte. */
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.22)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.28)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.35)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.38)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.4)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.45)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.5)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.55)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.7)"],
:where(#view-inbox, #view-my-tickets, #view-archive, #view-admin, #view-customers,
#atlas-reader-modal, #customer-reader-modal, #atlas-ticket-history-modal,
#atlas-notes-modal, #customer-mail-compose-modal, #ai-price-info-panel)
[style*="color:rgba(255,255,255,0.75)"] {
color: var(--text-secondary) !important;
opacity: 1 !important;
}

#ai-price-info-panel {
background: color-mix(in srgb, var(--text-secondary) 8%, var(--bg-dark-primary)) !important;
border-color: color-mix(in srgb, var(--text-secondary) 18%, transparent) !important;
}

#ai-price-info-panel [style*="color:rgba(255,255,255,0.75)"],
#ai-price-info-panel [style*="color:rgba(255,255,255,0.7)"] {
color: var(--text-primary) !important;
}

/* =============================================================================
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 (globalt dold, scrollfunktionen bevaras) ===
Specificiteten behöver vinna även över senare komponent- och temaregler. */
:root,
:root * {
scrollbar-width: none !important;
scrollbar-color: transparent transparent !important;
}
:root::-webkit-scrollbar,
:root *:not(:root)::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
:root::-webkit-scrollbar-track,
:root *:not(:root)::-webkit-scrollbar-track,
:root::-webkit-scrollbar-thumb,
:root *:not(:root)::-webkit-scrollbar-thumb,
:root::-webkit-scrollbar-thumb:hover,
:root *:not(:root)::-webkit-scrollbar-thumb:hover,
:root::-webkit-scrollbar-corner,
:root *:not(:root)::-webkit-scrollbar-corner {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
:root::-webkit-scrollbar-button,
:root *:not(:root)::-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;
justify-content: center;
/* Fast hojd: loggrutan ska styra linjen och span:a huvudheader + subpanel. */
height: 208px !important;
min-height: 208px !important;
max-height: 208px !important;
box-sizing: border-box;
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.tenant-logo {
max-width: 180px;
/* Taket var 64px, vilket höjdbegränsade en hög logga långt innan den nådde
   bredden 180px — standard-Atlas (753x473) ritades 102x64 i stället för
   180x113. Breda loggor (t.ex. HTIG 800x260) binds ändå av max-width och
   påverkas inte av taket. 120px låter en hög logga fylla bredden och ryms
   fortfarande i .sidebar-header (fast 208px). */
max-height: 120px;
object-fit: contain;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.35));
}

.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;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar-menu::-webkit-scrollbar {
width: 0;
height: 0;
}

/* =============================================================================
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.
   Textfärgen var tidigare hårdkodat rgba(255,255,255,0.85), vilket är oläsligt
   på ljus yta; de tre ljusa temana tvingades därför skriva egna hover-regler.
   Nu var(--text-primary): varje tema definierar den i rätt polaritet, så en
   och samma basregel fungerar i alla tio teman (SEL-standard 2026-07-24). */
.sidebar .menu-item:hover {
background: none !important;
background-color: transparent !important;
color: var(--text-primary) !important;
transform: none !important;
box-shadow: none !important;
}

/* 1b. SEL-standard: hover-platta på OVALD rad (7 %, svagare än vald-plattans
   14 %). :not(.active) så att en aktiv rad inte tappar sin starkare platta. */
.sidebar .menu-item:not(.active):hover {
background: var(--sel-fill-hover) !important;
background-color: var(--sel-fill-hover) !important;
}

/* 2. AKTIVT LÄGE — SEL-standarden: accenttonad platta + accentkant + golvad text.
   Plattan (--sel-fill) tillkom 2026-07-24; tidigare fanns ingen bakgrund alls,
   vilket gjorde vald menyrad omätbart lika ovald i 6 av 10 teman (ΔL = 0). */
.sidebar .menu-item.active {
background: var(--sel-fill) !important;
background-color: var(--sel-fill) !important;
background-image: none !important;
color: var(--sel-text) !important;
box-shadow: none !important;
border-left: 2px solid var(--sel-edge) !important;
font-weight: 600 !important;
}

/* 2b. Vald rad som hovras — vald-markeringen VINNER över hover.
   Egen regel med högre specificitet så att ingen temaregel (nuvarande eller
   framtida) kan dra tillbaka den golvade --sel-text på hover. Utan denna föll
   aktiv rad tillbaka till temats råa hover-accent och bröt Å1b-golvet
   (mättes till 3,76:1 i nordic-dawn innan guarden). */
.sidebar .menu-item.active:hover {
background: var(--sel-fill) !important;
background-color: var(--sel-fill) !important;
color: var(--sel-text) !important;
}

.menu-item.active svg {
color: var(--sel-edge) !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: 0 !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 */
}

.atlas-brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 20px;
  opacity: 0.45;
  margin-top: auto;
}
.atlas-brand-logo img {
  height: 62px;
  width: auto;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* #427: sidopanelen scrollade i onödan på låga skärmar. Mätt 2026-08-26 i
   Electron 1366x768, där fönstrets innerhöjd är ~709px: höjdbudgeten är
   .sidebar-header 224px (208 + 16 marginal) + .sidebar-menu 344px (8 poster à
   41px + 2px marginal) + .atlas-brand-logo 102px + .sidebar-footer 60px = 730px.
   Överflödet börjar därför under ~732px och sista navposten (Om) kapades.
   .sidebar-menu har `scrollbar-width: none`, så scrollningen syns inte ens —
   raden ser bara avhuggen ut.

   🔴 .sidebar-header rörs INTE: dess 208px är låst med !important och ska
   spänna över huvudheader + subpanel. Utrymmet tas i stället från den
   DEKORATIVA ATLAS-vattenstämpeln och 1px per navpost, och bara på skärmar som
   faktiskt är låga — stora skärmar behåller sin luft. */
@media (max-height: 820px) {
  .atlas-brand-logo {
    padding: 8px 0;
  }
  .atlas-brand-logo img {
    height: 52px;
  }
  .sidebar .menu-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* 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).
   Patrik IRL 2026-07-31: färgen var hårdkodad rgba(255,255,255,0.5) och mättes till
   1,06:1 mot modalkroppens egen bakgrund i apple-light-green och 1,16:1 i nordic-dawn
   — rubriken var i praktiken osynlig i alla ljusa teman. Kanten mätte 1,01–1,21:1 och
   syntes inte ens i mörkt tema. Båda går nu via temavariabeln, som varje tema sätter. */
.assign-group-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-secondary);
margin: 2px 2px 8px;
padding-bottom: 5px;
border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
}

/* =============================================================================
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(auto-fit, minmax(40px, 1fr)); gap: 7px; margin-top: 10px; }
.avatar-option {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
width: 100%;
background: color-mix(in srgb, var(--bg-dark-secondary) 92%, var(--text-primary) 4%);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0;
color: var(--text-secondary);
cursor: pointer;
box-sizing: border-box;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.avatar-option svg { width: 22px; height: 22px; }
.avatar-option:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-color: var(--accent-primary); transform: translateY(-1px); }
.avatar-option.selected { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); border-color: var(--accent-primary); color: var(--accent-primary) !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;
}