/* =============================================================================
Renderer/assets/css/style-modals.css
VAD DEN GÖR: Modaler, dialogramar och overlay-komponenter —
glass-modal, admin-kort, reader-modaler, hjälpvyer.
ANVÄNDS AV:  index.html (länkas in via style.css eller direkt)
SENAST STÄDAD: 2026-05-15
============================================================================= */

/* =============================================================================
OM ATLAS-MODALEN — sektioner/footer/pills (dark-theme default)
Ljusa teman (apple-light-green, nordic-dawn) definierar egna värden i sina
:root-block för synlig kontrast mot ljus bakgrund.
============================================================================= */
:root {
--atlas-info-section-bg: rgba(255,255,255,0.03);
--atlas-info-section-border: rgba(255,255,255,0.07);
--atlas-info-footer-bg: rgba(0,0,0,0.18);
--atlas-info-pill-bg: rgba(255,255,255,0.04);
--atlas-info-pill-bg-hover: rgba(255,255,255,0.09);
--atlas-info-pill-border: rgba(255,255,255,0.1);
--atlas-info-pill-text: rgba(255,255,255,0.45);
--atlas-info-pill-text-hover: rgba(255,255,255,0.75);
}

/* =============================================================================
INFO-MODALEN - DÖLJ CHATRUTA
============================================================================= */
.atlas-help-overlay .chat-input-area,
.atlas-help-overlay #chat-form,
.atlas-help-overlay #my-chat-input,
.atlas-help-overlay #send-button {
display: none !important; 
}

/* Säkerställ att modalen inte ärver chat-input styling */
.atlas-help-overlay .glass-modal-box {
padding: 30px !important;
overflow-y: auto !important;
max-height: 80vh !important;
}

/* =============================================================================
ANIMATIONS & HELP OVERLAY
============================================================================= */
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}

.help-content h4 {
display: flex !important;
align-items: center !important;
gap: 8px !important;
color: rgba(255,255,255,0.88) !important;
font-weight: 500 !important;
margin-top: 0;
font-size: 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 12px;
margin-bottom: 18px;
}

/* =============================================
HJÄLP-MODAL STYLAD VYRUBRRIK
(matchar showCustomersInfoModal-stilen)
============================================= */
.help-view-header {
display: flex;
align-items: center;
gap: 14px;
margin: -32px -32px 20px;
padding: 20px 24px 18px;
border-bottom: 1px solid rgba(255,255,255,0.07);
background: linear-gradient(90deg, rgba(255,255,255,0.035), transparent);
border-radius: 14px 14px 0 0;
}
.help-view-icon-circle {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--accent-primary);
}
.help-view-title {
font-size: 15px;
font-weight: 700;
color: var(--accent-primary);
}
.help-view-subtitle {
font-size: 11px;
color: rgba(255,255,255,0.38);
margin-top: 2px;
}
.help-content ul { padding-left: 0; list-style: none; margin: 0; }
.help-content li { margin-bottom: 14px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.85) !important; }
.help-content b { color: var(--accent-primary) !important; }

/* =============================================================================
MASTER MODAL STYLING
============================================================================= */
.atlas-help-overlay .help-modal-box,
.glass-modal-box {
position: relative !important;
width: 500px !important;
max-width: 95vw !important;
max-height: 80vh !important;
background-color: rgb(13, 16, 28) !important;
background-image: linear-gradient(var(--bg-frosty-content, rgb(13, 16, 28)), var(--bg-frosty-content, rgb(13, 16, 28))) !important;
border: 1px solid var(--border-color) !important;
border-top: 3px solid var(--accent-primary) !important;
border-radius: 16px !important;
padding: 32px !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07) !important;
overflow-y: auto !important;
scrollbar-gutter: stable;
animation: modalIn 0.16s cubic-bezier(.22,.68,0,1.2) both;
}

#profile-modal-box {
max-height: calc(100vh - 16px) !important;
}

@keyframes modalIn {
from { transform: translateY(8px) scale(.98); }
to { transform: none; }
}

/* Flex-kolumn-modaler (notes, mail-compose) — overflow hanteras av child-divs */
.glass-modal-box.glass-modal-flex {
overflow: hidden !important;
}
.glass-modal-box.glass-modal-flex .glass-modal-scroll {
overflow-y: auto !important;
flex: 1 !important;
}

@keyframes atlasComposerSendSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.atlas-composer-send-progress {
position: absolute;
inset: 0;
z-index: 70;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
pointer-events: auto;
background: color-mix(in srgb, var(--bg-frosty-content) 72%, transparent);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
color: var(--text-primary);
}

.atlas-composer-send-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: min(320px, 100%);
padding: 18px;
box-sizing: border-box;
border: 1px solid var(--border-color);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-frosty-content) 86%, var(--accent-primary) 14%);
box-shadow: 0 18px 46px color-mix(in srgb, var(--text-primary) 18%, transparent);
text-align: center;
}

.atlas-composer-send-spinner {
width: 26px;
height: 26px;
box-sizing: border-box;
border: 3px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color) 82%);
border-top-color: var(--accent-primary);
border-radius: 999px;
animation: atlasComposerSendSpin 780ms linear infinite;
flex: 0 0 auto;
}

.spinner-small {
display: block;
width: 26px;
height: 26px;
box-sizing: border-box;
margin: 18px auto;
border: 3px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color) 82%);
border-top-color: var(--accent-primary);
border-radius: 999px;
animation: atlasComposerSendSpin 780ms linear infinite;
}

.atlas-composer-send-primary {
font-size: 14px;
font-weight: 800;
line-height: 1.25;
color: var(--text-primary);
}

.atlas-composer-send-secondary {
font-size: 12px;
font-weight: 650;
line-height: 1.35;
color: var(--text-secondary);
max-width: 280px;
}

@media (prefers-reduced-motion: reduce) {
.atlas-composer-send-spinner,
.spinner-small {
animation: none;
border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-color) 58%);
border-top-color: var(--accent-primary);
}
}

#atlas-assign-modal .atlas-assign-modal-box,
#atlas-bulk-assign-modal .atlas-assign-modal-box {
height: min(80vh, 640px) !important;
max-height: min(80vh, 640px) !important;
}

#atlas-assign-modal .atlas-assign-modal-body,
#atlas-bulk-assign-modal .atlas-assign-modal-body {
min-height: 0 !important;
overflow: hidden !important;
}

