/**
 * ActivityPilot for WP — admin styles.
 * Modern, dashboard-grade UI with a calm neutral palette.
 */

:root {
	--apwpm-bg: #f5f7fb;
	--apwpm-surface: #ffffff;
	--apwpm-surface-2: #fafbff;
	--apwpm-border: #e6e8ef;
	--apwpm-border-strong: #d4d8e3;
	--apwpm-text: #1f2433;
	--apwpm-text-muted: #6b7384;
	--apwpm-text-soft: #9099ad;
	--apwpm-primary: #4f46e5;
	--apwpm-primary-hover: #4338ca;
	--apwpm-primary-soft: #eef2ff;
	--apwpm-success: #16a34a;
	--apwpm-success-soft: #ecfdf5;
	--apwpm-warning: #d97706;
	--apwpm-warning-soft: #fffbeb;
	--apwpm-error: #dc2626;
	--apwpm-error-soft: #fef2f2;
	--apwpm-critical: #7f1d1d;
	--apwpm-critical-soft: #fee2e2;
	--apwpm-info: #2563eb;
	--apwpm-info-soft: #eff6ff;
	--apwpm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
	--apwpm-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
	--apwpm-radius: 12px;
	--apwpm-radius-sm: 8px;
}

#wpcontent { padding-left: 0 !important; }

.apwpm-wrap {
	margin: 0;
	padding: 24px 28px 60px;
	background: var(--apwpm-bg);
	min-height: calc(100vh - 32px);
	color: var(--apwpm-text);
	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.apwpm-wrap *, .apwpm-wrap *::before, .apwpm-wrap *::after { box-sizing: border-box; }

/* Header */
.apwpm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.apwpm-header h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.apwpm-header p { margin: 4px 0 0; color: var(--apwpm-text-muted); font-size: 13px; }
.apwpm-brand { display: flex; align-items: center; gap: 14px; }
.apwpm-logo {
	width: 40px; height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, #4f46e5, #7c3aed);
	display: grid; place-items: center;
	color: #fff;
	box-shadow: var(--apwpm-shadow);
}

/* Tabs */
.apwpm-tabs {
	display: inline-flex;
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border);
	border-radius: 999px;
	padding: 4px;
	box-shadow: var(--apwpm-shadow-sm);
}
.apwpm-tab {
	padding: 8px 18px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--apwpm-text-muted);
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.apwpm-tab:hover { color: var(--apwpm-text); }
.apwpm-tab.is-active {
	background: var(--apwpm-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(79, 70, 229, .35);
}

/* Card / Surface */
.apwpm-card {
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border);
	border-radius: var(--apwpm-radius);
	box-shadow: var(--apwpm-shadow-sm);
	padding: 20px;
}

