/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 4120-4628, byte-exakt; notification bell/panel. Laddas direkt efter föregående del i index.html. */
/* =============================================================================
Notifikationsklocka — Bell, Badge & Panel
============================================================================= */

/* Bell-knapp: ärver .header-button + position:relative för badge */
.notif-bell-btn {
position: relative !important;
order: 999 !important;
}

/* ═══════════════════════════════════════════
   NOTIFIKATIONSPANEL v2
═══════════════════════════════════════════ */

/* Badge-bubbla */
.notif-badge-bubble {
position: absolute;
top: -12px;
right: -12px;
min-width: 15px;
height: 15px;
padding: 0 4px;
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: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}

/* Panel */
#notif-panel {
position: fixed;
top: 72px;
right: 20px;
width: 400px;
max-height: 540px;
background: var(--notif-panel-bg, rgba(11, 9, 20, 0.97));
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px;
box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.45);
z-index: 8500;
display: flex;
flex-direction: column;
overflow: hidden;
animation: fadeIn 0.16s ease forwards;
will-change: transform;
isolation: isolate;
}

#notif-panel.notif-panel-keep-open {
z-index: 9500;
}

#notif-panel.notif-panel-closing {
animation: atlasNotifPanelOut 130ms ease-in both;
pointer-events: none;
}

@keyframes atlasNotifPanelOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}

/* Electron: notispanelen kan ligga ovanpå .chat-header, som är window-drag-zon.
   Panelens egna kontroller måste alltid vinna klick och hover över draglagret. */
#notif-panel,
#notif-panel * {
-webkit-app-region: no-drag;
}

/* Panel-header */
.notif-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 0;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
padding-bottom: 0;
}

/* Flik-knappar */
.notif-tabs { display: flex; gap: 0; }
.notif-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: rgba(255,255,255,0.4);
font-size: 13px;
font-weight: 600;
padding: 8px 14px 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-tab:hover { color: rgba(255,255,255,0.72); }
/* SEL-standard Fas 2: notisflikarna använde RÅ --accent-primary som text
   (mättes 3,35-4,23:1 i nio av tio teman) och saknade platta helt (ΔL = 0 mot
   ovald flik i sex teman). Nu identiskt recept med huvudflikarna. */