/* Antalet på flikarna är listans ENDA storleksbesked. Scrollbars är globalt dolda
   (style.css "SCROLLBAR (globalt dold, scrollfunktionen bevaras)"), så en lista som
   är flera gånger högre än sin ruta ser avslutad ut. Mätt på Box1 2026-09-01:
   30 agentkort renderade, scrollHeight 1128 mot clientHeight 194, fyra kort helt
   synliga åt gången och ingen scrollbar. Siffran säger hur många som finns. */
#atlas-assign-modal .assign-tab-count,
#atlas-bulk-assign-modal .assign-tab-count {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
background: color-mix(in srgb, currentColor 16%, transparent);
font-size: 0.85em;
font-weight: 700;
letter-spacing: 0;
vertical-align: baseline;
}

#atlas-assign-modal .atlas-assign-modal-body > .agent-card,
#atlas-bulk-assign-modal .atlas-assign-modal-body > .agent-card,
#atlas-assign-modal .assign-tabs,
#atlas-bulk-assign-modal .assign-tabs {
flex: 0 0 auto !important;
}

#atlas-assign-modal .assign-scroll-area,
#atlas-bulk-assign-modal .assign-scroll-area {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scroll-behavior: auto;
will-change: scroll-position;
}

#atlas-assign-modal .assign-scroll-area::-webkit-scrollbar,
#atlas-bulk-assign-modal .assign-scroll-area::-webkit-scrollbar {
display: none !important;
}

#atlas-assign-modal .assign-info-footer,
#atlas-bulk-assign-modal .assign-info-footer {
flex: 0 0 auto !important;
margin-top: 14px;
padding: 11px 13px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
color: rgba(255, 255, 255, 0.64);
font-size: 11px;
line-height: 1.45;
}

#atlas-notes-modal .glass-modal-box {
border-top: 1px solid var(--border-color) !important;
}


#help-close-btn {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
color: var(--text-secondary) !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
z-index: 10 !important;
line-height: 1 !important;
padding: 0 !important;
}
#help-close-btn:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: var(--text-primary) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Gemensam scrollbar-design — minimal, ingen accent-färg, ingen glow */
.glass-modal-box::-webkit-scrollbar,
.atlas-help-overlay .help-modal-box::-webkit-scrollbar { width: 5px !important; height: 5px !important; }

.glass-modal-box::-webkit-scrollbar-track,
.atlas-help-overlay .help-modal-box::-webkit-scrollbar-track { background: transparent !important; }

.glass-modal-box::-webkit-scrollbar-thumb,
.atlas-help-overlay .help-modal-box::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 3px !important;
box-shadow: none !important;
transition: background 0.2s;
}

.glass-modal-box::-webkit-scrollbar-thumb:hover,
.atlas-help-overlay .help-modal-box::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: none !important;
}

/* Dölj scrollbar i modal-body och agent-grid — scroll fungerar fortfarande */
.glass-modal-body::-webkit-scrollbar,
#composer-agent-grid::-webkit-scrollbar {
display: none !important;
}

/* =============================================================================
ADMIN-VY
============================================================================= */

