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

/* =============================================================================
STEG 1: MASTER MODAL STYLING (SYNCHRONIZED)
============================================================================= */
.atlas-help-overlay .help-modal-box,
.glass-modal-box {
position: relative !important;
width: 500px !important;
max-width: 95vw !important;
max-height: 80vh !important;
background: var(--bg-frosty-content, rgba(13, 16, 28, 0.92)) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !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;
}

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


#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;
}

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

/* =============================================================================
ADMIN KORT OCH KOMPONENTER (STÄDAD)
============================================================================= */
.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 var(--agent-color, var(--border-color)) !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;
}

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

#view-admin .admin-mini-card.active {
border-left-color: var(--agent-color, #0071e3) !important;
background: color-mix(in srgb, var(--agent-color, #0071e3) 8%, transparent) !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å kontorskortet — accent-färgad pill,
   matchar .nav-badge / #badge-inbox-stilen i style.css. Visas bara
   när kontoret har minst ett aktivt ärende (klienten dölje 0). */
#view-admin .office-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;
}

/* 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;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
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: rgba(255,255,255,0.06);
border-left-color: var(--atp-color, #0071e3);
transform: translateX(2px);
}
#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: rgba(255,255,255,0.35);
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: 9px;
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: 95px;
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-note-btn {
background: transparent;
border: none;
cursor: pointer;
opacity: 0.65;
padding: 6px;
border-radius: 6px;
flex-shrink: 0;
transition: opacity 0.2s;
line-height: 0;
overflow: visible;
min-width: 30px;
height: 26px;
margin-right: 4px !important;
margin-left: 4px !important;
}
#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;
}

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

#view-admin .admin-sysconfig-nav-item.active {
background: rgba(0, 113, 227, 0.1);
border-color: var(--accent-primary);
color: var(--accent-primary);
}

/* ── 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%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: var(--accent-primary);
font-size: 13px;
font-weight: 600;
padding: 4px 0;
margin-bottom: 8px;
outline: none;
}

#view-admin .admin-kb-title-field:not([readonly]) {
border-bottom-color: var(--accent-primary);
background: rgba(0, 113, 227, 0.05);
padding: 4px 6px;
border-radius: 4px;
}

#view-admin .admin-kb-answer-field {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.5;
padding: 8px;
resize: vertical;
min-height: 60px;
outline: none;
font-family: inherit;
}

#view-admin .admin-kb-answer-field:not([readonly]) {
border-color: var(--accent-primary);
background: rgba(0, 113, 227, 0.05);
color: var(--text-primary);
}

#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: rgba(0, 113, 227, 0.07);
border-radius: 10px;
color: var(--accent-primary);
opacity: 0.8;
border: 1px solid rgba(0, 113, 227, 0.22);
}

.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: rgba(255, 255, 255, 0.65) !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;
}

.header-tab:hover {
color: rgba(255, 255, 255, 0.85) !important;
}

.header-tab.active {
color: var(--accent-primary) !important;
border-bottom-color: var(--accent-primary) !important;
background: transparent !important;
font-weight: 600 !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%, white);
border-radius: 6px;
min-width: 14px;
height: 14px;
font-size: 9px;
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 {
/* Subtil bakgrundsgradient i kortets accentfärg */
background: linear-gradient(90deg, color-mix(in srgb, var(--agent-color, #0071e3) 18%, transparent), transparent) !important;
border-color: color-mix(in srgb, var(--agent-color, #0071e3) 60%, 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;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}

.ticket-top-right {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-shrink: 0 !important;
margin-left: 10px !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;
padding: 0 12px 0 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ticket-time {
font-size: 10px !important;
color: rgba(255, 255, 255, 0.35) !important;
font-family: monospace !important;
}

.ticket-tag {
font-size: 9px !important;
padding: 2px 7px !important;
border-radius: 4px !important;
background: rgba(255, 255, 255, 0.05) !important;
color: var(--agent-color, #fff) !important;
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;
max-width: 85px !important;
overflow: hidden !important;
text-overflow: clip !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;
}

/* 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 6px currentColor) !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 6px currentColor) !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: none !important;
stroke: #ff453a !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: none !important;
stroke: #ff6961 !important;
}

/* Flyout-panel (appendad till body med position:fixed via JS) */
.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: color-mix(in srgb, var(--bg-dark-tertiary) 85%, var(--bg-dark-secondary)) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid color-mix(in srgb, var(--bg-dark-tertiary) 60%, rgba(255,255,255,0.15)) !important;
box-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 — samma design som .bulk-icon-btn */
.flyout-action-btn {
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 6px currentColor) !important;
transform: scale(1.08) !important;
}
.flyout-action-btn svg {
stroke: currentColor !important;
fill: none !important;
stroke-width: 2px !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 6px currentColor) !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 === *** */

/* === FIX FÖR SMALA SVARSRUTOR (Tvingar specifik höjd) === */
#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;
}

#quick-reply-quill-wrap .ql-editor img,
#my-ticket-chat-input-wrap .ql-editor img,
#reader-quick-reply-wrap .ql-editor img,
#cust-reader-quick-reply-wrap .ql-editor img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 170px !important;
    object-fit: contain !important;
    margin: 0 auto 6px !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
Bilder i chattbubblan begränsas till max 320px bred / 260px hög.
Rör ej normalvyernas .chat-image-container.
============================================================================= */
#atlas-reader-modal .chat-image-container,
#customer-reader-modal .chat-image-container {
    max-width: 320px !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;
}

#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;
}