.notif-tab.active {
color: var(--sel-text) !important;
border-bottom-color: var(--sel-edge) !important;
background: var(--sel-fill) !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.notif-tab:not(.active):hover {
background: var(--sel-fill-hover) !important;
}

/* Rensa-knapp */
.notif-clear-btn {
background: none;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 6px;
color: rgba(255,255,255,0.3);
font-size: 11px;
padding: 3px 9px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-bottom: 8px;
}
.notif-clear-btn:hover {
color: rgba(255,255,255,0.65);
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
}

.notif-history-tool-btn {
width: 28px;
height: 28px;
margin: 0 8px 8px auto;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.09);
background: none;
color: rgba(255,255,255,0.36);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* SEL-standard Fas 2: hover och aktiv var hopslagna och gav identiskt utseende
   (ingen skillnad mellan "kan klickas" och "är vald"). Nu: aktiv = full
   vald-markering, hover = den svagare hover-plattan. */
.notif-history-tool-btn.active {
color: var(--sel-text);
border-color: var(--sel-edge);
background: var(--sel-fill);
}

.notif-history-tool-btn:not(.active):hover {
color: var(--sel-text);
border-color: color-mix(in srgb, var(--sel-edge) 42%, transparent);
background: var(--sel-fill-hover);
}

.notif-ticket-history-panel {
position: absolute;
top: 50px;
right: 12px;
width: 300px;
max-height: 360px;
overflow-y: auto;
padding: 8px;
background: rgba(13, 11, 22, 0.98);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 16px 44px rgba(0,0,0,0.55);
z-index: 2;
}
.notif-ticket-history-row {
width: 100%;
border: 0;
background: transparent;
color: var(--text-primary);
display: grid;
grid-template-columns: 28px 1fr 14px;
gap: 9px;
align-items: center;
text-align: left;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
.notif-ticket-history-row:hover { background: rgba(255,255,255,0.055); }
.notif-ticket-history-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-primary, #7c5cbf);
background: color-mix(in srgb, var(--accent-primary, #7c5cbf) 12%, transparent);
}
.notif-ticket-history-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.notif-ticket-history-label {
font-size: 12px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-ticket-history-meta {
font-size: 10px;
color: rgba(255,255,255,0.38);
}

/* Tab-innehåll */
.notif-tab-content {
overflow-y: auto;
flex: 1;
padding: 4px 0 8px;
min-height: 0;
}
.notif-tab-content::-webkit-scrollbar { width: 3px; }
.notif-tab-content::-webkit-scrollbar-track { background: transparent; }
.notif-tab-content::-webkit-scrollbar-thumb { background: transparent; transition: background 0.2s; }
.notif-tab-content:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
max-width: min(320px, 80vw);
width: max-content;
padding: 8px 10px;
border-radius: 8px;
background: rgba(10, 9, 16, 0.98);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
color: rgba(255,255,255,0.82);
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translateY(3px);
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 10020;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translateY(0);
}

/* Datumseparator */
.notif-date-sep {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: rgba(255,255,255,0.2);
padding: 12px 16px 4px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Tom-state */
.notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.22);
font-size: 12px;
padding: 36px 20px;
gap: 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ikon-block (SVG i färgad cirkel) */
.notif-icon-block {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid;
margin-top: 1px;
}

/* Notis-rad */
.notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px 10px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.12s;
position: relative;
overflow: hidden;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.035); }

/* Oläst: accent-rand vänster */
.notif-unread {
border-left: 2px solid var(--accent-primary, #7c5cbf);
padding-left: 14px;
background: rgba(255,255,255,0.018);
}
.notif-unread .notif-item-text { color: rgba(255,255,255,0.9); }

/* Klickbar: cursor-pointer satt via inline-style i JS */
.notif-history-clickable:hover .notif-item-text { color: rgba(255,255,255,0.85); }

/* Text-block */
.notif-item-body {
flex: 1;
min-width: 0;
}
.notif-item-text {
display: block;
font-size: 12.5px;
color: rgba(255,255,255,0.58);
line-height: 1.48;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
word-break: break-word;
}

/* Tid + pil-rad */
.notif-item-meta {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
}
.notif-item-time {
font-size: 10.5px;
color: rgba(255,255,255,0.24);
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-open-arrow {
color: rgba(255,255,255,0.18);
flex-shrink: 0;
transition: color 0.15s;
}
.notif-history-clickable:hover .notif-open-arrow { color: rgba(255,255,255,0.5); }

/* Dismiss-knapp — visas vid hover på raden */
.notif-item-dismiss {
opacity: 0;
width: 22px;
height: 22px;
border-radius: 5px;
border: none;
background: none;
color: rgba(255,255,255,0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.15s, background 0.15s, color 0.15s;
flex-shrink: 0;
align-self: flex-start;
margin-top: 6px;
padding: 0;
}
.notif-item:hover .notif-item-dismiss { opacity: 1; }
.notif-item-dismiss:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.75);
}

/* Premium admin controls: subtle semantic states and icon-only destructive buttons. */
#view-admin .status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
box-shadow: none !important;
}
#view-admin .status-pill.is-active {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-success, #22c55e) 32%, transparent) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 82%, var(--text-primary, #fff)) !important;
}
#view-admin .status-pill.is-inactive {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-danger, #ef4444) 28%, transparent) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 78%, var(--text-primary, #fff)) !important;
opacity: 1 !important;
}
body.atlas-light-theme #view-admin .status-pill.is-active {
color: color-mix(in srgb, var(--status-success, #22c55e) 43%, #000) !important;
}
body.atlas-light-theme #view-admin .status-pill.is-inactive {
color: color-mix(in srgb, var(--status-danger, #ef4444) 43%, #000) !important;
}
#view-admin .status-pill.is-warning {
background: color-mix(in srgb, var(--status-warning, #ff9f0a) 12%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--status-warning, #ff9f0a) 34%, transparent) !important;
color: color-mix(in srgb, var(--status-warning, #ff9f0a) 78%, var(--text-primary, #fff)) !important;
}
#view-admin .admin-effective-reason {
min-width: 180px;
flex: 1 1 240px;
color: var(--text-secondary);
font-size: var(--text-micro-size);
line-height: 1.45;
}
#view-admin .admin-lock-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}
#view-admin .admin-lock-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
#view-admin .widget-install-actions .admin-lock-btn svg {
width: 16px;
height: 16px;
}
#view-admin button[id^="kb-delete-"] {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 72%, var(--text-secondary, #fff)) !important;
box-shadow: none !important;
font-size: 0 !important;
}
#view-admin button[id^="kb-delete-"] svg {
width: 15px;
height: 15px;
fill: currentColor !important;
stroke: none !important;
}
#view-admin button[id^="kb-delete-"]:hover {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
color: var(--status-danger, #ef4444) !important;
}

/* Chatt/mail-typspill i notis-text */
.notif-type-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-badge-min-size);
font-weight: 700;
border-radius: 4px;
padding: 1px 5px;
letter-spacing: 0.4px;
vertical-align: middle;
margin-left: 5px;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.notif-type-chat {
background: rgba(90, 200, 250, 0.12);
color: #5ac8fa;
border: 1px solid rgba(90, 200, 250, 0.22);
}
.notif-type-mail {
background: rgba(77, 184, 255, 0.12);
color: #4db8ff;
border: 1px solid rgba(77, 184, 255, 0.22);
}
/* Internt ärende — gul signalfärg (samma som ärendekorten) */
.notif-type-internal {
background: rgba(255, 214, 10, 0.12);
color: #ffd60a;
border: 1px solid rgba(255, 214, 10, 0.25);
}
/* Typspillet sitter nu i meta-raden (tid · typ · pil) — gap sköter avståndet */
.notif-item-meta .notif-type-pill { margin-left: 1px; }