/* =============================================================================
ADMIN KORT OCH KOMPONENTER
============================================================================= */
.admin-list-card {
padding: 12px 16px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-left: 4px solid var(--agent-color, #0071e3) !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin: 6px 12px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-height: 56px !important;
}

.admin-list-card:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: var(--agent-color, #0071e3) !important;
transform: translateX(4px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.admin-list-card.active {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
border-color: var(--agent-color, #0071e3) !important;
}

/* =============================================================================
ADMIN MINI CARD — Isolerad under #view-admin. Rör ej .team-ticket-card eller .admin-list-card
============================================================================= */
#view-admin .admin-mini-card {
box-sizing: border-box;
width: 100%;
padding: 8px 14px !important;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid color-mix(in srgb, var(--agent-color, var(--border-color)) 87%, transparent) !important;
border-radius: 10px;
cursor: pointer;
transition: border-left-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
margin: 3px 0;
/* overflow: visible krävs för office-card-badge (absolut-positionerad uppe till höger) */
overflow: visible;
display: flex;
align-items: center;
gap: 10px !important;
min-height: 44px;
position: relative;
}

/* Hover får behålla kortets identitetsmarkör på vänsterkanten; vald-plattan
   följer däremot SEL-standarden så alla adminlistor läser samma state. */
#view-admin .admin-mini-card:hover {
background: var(--sel-fill-hover);
border-left-color: color-mix(in srgb, var(--agent-color, var(--accent-primary, #0071e3)) 87%, transparent) !important;
transform: translateX(3px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

#view-admin .admin-mini-card.active {
border-color: color-mix(in srgb, var(--sel-edge) 42%, var(--border-color) 58%) !important;
border-left-color: color-mix(in srgb, var(--agent-color, var(--sel-edge, #0071e3)) 87%, transparent) !important;
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
box-shadow: none;
}

/* Kontorskort — bubble och subtitle med named classes för live-uppdatering */
#view-admin .office-card-bubble {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1.5px solid;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
font-size: 12px;
opacity: 0.85;
}

#view-admin .office-card-sub {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Notisräknare uppe till höger på kontors- och personalkort — accent-färgad pill,
matchar .nav-badge / #badge-inbox-stilen i style.css. Visas bara
när kortet har minst ett aktivt ärende (klienten dölje 0). */
#view-admin .office-card-badge,
#view-admin .admin-card-badge {
position: absolute;
top: 6px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: color-mix(in srgb, var(--accent-primary) 80%, white);
border: none;
box-shadow: none;
pointer-events: none;
}

body.atlas-light-theme #view-admin .office-card-badge,
body.atlas-light-theme #view-admin .admin-card-badge {
color: color-mix(in srgb, var(--accent-primary) 43%, #000);
}

body:not(.atlas-light-theme) #view-admin .office-card-badge,
body:not(.atlas-light-theme) #view-admin .admin-card-badge {
color: color-mix(in srgb, var(--accent-primary) 35%, var(--text-primary));
}

/* ADMIN TICKET PREVIEW — Isolerad. Rör ej .profile-ticket-row eller .team-ticket-card */
#view-admin .admin-ticket-preview {
display: flex;
flex-direction: column;
padding: 9px 12px 7px;
/* #461 (Patriks IRL-onskemal 2026-08-28): kortet arver AGENTENS egen farg, subtilt.
   --atp-color satts redan per kort av admin-agents.js:423-425 och bar hittills bara
   vansterkanten; kroppen var hardkodat vitt 4 % / 10 %, alltsa #436-klassen (antar mork
   grund, blir en gra tvatt i ljusa teman). Nu tonas hela kortet mot samma farg som kanten.
   Matt: agenten i Personal ger --atp-color #ab637c pa bada korten; kortfamiljen forekommer
   INTE i kontorsvyn, sa fallbacken #0071e3 far ingen praktisk yta.
   Styrkan 8 %/26 % vald genom forhandsvisning i bade ljust och morkt tema — 5 % syntes knappt,
   12 % blev for starkt. */
background: color-mix(in srgb, var(--atp-color, #0071e3) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--atp-color, #0071e3) 26%, transparent);
border-left: 4px solid var(--atp-color, #0071e3);
border-radius: 8px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.15s ease;
gap: 5px;
min-width: 0;
}
#view-admin .admin-ticket-preview:hover {
background: color-mix(in srgb, var(--atp-color, #0071e3) 13%, transparent);
border-left-color: var(--atp-color, #0071e3);
transform: translateX(2px);
}
/* #461 KASKADFIX (Codex oberoende livegranskning 2026-08-28: leveransen ovan var inte
   verksam). Regeln ovan forlorade kaskaden. Matt i browsern, inte antaget — varje
   CSS-regel som matchar kortet och satter en bakgrund, i kaskadordning:

     apple-light-green.css:1117  background: var(--alg-field)   !important
     apple-light-green.css:2422  background: rgba(0,0,0,0.04)   !important
     nordic-dawn.css             samma tva regler, --nd-field
     onyx-ultradark.css          samma tva regler, --prl-field
     carbon-theme.css:936        background: var(--ct-field)    !important

   4 av 10 teman gor detta; de ovriga sex har ingen regel alls och dar VERKADE #461
   redan (matt live: atlas-minimal gav color(srgb ... / 0.08), alltsa agentens ton).
   Fyndet gick forlorat i min forsta inventering for att temafilerna INTE ligger under
   assets/css/ utan under assets/themes/<namn>/<namn>.css — ett grep i fel katalog gav
   noll traffar och sag ut som ett friskintyg.

   Fixen tar INTE vagen genom fyra temafiler. Den hojer specificiteten har, en gang:
   korten bar `--atp-color` som INLINE custom property (admin-agents.js:423-425), sa
   attributselektorn matchar exakt de kort som har en agentfarg. Specificitet (1,2,0)
   mot temats (1,1,0), bada `!important` — vinner oavsett laddningsordning, vilket ett
   `!important` med samma specificitet inte hade gjort.

   Saknar ett kort sin inline-variabel faller det tillbaka pa temats egen yta. Det ar
   avsiktligt: hellre temats normala kort an ett kort tonat mot fallbacken #0071e3. */
#view-admin .admin-ticket-preview[style*="--atp-color"] {
background: color-mix(in srgb, var(--atp-color, #0071e3) 8%, transparent) !important;
border-color: color-mix(in srgb, var(--atp-color, #0071e3) 26%, transparent) !important;
border-left-color: var(--atp-color, #0071e3) !important;
}
#view-admin .admin-ticket-preview[style*="--atp-color"]:hover {
background: color-mix(in srgb, var(--atp-color, #0071e3) 13%, transparent) !important;
border-left-color: var(--atp-color, #0071e3) !important;
}
#view-admin .admin-ticket-preview .atp-main-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
#view-admin .admin-ticket-preview .atp-body {
flex: 1;
min-width: 0;
}
#view-admin .admin-ticket-preview .atp-footer-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
padding-top: 5px;
border-top: 1px solid rgba(255,255,255,0.05);
}
#view-admin .admin-ticket-preview .atp-date {
font-size: 10px;
font-family: monospace;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
#view-admin .admin-ticket-preview .atp-pills {
display: flex;
gap: 4px;
min-width: 0;
justify-content: flex-end;
flex-wrap: nowrap;
overflow: hidden;
}
#view-admin .admin-ticket-preview .atp-pill {
font-size: var(--text-badge-min-size);
padding: 2px 6px;
border-radius: 4px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: var(--atp-color, #0071e3);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 3px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
#view-admin .admin-ticket-preview .atp-sender {
font-weight: 600;
font-size: 12px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#view-admin .admin-ticket-preview .atp-subject {
font-size: 11px;
opacity: 0.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
#view-admin .admin-ticket-preview .atp-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
#view-admin .admin-ticket-preview .atp-action-icon,
#view-admin .admin-ticket-preview .atp-note-btn {
width: 20px;
height: 20px;
min-width: 20px;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 20px;
margin: 0 !important;
box-sizing: border-box;
line-height: 0;
}
#view-admin .admin-ticket-preview .atp-action-icon svg,
#view-admin .admin-ticket-preview .atp-note-btn svg {
width: 16px !important;
height: 16px !important;
}
#view-admin .admin-ticket-preview .card-prio-btn.atp-action-icon {
width: 20px;
height: 20px;
min-width: 20px;
border-radius: 6px !important;
box-shadow: none !important;
}
#view-admin .admin-ticket-preview .card-prio-btn.atp-action-icon::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 38%, transparent);
}
#view-admin .admin-ticket-preview .card-prio-btn.atp-action-icon:hover::before {
box-shadow: 0 0 0 2px currentColor, 0 0 14px color-mix(in srgb, currentColor 60%, transparent);
}
#view-admin .admin-ticket-preview .atp-note-btn {
background: transparent;
border: none;
cursor: pointer;
opacity: 0.65;
padding: 0 !important;
border-radius: 6px;
transition: opacity 0.2s;
overflow: visible;
}
#view-admin .admin-ticket-preview .atp-note-btn:hover {
opacity: 1;
background: rgba(255,255,255,0.08);
}
#view-admin .admin-ticket-preview .notes-count-badge {
display: block !important;
top: -5px;
right: -4px;
background: color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
color: color-mix(in srgb, var(--accent-primary) 90%, white) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent) !important;
}

/* =============================================================================
ADMIN TAB 3 — SYSTEMKONFIGURATION (scoped under #view-admin)
============================================================================= */
#view-admin .admin-sysconfig-nav-item {
box-sizing: border-box;
width: 100%;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
margin: 3px 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-primary);
}

#view-admin .admin-sysconfig-nav-item:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.15);
}

/* SEL-standard Fas 2: subnavet (Kundchatt & Kunskap- och Systemkonfig-listan)
   använde RÅ --accent-primary som text — samma feltyp som Å1b golvade och som
   Fas 1 rättade på flikarna. Nu samma --sel-*-recept som flik + sidomeny. */
/* Plattan läggs som background-IMAGE, inte background-color. Subnav-raden har
   en EGEN opak yta (temat sätter den med !important), och designkontraktet
   säger att plattan ska ligga OVANPÅ temats yta. Byter man background-color
   rakt av försvinner temaytan och deltat mot ovald rad kollapsar till ~1,07
   i stället för ~1,13 — mätt 2026-07-24. */
#view-admin .admin-sysconfig-nav-item.active,
#view-admin .admin-sysconfig-nav-item[aria-selected="true"] {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
color: var(--sel-text) !important;
}

#view-admin .admin-sysconfig-nav-item:not(.active):hover {
background-image: linear-gradient(0deg, var(--sel-fill-hover), var(--sel-fill-hover)) !important;
}

