/* PracticePilot — Notifications bell/badge widget (Phase 8). Strongly
   scoped under .ppilot-notif-*; meant to be embedded inline in a nav bar
   by another module, so sizing is compact and the panel is
   self-positioning (relative host + absolute panel). Premium minimal:
   clean white surface, blue/purple accent, restrained shadow. */

.ppilot-notif-widget { position: relative; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.ppilot-notif-widget, .ppilot-notif-widget * { box-sizing: border-box; }

.ppilot-notif-bell {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--ppilot-border, #e2e5ec);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ppilot-notif-bell:hover { background: #f5f6fb; border-color: var(--ppilot-navy, #4338ca); }
.ppilot-notif-bell:focus-visible { outline: 2px solid var(--ppilot-navy, #4338ca); outline-offset: 2px; }

.ppilot-notif-bell-icon { font-size: 18px; line-height: 1; }

.ppilot-notif-badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 18px; height: 18px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #6d28d9, #4338ca);
	color: #fff;
	font-size: 10px; font-weight: 700; line-height: 1;
	border-radius: 999px;
	border: 2px solid #fff;
}

.ppilot-notif-panel {
	position: absolute; top: calc(100% + 10px); right: 0;
	width: 320px; max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--ppilot-border, #e2e5ec);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(24, 24, 60, 0.14);
	overflow: hidden;
	z-index: 1000;
}

.ppilot-notif-panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px 16px;
	font-size: 13px; font-weight: 700;
	color: var(--ppilot-ink, #14162b);
	border-bottom: 1px solid var(--ppilot-border, #e2e5ec);
}

/* §notification-center (v0.24.2) */
.ppilot-notif-mark-all {
	flex: 0 0 auto;
	border: none; background: none; padding: 0;
	font-size: 12px; font-weight: 600;
	color: var(--ppilot-navy, #4338ca);
	cursor: pointer;
	white-space: nowrap;
}
.ppilot-notif-mark-all:hover { text-decoration: underline; }
.ppilot-notif-mark-all:focus-visible { outline: 2px solid var(--ppilot-navy, #4338ca); outline-offset: 2px; border-radius: 2px; }

.ppilot-notif-list { max-height: 360px; overflow-y: auto; }

.ppilot-notif-row {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--ppilot-border, #eef0f6);
	transition: background 0.15s ease;
}
.ppilot-notif-row:last-child { border-bottom: none; }
.ppilot-notif-row:hover { background: #f7f7fc; }
.ppilot-notif-row-unread { background: #f5f3ff; }
.ppilot-notif-row-unread:hover { background: #efeafe; }
/* §a11y (v0.24.2): rows are keyboard-focusable (tabindex="0", see
   assets/notifications.js) since they aren't native <a>/<button>
   elements — an explicit focus ring is required or Tab users get no
   visible indication of which row is active. */
.ppilot-notif-row:focus-visible { outline: 2px solid var(--ppilot-navy, #4338ca); outline-offset: -2px; }

.ppilot-notif-dot {
	flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, #6d28d9, #4338ca);
}

/* §notification-center (v0.24.2): per-type glyph (📝/🎯/🏆/...), rendered
   just before the row's text body. Fixed width keeps every row's title
   starting at the same x position regardless of glyph width. */
.ppilot-notif-row-icon {
	flex: 0 0 auto; width: 20px;
	font-size: 15px; line-height: 1.3;
	text-align: center;
}

.ppilot-notif-row-body { min-width: 0; flex: 1 1 auto; }
.ppilot-notif-row-title { font-size: 13px; font-weight: 700; color: var(--ppilot-ink, #14162b); margin-bottom: 2px; word-break: break-word; }
.ppilot-notif-row-text { font-size: 12px; color: var(--ppilot-muted, #6b7290); margin-bottom: 4px; word-break: break-word; }
.ppilot-notif-row-date { font-size: 11px; color: var(--ppilot-muted, #6b7290); }

.ppilot-notif-empty {
	padding: 28px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--ppilot-muted, #6b7290);
}

@media (max-width: 480px) {
	.ppilot-notif-panel {
		position: fixed;
		top: 64px; right: 16px; left: 16px;
		width: auto; max-width: none;
	}
}