/* Stat grid */
.apwpm-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}
@media (max-width: 980px) { .apwpm-stats { grid-template-columns: repeat(2, 1fr); } }
.apwpm-stat {
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border);
	border-radius: var(--apwpm-radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	overflow: hidden;
}
.apwpm-stat::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--apwpm-primary), #7c3aed);
	opacity: .85;
}
.apwpm-stat__label { font-size: 12px; color: var(--apwpm-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.apwpm-stat__value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.apwpm-stat__trend { font-size: 12px; color: var(--apwpm-text-soft); }
.apwpm-stat--danger::after { background: linear-gradient(90deg, #ef4444, #f97316); }
.apwpm-stat--success::after { background: linear-gradient(90deg, #10b981, #22d3ee); }
.apwpm-stat--warning::after { background: linear-gradient(90deg, #f59e0b, #ef4444); }

/* Grid layout */
.apwpm-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
}
@media (max-width: 1100px) { .apwpm-grid { grid-template-columns: 1fr; } }

/* Chart */
.apwpm-chart {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 180px;
	padding: 10px 0 0;
}
.apwpm-chart__bar {
	flex: 1 1 0;
	background: linear-gradient(180deg, var(--apwpm-primary), #818cf8);
	border-radius: 6px 6px 0 0;
	min-height: 4px;
	position: relative;
	transition: opacity .15s ease;
}
.apwpm-chart__bar:hover { opacity: .85; }
.apwpm-chart__bar--err {
	background: linear-gradient(180deg, #ef4444, #fb7185);
}
.apwpm-chart__tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -6px);
	background: #1f2433;
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.apwpm-chart__bar:hover .apwpm-chart__tip { opacity: 1; }
.apwpm-chart__axis { display: flex; gap: 6px; margin-top: 6px; color: var(--apwpm-text-soft); font-size: 11px; }
.apwpm-chart__axis span { flex: 1; text-align: center; }

/* Top actions list */
.apwpm-toplist { list-style: none; margin: 0; padding: 0; }
.apwpm-toplist li {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed var(--apwpm-border);
	font-size: 13px;
}
.apwpm-toplist li:last-child { border-bottom: 0; }
.apwpm-toplist__name { color: var(--apwpm-text); font-weight: 500; }
.apwpm-toplist__count {
	background: var(--apwpm-primary-soft);
	color: var(--apwpm-primary);
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

/* Filters bar */
.apwpm-filters {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr) auto auto;
	gap: 10px;
	margin-bottom: 16px;
}
@media (max-width: 1100px) { .apwpm-filters { grid-template-columns: 1fr 1fr; } }

.apwpm-input, .apwpm-select {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--apwpm-border-strong);
	border-radius: var(--apwpm-radius-sm);
	background: var(--apwpm-surface);
	color: var(--apwpm-text);
	font-size: 13px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.apwpm-input:focus, .apwpm-select:focus {
	outline: none;
	border-color: var(--apwpm-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

.apwpm-btn {
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--apwpm-border-strong);
	background: var(--apwpm-surface);
	color: var(--apwpm-text);
	border-radius: var(--apwpm-radius-sm);
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.apwpm-btn:hover { background: var(--apwpm-surface-2); border-color: var(--apwpm-primary); color: var(--apwpm-primary); }
.apwpm-btn--primary { background: var(--apwpm-primary); border-color: var(--apwpm-primary); color: #fff; }
.apwpm-btn--primary:hover { background: var(--apwpm-primary-hover); border-color: var(--apwpm-primary-hover); color: #fff; }
.apwpm-btn--danger { color: var(--apwpm-error); border-color: var(--apwpm-error); }
.apwpm-btn--danger:hover { background: var(--apwpm-error); color: #fff; }
.apwpm-btn--ghost { border-color: transparent; background: transparent; }

.apwpm-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 16px;
}
.apwpm-toolbar__actions { display: flex; gap: 8px; }

/* Timeline */
.apwpm-timeline { position: relative; padding: 4px 0 0 24px; }
.apwpm-timeline::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 16px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--apwpm-border-strong), transparent);
}

.apwpm-event {
	position: relative;
	padding: 14px 16px;
	margin-bottom: 12px;
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border);
	border-radius: var(--apwpm-radius);
	box-shadow: var(--apwpm-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.apwpm-event:hover { transform: translateY(-1px); box-shadow: var(--apwpm-shadow); }
.apwpm-event__dot {
	position: absolute;
	left: -19px;
	top: 18px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--apwpm-primary);
	box-shadow: 0 0 0 4px var(--apwpm-bg);
}
.apwpm-event--success .apwpm-event__dot { background: var(--apwpm-success); }
.apwpm-event--warning .apwpm-event__dot { background: var(--apwpm-warning); }
.apwpm-event--error .apwpm-event__dot { background: var(--apwpm-error); }
.apwpm-event--critical .apwpm-event__dot { background: var(--apwpm-critical); }
.apwpm-event--info .apwpm-event__dot { background: var(--apwpm-info); }

.apwpm-event__top {
	display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
}
.apwpm-event__user { display: flex; align-items: center; gap: 10px; }
.apwpm-event__avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--apwpm-primary-soft);
	color: var(--apwpm-primary);
	display: grid; place-items: center;
	font-weight: 600;
	font-size: 12px;
	overflow: hidden;
}
.apwpm-event__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apwpm-event__login { font-weight: 600; }
.apwpm-event__role { color: var(--apwpm-text-muted); font-size: 12px; }
.apwpm-event__time { color: var(--apwpm-text-soft); font-size: 12px; white-space: nowrap; }
.apwpm-event__desc { margin: 8px 0 0; color: var(--apwpm-text); }
.apwpm-event__meta {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center;
}

.apwpm-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 999px;
	background: var(--apwpm-surface-2);
	color: var(--apwpm-text-muted);
	border: 1px solid var(--apwpm-border);
}
.apwpm-tag--action { background: var(--apwpm-primary-soft); color: var(--apwpm-primary); border-color: transparent; }
.apwpm-tag--object { background: #f1f5f9; color: #475569; border-color: transparent; }
.apwpm-tag--info { background: var(--apwpm-info-soft); color: var(--apwpm-info); border-color: transparent; }
.apwpm-tag--success { background: var(--apwpm-success-soft); color: var(--apwpm-success); border-color: transparent; }
.apwpm-tag--warning { background: var(--apwpm-warning-soft); color: var(--apwpm-warning); border-color: transparent; }
.apwpm-tag--error { background: var(--apwpm-error-soft); color: var(--apwpm-error); border-color: transparent; }
.apwpm-tag--critical { background: var(--apwpm-critical-soft); color: var(--apwpm-critical); border-color: transparent; }

.apwpm-event__context {
	margin-top: 10px;
	background: var(--apwpm-surface-2);
	border: 1px dashed var(--apwpm-border-strong);
	border-radius: var(--apwpm-radius-sm);
	padding: 10px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--apwpm-text-muted);
	max-height: 200px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Pagination */
.apwpm-pagination {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 0 0;
}
.apwpm-pagination__info { color: var(--apwpm-text-muted); font-size: 13px; }
.apwpm-pagination__controls { display: flex; gap: 8px; }

/* Empty / loading */
.apwpm-empty, .apwpm-loading {
	text-align: center;
	padding: 60px 20px;
	color: var(--apwpm-text-muted);
	font-size: 14px;
}
.apwpm-empty__icon { font-size: 30px; margin-bottom: 8px; }

/* Settings */
.apwpm-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 980px) { .apwpm-settings { grid-template-columns: 1fr; } }

.apwpm-field { margin-bottom: 16px; }
.apwpm-field__label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.apwpm-field__help { display: block; margin-top: 6px; color: var(--apwpm-text-muted); font-size: 12px; }
.apwpm-section-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }

.apwpm-switch {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px;
	border: 1px solid var(--apwpm-border);
	background: var(--apwpm-surface-2);
	border-radius: var(--apwpm-radius-sm);
	margin-bottom: 10px;
}
.apwpm-switch__label { font-weight: 500; font-size: 13px; }
.apwpm-switch__toggle {
	width: 40px; height: 22px;
	background: var(--apwpm-border-strong);
	border-radius: 999px;
	position: relative;
	cursor: pointer;
	transition: background .15s ease;
	border: none;
	padding: 0;
}
.apwpm-switch__toggle::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 16px; height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.apwpm-switch__toggle.is-on { background: var(--apwpm-primary); }
.apwpm-switch__toggle.is-on::after { transform: translateX(18px); }

/* Toast */
.apwpm-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	background: #1f2433;
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--apwpm-radius-sm);
	box-shadow: var(--apwpm-shadow);
	z-index: 9999;
	animation: apwpm-fade .25s ease;
}
.apwpm-toast--success { background: var(--apwpm-success); }
.apwpm-toast--error { background: var(--apwpm-error); }

@keyframes apwpm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Anomaly highlight */
.apwpm-event--anomaly {
	border-color: var(--apwpm-error);
	box-shadow: 0 0 0 3px var(--apwpm-critical-soft), var(--apwpm-shadow-sm);
}
.apwpm-event--anomaly::before {
	content: 'ANOMALY';
	position: absolute;
	right: 12px;
	top: -10px;
	background: var(--apwpm-critical);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 3px 8px;
	border-radius: 999px;
}

/* Insights banner */
.apwpm-insights-banner {
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
	border-color: #fdba74;
}
.apwpm-insights-banner .apwpm-section-title { color: #9a3412; }

/* Network per-site rows */
.apwpm-network-row {
	padding: 14px 0;
	border-bottom: 1px solid var(--apwpm-border);
}
.apwpm-network-row:last-child { border-bottom: 0; }
.apwpm-network-row__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 6px;
}
.apwpm-network-row__name { font-weight: 600; }
.apwpm-network-row__total { color: var(--apwpm-text-muted); font-size: 13px; font-weight: 600; }
.apwpm-network-row__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--apwpm-bg);
	overflow: hidden;
}
.apwpm-network-row__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--apwpm-primary), #7c3aed);
	border-radius: 999px;
	transition: width .4s ease;
}
.apwpm-network-row__meta {
	margin-top: 6px;
	color: var(--apwpm-text-soft);
	font-size: 12px;
}