/* ── Rapport-knappar (Rapporter-sektionen i systemkonfig) ── */
.report-preset-btn {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
text-align: left;
color: var(--text-primary);
transition: background 0.15s, border-color 0.15s;
width: 100%;
}
.report-preset-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
.report-action-btn {
padding: 8px 16px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
cursor: pointer;
font-size: 13px;
transition: background 0.15s;
}
.report-action-btn:hover {
background: rgba(255, 255, 255, 0.12);
}

#view-admin .admin-config-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
margin-bottom: 8px;
}

#view-admin .admin-config-row label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
min-width: 140px;
}

#view-admin .admin-config-field {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 6px 10px;
color: var(--text-primary);
font-size: 13px;
font-family: monospace;
}

#view-admin .admin-config-field:disabled {
opacity: 0.5;
cursor: not-allowed;
}

#view-admin .admin-config-field:not(:disabled):not([readonly]) {
border-color: var(--accent-primary);
background: rgba(0, 113, 227, 0.1);
}

#view-admin .admin-lock-btn {
padding: 5px 10px;
font-size: 11px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}

#view-admin .admin-lock-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}

#view-admin .admin-lock-btn.unlocked {
border-color: var(--accent-primary);
color: var(--accent-primary);
}

/* Config-fält spara-knapp: diskettikon, subtil tills aktiv */
.config-save-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(76, 217, 100, 0.3);
color: #4cd964;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.config-save-btn:hover {
background: rgba(76, 217, 100, 0.15);
border-color: rgba(76, 217, 100, 0.6);
box-shadow: 0 0 8px rgba(76, 217, 100, 0.3);
}

#view-admin .admin-restart-notice {
background: rgba(255, 200, 0, 0.1);
border: 1px solid rgba(255, 200, 0, 0.3);
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
color: #ffc800;
margin-top: 16px;
display: flex;
align-items: center;
gap: 8px;
}

/* =============================================================================
ADMIN KUNSKAPSBANK — Section Cards (scoped under #view-admin)
============================================================================= */
#view-admin .admin-kb-section-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-left: 2px solid rgba(0, 113, 227, 0.25);
border-radius: 10px;
padding: 14px;
margin-bottom: 10px;
transition: border-color 0.2s;
}

#view-admin .admin-kb-section-card.unlocked {
border-color: var(--accent-primary);
background: rgba(0, 113, 227, 0.05);
}

#view-admin .admin-kb-title-field {
width: 100%;
box-sizing: border-box;
min-width: 0;
background: color-mix(in srgb, var(--bg-frosty-content, rgba(255, 255, 255, 0.04)) 72%, var(--accent-primary) 6%);
border: 1px solid color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.1)) 82%, var(--accent-primary) 18%);
border-radius: 8px;
color: var(--text-primary);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
padding: 7px 10px;
margin-bottom: 0;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#view-admin .admin-kb-title-field:not([readonly]) {
border: 1px solid var(--accent-primary) !important;
border-radius: 8px !important;
background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
padding: 7px 10px !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

#view-admin .admin-kb-section-card .admin-kb-title-field[readonly] {
background: color-mix(in srgb, var(--bg-frosty-content, rgba(255, 255, 255, 0.04)) 88%, var(--accent-primary) 4%) !important;
border-color: color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.1)) 86%, transparent) !important;
color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary) 12%) !important;
cursor: default !important;
}

#view-admin .admin-kb-answer-field {
width: 100%;
box-sizing: border-box;
background: color-mix(in srgb, var(--bg-frosty-content, rgba(255, 255, 255, 0.04)) 78%, var(--accent-primary) 5%);
border: 1px solid color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.1)) 78%, var(--accent-primary) 18%);
border-radius: 10px;
color: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary) 16%);
font-size: 12.5px;
line-height: 1.55;
padding: 10px 12px;
resize: vertical;
min-height: 72px;
outline: none;
font-family: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#view-admin .admin-kb-answer-field:not([readonly]) {
border-color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
color: var(--text-primary);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

#view-admin .admin-kb-section-card .admin-kb-answer-field[readonly] {
background: color-mix(in srgb, var(--bg-frosty-content, rgba(255, 255, 255, 0.04)) 90%, var(--accent-primary) 3%) !important;
border-color: color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.1)) 86%, transparent) !important;
color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary) 22%) !important;
cursor: default !important;
}

#view-admin .admin-kb-keywords {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}

#view-admin .admin-kb-keywords .kw-pill {
font-size: 10px;
padding: 2px 7px;
background: color-mix(in srgb, var(--accent-primary) 7%, rgba(255, 255, 255, 0.035));
border-radius: 10px;
color: rgba(255, 255, 255, 0.60);
opacity: 0.74;
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, rgba(255, 255, 255, 0.08));
}

.admin-stat-card {
padding: 18px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 12px !important;
text-align: center !important;
cursor: pointer !important;
/* Display och height raderat */
}

.admin-stat-card:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: var(--accent-primary) !important;
}

.profile-ticket-row {
padding: 10px !important;
margin-bottom: 6px !important;
background: rgba(255, 255, 255, 0.02) !important;
border-left: 3px solid var(--accent-primary) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
font-size: 12px !important;
/* Display och flex raderat */
}

