/* DELAD UR style.css (KAN-388 CSS-3): rad 1867-2117, byte-exakt; Anteckningar och prioritet. Laddas direkt efter föregående del i index.html. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.card-prio-btn {
--prio-color: rgba(255,255,255,0.15);
width: 10px;
height: 10px;
min-width: 10px;
border-radius: 50% !important;
background: transparent !important;
border: none !important;
box-shadow: 0 0 0 2px var(--prio-color), 0 0 8px color-mix(in srgb, var(--prio-color) 38%, transparent);
padding: 0 !important;
cursor: pointer;
flex-shrink: 0;
transition: transform .15s, box-shadow .15s;
outline: none !important;
}
.card-prio-btn:hover {
transform: scale(1.3);
box-shadow: 0 0 0 2px var(--prio-color, rgba(255,255,255,0.15)), 0 0 14px color-mix(in srgb, var(--prio-color, rgba(255,255,255,0.15)) 60%, transparent);
}
/* Hög specificitet (0,1,1) slår temans box-shadow:none !important (0,1,0) */
button.card-prio-btn {
box-shadow: 0 0 0 2px var(--prio-color, rgba(255,255,255,0.15)), 0 0 8px color-mix(in srgb, var(--prio-color, rgba(255,255,255,0.15)) 38%, transparent) !important;
}
button.card-prio-btn:hover {
box-shadow: 0 0 0 2px var(--prio-color, rgba(255,255,255,0.15)), 0 0 14px color-mix(in srgb, var(--prio-color, rgba(255,255,255,0.15)) 60%, transparent) !important;
transform: scale(1.3);
}
/* (0,2,2) slår temans .detail-header-top .header-button svg (0,2,1) och
   (0,1,2) slår temans .notes-trigger-btn svg / .btn-glass-icon svg (0,1,1) */
html .priority-trigger-btn.header-button svg,
html .priority-trigger-btn svg {
stroke: var(--prio-color, rgba(255,255,255,0.2)) !important;
fill: none !important;
}

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