/* Spinner */
.apwpm-spinner {
	width: 18px; height: 18px;
	border: 2px solid var(--apwpm-border-strong);
	border-top-color: var(--apwpm-primary);
	border-radius: 50%;
	animation: apwpm-spin .8s linear infinite;
	display: inline-block;
	vertical-align: middle;
}
@keyframes apwpm-spin { to { transform: rotate(360deg); } }

/* ============================================================ */
/*  v1.3 additions                                              */
/* ============================================================ */

/* Date preset chips & saved views */
.apwpm-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.apwpm-chip {
	display: inline-flex; align-items: center;
	height: 26px; padding: 0 10px;
	border: 1px solid var(--apwpm-border-strong);
	background: var(--apwpm-surface);
	color: var(--apwpm-text);
	border-radius: 999px;
	font-size: 12px; font-weight: 500;
	cursor: pointer;
}
.apwpm-chip:hover { background: var(--apwpm-primary-soft); border-color: var(--apwpm-primary); color: var(--apwpm-primary); }
.apwpm-chip.is-active { background: var(--apwpm-primary); border-color: var(--apwpm-primary); color: #fff; }
.apwpm-chip--x { padding: 0 6px; color: #ef4444; }
.apwpm-chip--add { border-style: dashed; }

.apwpm-views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; }
.apwpm-view-pill { display: inline-flex; }
.apwpm-view-pill .apwpm-chip + .apwpm-chip { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.apwpm-view-pill .apwpm-chip:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Bulk action bar */
.apwpm-bulkbar {
	position: sticky; top: 8px; z-index: 5;
	display: flex; gap: 6px; align-items: center;
	background: var(--apwpm-primary);
	color: #fff;
	border-radius: var(--apwpm-radius-sm);
	padding: 6px 10px;
	margin: 8px 0;
	box-shadow: var(--apwpm-shadow);
}
.apwpm-bulkbar .apwpm-btn { background: rgba(255,255,255,0.15); border-color: transparent; color: #fff; }
.apwpm-bulkbar .apwpm-btn:hover { background: rgba(255,255,255,0.25); }
.apwpm-bulkbar .apwpm-btn--danger { background: rgba(239, 68, 68, 0.95); }

/* Event checkbox */
.apwpm-event { position: relative; }
.apwpm-event__check {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 16px; height: 16px;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
	transition: opacity .15s ease;
}
.apwpm-event:hover .apwpm-event__check,
.apwpm-event__check:checked { opacity: 1; }
.apwpm-event.is-selected { outline: 2px solid var(--apwpm-primary); outline-offset: -2px; }
.apwpm-event--acknowledged { opacity: 0.78; }
.apwpm-event--resolved { opacity: 0.55; }
.apwpm-event__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.apwpm-btn--xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 6px; }

/* Status & country tags */
.apwpm-tag--status-acknowledged { background: #fef3c7; color: #92400e; }
.apwpm-tag--status-resolved { background: #d1fae5; color: #065f46; }
.apwpm-tag--status-snoozed { background: #e0e7ff; color: #3730a3; }

/* Comments */
.apwpm-comments {
	border-top: 1px dashed var(--apwpm-border);
	margin-top: 12px;
	padding-top: 10px;
}
.apwpm-comment {
	background: var(--apwpm-surface-2);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 6px;
	font-size: 12.5px;
}
.apwpm-comment__login { font-weight: 600; color: var(--apwpm-primary); }
.apwpm-comment__time { color: var(--apwpm-text-soft); font-size: 11px; }
.apwpm-comment p { margin: 4px 0 0; white-space: pre-wrap; }
/* Comment count badge on the Comments button */
.apwpm-comments-btn { position: relative; }
.apwpm-comments-btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 4px;
	padding: 0 6px;
	background: var(--apwpm-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
}
.apwpm-comments-btn.has-comments {
	color: var(--apwpm-primary);
	border-color: rgba(99, 102, 241, 0.25);
	background: var(--apwpm-primary-soft);
}
body.apwpm-dark .apwpm-comments-btn.has-comments {
	color: #c7d2fe;
	background: rgba(99,102,241,0.18);
	border-color: rgba(99,102,241,0.35);
}
body.apwpm-dark .apwpm-comments-btn__count { background: var(--apwpm-primary); color: #fff; }

.apwpm-comment__form { display: flex; gap: 6px; margin-top: 6px; align-items: flex-start; }
.apwpm-comment__form textarea { min-height: 50px; resize: vertical; flex: 1; }
.apwpm-comment__input-wrap { position: relative; flex: 1; }

/* @mention pill in rendered comments */
.apwpm-mention {
	display: inline-block;
	padding: 1px 6px;
	margin: 0 1px;
	font-weight: 600;
	color: var(--apwpm-primary);
	background: var(--apwpm-primary-soft);
	border-radius: 4px;
	font-size: 12.5px;
}
body.apwpm-dark .apwpm-mention { color: #c7d2fe; background: rgba(99,102,241,0.22); }

/* Autocomplete dropdown */
.apwpm-mention-dropdown {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 220px;
	overflow-y: auto;
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border-strong);
	border-radius: var(--apwpm-radius-sm);
	box-shadow: 0 8px 24px rgba(15,23,42,.10);
	z-index: 50;
	padding: 4px;
}
.apwpm-mention-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border: none;
	background: transparent;
	color: var(--apwpm-text);
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
	font-size: 13px;
}
.apwpm-mention-item:hover,
.apwpm-mention-item.is-active { background: var(--apwpm-primary-soft); color: var(--apwpm-primary); }
.apwpm-mention-item__avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.apwpm-mention-item__login { font-weight: 600; }
.apwpm-mention-item__name  { color: var(--apwpm-text-muted); font-size: 12px; margin-left: auto; }
body.apwpm-dark .apwpm-mention-dropdown { background: var(--apwpm-surface); border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-mention-item { color: var(--apwpm-text); }
body.apwpm-dark .apwpm-mention-item:hover,
body.apwpm-dark .apwpm-mention-item.is-active { background: rgba(99,102,241,0.22); color: #c7d2fe; }
body.apwpm-dark .apwpm-mention-item__name { color: var(--apwpm-text-muted); }

/* Heatmap */
.apwpm-heatmap { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; }
.apwpm-heatmapwpm__row { display: grid; grid-template-columns: 36px repeat(24, 1fr); gap: 2px; align-items: center; }
.apwpm-heatmapwpm__day { font-size: 11px; color: var(--apwpm-text-muted); font-weight: 600; }
.apwpm-heatmapwpm__cell { aspect-ratio: 1 / 1; min-height: 14px; border-radius: 3px; background: rgba(35,82,196,0.08); }

/* Dark mode toggle */
.apwpm-dark-toggle { font-size: 16px; line-height: 1; }

/* Mention badge in header */
.apwpm-mention-badge {
	margin: 0 4px;
	height: 30px;
	min-width: 34px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--apwpm-error);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(220,38,38,.30);
	animation: apwpm-pulse 2s infinite;
}
.apwpm-mention-badge:hover { background: #b91c1c; }
.apwpm-mention-badge__count {
	background: rgba(255,255,255,0.25);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 11px;
}
body.apwpm-dark .apwpm-mention-badge { box-shadow: 0 2px 8px rgba(220,38,38,.40); }

/* Card head row */
.apwpm-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Report iframe */
.apwpm-report-frame { width: 100%; height: 720px; border: 1px solid var(--apwpm-border); border-radius: var(--apwpm-radius-sm); background: #fff; }

/* Pinned event (deep link from email/webhook) */
.apwpm-pinned {
	border: 2px solid var(--apwpm-primary) !important;
	box-shadow: 0 8px 24px rgba(79,70,229,.15), var(--apwpm-shadow);
	margin-bottom: 18px;
	position: relative;
}
.apwpm-pinned::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: var(--apwpm-radius);
	padding: 2px;
	background: linear-gradient(135deg, var(--apwpm-primary), #7c3aed);
	pointer-events: none;
	opacity: .25;
	z-index: 0;
}
.apwpm-pinned > * { position: relative; z-index: 1; }
.apwpm-pinned__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.apwpm-pinned__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--apwpm-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.apwpm-pinned__id { color: var(--apwpm-text-muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body.apwpm-dark .apwpm-pinned { box-shadow: 0 8px 24px rgba(99,102,241,.25); }

/* Sticky save bar (Settings) */
.apwpm-settings__spacer { height: 80px; }

.apwpm-savebar {
	position: sticky;
	bottom: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding: 12px 18px;
	background: var(--apwpm-surface);
	border: 1px solid var(--apwpm-border-strong);
	border-radius: var(--apwpm-radius);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
	backdrop-filter: saturate(180%) blur(6px);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.apwpm-savebar.is-dirty {
	border-color: var(--apwpm-primary);
	box-shadow: 0 8px 24px rgba(79, 70, 229, 0.20), 0 2px 6px rgba(79, 70, 229, 0.12);
}
.apwpm-savebar__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--apwpm-text);
}
.apwpm-savebar__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--apwpm-primary);
	box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
	animation: apwpm-pulse 1.6s infinite;
}
@keyframes apwpm-pulse {
	0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.apwpm-savebar__actions { display: flex; gap: 8px; align-items: center; }
.apwpm-btn--save {
	min-width: 140px;
	height: 38px;
	font-weight: 600;
}
body.apwpm-dark .apwpm-savebar {
	background: rgba( 30, 41, 59, 0.92 );
	border-color: var(--apwpm-border);
}
body.apwpm-dark .apwpm-savebar.is-dirty { border-color: var(--apwpm-primary); }

/* Mobile — stack the bar */
@media (max-width: 640px) {
	.apwpm-savebar { flex-direction: column; align-items: stretch; padding: 10px 12px; }
	.apwpm-savebar__actions { justify-content: flex-end; flex-wrap: wrap; }
	.apwpm-btn--save { min-width: 0; flex: 1; }
}

/* Input rows */
.apwpm-input-row { display: flex; gap: 6px; }
.apwpm-input-row .apwpm-input { flex: 1; }
.apwpm-field--row { display: flex; gap: 12px; align-items: center; }
.apwpm-field--row .apwpm-field__label { flex: 0 0 200px; margin: 0; }
.apwpm-field--row .apwpm-input { flex: 1; max-width: 200px; }
.apwpm-link { background: none; border: none; color: var(--apwpm-primary); cursor: pointer; padding: 0; text-decoration: underline; }
.apwpm-muted { color: var(--apwpm-text-muted); font-size: 12px; }

/* ============================================================ */
/*  Dark mode                                                   */
/* ============================================================ */

body.apwpm-dark {
	--apwpm-bg: #0f172a;
	--apwpm-surface: #1e293b;
	--apwpm-surface-2: #182032;
	--apwpm-border: #334155;
	--apwpm-border-strong: #475569;
	--apwpm-text: #e2e8f0;
	--apwpm-text-muted: #94a3b8;
	--apwpm-text-soft: #64748b;
	--apwpm-primary: #6366f1;
	--apwpm-primary-hover: #4f46e5;
	--apwpm-primary-soft: #1e1b4b;
	--apwpm-success-soft: #064e3b;
	--apwpm-warning-soft: #422006;
	--apwpm-error-soft: #450a0a;
	--apwpm-critical-soft: #500;
	--apwpm-info-soft: #082f49;
}
body.apwpm-dark .apwpm-wrap { background: var(--apwpm-bg); color: var(--apwpm-text); }
body.apwpm-dark .apwpm-wrap h1,
body.apwpm-dark .apwpm-wrap h2,
body.apwpm-dark .apwpm-wrap h3,
body.apwpm-dark .apwpm-wrap h4,
body.apwpm-dark .apwpm-section-title,
body.apwpm-dark .apwpm-field__label,
body.apwpm-dark .apwpm-stat__value,
body.apwpm-dark .apwpm-event__login,
body.apwpm-dark .apwpm-event__desc,
body.apwpm-dark .apwpm-toplist__name,
body.apwpm-dark .apwpm-network-row__name,
body.apwpm-dark .apwpm-switch__label,
body.apwpm-dark .apwpm-savebar__status { color: var(--apwpm-text); }

body.apwpm-dark .apwpm-card,
body.apwpm-dark .apwpm-stat,
body.apwpm-dark .apwpm-event {
	background: var(--apwpm-surface);
	border-color: var(--apwpm-border);
	color: var(--apwpm-text);
}
body.apwpm-dark .apwpm-input,
body.apwpm-dark .apwpm-select,
body.apwpm-dark .apwpm-input::placeholder {
	background: var(--apwpm-surface-2);
	color: var(--apwpm-text);
	border-color: var(--apwpm-border);
}
body.apwpm-dark .apwpm-input::placeholder { color: var(--apwpm-text-soft); opacity: 1; }
body.apwpm-dark textarea.apwpm-input { background: var(--apwpm-surface-2); color: var(--apwpm-text); }

body.apwpm-dark .apwpm-btn { background: var(--apwpm-surface-2); color: var(--apwpm-text); border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-btn:hover { background: var(--apwpm-primary-soft); border-color: var(--apwpm-primary); color: #c7d2fe; }
body.apwpm-dark .apwpm-btn--primary,
body.apwpm-dark .apwpm-btn--primary:hover { background: var(--apwpm-primary); color: #fff; border-color: var(--apwpm-primary); }
body.apwpm-dark .apwpm-btn--danger { color: #fca5a5; border-color: #ef4444; background: transparent; }
body.apwpm-dark .apwpm-btn--danger:hover { background: #ef4444; color: #fff; }
body.apwpm-dark .apwpm-btn--ghost { color: var(--apwpm-text-muted); background: transparent; }
body.apwpm-dark .apwpm-btn--ghost:hover { color: var(--apwpm-text); }

body.apwpm-dark .apwpm-tab { color: var(--apwpm-text-muted); }
body.apwpm-dark .apwpm-tab:hover { color: var(--apwpm-text); }
body.apwpm-dark .apwpm-tab.is-active { color: #fff; background: var(--apwpm-primary); }
body.apwpm-dark .apwpm-tabs { background: var(--apwpm-surface); border-color: var(--apwpm-border); }

body.apwpm-dark .apwpm-comment { background: var(--apwpm-surface-2); }
body.apwpm-dark .apwpm-comment p { color: var(--apwpm-text); }
body.apwpm-dark .apwpm-event__context { background: #0b1220; color: #e2e8f0; border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-heatmapwpm__cell { background: rgba(99,102,241,0.12); }
body.apwpm-dark .apwpm-heatmapwpm__day { color: var(--apwpm-text-muted); }
body.apwpm-dark .apwpm-chip { background: var(--apwpm-surface-2); color: var(--apwpm-text); border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-chip:hover { background: var(--apwpm-primary-soft); color: #c7d2fe; border-color: var(--apwpm-primary); }
body.apwpm-dark .apwpm-chip.is-active { background: var(--apwpm-primary); color: #fff; }
body.apwpm-dark .apwpm-report-frame { background: #f5f7fb; }
body.apwpm-dark .apwpm-bulkbar { background: var(--apwpm-primary); }
body.apwpm-dark .apwpm-bulkbar > span { color: #fff; }

/* Tags — brighter foreground for dark backgrounds */
body.apwpm-dark .apwpm-tag { background: var(--apwpm-surface-2); color: var(--apwpm-text-muted); border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-tag--action   { background: rgba(99,102,241,0.18);  color: #c7d2fe; }
body.apwpm-dark .apwpm-tag--object   { background: rgba(148,163,184,0.18); color: #cbd5e1; }
body.apwpm-dark .apwpm-tag--info     { background: rgba(59,130,246,0.20);  color: #93c5fd; }
body.apwpm-dark .apwpm-tag--success  { background: rgba(16,185,129,0.20);  color: #6ee7b7; }
body.apwpm-dark .apwpm-tag--warning  { background: rgba(245,158,11,0.20);  color: #fcd34d; }
body.apwpm-dark .apwpm-tag--error    { background: rgba(239,68,68,0.20);   color: #fca5a5; }
body.apwpm-dark .apwpm-tag--critical { background: rgba(220,38,38,0.28);   color: #fecaca; }
body.apwpm-dark .apwpm-tag--status-acknowledged { background: rgba(245,158,11,0.18); color: #fcd34d; }
body.apwpm-dark .apwpm-tag--status-resolved     { background: rgba(16,185,129,0.18); color: #6ee7b7; }
body.apwpm-dark .apwpm-tag--status-snoozed      { background: rgba(99,102,241,0.18); color: #c7d2fe; }

/* Toplist count pill */
body.apwpm-dark .apwpm-toplist__count { background: rgba(99,102,241,0.20); color: #c7d2fe; }
body.apwpm-dark .apwpm-toplist li { border-color: var(--apwpm-border); }

/* Insights banner */
body.apwpm-dark .apwpm-insights-banner {
	background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(217,119,6,0.18) 100%);
	border-color: rgba(245,158,11,0.45);
}
body.apwpm-dark .apwpm-insights-banner .apwpm-section-title { color: #fcd34d; }

/* Anomaly */
body.apwpm-dark .apwpm-event--anomaly {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(220,38,38,0.18), var(--apwpm-shadow-sm);
}

/* Avatar / dots — make initials readable on dark soft background */
body.apwpm-dark .apwpm-event__avatar { background: rgba(99,102,241,0.25); color: #c7d2fe; }
body.apwpm-dark .apwpm-event__dot { box-shadow: 0 0 0 4px var(--apwpm-bg); }

/* Switch row */
body.apwpm-dark .apwpm-switch { background: var(--apwpm-surface-2); border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-switch__toggle { background: var(--apwpm-border-strong); }
body.apwpm-dark .apwpm-switch__toggle.is-on { background: var(--apwpm-primary); }

/* Comment thread accents */
body.apwpm-dark .apwpm-comment__login { color: #c7d2fe; }
body.apwpm-dark .apwpm-comment__time { color: var(--apwpm-text-soft); }

/* Empty / loading / muted */
body.apwpm-dark .apwpm-empty,
body.apwpm-dark .apwpm-loading,
body.apwpm-dark .apwpm-muted,
body.apwpm-dark .apwpm-field__help,
body.apwpm-dark .apwpm-pagination__info,
body.apwpm-dark .apwpm-event__role,
body.apwpm-dark .apwpm-event__time { color: var(--apwpm-text-muted); }

/* Links */
body.apwpm-dark .apwpm-link { color: #c7d2fe; }
body.apwpm-dark .apwpm-link:hover { color: #fff; }

/* Toast */
body.apwpm-dark .apwpm-toast { background: #1e293b; border: 1px solid var(--apwpm-border); }
body.apwpm-dark .apwpm-toast--success { background: #065f46; }
body.apwpm-dark .apwpm-toast--error   { background: #7f1d1d; }

/* Network row */
body.apwpm-dark .apwpm-network-row { border-color: var(--apwpm-border); }
body.apwpm-dark .apwpm-network-row__bar { background: var(--apwpm-surface-2); }

/* Chart tooltip — already dark; ensure border for contrast */
body.apwpm-dark .apwpm-chart__tip { background: #0f172a; border: 1px solid var(--apwpm-border); }

/* Field labels & helper text */
body.apwpm-dark .apwpm-field__label { color: var(--apwpm-text); }
body.apwpm-dark .apwpm-field__help  { color: var(--apwpm-text-muted); }

/* Header subtitle */
body.apwpm-dark .apwpm-header p { color: var(--apwpm-text-muted); }

/* Pagination */
body.apwpm-dark .apwpm-pagination__info { color: var(--apwpm-text-muted); }

/* Date inputs — make the calendar picker icon visible */
body.apwpm-dark input[type="date"].apwpm-input { color-scheme: dark; }