input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
cursor: pointer !important;
accent-color: var(--accent-primary) !important;
transition: all 0.2s ease !important;
}

input[type="checkbox"]:hover { filter: brightness(1.2) !important; }
input[type="checkbox"]:checked { accent-color: var(--accent-primary) !important; }

.header-tabs {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 !important;
gap: 0 !important;
border-bottom: none !important;
}

.header-tab {
padding: 15px 20px !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
color: var(--tab-idle-text) !important;
cursor: pointer !important;
transition: color 0.2s ease, border-color 0.2s ease !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.2px !important;
white-space: nowrap !important;
position: relative !important;
}

/* Hover-textfärgen var tidigare hårdkodat rgba(255,255,255,0.85) — oläslig på
   ljus yta, vilket tvingade ljusa teman att skriva egna hover-regler. Nu
   var(--text-primary): rätt polaritet i alla tio teman (SEL-standard). */
.header-tab:hover {
color: var(--text-primary) !important;
}

/* Ovald flik som hovras — svag antydan av samma platta (7 %, SEL-standard).
   :not(.active) så att en aktiv flik behåller sin egen, starkare platta. */
.header-tab:not(.active):hover {
background: var(--sel-fill-hover) !important;
}

/* SEL-standarden för flikar (K5, 2026-07-24). Tidigare: rå --accent-primary
   som TEXT (föll ur Å1b-golvet, mättes till 3,2-3,6:1 i 6 teman) och
   background: transparent (ΔL = 0 mot ovald flik ⇒ "visar inget").
   Nu: golvad --sel-text + accenttonad platta + accentkant, samma regel i
   ALLA teman. */
.header-tab.active {
color: var(--sel-text) !important;
border-bottom-color: var(--sel-edge) !important;
background: var(--sel-fill) !important;
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
font-weight: 600 !important;
}

/* Vald flik som hovras — vald-markeringen VINNER över hover. Se motsvarande
   guard för .sidebar .menu-item.active:hover i style.css. */
.header-tab.active:hover {
color: var(--sel-text) !important;
background: var(--sel-fill) !important;
}

/* Inline badge i header-flikar — accent-tonad räknare (superscript) */
.tab-badge {
position: absolute !important;
top: 4px !important;
right: 2px !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary));
border-radius: 6px;
min-width: 16px;
height: 16px;
font-size: 10px;
font-weight: 600;
padding: 0 3px;
line-height: 1;
}

.pane-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 15px !important;
}

.pane-header h3 { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; }

/* =============================================================================
HEM-VYN (Home) - LAYOUT LÅS
============================================================================= */
/* Gör inloggningsrutan smidigare och mindre klumpig */
#login-modal .glass-modal-box {
width: 360px !important; /* Minskad från 500px */
max-width: 90vw !important;
padding: 25px !important;
margin: auto !important;
}

/* 4. Login & Profil-containrar */
#login-form {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
width: 100% !important;
padding: 10px 0 !important;
}

#login-form input {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--border-color) !important;
padding: 12px !important;
border-radius: 8px !important;
color: white !important;
}

#profile-preview-avatar {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
margin: 0 auto !important;
}

/* Quill-editorn (Mailmallar): äger sin höjd */
#quill-editor {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
min-height: 0 !important;
}

/* =============================================================================
ÄRENDEKORT & CLAIM
============================================================================= */

/* =============================================================================
MASTER TICKET CARD DESIGN
============================================================================= */

/* 1. Själva kortet - Basdesign */
.team-ticket-card, 
.archive-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 12px 14px 38px 14px !important;
width: 100% !important;
margin-bottom: 8px !important;
min-height: 85px !important;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12)) !important;
/* Border är grå, men vänsterkanten är dynamisk */
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-left: 4px solid var(--agent-color, #0071e3) !important; 
border-radius: 14px !important;
transition: all 0.18s ease !important;
cursor: pointer !important;
overflow: hidden !important;
}


/* 3. Hover & Aktivt läge */
.team-ticket-card:hover,
.archive-card:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: color-mix(in srgb, var(--agent-color, #fff) 30%, transparent) !important;
}

.team-ticket-card.active-ticket {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: color-mix(in srgb, var(--sel-edge) 54%, rgba(255,255,255,0.2)) !important;
border-left-color: var(--agent-color, #0071e3) !important;
box-shadow: none !important;
}

/* 4. Titel & Topp-höger sektion (Fordon/Notes) */
.ticket-header-row {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
width: 100% !important;
margin-bottom: 4px !important;
}

.ticket-title {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}

.ticket-top-right {
display: flex !important;
align-items: center !important;
gap: 7px !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
min-width: 0 !important;
}

.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) > *,
.archive-card .ticket-top-right:has(.notes-trigger-btn) > * {
margin: 0 !important;
}

.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) > span,
.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) > button,
.archive-card .ticket-top-right:has(.notes-trigger-btn) > span,
.archive-card .ticket-top-right:has(.notes-trigger-btn) > button {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 18px !important;
}

.team-ticket-card .notes-trigger-btn:not(.history-trigger-btn) .notes-count-badge {
display: block !important;
top: -5px;
right: -5px;
}

.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) .card-prio-btn {
position: relative !important;
border-radius: 4px !important;
box-shadow: none !important;
transform: none !important;
}

.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) .card-prio-btn::before {
content: "" !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
box-shadow: 0 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 38%, transparent) !important;
transition: transform .15s, box-shadow .15s !important;
}

.team-ticket-card .ticket-top-right:has(.notes-trigger-btn) .card-prio-btn:hover::before {
transform: scale(1.25) !important;
box-shadow: 0 0 0 2px currentColor, 0 0 14px color-mix(in srgb, currentColor 60%, transparent) !important;
}

.team-ticket-card[data-priority="high"] .ticket-footer-right::before,
.team-ticket-card[data-priority="medium"] .ticket-footer-right::before,
.team-ticket-card[data-priority="low"] .ticket-footer-right::before {
content: "" !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
display: inline-flex !important;
flex: 0 0 10px !important;
background: transparent !important;
box-shadow: 0 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 38%, transparent) !important;
}

