:root {
	/* Alias Core's live brand tokens (elimu-erp-core's eerp-design-system.css,
	   --eerp-brand / --eerp-brand-hover) instead of hardcoding literal
	   colors, so this plugin follows the school's active color preset:
	   same fix already applied to eerp-dashboard.css. Fallback values only
	   apply if Core's stylesheet somehow isn't loaded. --eerp-secondary has
	   no Core equivalent and was never tied to the brand preset, so it
	   stays a plain local color. */
	--eerp-primary: var(--eerp-brand, #1e3a8a);
	--eerp-primary-hover: var(--eerp-brand-hover, #172554);
	--eerp-primary-contrast: #ffffff;
	--eerp-secondary: #0d9488;
	--eerp-neutral-dark: #0f172a;
	--eerp-neutral-body: #334155;
	--eerp-neutral-border: #e2e8f0;
	--eerp-surface: #ffffff;
}
.eerp-comm-wrapper .eerp-btn-primary {
	background-color: var(--eerp-primary, #1e3a8a) !important;
	color: #ffffff !important;
}
.eerp-comm-wrapper .eerp-btn-primary:hover,
.eerp-comm-wrapper .eerp-btn-primary:focus {
	background-color: var(--eerp-primary-hover, #172554) !important;
	color: #ffffff !important;
}

.eerp-comm-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--eerp-neutral-body, #334155);
}

.eerp-comm-wrapper h2 {
	margin-top: 0;
	color: var(--eerp-neutral-dark, #0f172a);
}

.eerp-comm-wrapper .eerp-btn-secondary,
.eerp-comm-wrapper button.eerp-btn-secondary {
	background-color: #ffffff !important;
	color: var(--eerp-primary, #1e3a8a) !important;
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-weight: 600;
	cursor: pointer;
}

.eerp-comm-wrapper .eerp-btn-secondary:hover,
.eerp-comm-wrapper .eerp-btn-secondary:focus,
.eerp-comm-wrapper button.eerp-btn-secondary:hover,
.eerp-comm-wrapper button.eerp-btn-secondary:focus {
	background-color: #f1f5f9 !important;
	color: var(--eerp-primary, #1e3a8a) !important;
}

.eerp-comm-wrapper .eerp-btn-primary,
.eerp-comm-wrapper button.eerp-btn-primary {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
}

.eerp-comm-section {
	background: var(--eerp-surface, #ffffff);
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	min-width: 0;
}

.eerp-comm-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	margin-bottom: 0.75rem;
}

.eerp-comm-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	flex: 1 1 10rem;
}

.eerp-comm-field label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #475569;
}

.eerp-comm-field input,
.eerp-comm-field select,
.eerp-comm-field textarea {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	border-radius: 0.4rem;
	font-size: 0.9rem;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}

.eerp-comm-badge {
	background-color: #e0e7ff;
	color: var(--eerp-primary, #1e3a8a);
	padding: 0.2rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 600;
	display: inline-block;
}

.eerp-comm-badge-pinned {
	background-color: #fef3c7;
	color: #92400e;
}

.eerp-comm-announcement {
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	border-radius: 0.6rem;
	padding: 1rem;
	margin-bottom: 0.75rem;
}

.eerp-comm-announcement h4 {
	margin: 0 0 0.35rem 0;
}

.eerp-comm-announcement .meta {
	font-size: 0.75rem;
	color: #64748b;
	margin-bottom: 0.5rem;
}

.eerp-comm-empty {
	color: #64748b;
	font-size: 0.9rem;
	padding: 0.5rem 0;
}

.eerp-comm-msg {
	padding: 0.6rem 0.9rem;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	margin-bottom: 0.75rem;
}

.eerp-comm-msg-success { background: #dcfce7; color: #166534; }
.eerp-comm-msg-error { background: #fee2e2; color: #991b1b; }

.eerp-comm-inbox-layout {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: 1rem;
	min-width: 0;
}

@media (max-width: 640px) {
	.eerp-comm-inbox-layout {
		grid-template-columns: 1fr;
	}
}

.eerp-comm-thread-list {
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	border-radius: 0.6rem;
	overflow: hidden;
	min-width: 0;
}

.eerp-comm-thread-item {
	padding: 0.75rem;
	border-bottom: 1px solid var(--eerp-neutral-border, #e2e8f0);
	cursor: pointer;
}

.eerp-comm-thread-item:last-child { border-bottom: none; }
.eerp-comm-thread-item:hover { background: #f8fafc; }
.eerp-comm-thread-item.active { background: #eff6ff; }

.eerp-comm-thread-item .subject { font-weight: 600; font-size: 0.9rem; }
.eerp-comm-thread-item .preview { font-size: 0.8rem; color: #64748b; }
.eerp-comm-thread-item .unread-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--eerp-primary, #1e3a8a);
	margin-right: 0.35rem;
}

.eerp-comm-message-pane {
	border: 1px solid var(--eerp-neutral-border, #e2e8f0);
	border-radius: 0.6rem;
	padding: 1rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 20rem;
}

.eerp-comm-message-list {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 0.75rem;
}

.eerp-comm-message-bubble {
	max-width: 80%;
	padding: 0.5rem 0.75rem;
	border-radius: 0.6rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	word-wrap: break-word;
}

.eerp-comm-message-bubble.mine {
	background: var(--eerp-primary, #1e3a8a);
	color: #ffffff;
	margin-left: auto;
}

.eerp-comm-message-bubble.theirs {
	background: #f1f5f9;
	color: var(--eerp-neutral-dark, #0f172a);
}

.eerp-comm-message-bubble .time {
	font-size: 0.65rem;
	opacity: 0.7;
	margin-top: 0.2rem;
}

.eerp-comm-reply-row {
	display: flex;
	gap: 0.5rem;
}

.eerp-comm-reply-row textarea {
	flex: 1;
	min-height: 2.5rem;
	resize: vertical;
}