.team-ticket-card[data-priority="high"] .ticket-footer-right::before { color: #e74c3c !important; }
.team-ticket-card[data-priority="medium"] .ticket-footer-right::before { color: #f1c40f !important; }
.team-ticket-card[data-priority="low"] .ticket-footer-right::before { color: #2ecc71 !important; }

/* Stilar för ikoner i topp-höger */
.ticket-top-right svg, 
.ticket-top-right .type-icon {
width: 16px !important;
height: 16px !important;
opacity: 0.8 !important;
display: flex !important;
}

/* 5. Preview Text */
.ticket-preview {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.5) !important;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin: 0 !important;
padding-right: 40px !important; /* Plats för orangea knappen mitt på kortet */
}

/* 6. DEN MÖRKA LISTEN I BOTTEN (Admin-looken) */
.ticket-footer-bar {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 32px !important;
background: rgba(0, 0, 0, 0.25) !important; 
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
padding: 0 12px 0 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
overflow: hidden !important;
}

.ticket-time {
font-size: 10px !important;
color: var(--text-secondary) !important;
font-family: monospace !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
line-height: 1.1 !important;
}

.ticket-tag {
font-size: var(--text-badge-min-size) !important;
padding: 2px 7px !important;
border-radius: 4px !important;
background: rgba(255, 255, 255, 0.05) !important;
color: var(--agent-color, #fff);
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;

/* Förhindrar radbrytning och skyddar kortets layout */
white-space: nowrap !important;
display: inline-block !important;
min-width: 0 !important;
flex: 0 1 auto !important;
max-width: 140px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

.ticket-tag.tag-chatt {
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
  text-shadow: none;
}

.ticket-tag.tag-form {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  text-shadow: none;
}

.ticket-tag.owner {
  color: var(--text-primary, #f5f5f7);
}

body.atlas-light-theme .ticket-tag {
  color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 43%, #000) !important;
}

#customer-ticket-list-body .ticket-tag {
max-width: 140px !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}

#customer-ticket-list-body .cust-card-notes-btn {
overflow: visible !important;
min-width: 30px !important;
height: 26px !important;
margin: 0 8px !important;
}

#customer-ticket-list-body .cust-card-notes-btn .notes-count-badge {
display: block !important;
top: -5px;
right: -4px;
background: color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
color: color-mix(in srgb, var(--accent-primary) 90%, white) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent) !important;
}

/* 7. Den orangea MINI-KNAPPEN (Inget hopp) */
.mini-action-btn {
position: absolute !important;
right: 10px !important;
top: 50% !important; /* Centrerad vertikalt */
transform: translateY(-50%) !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #f39c12 !important;
opacity: 0;
transition: opacity 0.2s ease, transform 0.15s ease, filter 0.15s ease !important;
z-index: 10 !important;
}

.mini-action-btn svg {
width: 14px !important;
height: 14px !important;
stroke: currentColor !important;
stroke-width: 2.2px !important;
fill: none !important;
}

/* Inkorgen: cursor under Notes-ikonen */
.claim-mini-btn {
position: absolute !important;
right: 14px !important;
top: 48px !important; /* Alltid exakt under Notes-ikonen */
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: none !important;
border: none !important;
opacity: 0;
transition: opacity 0.2s ease !important;
transform: none !important;
}

.team-ticket-card:hover .claim-mini-btn {
opacity: 1 !important;
}

.claim-mini-btn svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
fill: none !important;
}

/* Visa knappen vid hovring - HELT STILL */
.team-ticket-card:hover .mini-action-btn, 
.archive-card:hover .mini-action-btn {
opacity: 1 !important;
}

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

/* =============================================================================
CARD ACTION FLYOUT — Universell ⋯-meny för enskilda ärendekort
============================================================================= */

/* Menyknapp — ersätter .mini-action-btn och .claim-mini-btn */
.card-menu-btn {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 26px !important;
height: 26px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
background: transparent !important;
border: none !important;
opacity: 0;
transition: opacity 0.2s ease, transform 0.15s ease, filter 0.15s ease !important;
z-index: 10 !important;
cursor: pointer !important;
box-shadow: none !important;
}
.card-menu-btn svg {
width: 13px !important;
height: 13px !important;
fill: rgba(255,255,255,0.45) !important;
transition: fill 0.15s ease !important;
flex-shrink: 0 !important;
}
.team-ticket-card:hover .card-menu-btn,
.archive-card:hover .card-menu-btn {
opacity: 1 !important;
}
.card-menu-btn:hover {
background: transparent !important;
border-color: transparent !important;
transform: translateY(-50%) scale(1.08) !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
}
.card-menu-btn:hover svg {
fill: rgba(255,255,255,0.9) !important;
}

/* Papperskorgs-btn på interna ärenden i Garaget — röd ikon, transparent bakgrund */
.card-menu-btn[style*="color:#ff453a"] {
background: transparent !important;
border: none !important;
}
.card-menu-btn[style*="color:#ff453a"] svg {
fill: currentColor !important;
stroke: none !important;
}
.card-menu-btn[style*="color:#ff453a"]:hover {
background: transparent !important;
filter: drop-shadow(0 0 6px #ff453a) !important;
}
.card-menu-btn[style*="color:#ff453a"]:hover svg {
fill: currentColor !important;
stroke: none !important;
}

/* Flyout-panel (appendad till body med position:fixed via JS) */
/* html body prefix ger specificitet 0-1-2 som slår alla tema-regler (0-1-0) vid !important-konflikt */
html body .card-action-flyout {
z-index: 10100 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
padding: 5px 8px !important;
border-radius: 10px !important;
background: var(--flyout-bg, rgba(18, 18, 24, 0.97)) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid var(--flyout-border, rgba(255, 255, 255, 0.14)) !important;
box-shadow: var(--flyout-shadow, 0 6px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06)) !important;
animation: flyoutIn 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: auto !important;
}
@keyframes flyoutIn {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Ikon-knappar i flyouten — alltid ljus text mot mörk bakgrund (hög specificitet) */
body .card-action-flyout .flyout-action-btn {
color: var(--flyout-icon-color, rgba(220, 220, 228, 0.82)) !important;
width: 30px !important;
height: 30px !important;
border-radius: 7px !important;
border: none !important;
background: transparent !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
flex-shrink: 0 !important;
box-shadow: none !important;
}
.flyout-action-btn:hover {
background: transparent !important;
border-color: transparent !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
transform: scale(1.08) !important;
}
.flyout-action-btn svg {
stroke: currentColor !important;
fill: none !important;
stroke-width: 2px !important;
}
.flyout-action-btn[data-action="delete"] svg {
fill: currentColor !important;
stroke: none !important;
}

/* =============================================================================
CLAIM-HANDEN (INKORGEN)
============================================================================= */

/* Unifierad styling för handen (Inkorgen) */
.team-ticket-card .claim-mini-btn,
.team-ticket-card .claim-action {
position: absolute !important;
top: 26px !important;      /* Ändrat från 48px för att landa precis under Notes */
right: 14px !important;    /* Linjerad vertikalt med Notes-ikonen */
width: 20px !important;
height: 20px !important;
background: none !important;
border: none !important;
box-shadow: none !important;
opacity: 0;
transition: opacity 0.2s ease, transform 0.15s ease, filter 0.15s ease !important;
transform: none !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Visa handen vid hovring på kortet */
.team-ticket-card:hover .claim-mini-btn,
.team-ticket-card:hover .claim-action {
opacity: 1 !important;
}

/* =============================================================================
TEAM VIEW: INTERNAL CHATS
============================================================================= */

/* Kortet i listan (Garaget/Inkorg/Mina Ärenden) */
.team-ticket-card.internal-ticket {
border-left: 4px solid #f1c40f !important;
background: rgba(241, 196, 15, 0.08) !important;
}

/* Taggen (texten) inuti kortet */
.internal-ticket .ticket-tag {
color: #f1c40f !important;
background: rgba(241, 196, 15, 0.15) !important;
border: 1px solid rgba(241, 196, 15, 0.3) !important;
}

/* Ikon-färg och glöd vid hover — ärver från parent color */
.claim-mini-btn svg,
.claim-action svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
fill: none !important;
transition: transform 0.2s ease;
}

.claim-mini-btn:hover svg,
.claim-action:hover svg {
transform: scale(1.1);
filter: drop-shadow(0 0 5px currentColor);
}

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

/* =============================================================================
ARCHIVE & RESTORE BUTTONS (Orange)
============================================================================= */
#archive-restore-btn {
color: #f39c12 !important;
border-color: rgba(243, 156, 18, 0.3) !important;
background: rgba(243, 156, 18, 0.05) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}

#archive-restore-btn:hover {
background: rgba(243, 156, 18, 0.2) !important;
border-color: #f39c12 !important;
color: white !important;
transform: scale(1.05);
}

/* Kortets mini-arkivknapp följer kontorets accentfärg (satt via inline style="color:...") */
.archive-action {
border-color: currentColor !important;
background: transparent !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.archive-action:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: currentColor !important;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
transform: scale(1.05);
}

/* Döda den blåa randen i botten av detaljpanelen */
.templates-view .template-editor-container {
border-bottom: none !important;
}

/* Neutralisera glass-effect-glöd på detaljpanelen — subtle, inte blå */
.template-editor-container.glass-effect {
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
outline: none !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

/* =============================================================================
VYSTRUKTUR & LAYOUT-LÅS
============================================================================= */

/* =============================================================================
SVARSRUTA-EDITORER — min/max-höjder för Quill-instanser
============================================================================= */
#quick-reply-quill-wrap .ql-editor,
#my-ticket-chat-input-wrap .ql-editor,
#reader-quick-reply-wrap .ql-editor,
#cust-reader-quick-reply-wrap .ql-editor {
min-height: 44px !important;
padding: 8px 12px !important;
line-height: 1.4 !important;
}

/* Reader-modalerna har fast max-höjd — begränsa composerns editor så
mallinklistring ger intern scroll istället för att pusha ut footer-knapparna.
Använder min() för att aldrig ta mer än ~22% av fönsterhöjden på låg upplösning. */
#reader-quick-reply-wrap .ql-editor,
#cust-reader-quick-reply-wrap .ql-editor {
max-height: min(160px, 22vh) !important;
overflow-y: auto !important;
}

/* Svarsrutor i Mina ärenden, Inkorg och reader-modaler: stora inklistrade
bilder ska scrolla i editorn och inte få footer/actions att växa bort. */
#quick-reply-quill-wrap .ql-editor,
#my-ticket-chat-input-wrap .ql-editor {
max-height: min(180px, 24vh) !important;
overflow-y: auto !important;
}



/* Tar bort Quills automatiska paragrafluft */
.reply-quill-wrap .ql-editor p {
margin: 0 !important;
padding: 0 !important;
}

/* Säkerställ att containern inte tvingas till 160px */
.reply-quill-wrap .ql-container {
min-height: 44px !important;
}

/* =============================================================================
READER MODALER — BILDGRÄNS
Täcker BÅDA fallen:
1. Bilagor  → .chat-image-container img
2. Quill-inbäddade bilder → #reader-chat-scroll img / #cust-reader-chat-scroll img
Rör ej normalvyerna och rör ej composer-editorn (som ligger utanför scroll-divarna).
============================================================================= */
#atlas-reader-modal .chat-image-container,
#customer-reader-modal .chat-image-container {
max-width: 320px !important;
contain: layout paint !important;
}

#atlas-reader-modal .atlas-image-fallback,
#customer-reader-modal .atlas-image-fallback {
max-width: 320px !important;
}

#atlas-reader-modal .chat-image-container img,
#customer-reader-modal .chat-image-container img,
#atlas-reader-modal #reader-chat-scroll img,
#customer-reader-modal #cust-reader-chat-scroll img {
max-width: 100% !important;
max-height: 260px !important;
width: auto !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
min-height: 40px !important;
background: rgba(255,255,255,0.03) !important;
border-radius: 8px;
backface-visibility: hidden !important;
transform: none;
will-change: auto !important;
}

#atlas-reader-modal .chat-image-container img:hover,
#customer-reader-modal .chat-image-container img:hover {
transform: translateZ(0) !important;
filter: none !important;
}

/* Ljust tema: vita/genomskinliga bilder i mailinnehåll smälter annars in i vit bubbelbakgrund.
   Täcker alla bubbel-vyer: Mina ärenden, Inkorgen, Garaget, reader-modaler. */
.atlas-light-theme .bubble img,
.atlas-light-theme #atlas-reader-modal #reader-chat-scroll img,
.atlas-light-theme #customer-reader-modal #cust-reader-chat-scroll img {
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 8px !important;
}

/* =============================================================================
READER-MODAL PILLS — horisontell scroll, aldrig radbryte
Gäller #atlas-reader-modal och #customer-reader-modal
============================================================================= */
.reader-pills-container {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}

.reader-pills-container::-webkit-scrollbar {
display: none !important;
}

.reader-pills-scroll-wrap {
overflow: hidden;
position: relative;
}

/* =============================================================================
MOBILE-DETAIL-FOOTER-PILLS — desktop flex layout
Prompt B (8b209781) replaced reader-pills-container with mobile-detail-footer-pills,
which only has CSS in mobile.css (≤768px). On desktop this div needs explicit flex.
mobile.css loads after this file and overrides to display:none on mobile where needed.
============================================================================= */
.mobile-detail-footer-pills {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
flex-shrink: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap;
}

.mobile-detail-footer-pills::-webkit-scrollbar {
display: none;
}

/* =============================================================================
READER MODALER — desktop-stabil höjd vid sidbyte/laddningsplaceholder
============================================================================= */
@media (min-width: 769px) {
#atlas-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) > .glass-modal-box,
#customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) > .glass-modal-box {
height: min(82vh, 760px) !important;
min-height: min(82vh, 760px) !important;
max-height: min(88vh, 820px) !important;
}
}

/* =============================================================================
READER FLOATING MODE — desktop-only flyttbar/minimerad reader
============================================================================= */
@media (min-width: 769px) {
#atlas-reader-modal[data-reader-state="floating"],
#atlas-reader-modal[data-reader-state="minimized"],
#customer-reader-modal[data-reader-state="floating"],
#customer-reader-modal[data-reader-state="minimized"] {
z-index: 9990 !important;
}

#atlas-reader-modal[data-reader-state="floating"],
#customer-reader-modal[data-reader-state="floating"] {
pointer-events: none !important;
background: transparent !important;
}

#atlas-reader-modal[data-reader-state="floating"] > .glass-modal-box,
#customer-reader-modal[data-reader-state="floating"] > .glass-modal-box {
position: fixed !important;
pointer-events: auto !important;
margin: 0 !important;
transform: none !important;
box-shadow: 0 18px 60px rgba(0,0,0,0.55) !important;
}

#atlas-reader-modal[data-reader-state="floating"] > .glass-modal-box,
#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box,
#customer-reader-modal[data-reader-state="floating"] > .glass-modal-box,
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box,
#atlas-reader-modal[data-reader-state="floating"] > .glass-modal-box :is(button, a, input, textarea, select, [contenteditable="true"], [role="button"], [data-reader-drag-handle="1"]),
#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box :is(button, a, input, textarea, select, [contenteditable="true"], [role="button"], [data-reader-drag-handle="1"]),
#customer-reader-modal[data-reader-state="floating"] > .glass-modal-box :is(button, a, input, textarea, select, [contenteditable="true"], [role="button"], [data-reader-drag-handle="1"]),
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box :is(button, a, input, textarea, select, [contenteditable="true"], [role="button"], [data-reader-drag-handle="1"]) {
-webkit-app-region: no-drag;
}

#atlas-reader-modal[data-reader-state="floating"] [data-reader-drag-handle="1"],
#customer-reader-modal[data-reader-state="floating"] [data-reader-drag-handle="1"] {
cursor: move;
user-select: none;
}

#atlas-reader-modal[data-reader-state="minimized"],
#customer-reader-modal[data-reader-state="minimized"] {
pointer-events: none !important;
background: transparent !important;
}

#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box,
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box {
position: fixed !important;
pointer-events: auto !important;
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
min-height: 0 !important;
height: 56px !important;
max-height: 56px !important;
overflow: hidden !important;
bottom: 14px !important;
right: 14px !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
transform: none !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
}

/* Två minimerade readers samtidigt: customer offsetas till vänster om admin */
body:has(#atlas-reader-modal[data-reader-state="minimized"]) #customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box {
right: calc(14px + 320px + 12px) !important;
}

#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:not(:first-child),
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:not(:first-child) {
display: none !important;
}

#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:first-child,
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:first-child {
padding: 8px 12px !important;
border-bottom: 0 !important;
}

#atlas-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:first-child > div:nth-child(2),
#customer-reader-modal[data-reader-state="minimized"] > .glass-modal-box > div:first-child > div:nth-child(2) {
display: none !important;
}

#atlas-reader-modal[data-reader-state="minimized"] [data-reader-drag-handle="1"] > div:last-child > *:not([data-reader-pin-btn]):not([data-reader-min-btn]),
#customer-reader-modal[data-reader-state="minimized"] [data-reader-drag-handle="1"] > div:last-child > *:not([data-reader-pin-btn]):not([data-reader-min-btn]) {
display: none !important;
}

.reader-type-badge {
display: none;
align-items: center;
justify-content: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.14);
flex-shrink: 0;
}

#atlas-reader-modal[data-reader-state="minimized"] .reader-type-badge,
#customer-reader-modal[data-reader-state="minimized"] .reader-type-badge {
display: inline-flex !important;
}

.reader-type-admin {
color: #7dd3fc;
background: rgba(56,189,248,0.14);
border-color: rgba(125,211,252,0.34);
}

.reader-type-customer {
color: #86efac;
background: rgba(34,197,94,0.14);
border-color: rgba(134,239,172,0.34);
}

.reader-min-badge {
position: absolute;
top: 6px;
right: 7px;
min-width: 12px;
height: 12px;
padding: 0 3px;
box-sizing: border-box;
border-radius: 999px;
background: #ff9f0a;
border: 2px solid rgba(18,16,24,0.96);
box-shadow: 0 0 0 0 rgba(255,159,10,0.55);
color: #111;
font-size: var(--text-badge-min-size);
font-weight: 900;
line-height: 8px;
display: flex;
align-items: center;
justify-content: center;
animation: readerMinBadgePulse 1.35s ease-out infinite;
}

@keyframes readerMinBadgePulse {
0% { box-shadow: 0 0 0 0 rgba(255,159,10,0.58); }
70% { box-shadow: 0 0 0 7px rgba(255,159,10,0); }
100% { box-shadow: 0 0 0 0 rgba(255,159,10,0); }
}

#atlas-reader-modal[data-reader-state="floating"] [data-reader-pin-btn],
#customer-reader-modal[data-reader-state="floating"] [data-reader-pin-btn] {
color: var(--accent-primary, #d4a000) !important;
border-color: var(--accent-primary, #d4a000) !important;
background: rgba(212,160,0,0.12) !important;
}
}

@media (max-width: 768px) {
[data-reader-pin-btn],
[data-reader-min-btn] {
display: none !important;
}
}