/**
 * ec-design.css — USTP E-Complaint design tokens + app-shell layout.
 *
 * Step 1 (Foundation) of the frontend redesign (see docs/DESIGN-SYSTEM.md).
 * Presentation-only: design tokens, the sidebar/header/footer app shell, and
 * a small set of token-based component classes (ec- prefixed) reserved for
 * later steps. Works alongside the locally built Tailwind stylesheet
 * (assets/css/tailwind.css, compiled by tools/theme-build — no CDN), which is
 * loaded after this file exactly like the former Play CDN output was.
 *
 * The overridable brand variables (--ec-navy / --ec-gold) are also printed
 * inline on wp_head from the Options page; the defaults below reproduce the
 * USTP navy+gold look out of the box.
 */

/* ------------------------------------------------------------------ *
 * 1. Brand & color system  /  2. Typography  /  3. Spacing/radius/shadow
 * ------------------------------------------------------------------ */
:root {
	/* Brand */
	--ec-navy:        #0F2D5C;  /* primary: sidebar, headers, primary buttons */
	--ec-navy-700:    #16386E;  /* hover for navy */
	--ec-navy-900:    #0A1F40;  /* deep accents */
	--ec-gold:        #F2A900;  /* accent: active nav, highlights, key CTAs */
	--ec-gold-600:    #D9970A;  /* gold hover */

	/* Neutrals */
	--ec-bg:          #F5F6FA;  /* page background */
	--ec-surface:     #FFFFFF;  /* cards / panels */
	--ec-border:      #E5E8EF;  /* hairline borders */
	--ec-text:        #1F2733;  /* primary text */
	--ec-text-muted:  #5F6774;  /* secondary text (Phase 6G: was #6B7280, 4.47:1 on --ec-bg; now ≥4.5:1 WCAG AA) */

	/* Status (semantic — keep stable, charts + badges reuse these) */
	--ec-status-pending:   #B7791F;  /* amber  */
	--ec-status-progress:  #2563EB;  /* blue   */
	--ec-status-resolved:  #15803D;  /* green  */
	--ec-status-completed: #15803D;  /* green  */
	--ec-status-rejected:  #DC2626;  /* red    */
	--ec-status-review:    #9333EA;  /* purple (privacy review) */

	/* Status / priority TEXT colours (Phase 6G). why: the semantic colours above stay for
	 * charts, borders and icons; small pill/alert text uses these darker shades so it
	 * reaches WCAG AA (4.5:1) on its own tinted background. */
	--ec-status-pending-text:   #8A5A0B;
	--ec-status-progress-text:  #1D4ED8;
	--ec-status-resolved-text:  #166534;
	--ec-status-rejected-text:  #B91C1C;
	--ec-status-review-text:    #7E22CE;
	--ec-gold-text:             #8A5A00;  /* gold-family text (eyebrows) on light surfaces */

	/* Priority */
	--ec-prio-high:   #DC2626;
	--ec-prio-medium: #B7791F;
	--ec-prio-low:    #15803D;
	--ec-prio-high-text:   #B91C1C;
	--ec-prio-medium-text: #8A5A0B;
	--ec-prio-low-text:    #166534;

	/* Chart palette (consistent across all dashboards) */
	--ec-chart-1: #0F2D5C; /* navy   */
	--ec-chart-2: #F2A900; /* gold   */
	--ec-chart-3: #2563EB; /* blue   */
	--ec-chart-4: #15803D; /* green  */
	--ec-chart-5: #9333EA; /* purple */
	--ec-chart-6: #6B7280; /* gray   */

	/* Typography */
	--ec-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ec-fs-xs: 0.75rem;  --ec-fs-sm: 0.875rem; --ec-fs-base: 1rem;
	--ec-fs-lg: 1.125rem; --ec-fs-xl: 1.5rem;   --ec-fs-2xl: 2rem;

	/* Spacing, radius, shadow */
	--ec-space-1:4px; --ec-space-2:8px; --ec-space-3:12px; --ec-space-4:16px;
	--ec-space-5:24px; --ec-space-6:32px; --ec-space-8:48px;
	--ec-radius:10px;        /* cards, inputs, buttons */
	--ec-radius-sm:6px;      /* badges, small controls */
	--ec-shadow-sm:0 1px 2px rgba(16,45,92,.06);
	--ec-shadow:0 2px 8px rgba(16,45,92,.08);     /* cards */
	--ec-shadow-lg:0 8px 24px rgba(16,45,92,.12); /* modals, dropdowns */

	/* Shell metrics */
	--ec-sidebar-w: 260px;
	--ec-header-h: 60px;
}

/* ------------------------------------------------------------------ *
 * 4. App shell layout (sidebar + header + content + footer)
 * ------------------------------------------------------------------ */

/* The shell owns the full viewport when active. We scope these resets to the
 * shell wrapper so we never disturb login / logged-out pages. */
body.ec-has-shell {
	margin: 0;
	font-family: var(--ec-font);
	color: var(--ec-text);
	background: var(--ec-bg);
}

.ec-app {
	min-height: 100vh;
	display: grid;
	/* why (Phase 6G): minmax(0, 1fr) — a plain 1fr track has an `auto` minimum, so wide
	 * content (header user menu, tables) widened the page past the viewport. */
	grid-template-columns: var(--ec-sidebar-w) minmax(0, 1fr);
	grid-template-rows: var(--ec-header-h) 1fr auto;
	grid-template-areas:
		"sidebar header"
		"sidebar content"
		"sidebar footer";
	background: var(--ec-bg);
}

/* Sidebar -------------------------------------------------------- */
.ec-sidebar {
	grid-area: sidebar;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--ec-sidebar-w);
	height: 100vh;
	background: var(--ec-navy);
	color: #E8EDF6;
	display: flex;
	flex-direction: column;
	z-index: 40;
	overflow-y: auto;
}

.ec-sidebar__brand {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	padding: var(--ec-space-5) var(--ec-space-4);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ec-sidebar__logo {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ec-sidebar__logo img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.ec-sidebar__wordmark {
	font-size: var(--ec-fs-base);
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
}

.ec-nav {
	display: flex;
	flex-direction: column;
	padding: var(--ec-space-3) 0;
	gap: 2px;
}

.ec-nav__item {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	padding: var(--ec-space-3) var(--ec-space-4);
	color: #C7D2E4;
	text-decoration: none;
	font-size: var(--ec-fs-sm);
	border-left: 3px solid transparent;
	transition: background-color .15s ease, color .15s ease;
}

.ec-nav__item:hover {
	background: var(--ec-navy-700);
	color: #FFFFFF;
}

.ec-nav__item.is-active {
	/* why: active nav = gold left-border + lighter navy bg + gold text (DESIGN-SYSTEM 4.2). */
	background: var(--ec-navy-700);
	border-left-color: var(--ec-gold);
	color: var(--ec-gold);
}

.ec-nav__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: inline-flex;
}

.ec-nav__icon svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

.ec-nav__label {
	flex: 1 1 auto;
}

/* Header --------------------------------------------------------- */
.ec-header {
	grid-area: header;
	position: sticky;
	top: 0;
	height: var(--ec-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	padding: 0 var(--ec-space-5);
	background: var(--ec-surface);
	border-bottom: 1px solid var(--ec-border);
	z-index: 30;
}

.ec-header__left {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	min-width: 0;
}

.ec-header__title {
	font-size: var(--ec-fs-lg);
	font-weight: 600;
	color: var(--ec-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ec-header__right {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--ec-space-3);
	min-width: 0;
}

.ec-hamburger {
	display: none; /* shown only on mobile */
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius-sm);
	background: var(--ec-surface);
	color: var(--ec-navy);
	cursor: pointer;
}

.ec-hamburger svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
}

.ec-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ec-radius-sm);
	color: var(--ec-text-muted);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.ec-iconbtn:hover {
	background: var(--ec-bg);
	color: var(--ec-navy);
}

.ec-iconbtn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
}

/* User menu ------------------------------------------------------ */
.ec-usermenu {
	position: relative;
}

.ec-usermenu__trigger {
	display: flex;
	align-items: center;
	gap: var(--ec-space-2);
	padding: var(--ec-space-1) var(--ec-space-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-sm);
	cursor: pointer;
	color: var(--ec-text);
	font-family: var(--ec-font);
}

.ec-usermenu__trigger:hover {
	background: var(--ec-bg);
}

.ec-usermenu__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ec-navy);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ec-fs-sm);
	font-weight: 600;
}

.ec-usermenu__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
}

.ec-usermenu__name {
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-text);
}

.ec-usermenu__role {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-usermenu__dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 180px;
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow-lg);
	padding: var(--ec-space-2);
	display: none;
}

.ec-usermenu.is-open .ec-usermenu__dropdown {
	display: block;
}

.ec-usermenu__link {
	display: block;
	padding: var(--ec-space-2) var(--ec-space-3);
	color: var(--ec-text);
	text-decoration: none;
	font-size: var(--ec-fs-sm);
	border-radius: var(--ec-radius-sm);
}

.ec-usermenu__link:hover {
	background: var(--ec-bg);
	color: var(--ec-navy);
}

/* Content -------------------------------------------------------- */
.ec-content {
	grid-area: content;
	min-width: 0; /* Phase 6G: lets the content column shrink to the viewport */
	padding: var(--ec-space-6);
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
}

/* Footer --------------------------------------------------------- */
.ec-footer {
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	flex-wrap: wrap;
	padding: var(--ec-space-4) var(--ec-space-6);
	background: var(--ec-surface);
	border-top: 1px solid var(--ec-border);
	color: var(--ec-text-muted);
	font-size: var(--ec-fs-sm);
}

.ec-footer__links {
	display: flex;
	align-items: center;
	gap: var(--ec-space-4);
}

.ec-footer a {
	color: var(--ec-text-muted);
	text-decoration: none;
}

.ec-footer a:hover {
	color: var(--ec-navy);
}

/* Scrim (mobile drawer overlay) ---------------------------------- */
.ec-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 31, 64, .45);
	z-index: 35;
}

.ec-scrim.is-visible {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Responsive: <=768px sidebar becomes an off-canvas drawer
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.ec-app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"header"
			"content"
			"footer";
	}

	.ec-sidebar {
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: var(--ec-shadow-lg);
	}

	.ec-sidebar--open {
		transform: translateX(0);
	}

	.ec-hamburger {
		display: inline-flex;
	}

	.ec-content {
		padding: var(--ec-space-4);
	}
}

/* ------------------------------------------------------------------ *
 * Base token-based component classes (foundation only — reserved for
 * later steps; NOT applied to existing pages in Step 1).
 * ------------------------------------------------------------------ */
.ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	padding: var(--ec-space-3) var(--ec-space-5);
	font-family: var(--ec-font);
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--ec-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ec-btn--primary {
	background: var(--ec-navy);
	color: #FFFFFF;
}

.ec-btn--primary:hover {
	background: var(--ec-navy-700);
	color: #FFFFFF;
}

.ec-btn--accent {
	background: var(--ec-gold);
	color: var(--ec-navy);
}

.ec-btn--accent:hover {
	background: var(--ec-gold-600);
}

.ec-btn--secondary {
	background: var(--ec-surface);
	color: var(--ec-navy);
	border-color: var(--ec-navy);
}

.ec-btn--secondary:hover {
	background: var(--ec-bg);
}

.ec-card {
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow);
	padding: var(--ec-space-5);
}

.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ec-space-1);
	padding: 2px var(--ec-space-2);
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	border-radius: var(--ec-radius-sm);
	background: var(--ec-bg);
	color: var(--ec-text);
}

/* Block (full-width) button modifier — used by the auth forms. */
.ec-btn--block {
	width: 100%;
}

/* ================================================================== *
 * Login / Register split-screen (Step 2).
 * Presentation-only skin; tabs/sub-toggle driven by sibling CSS from
 * hidden :checked radios so the forms work with JavaScript disabled.
 * ================================================================== */

/* The login template owns the full viewport (no site chrome). */
body.ec-auth-body {
	margin: 0;
	background: var(--ec-navy-900);
}

.ec-auth {
	display: flex;
	min-height: 100vh;
	font-family: var(--ec-font);
	color: var(--ec-text);
}

/* ---- Left branding panel (~55%) ---- */
.ec-auth__brand {
	position: relative;
	flex: 0 0 55%;
	background-color: var(--ec-navy);
	background-image: linear-gradient(160deg, var(--ec-navy) 0%, var(--ec-navy-900) 100%);
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
	overflow: hidden;
}

/* Navy gradient overlay so text stays readable over a photo. */
.ec-auth__brand-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(10, 31, 64, .82) 0%, rgba(15, 45, 92, .72) 100%);
	pointer-events: none;
}

.ec-auth__brand-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center; /* why: the brand block is the only child since the login highlights were removed; centred at every width */
	min-height: 100vh;
	padding: var(--ec-space-8);
	box-sizing: border-box;
}

.ec-auth__brand-top {
	margin-top: auto;
	margin-bottom: auto;
	max-width: 520px;
}

.ec-auth__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--ec-space-5);
	border-radius: var(--ec-radius);
	background: rgba(255, 255, 255, .08);
}

.ec-auth__logo img {
	max-width: 48px;
	max-height: 48px;
	height: auto;
}

.ec-auth__brand-name {
	margin: 0 0 var(--ec-space-2);
	font-size: var(--ec-fs-2xl);
	font-weight: 700;
	line-height: 1.15;
	color: #FFFFFF;
}

.ec-auth__brand-tagline {
	margin: 0;
	font-size: var(--ec-fs-lg);
	color: rgba(255, 255, 255, .82);
}

/* ---- Right panel (~45%) with white card ---- */
.ec-auth__main {
	flex: 1 1 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ec-space-6);
	background: var(--ec-bg);
	box-sizing: border-box;
}

.ec-auth__card {
	width: 100%;
	max-width: 420px;
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow-lg);
	padding: var(--ec-space-6);
	box-sizing: border-box;
}

/* The CSS-state radios are never shown. */
.ec-auth__state {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ---- Tabs (Login | Register) ---- */
.ec-auth__tabs {
	display: flex;
	gap: var(--ec-space-4);
	border-bottom: 1px solid var(--ec-border);
	margin-bottom: var(--ec-space-5);
}

.ec-auth__tab {
	position: relative;
	padding: var(--ec-space-3) 0;
	font-size: var(--ec-fs-base);
	font-weight: 600;
	color: var(--ec-text-muted);
	cursor: pointer;
	user-select: none;
	transition: color .15s ease;
}

.ec-auth__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ec-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .15s ease;
}

.ec-auth__tab:hover {
	color: var(--ec-navy);
}

/* Keyboard focus indicator: the tab radios are visually hidden but focusable
   (no `hidden` attribute), so a keyboard user can Tab to them and switch with the
   arrow keys. Surface that focus on the matching label. */
#ec-tab-login:focus-visible ~ .ec-auth__tabs label[for="ec-tab-login"],
#ec-tab-register:focus-visible ~ .ec-auth__tabs label[for="ec-tab-register"],
#ec-sub-complainant:focus-visible ~ .ec-auth__panel--register label[for="ec-sub-complainant"],
#ec-sub-staff:focus-visible ~ .ec-auth__panel--register label[for="ec-sub-staff"] {
	outline: 2px solid var(--ec-navy);
	outline-offset: 3px;
	border-radius: var(--ec-radius-sm);
	color: var(--ec-navy);
}

/* Active-tab states from the :checked radios. */
#ec-tab-login:checked ~ .ec-auth__tabs label[for="ec-tab-login"],
#ec-tab-register:checked ~ .ec-auth__tabs label[for="ec-tab-register"] {
	color: var(--ec-navy);
}

#ec-tab-login:checked ~ .ec-auth__tabs label[for="ec-tab-login"]::after,
#ec-tab-register:checked ~ .ec-auth__tabs label[for="ec-tab-register"]::after {
	transform: scaleX(1);
}

/* ---- Panels: show only the active one ---- */
.ec-auth__panel {
	display: none;
}

#ec-tab-login:checked ~ .ec-auth__panel--login {
	display: block;
}

#ec-tab-register:checked ~ .ec-auth__panel--register {
	display: block;
}

/* ---- Register sub-toggle (Complainant | Staff) ---- */
.ec-auth__sub {
	display: flex;
	gap: var(--ec-space-1);
	padding: var(--ec-space-1);
	margin-bottom: var(--ec-space-5);
	background: var(--ec-bg);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
}

.ec-auth__sub-tab {
	flex: 1 1 0;
	text-align: center;
	padding: var(--ec-space-2) var(--ec-space-3);
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-text-muted);
	cursor: pointer;
	user-select: none;
	border-radius: var(--ec-radius-sm);
	transition: background-color .15s ease, color .15s ease;
}

#ec-sub-complainant:checked ~ .ec-auth__panel--register .ec-auth__sub label[for="ec-sub-complainant"],
#ec-sub-staff:checked ~ .ec-auth__panel--register .ec-auth__sub label[for="ec-sub-staff"] {
	background: var(--ec-navy);
	color: #FFFFFF;
}

.ec-auth__subpanel {
	display: none;
}

#ec-sub-complainant:checked ~ .ec-auth__panel--register .ec-auth__subpanel--complainant {
	display: block;
}

#ec-sub-staff:checked ~ .ec-auth__panel--register .ec-auth__subpanel--staff {
	display: block;
}

/* ---- Sign-in sub-toggle (Student | Employee | Staff), post-defense Phase 3 + Employee ---- */
#ec-login-student:checked ~ .ec-auth__panel--login .ec-auth__sub label[for="ec-login-student"],
#ec-login-employee:checked ~ .ec-auth__panel--login .ec-auth__sub label[for="ec-login-employee"],
#ec-login-staff:checked ~ .ec-auth__panel--login .ec-auth__sub label[for="ec-login-staff"] {
	background: var(--ec-navy);
	color: #FFFFFF;
}

#ec-login-student:focus-visible ~ .ec-auth__panel--login label[for="ec-login-student"],
#ec-login-employee:focus-visible ~ .ec-auth__panel--login label[for="ec-login-employee"],
#ec-login-staff:focus-visible ~ .ec-auth__panel--login label[for="ec-login-staff"] {
	outline: 2px solid var(--ec-navy);
	outline-offset: 3px;
	border-radius: var(--ec-radius-sm);
}

#ec-login-student:checked ~ .ec-auth__panel--login .ec-auth__subpanel--student,
#ec-login-employee:checked ~ .ec-auth__panel--login .ec-auth__subpanel--employee,
#ec-login-staff:checked ~ .ec-auth__panel--login .ec-auth__subpanel--staff {
	display: block;
}

/* "Didn't get a code?" follows the sign-in sub-tab: Student ID form for the
   Student and Staff tabs (unchanged), email form for the Employee tab. */
.ec-auth__resend-variant {
	display: none;
}

#ec-login-student:checked ~ .ec-auth__panel--login .ec-auth__resend-variant--student,
#ec-login-staff:checked ~ .ec-auth__panel--login .ec-auth__resend-variant--student,
#ec-login-employee:checked ~ .ec-auth__panel--login .ec-auth__resend-variant--employee {
	display: block;
}

/* ---- Register sub-toggle (Student | Employee); Staff is never offered ---- */
#ec-reg-student:checked ~ .ec-auth__panel--register .ec-auth__sub label[for="ec-reg-student"],
#ec-reg-employee:checked ~ .ec-auth__panel--register .ec-auth__sub label[for="ec-reg-employee"] {
	background: var(--ec-navy);
	color: #FFFFFF;
}

#ec-reg-student:focus-visible ~ .ec-auth__panel--register label[for="ec-reg-student"],
#ec-reg-employee:focus-visible ~ .ec-auth__panel--register label[for="ec-reg-employee"] {
	outline: 2px solid var(--ec-navy);
	outline-offset: 3px;
	border-radius: var(--ec-radius-sm);
}

#ec-reg-student:checked ~ .ec-auth__panel--register .ec-auth__subpanel--reg-student,
#ec-reg-employee:checked ~ .ec-auth__panel--register .ec-auth__subpanel--reg-employee {
	display: block;
}

.ec-auth__hint {
	margin: var(--ec-space-4) 0 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
	text-align: center;
}

/* ---- Verify email page (6-digit code) ---- */
.ec-auth__panel--verify {
	display: block;
}

.ec-otp-input {
	letter-spacing: .5em;
	font-size: var(--ec-fs-lg);
	text-align: center;
}

.ec-auth__resend {
	margin-top: var(--ec-space-4);
}

/* ---- Headings / notes inside the card ---- */
.ec-auth__heading {
	margin: 0 0 var(--ec-space-4);
	font-size: var(--ec-fs-lg);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-auth__note {
	margin: 0 0 var(--ec-space-4);
	padding: var(--ec-space-3);
	font-size: var(--ec-fs-sm);
	color: var(--ec-status-pending-text);
	background: rgba(183, 121, 31, .08);
	border-radius: var(--ec-radius-sm);
}

/* ---- Status banner ---- */
.ec-auth__alert {
	margin-bottom: var(--ec-space-4);
	padding: var(--ec-space-3);
	font-size: var(--ec-fs-sm);
	border-radius: var(--ec-radius-sm);
}

.ec-auth__alert--ok {
	color: var(--ec-status-resolved-text);
	background: rgba(21, 128, 61, .10);
}

.ec-auth__alert--err {
	color: var(--ec-status-rejected-text);
	background: rgba(220, 38, 38, .10);
}

/* ---- Fields (icon-prefixed) ---- */
.ec-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-4);
}

.ec-field {
	display: block;
}

.ec-field__label {
	display: block;
	margin-bottom: var(--ec-space-1);
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-text);
}

.ec-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.ec-field__icon {
	position: absolute;
	left: var(--ec-space-3);
	display: inline-flex;
	align-items: center;
	color: var(--ec-text-muted);
	pointer-events: none;
}

.ec-field__icon svg {
	width: 18px;
	height: 18px;
}

.ec-field__input {
	width: 100%;
	padding: var(--ec-space-3) var(--ec-space-3) var(--ec-space-3) calc(var(--ec-space-6) + var(--ec-space-1));
	font-family: var(--ec-font);
	font-size: var(--ec-fs-base);
	color: var(--ec-text);
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ec-field__input:focus {
	outline: none;
	border-color: var(--ec-navy);
	box-shadow: 0 0 0 3px rgba(15, 45, 92, .15);
}

.ec-field__select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.ec-field__help {
	display: block;
	margin-top: var(--ec-space-1);
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-field__check {
	display: inline-flex;
	align-items: center;
	gap: var(--ec-space-2);
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
	cursor: pointer;
}

.ec-auth__footer {
	margin: var(--ec-space-5) 0 0;
	text-align: center;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

/* ---- Responsive: brand collapses to a slim top banner ---- */
@media (max-width: 768px) {
	.ec-auth {
		flex-direction: column;
	}

	.ec-auth__brand {
		flex: 0 0 auto;
		min-height: 30vh;
	}

	.ec-auth__brand-inner {
		min-height: 30vh;
		padding: var(--ec-space-5);
	}

	.ec-auth__brand-top {
		margin: 0;
	}

	.ec-auth__logo {
		width: 48px;
		height: 48px;
		margin-bottom: var(--ec-space-3);
	}

	.ec-auth__brand-name {
		font-size: var(--ec-fs-xl);
	}

	.ec-auth__main {
		flex: 1 1 auto;
		padding: var(--ec-space-4);
	}

	.ec-auth__card {
		max-width: 100%;
		box-shadow: var(--ec-shadow);
	}
}

/* ================================================================== *
 * User (Complainant) Dashboard — Step 3.
 * Token-based, additive. Does not alter Step 1/Step 2 styles.
 * ================================================================== */

/* Welcome header --------------------------------------------------- */
.ec-welcome {
	margin-bottom: var(--ec-space-6);
}

.ec-welcome__title {
	margin: 0;
	font-size: var(--ec-fs-2xl);
	font-weight: 600;
	color: var(--ec-navy);
	line-height: 1.2;
}

.ec-welcome__subtitle {
	margin: var(--ec-space-2) 0 0;
	color: var(--ec-text-muted);
	font-size: var(--ec-fs-base);
}

/* Shared card head (title + "View All" link) ----------------------- */
.ec-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-3);
	margin-bottom: var(--ec-space-4);
}

.ec-card__title {
	margin: 0;
	font-size: var(--ec-fs-lg);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-card__link {
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-navy);
	text-decoration: none;
	transition: color .15s ease;
}

.ec-card__link:hover {
	color: var(--ec-gold-600);
}

/* Stat cards ------------------------------------------------------- */
.ec-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ec-space-4);
	margin-bottom: var(--ec-space-6);
}

.ec-stat {
	display: flex;
	align-items: center;
	gap: var(--ec-space-4);
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-left: 4px solid var(--ec-navy); /* semantic accent stripe */
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow-sm);
	padding: var(--ec-space-5);
}

.ec-stat__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ec-radius);
	background: rgba(15, 45, 92, .08);
	color: var(--ec-navy);
}

.ec-stat__icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

.ec-stat__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ec-stat__value {
	font-size: var(--ec-fs-2xl);
	font-weight: 600;
	color: var(--ec-text);
	line-height: 1.1;
}

.ec-stat__label {
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-text);
}

.ec-stat__sublabel {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

/* Semantic accent variants (stripe + icon tint). */
.ec-stat--total {
	border-left-color: var(--ec-navy);
}

.ec-stat--in_progress {
	border-left-color: var(--ec-status-pending-text);
}

.ec-stat--in_progress .ec-stat__icon {
	background: rgba(183, 121, 31, .12);
	color: var(--ec-status-pending-text);
}

.ec-stat--resolved {
	border-left-color: var(--ec-status-resolved-text);
}

.ec-stat--resolved .ec-stat__icon {
	background: rgba(21, 128, 61, .12);
	color: var(--ec-status-resolved-text);
}

.ec-stat--rejected {
	border-left-color: var(--ec-status-rejected-text);
}

.ec-stat--rejected .ec-stat__icon {
	background: rgba(220, 38, 38, .12);
	color: var(--ec-status-rejected-text);
}

/* Dashboard 2-column layout ---------------------------------------- */
.ec-dash-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--ec-space-5);
	align-items: start;
}

.ec-dash-main {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-5);
	min-width: 0;
}

.ec-dash-side {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-5);
	min-width: 0;
}

/* Quick actions ---------------------------------------------------- */
.ec-quick__grid {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-3);
}

.ec-quick-tile {
	display: flex;
	align-items: center;
	gap: var(--ec-space-4);
	padding: var(--ec-space-4);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	background: var(--ec-bg);
	text-decoration: none;
	color: var(--ec-text);
	transition: background-color .15s ease, border-color .15s ease;
}

.ec-quick-tile:hover {
	background: var(--ec-surface);
	border-color: var(--ec-navy);
}

.ec-quick-tile__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ec-radius);
	background: var(--ec-navy);
	color: #FFFFFF;
}

.ec-quick-tile__icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
}

.ec-quick-tile__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.ec-quick-tile__title {
	font-size: var(--ec-fs-base);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-quick-tile__subtitle {
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

.ec-quick-tile__chevron {
	flex: 0 0 auto;
	color: var(--ec-text-muted);
}

.ec-quick-tile__chevron svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

/* Recent complaints list ------------------------------------------- */
.ec-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ec-recent__row {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	padding: var(--ec-space-3) 0;
	border-bottom: 1px solid var(--ec-border);
}

.ec-recent__row:last-child {
	border-bottom: 0;
}

.ec-recent__dot {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ec-text-muted);
}

.ec-recent__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.ec-recent__id {
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	color: var(--ec-navy);
	letter-spacing: .02em;
}

.ec-recent__title {
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ec-recent__meta {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

/* Token-based status pill + dot color (semantic, stable). */
.ec-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ec-space-2);
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	border-radius: var(--ec-radius-sm);
	white-space: nowrap;
}

.ec-pill--submitted,
.ec-recent__dot--submitted { background: rgba(107, 114, 128, .15); color: var(--ec-text-muted); }
.ec-recent__dot--submitted { background: var(--ec-text-muted); }

.ec-pill--pending  { background: rgba(183, 121, 31, .15); color: var(--ec-status-pending-text); }
.ec-recent__dot--pending { background: var(--ec-status-pending); }

.ec-pill--progress { background: rgba(37, 99, 235, .15); color: var(--ec-status-progress-text); }
.ec-recent__dot--progress { background: var(--ec-status-progress); }

.ec-pill--resolved,
.ec-pill--completed { background: rgba(21, 128, 61, .15); color: var(--ec-status-resolved-text); }
.ec-recent__dot--resolved,
.ec-recent__dot--completed { background: var(--ec-status-resolved); }

.ec-pill--rejected { background: rgba(220, 38, 38, .15); color: var(--ec-status-rejected-text); }
.ec-recent__dot--rejected { background: var(--ec-status-rejected); }

.ec-pill--review   { background: rgba(147, 51, 234, .15); color: var(--ec-status-review-text); }
.ec-recent__dot--review { background: var(--ec-status-review); }

/* Empty state ------------------------------------------------------ */
.ec-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ec-space-3);
	padding: var(--ec-space-6) var(--ec-space-4);
	color: var(--ec-text-muted);
}

.ec-empty__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ec-bg);
	color: var(--ec-text-muted);
}

.ec-empty__icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

.ec-empty__msg {
	margin: 0;
	font-size: var(--ec-fs-sm);
}

/* Latest updates feed: drop the legacy boxed shell since the .ec-card
   already provides the card chrome. */
.ec-feed #ec-updates-panel {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Sidebar bottom campus photo (Step 1 shell enhancement) ----------- */
/* Sidebar campus texture: the Login background (login_bg_id) painted UNDER a strong
 * navy overlay as background layers of the sidebar itself. why: .ec-sidebar is a scroll
 * container, so a ::before overlay would scroll away on short viewports; background
 * layers stay fixed to the 100vh box. Nav/hover/active backgrounds are opaque navy-700,
 * so their contrast is unchanged. Without an image the plain navy from .ec-sidebar applies. */
.ec-sidebar--photo {
	background-color: var(--ec-navy);
	background-image:
		linear-gradient(180deg, rgba(10, 31, 64, .90) 0%, rgba(15, 45, 92, .88) 55%, rgba(10, 31, 64, .95) 100%),
		var(--ec-sidebar-photo);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
	.ec-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ec-dash-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.ec-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ================================================================== *
 * Submit Complaint — Step 4.
 * Token-based, additive. Does not alter Step 1/2/3 styles. Two-column
 * grid (form card + how-to aside) with a full-width final card.
 * ================================================================== */

.ec-submit {
	max-width: 1100px;
	margin: 0 auto;
}

.ec-submit__head {
	margin-bottom: var(--ec-space-5);
}

.ec-submit__title {
	margin: 0;
	font-size: var(--ec-fs-2xl);
	font-weight: 600;
	color: var(--ec-navy);
	line-height: 1.2;
}

.ec-submit__subtitle {
	margin: var(--ec-space-2) 0 0;
	color: var(--ec-text-muted);
	font-size: var(--ec-fs-base);
}

/* Result banner returned by the handler. */
.ec-alert {
	margin-bottom: var(--ec-space-5);
	padding: var(--ec-space-3) var(--ec-space-4);
	font-size: var(--ec-fs-sm);
	border-radius: var(--ec-radius);
	border: 1px solid transparent;
}

.ec-alert--ok {
	color: var(--ec-status-resolved-text);
	background: rgba(21, 128, 61, .10);
	border-color: rgba(21, 128, 61, .25);
}

.ec-alert--err {
	color: var(--ec-status-rejected-text);
	background: rgba(220, 38, 38, .10);
	border-color: rgba(220, 38, 38, .25);
}

/* Grid: form card (left) + how-to aside (right), final card spans both. */
.ec-submit__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--ec-space-5);
	align-items: start;
}

.ec-submit__card {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-4);
}

.ec-submit__card-title {
	margin: 0;
}

.ec-submit__card-sub {
	margin: calc(-1 * var(--ec-space-2)) 0 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

.ec-submit__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-5);
	min-width: 0;
}

.ec-submit__final {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-4);
}

/* Two-up field row (Building No. + Room No.). */
.ec-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ec-space-4);
}

/* Inputs (DESIGN-SYSTEM section 5): white bg, hairline border, navy focus ring. */
.ec-input {
	display: block;
}

.ec-input__label {
	display: block;
	margin-bottom: var(--ec-space-1);
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-text);
}

.ec-input__req {
	color: var(--ec-status-rejected-text); /* required marker in red */
	font-weight: 600;
}

.ec-input__control {
	width: 100%;
	padding: var(--ec-space-3);
	font-family: var(--ec-font);
	font-size: var(--ec-fs-base);
	color: var(--ec-text);
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ec-directory-select { position: relative; }
.ec-directory-select__control { position: relative; }
.ec-directory-select__control .ec-input__control { padding-right: 2.65rem; }
.ec-directory-select__control .ec-input__control:disabled { background: #f1f5f9; color: #5a6779; cursor: not-allowed; }
.ec-directory-select__clear { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: transparent; color: #5a6779; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.ec-directory-select__clear:hover,.ec-directory-select__clear:focus-visible { background: #e2e8f0; color: var(--ec-navy); outline: 2px solid var(--ec-navy); outline-offset: 1px; }
.ec-directory-select__list { position: absolute; z-index: 30; top: calc(100% - .25rem); left: 0; right: 0; max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; padding: .4rem; border: 1px solid #cbd5e1; border-radius: .65rem; background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.16); }
.ec-directory-select__group { position: sticky; top: -.4rem; z-index: 1; margin: .3rem -.4rem 0; padding: .55rem .75rem .35rem; background: #f8fafc; color: #475569; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ec-directory-select__option { padding: .65rem .75rem; border-radius: .45rem; color: #1e293b; cursor: pointer; }
.ec-directory-select__option:hover,.ec-directory-select__option.is-active { background: #eaf1f7; color: var(--ec-navy); }
.ec-directory-select__option[aria-selected="true"] { font-weight: 650; box-shadow: inset 3px 0 var(--ec-gold); }
.ec-directory-select__empty { padding: .85rem; color: #5a6779; font-size: .85rem; }
.ec-directory-select__help { display: block; margin-top: .4rem; color: #5a6779; font-size: .75rem; }
.ec-directory-floor[hidden] { display: none; }
.ec-directory-floor select:disabled { background: #f1f5f9; color: #5a6779; cursor: not-allowed; }

textarea.ec-input__control {
	resize: vertical;
	min-height: 120px;
}

.ec-input__control:focus {
	outline: none;
	border-color: var(--ec-navy);
	box-shadow: 0 0 0 3px rgba(15, 45, 92, .15);
}

/* Photo drop-zone: a <label for="ec-photo"> skin over the native input.
 * The real <input type="file"> stays in the DOM (visually hidden) and is
 * clicked through this label, so it works with JS off. */
.ec-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	text-align: center;
	padding: var(--ec-space-6) var(--ec-space-4);
	border: 1.5px dashed var(--ec-border);
	border-radius: var(--ec-radius);
	background: var(--ec-bg);
	color: var(--ec-text-muted);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.ec-dropzone:hover,
.ec-dropzone:focus-within {
	border-color: var(--ec-navy);
	background: var(--ec-surface);
}

/* Drag-over highlight (subtle), toggled by ec-shell.js. */
.ec-dropzone.is-dragover {
	border-color: var(--ec-navy);
	background: rgba(15, 45, 92, .04);
}

.ec-dropzone__icon {
	display: inline-flex;
	color: var(--ec-navy);
}

.ec-dropzone__icon svg {
	width: 28px;
	height: 28px;
}

.ec-dropzone__primary {
	font-size: var(--ec-fs-base);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-dropzone__hint {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

/* Hide the native input visually but keep it in the DOM + accessible. */
.ec-dropzone__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Selected-photo confirmation + local thumbnail preview. The image remains
 * browser-local until the complaint form itself is submitted. */
.ec-dropzone.is-has-file {
	border-color: rgba(21, 128, 61, .45);
	background: rgba(21, 128, 61, .04);
}

.ec-photo-preview {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--ec-space-4);
	align-items: stretch;
	margin-top: var(--ec-space-3);
	padding: var(--ec-space-3);
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow-sm);
}

.ec-photo-preview[hidden],
.ec-photo-preview__image[hidden],
.ec-photo-preview__fallback[hidden],
.ec-photo-preview__note[hidden] {
	display: none;
}

.ec-photo-preview__media {
	position: relative;
	min-height: 132px;
	background: var(--ec-bg);
	border: 1px solid var(--ec-border);
	border-radius: calc(var(--ec-radius) - 2px);
	overflow: hidden;
}

.ec-photo-preview__image {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: contain;
	background: var(--ec-bg);
}

.ec-photo-preview__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 132px;
	color: var(--ec-text-muted);
}

.ec-photo-preview__fallback svg {
	width: 34px;
	height: 34px;
}

.ec-photo-preview__details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.ec-photo-preview__status {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--ec-space-1);
	margin-bottom: var(--ec-space-1);
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	color: var(--ec-status-resolved-text);
}

.ec-photo-preview__status svg {
	width: 14px;
	height: 14px;
}

.ec-photo-preview__name {
	margin: 0;
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-navy);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ec-photo-preview__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ec-space-1);
	margin: var(--ec-space-1) 0 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-photo-preview__separator {
	color: var(--ec-border);
}

.ec-photo-preview__note {
	margin: var(--ec-space-2) 0 0;
	font-size: var(--ec-fs-xs);
	line-height: 1.45;
	color: var(--ec-text-muted);
}

.ec-photo-preview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-2);
	margin-top: var(--ec-space-3);
}

.ec-photo-preview__action {
	appearance: none;
	-webkit-appearance: none;
	padding: var(--ec-space-2) var(--ec-space-3);
	font-family: var(--ec-font);
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	line-height: 1.2;
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius-sm);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ec-photo-preview__action--change {
	color: var(--ec-navy);
}

.ec-photo-preview__action--change:hover,
.ec-photo-preview__action--change:focus-visible {
	border-color: var(--ec-navy);
	background: var(--ec-bg);
	box-shadow: 0 0 0 3px rgba(15, 45, 92, .12);
}

.ec-photo-preview__action--remove {
	color: var(--ec-status-rejected-text);
}

.ec-photo-preview__action--remove:hover,
.ec-photo-preview__action--remove:focus-visible {
	border-color: rgba(220, 38, 38, .35);
	background: rgba(220, 38, 38, .06);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}

/* Checklists with check icons (photo + final). */
.ec-checklist {
	list-style: none;
	margin: var(--ec-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-2);
}

.ec-checklist li {
	position: relative;
	padding-left: var(--ec-space-5);
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
	line-height: 1.4;
}

.ec-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 14px;
	height: 14px;
	background-color: var(--ec-status-resolved-text);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* "Why attach a photo?" info box (navy-tinted). */
.ec-infobox {
	padding: var(--ec-space-4);
	border: 1px solid rgba(15, 45, 92, .15);
	border-radius: var(--ec-radius);
	background: rgba(15, 45, 92, .05);
}

.ec-infobox__title {
	margin: 0 0 var(--ec-space-1);
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-infobox__body {
	margin: 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
}

/* How-to numbered steps (aside). */
.ec-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-4);
}

.ec-steps__item {
	display: flex;
	gap: var(--ec-space-3);
}

.ec-steps__num {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ec-navy);
	color: #FFFFFF;
	font-size: var(--ec-fs-sm);
	font-weight: 600;
}

.ec-steps__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ec-steps__head {
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-steps__desc {
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
	line-height: 1.4;
}

/* Privacy box inside the aside: the <details> already styled via Tailwind,
   but soften its edges to sit inside the card. */
.ec-submit__privacy .ec-privacy-notice {
	border: 0;
	padding: 0;
	background: transparent;
}

/* Consent checkbox row. */
.ec-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ec-space-2);
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
	line-height: 1.45;
}

.ec-consent__box {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--ec-navy);
}

/* Client-side validation message (toggled by app.js via the `hidden` class). */
.ec-client-error {
	margin: 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-status-rejected-text);
}

.ec-submit__btn {
	margin-top: var(--ec-space-1);
}

/* Responsive: stack to one column; aside drops below the form card. */
@media (max-width: 900px) {
	.ec-submit__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.ec-form-row {
		grid-template-columns: 1fr;
	}

	.ec-photo-preview {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--ec-space-3);
	}

	.ec-photo-preview__media,
	.ec-photo-preview__image,
	.ec-photo-preview__fallback {
		height: 84px;
		min-height: 84px;
	}

	.ec-photo-preview__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ec-photo-preview__action {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion: disable non-essential transitions/animations.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.ec-nav__item,
	.ec-iconbtn,
	.ec-btn,
	.ec-sidebar,
	.ec-auth__tab,
	.ec-auth__tab::after,
	.ec-auth__sub-tab,
	.ec-field__input,
	.ec-quick-tile,
	.ec-card__link,
	.ec-input__control,
	.ec-dropzone,
	.ec-photo-preview__action {
		transition: none !important;
	}
}

/* Admin frontend stabilization: predictable toolbar/table geometry and staff review. */
.ec-admin-complaints,
.ec-admin-complaints * { box-sizing: border-box; }
.ec-admin-complaints { width: min(1480px, 100%); min-width: 0; }
.ec-admin-complaints .ec-complaints__header { align-items: flex-end; flex-wrap: wrap; min-width: 0; }
.ec-admin-complaints .ec-complaints__header > div:first-child { flex: 1 1 420px; min-width: 0; }
.ec-admin-complaints .ec-complaints__context { flex: 0 0 auto; }
.ec-admin-complaints .ec-complaints-card,
.ec-admin-complaints .ec-complaints-table-wrap { width: 100%; min-width: 0; max-width: 100%; }
.ec-admin-filterbar { grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(128px, 160px)) auto; align-items: end; gap: .75rem; }
.ec-admin-filterbar > * { min-width: 0; }
.ec-admin-filterbar .ec-complaints-toolbar__actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: .45rem; min-height: 42px; white-space: nowrap; }
.ec-admin-filterbar .ec-case-button,
.ec-admin-filterbar .ec-complaints-reset { min-height: 42px; height: 42px; padding: 0 .8rem; }
.ec-admin-table { width: 100%; table-layout: fixed; }
.ec-admin-table .ec-admin-col-id { width: 19%; }
.ec-admin-table .ec-admin-col-submitted { width: 21%; }
.ec-admin-table .ec-admin-col-office { width: 13%; }
.ec-admin-table .ec-admin-col-priority { width: 13%; }
.ec-admin-table .ec-admin-col-status { width: 20%; }
.ec-admin-table .ec-admin-col-action { width: 14%; }
.ec-admin-table th,
.ec-admin-table td { max-width: none; vertical-align: middle; }
.ec-admin-table th { white-space: nowrap; }
.ec-admin-table td:first-child strong,
.ec-admin-table td:nth-child(2) { white-space: nowrap; }
.ec-admin-table .ec-view-btn { min-width: 0; width: auto; min-height: 38px; padding: .55rem .85rem; white-space: nowrap; }
.ec-case-admin-context { margin: 0 0 1rem; padding: .75rem .85rem; border-left: 3px solid var(--ec-gold); border-radius: 0 8px 8px 0; background: #f8fafc; color: #334155; font-size: .86rem; line-height: 1.5; }
.ec-routing-diagnostics { margin-top: .8rem; }
.ec-routing-diagnostics > summary { color: #475569; font-size: .76rem; font-weight: 650; }
.ec-routing-diagnostics[open] > summary { margin-bottom: .65rem; }

.ec-pending-staff__card { min-width: 0; }
.ec-staff-feedback { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid #bdd9cb; border-radius: 10px; background: #f0fdf4; color: #14532d; }
.ec-staff-feedback.hidden { display: none; }
.ec-pending-staff-table { width: 100%; table-layout: fixed; }
.ec-pending-staff-table th:nth-child(1) { width: 18%; }
.ec-pending-staff-table th:nth-child(2) { width: 24%; }
.ec-pending-staff-table th:nth-child(3) { width: 15%; }
.ec-pending-staff-table th:nth-child(4) { width: 17%; }
.ec-pending-staff-table th:nth-child(5) { width: 10%; }
.ec-pending-staff-table th:nth-child(6) { width: 16%; }
.ec-pending-staff-table td { vertical-align: middle; overflow-wrap: anywhere; }
.ec-pending-staff-table td:nth-child(4) { white-space: nowrap; }
.ec-staff-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.ec-staff-review-actions form { margin: 0; }
.ec-staff-review-actions .ec-case-button { min-height: 36px; padding: .45rem .65rem; }
.ec-case-button--danger { border-color: #b42318; background: #b42318; color: #fff; }
.ec-case-button--danger:hover,
.ec-case-button--danger:focus-visible { background: #8f1c13; color: #fff; }
.ec-staff-review-dialog { width: min(500px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 16px; color: var(--ec-text); box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.ec-staff-review-dialog::backdrop { background: rgba(2, 13, 31, .58); }
.ec-staff-review-dialog__panel { margin: 0; padding: 1.5rem; }
.ec-staff-review-dialog h2 { margin: .15rem 0 .75rem; color: var(--ec-navy); font-size: 1.3rem; }
.ec-staff-review-dialog p:not(.ec-complaints__eyebrow) { margin: 0; color: #475569; line-height: 1.6; }
.ec-staff-review-dialog__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
/* Privacy Review — optional Approve & Assign controls inside the decision dialog. */
.ec-privacy-assign { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.ec-privacy-assign label { display: block; margin-bottom: .35rem; color: #334155; font-size: .78rem; font-weight: 700; }
.ec-privacy-assign select { width: 100%; border: 1px solid #b9c6d6; border-radius: 9px; padding: .65rem .7rem; color: #172033; background: #fff; font: inherit; }
.ec-privacy-assign select:disabled { color: #64748b; background: #f1f5f9; }
.ec-privacy-assign__help { grid-column: 1 / -1; margin: 0; color: #475569; font-size: .8rem; line-height: 1.5; }
/* Governed deletion — Active | Deleted toggle, modal delete section, dialog, Deleted table. */
.ec-view-toggle { display: inline-flex; gap: .2rem; margin-top: .8rem; padding: .22rem; border: 1px solid #d3dce8; border-radius: 999px; background: #fff; }
.ec-view-toggle__item { padding: .4rem .95rem; border-radius: 999px; color: #334155; font-size: .82rem; font-weight: 700; text-decoration: none; }
.ec-view-toggle__item:hover { background: #eef2f7; }
.ec-view-toggle__item.is-active { background: var(--ec-navy); color: #fff; }
.ec-case-danger { border-color: #f1c6c2; background: #fff6f5; }
.ec-case-danger h3 { color: #8f1c13; }
.ec-delete-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .9rem 0 0; }
.ec-delete-facts dt { margin: 0; color: #53657a; font-size: .69rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ec-delete-facts dd { margin: .15rem 0 0; color: #172033; font-weight: 600; }
.ec-staff-review-dialog .ec-delete-warning { margin: .9rem 0 0; padding: .7rem .85rem; border-left: 3px solid #b42318; border-radius: 0 8px 8px 0; background: #fff1ef; color: #7a1f16; font-size: .85rem; line-height: 1.5; }
.ec-delete-field { margin-top: .9rem; }
.ec-delete-field label { display: block; margin-bottom: .35rem; color: #334155; font-size: .78rem; font-weight: 700; }
.ec-delete-field textarea { width: 100%; min-height: 90px; border: 1px solid #b9c6d6; border-radius: 9px; padding: .65rem .7rem; color: #172033; font: inherit; resize: vertical; box-sizing: border-box; }
.ec-delete-field textarea[aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, .12); }
.ec-deleted-table td[data-label="Reason"] { max-width: 260px; white-space: normal; }
.ec-deleted-history { margin-top: .35rem; color: #53657a; font-size: .75rem; }
.ec-deleted-history ol { margin: .3rem 0 0 1rem; padding: 0; }
.ec-case-badge[data-state="In Trash"] { background: #fff1ef; color: #8f1c13; }
.ec-case-badge[data-state="Restored"] { background: #ecfdf3; color: #166534; }
.ec-case-badge[data-state="Purged"] { background: #f1f5f9; color: #475569; }
@media (max-width: 520px) { .ec-delete-facts { grid-template-columns: 1fr; } }
/* Admin modal — privacy guidance shown in place of the assignment controls. */
.ec-case-admin-context--privacy { border-left-color: #b45309; background: #fff7ed; color: #7c2d12; }
.ec-case-admin-context--privacy a { display: inline-block; margin-top: .25rem; color: #9a3412; font-weight: 700; text-decoration: underline; }

@media (max-width: 1180px) {
	.ec-admin-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-admin-filterbar .ec-complaints-search { grid-column: 1 / -1; }
	.ec-admin-filterbar .ec-complaints-toolbar__actions { grid-column: 1 / -1; }
	.ec-pending-staff-table { table-layout: auto; }
}

@media (max-width: 760px) {
	.ec-admin-complaints .ec-complaints__context { white-space: normal; }
	.ec-admin-filterbar { grid-template-columns: 1fr; }
	.ec-admin-filterbar .ec-complaints-search,
	.ec-admin-filterbar .ec-complaints-toolbar__actions { grid-column: auto; }
	.ec-admin-filterbar .ec-complaints-toolbar__actions { align-items: stretch; flex-direction: row; }
	.ec-admin-filterbar .ec-case-button { flex: 1 1 auto; }
	.ec-admin-table colgroup { display: none; }
	.ec-admin-table td:first-child strong,
	.ec-admin-table td:nth-child(2) { white-space: normal; }
	.ec-admin-table .ec-view-btn { width: 100%; }
	.ec-pending-staff-table,
	.ec-pending-staff-table tbody,
	.ec-pending-staff-table tr,
	.ec-pending-staff-table td { display: block; width: 100%; }
	.ec-pending-staff-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ec-pending-staff-table tbody { display: grid; gap: .8rem; padding: .8rem; }
	.ec-pending-staff-table tr { padding: .65rem 1rem; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
	.ec-pending-staff-table td { display: grid; grid-template-columns: minmax(108px, 38%) minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border: 0; border-bottom: 1px solid #edf1f6; white-space: normal !important; }
	.ec-pending-staff-table td:last-child { border-bottom: 0; }
	.ec-pending-staff-table td::before { content: attr(data-label); color: #5a6779; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
	.ec-staff-review-actions { align-items: stretch; flex-direction: column; }
	.ec-staff-review-actions .ec-case-button { width: 100%; }
}

@media (max-width: 480px) {
	.ec-admin-filterbar .ec-complaints-toolbar__actions { flex-direction: column; }
	.ec-admin-filterbar .ec-complaints-reset { width: 100%; }
	.ec-staff-review-dialog__actions { align-items: stretch; flex-direction: column-reverse; }
	.ec-staff-review-dialog__actions .ec-case-button { width: 100%; }
}

/* Shared frontend Admin operations foundation. */
.ec-admin-complaints { max-width: 1480px; margin: 0 auto; }
.ec-admin-filterbar { display: grid; grid-template-columns: minmax(260px,2fr) repeat(3,minmax(150px,1fr)) auto; align-items: end; gap: .9rem; }
.ec-admin-filterbar .ec-complaints-toolbar__actions { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.ec-admin-filterbar .ec-complaints-reset { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 .8rem; }
.ec-admin-table { table-layout: auto; }
.ec-admin-table th { white-space: nowrap; }
.ec-admin-table td { vertical-align: middle; }
.ec-admin-table td:nth-child(3), .ec-admin-table td:nth-child(4) { max-width: 230px; }
.ec-admin-empty { margin: 1rem; padding: 3rem 1.25rem; text-align: center; }
.ec-admin-empty a { color: var(--ec-navy); font-weight: 700; }
.ec-table-pagination__controls a.ec-table-page { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; text-decoration: none; }
@media (max-width: 1180px) {
	.ec-admin-filterbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ec-admin-filterbar .ec-complaints-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.ec-admin-filterbar { grid-template-columns: 1fr; }
	.ec-admin-filterbar .ec-complaints-search { grid-column: auto; }
	.ec-admin-filterbar .ec-complaints-toolbar__actions { flex-wrap: wrap; }
	.ec-admin-table, .ec-admin-table tbody, .ec-admin-table tr, .ec-admin-table td { display: block; width: 100%; }
	.ec-admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ec-admin-table tbody { display: grid; gap: .8rem; }
	.ec-admin-table tr { padding: .65rem 1rem; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
	.ec-admin-table td { display: grid; grid-template-columns: minmax(105px,38%) 1fr; gap: .75rem; max-width: none !important; padding: .55rem 0; border: 0; border-bottom: 1px solid #edf1f6; }
	.ec-admin-table td:last-child { border-bottom: 0; }
	.ec-admin-table td::before { content: attr(data-label); color: #5a6779; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
	.ec-admin-table .ec-view-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ec-admin-complaints *, .ec-case-modal *, .ec-photo-lightbox * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Analytics-first office dashboard. */
.ec-office-overview {
	width: min(1180px, calc(100% - 2rem));
	margin: 0 auto;
	padding: clamp(1.25rem, 3vw, 2.5rem) 0 3rem;
	color: var(--ec-text, #172033);
}
.ec-office-overview__header,
.ec-dashboard-panel__heading,
.ec-dashboard-cta,
.ec-activity-list > li,
.ec-activity-list__main,
.ec-activity-list__meta { display: flex; }
.ec-office-overview__header { align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.ec-office-overview__eyebrow,
.ec-dashboard-panel__kicker { margin: 0 0 .3rem; color: var(--ec-navy, #0f2d5c); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ec-office-overview h1 { margin: 0; color: var(--ec-navy, #0f2d5c); font-size: clamp(1.75rem, 4vw, 2.45rem); line-height: 1.12; }
.ec-office-overview__header > div > p:last-child { margin: .45rem 0 0; color: #5a6779; }
/* Phase 6A: confirmed office long name under the dashboard heading (registry display_name). */
.ec-office-overview__office { margin: .35rem 0 0; color: var(--ec-navy, #0f2d5c); font-size: .95rem; font-weight: 600; }
.ec-office-overview__updated { margin: 0; color: #475569; font-size: .82rem; text-align: right; }
.ec-office-overview__updated span { display: block; color: #5a6779; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ec-dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ec-dashboard-kpi,
.ec-dashboard-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 45, 92, .055); }
.ec-dashboard-kpi { position: relative; min-width: 0; padding: 1.15rem 1.25rem; overflow: hidden; }
.ec-dashboard-kpi::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #64748b; content: ""; }
.ec-dashboard-kpi--pending::before { background: #d97706; }
.ec-dashboard-kpi--progress::before { background: #2563eb; }
.ec-dashboard-kpi--resolved::before { background: #15803d; }
.ec-dashboard-kpi__label { margin: 0; color: #475569; font-size: .8rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.ec-dashboard-kpi__value { margin: .35rem 0 .2rem; color: #0f172a; font-size: 2rem; font-weight: 750; line-height: 1; }
.ec-dashboard-kpi__help { margin: 0; color: #5a6779; font-size: .76rem; line-height: 1.4; }
.ec-dashboard-grid { display: grid; gap: 1rem; margin: 1rem 0; }
.ec-dashboard-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-dashboard-panel { min-width: 0; padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.ec-dashboard-panel__heading { align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.ec-dashboard-panel__heading h2 { margin: 0; color: #172033; font-size: 1.08rem; line-height: 1.3; }
.ec-dashboard-panel__heading > span { padding: .25rem .55rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ec-dashboard-panel__heading > a { color: var(--ec-navy, #0f2d5c); font-size: .84rem; font-weight: 700; text-decoration: none; }
.ec-dashboard-panel__heading > a:hover { text-decoration: underline; }
.ec-dashboard-bars,
.ec-category-list,
.ec-activity-list { margin: 0; padding: 0; list-style: none; }
.ec-dashboard-bars { display: grid; gap: 1rem; }
.ec-dashboard-bars li > div:first-child,
.ec-category-list li > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-size: .86rem; }
.ec-dashboard-bar,
.ec-category-meter { height: 8px; overflow: hidden; border-radius: 999px; background: #e8edf4; }
.ec-dashboard-bar span,
.ec-category-meter span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ec-navy, #0f2d5c); }
.ec-dashboard-bar .ec-dashboard-bar--high { background: #b91c1c; }
.ec-dashboard-bar .ec-dashboard-bar--medium { background: #b45309; }
.ec-dashboard-bar .ec-dashboard-bar--low { background: #0369a1; }
.ec-aging-list,
.ec-resolution-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.ec-resolution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-aging-list > div,
.ec-resolution-list > div { padding: .85rem; border-radius: 10px; background: #f8fafc; }
.ec-aging-list dt,
.ec-resolution-list dt { color: #5a6779; font-size: .75rem; line-height: 1.35; }
.ec-aging-list dd,
.ec-resolution-list dd { margin: .3rem 0 0; color: #172033; font-size: 1.15rem; font-weight: 750; }
.ec-dashboard-trend { margin: 1rem 0; }
.ec-dashboard-chart { height: 280px; }
.ec-trend-legend { display: flex; gap: 1rem; color: #475569; font-size: .78rem; }
.ec-trend-legend span::before { display: inline-block; width: 9px; height: 9px; margin-right: .35rem; border-radius: 50%; background: #0f2d5c; content: ""; }
.ec-trend-legend .ec-trend-legend__resolved::before { background: #15803d; }
.ec-dashboard-data-table { margin-top: 1rem; font-size: .8rem; }
.ec-dashboard-data-table summary { cursor: pointer; color: #475569; font-weight: 650; }
.ec-dashboard-data-table > div { max-height: 260px; margin-top: .6rem; overflow: auto; }
.ec-dashboard-data-table table { width: 100%; border-collapse: collapse; }
.ec-dashboard-data-table th,
.ec-dashboard-data-table td { padding: .4rem .55rem; border-bottom: 1px solid #e2e8f0; text-align: left; }
.ec-category-list { display: grid; gap: .8rem; counter-reset: category; }
.ec-category-list li { counter-increment: category; }
.ec-category-list li > div:first-child span::before { margin-right: .45rem; color: #94a3b8; content: counter(category) "."; font-variant-numeric: tabular-nums; }
.ec-category-meter span { background: var(--ec-gold, #f2a900); }
.ec-category-summary { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #e2e8f0; color: #5a6779; font-size: .8rem; }
.ec-category-summary > p,
.ec-category-summary details li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.ec-category-summary > p + p { margin-top: .35rem; }
.ec-category-summary strong { color: #475569; font-variant-numeric: tabular-nums; }
.ec-category-summary__legacy { padding: .45rem .6rem; border-radius: 8px; background: #f8fafc; }
.ec-category-summary details { margin-top: .55rem; }
.ec-category-summary summary { cursor: pointer; color: #475569; font-weight: 650; }
.ec-category-summary details ul { display: grid; gap: .35rem; margin: .55rem 0 0; padding: 0 0 0 1rem; }
.ec-category-summary details li { padding-left: .1rem; }
.ec-dashboard-empty,
.ec-dashboard-note { margin: 0; padding: 1rem; border-radius: 10px; background: #f8fafc; color: #5a6779; font-size: .86rem; }
.ec-dashboard-note { margin-top: .8rem; padding: .7rem .85rem; }
.ec-activity-list > li { align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #e8edf4; }
.ec-activity-list > li:last-child { border-bottom: 0; }
.ec-activity-list__main { align-items: flex-start; min-width: 0; gap: .75rem; }
.ec-activity-list__ref { flex: 0 0 auto; padding: .22rem .45rem; border-radius: 6px; background: #eef2f7; color: #334155; font-size: .7rem; font-weight: 700; }
.ec-activity-list__main strong { color: #172033; font-size: .86rem; }
.ec-activity-list__main p { max-width: 680px; margin: .18rem 0 0; overflow: hidden; color: #5a6779; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.ec-activity-list__meta { flex: 0 0 auto; align-items: center; gap: .75rem; color: #5a6779; font-size: .75rem; white-space: nowrap; }
.ec-dashboard-cta { align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding: 1rem; border-radius: 12px; background: #f1f5f9; }
.ec-dashboard-cta p { margin: 0; }
.ec-dashboard-cta p strong,
.ec-dashboard-cta p span { display: block; }
.ec-dashboard-cta p span { margin-top: .18rem; color: #5a6779; font-size: .78rem; }
.ec-dashboard-button { flex: 0 0 auto; padding: .65rem .9rem; border-radius: 8px; background: var(--ec-navy, #0f2d5c); color: #fff !important; font-size: .8rem; font-weight: 700; text-decoration: none; }
.ec-office-overview a:focus-visible,
.ec-office-overview summary:focus-visible { outline: 3px solid rgba(242, 169, 0, .65); outline-offset: 3px; }

@media (max-width: 900px) {
	.ec-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-dashboard-grid--halves { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.ec-office-overview { width: min(100% - 1rem, 1180px); }
	.ec-office-overview__header,
	.ec-dashboard-panel__heading,
	.ec-dashboard-cta,
	.ec-activity-list > li { align-items: stretch; flex-direction: column; }
	.ec-office-overview__updated { text-align: left; }
	.ec-dashboard-kpis { grid-template-columns: 1fr; }
	.ec-aging-list,
	.ec-resolution-list { grid-template-columns: 1fr; }
	.ec-dashboard-chart { height: 230px; }
	.ec-activity-list__meta { justify-content: space-between; white-space: normal; }
	.ec-activity-list__main p { white-space: normal; overflow-wrap: anywhere; }
	.ec-dashboard-button { align-self: flex-start; }
}

/* Production complaint operations modal and protected-photo lightbox. */
body.ec-modal-open { overflow: hidden; }
.ec-case-modal,
.ec-photo-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.25rem; background: rgba(7, 18, 38, .72); backdrop-filter: blur(3px); }
.ec-case-modal__dialog { display: flex; flex-direction: column; width: min(1080px, 100%); max-height: min(92vh, 900px); max-height: min(92dvh, 900px); overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; background: #f4f7fb; box-shadow: 0 28px 80px rgba(7,18,38,.32); }
.ec-case-modal__header { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid #dbe3ee; background: #fff; }
.ec-case-modal__eyebrow,
.ec-case-section__head p,
.ec-case-action__eyebrow,
.ec-case-exception__eyebrow { margin: 0 0 .25rem; color: #53657a; font-size: .69rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.ec-case-modal__identity h2 { margin: 0; color: #102c57; font-size: clamp(1.22rem, 3vw, 1.65rem); line-height: 1.2; }
.ec-case-modal__identity h2 span { font-variant-numeric: tabular-nums; }
.ec-case-modal__badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.ec-case-badge { display: inline-flex; align-items: center; min-height: 26px; padding: .28rem .6rem; border: 1px solid transparent; border-radius: 999px; color: #334155; background: #edf2f7; font-size: .72rem; font-weight: 750; line-height: 1; }
.ec-case-badge--pending { color: #7a500a; border-color: #f4d38c; background: #fff8e7; }
.ec-case-badge--in-progress { color: #174c9b; border-color: #b9d4ff; background: #edf5ff; }
.ec-case-badge--resolved,
.ec-case-badge--completed { color: #126536; border-color: #b8e2c7; background: #effaf3; }
.ec-case-badge--high { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.ec-case-badge--medium { color: #8a4b0f; border-color: #fed7aa; background: #fff7ed; }
.ec-case-badge--low { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.ec-case-modal__close,
#ec-photo-lightbox-close { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid #dbe3ee; border-radius: 10px; color: #475569; background: #fff; font-size: 1.65rem; line-height: 1; cursor: pointer; }
.ec-case-modal__content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ec-case-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .85fr); gap: 1rem; padding: 1rem; }
.ec-case-layout__main,
.ec-case-layout__side { display: grid; align-content: start; min-width: 0; gap: 1rem; }
.ec-case-section,
.ec-case-action,
.ec-case-exception,
.ec-case-admin-tools { min-width: 0; padding: 1rem; border: 1px solid #dbe3ee; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(15,45,92,.045); }
.ec-case-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.ec-case-section__head h3,
.ec-case-action h3,
.ec-case-exception h3,
.ec-case-override h3 { margin: 0; color: #172033; font-size: 1rem; line-height: 1.3; }
.ec-case-section__hint { color: #5a6779; font-size: .74rem; white-space: nowrap; }
.ec-case-evidence__button { position: relative; display: block; width: 100%; min-height: 240px; padding: 0; overflow: hidden; border: 1px solid #cfd9e6; border-radius: 12px; background-color: #f8fafc; background-image: linear-gradient(45deg,#e9eef5 25%,transparent 25%),linear-gradient(-45deg,#e9eef5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9eef5 75%),linear-gradient(-45deg,transparent 75%,#e9eef5 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; cursor: zoom-in; }
.ec-case-evidence__button img { display: block; width: 100%; height: min(42vh, 420px); object-fit: contain; }
.ec-case-evidence__button > span { position: absolute; right: .7rem; bottom: .7rem; padding: .38rem .58rem; border-radius: 7px; color: #fff; background: rgba(15,45,92,.9); font-size: .72rem; font-weight: 700; }
.ec-case-evidence__empty { display: grid; min-height: 180px; place-items: center; align-content: center; padding: 1.5rem; border: 1px dashed #cbd5e1; border-radius: 12px; color: #5a6779; background: #f8fafc; text-align: center; }
.ec-case-evidence__empty > span { color: #94a3b8; font-size: 2rem; }
.ec-case-evidence__empty strong { margin-top: .35rem; color: #475569; }
.ec-case-evidence__empty p { margin: .3rem 0 0; font-size: .8rem; }
.ec-case-description > p:last-child { max-width: 72ch; margin: 0; color: #26354a; font-size: .96rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.ec-case-information { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin: 0; }
.ec-case-information > div,
.ec-case-resolution__meta > div { min-width: 0; padding: .72rem .78rem; border-radius: 9px; background: #f7f9fc; }
.ec-case-information dt,
.ec-case-resolution__meta dt,
.ec-case-routing dt { color: #5a6779; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ec-case-information dd,
.ec-case-resolution__meta dd,
.ec-case-routing dd { margin: .25rem 0 0; color: #26354a; font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.ec-case-status-copy { margin: 0 0 1rem; color: #526071; font-size: .82rem; line-height: 1.5; }
.ec-case-progress { display: flex; margin: 0; padding: 0; list-style: none; }
.ec-case-progress__step { position: relative; flex: 1; min-width: 0; color: #5f6b7b; font-size: .68rem; font-weight: 700; text-align: center; }
.ec-case-progress__step:not(:last-child)::after { position: absolute; z-index: 0; top: 12px; left: calc(50% + 15px); width: calc(100% - 30px); height: 2px; background: #dbe3ee; content: ""; }
.ec-case-progress__marker { position: relative; z-index: 1; display: grid; width: 26px; height: 26px; margin: 0 auto .45rem; place-items: center; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; color: #fff; font-size: .68rem; }
.ec-case-progress__step--complete { color: #36506f; }
.ec-case-progress__step--complete .ec-case-progress__marker { border-color: #15803d; background: #15803d; }
.ec-case-progress__step--complete:not(:last-child)::after { background: #8dccaa; }
.ec-case-progress__step--current { color: #0f2d5c; }
.ec-case-progress__step--current .ec-case-progress__marker { border: 7px solid #0f2d5c; box-shadow: 0 0 0 3px rgba(242,169,0,.35); }
.ec-case-resolution { border-left: 4px solid #15803d; }
.ec-case-resolution__text { margin: 0; color: #26354a; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; }
.ec-case-resolution__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin: .9rem 0 0; }
.ec-case-action { border-top: 4px solid #0f2d5c; background: #fff; }
.ec-case-action__help,
.ec-case-exception > p:not(.ec-case-exception__eyebrow) { margin: .4rem 0 .9rem; color: #5a6779; font-size: .8rem; line-height: 1.5; }
.ec-case-field { margin: .9rem 0; }
.ec-case-field label,
.ec-case-exception label,
.ec-case-override label { display: block; margin-bottom: .35rem; color: #334155; font-size: .78rem; font-weight: 700; }
.ec-case-field textarea,
.ec-case-exception textarea,
.ec-case-override select { width: 100%; border: 1px solid #b9c6d6; border-radius: 9px; padding: .65rem .7rem; color: #172033; background: #fff; font: inherit; }
.ec-case-field textarea { min-height: 128px; resize: vertical; }
.ec-case-field textarea[aria-invalid="true"],
.ec-case-exception textarea[aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,.12); }
.ec-case-field > p { margin: .35rem 0 0; color: #5a6779; font-size: .72rem; line-height: 1.4; }
.ec-case-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; padding: .65rem .9rem; font-size: .8rem; font-weight: 750; cursor: pointer; }
.ec-case-button--primary { color: #fff; background: #0f2d5c; }
.ec-case-button--primary:hover { background: #173f76; }
.ec-case-button--secondary { color: #334155; border-color: #b9c6d6; background: #fff; }
.ec-case-button:disabled { opacity: .58; cursor: wait; }
.ec-case-form-message { min-height: 1.2em; margin: .55rem 0 0; color: #5a6779; font-size: .75rem; }
.ec-case-form-message.is-error { color: #a61b1b; }
.ec-case-form-message.is-success { color: #126536; }
.ec-case-routing dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; }
.ec-case-routing dl > div { padding: .65rem; border-radius: 9px; background: #f7f9fc; }
.ec-case-timeline { margin: 0; padding: 0; list-style: none; }
.ec-case-timeline li { position: relative; display: grid; grid-template-columns: 17px minmax(0,1fr); gap: .65rem; padding-bottom: .9rem; }
.ec-case-timeline li::before { position: absolute; top: 15px; bottom: 0; left: 7px; width: 2px; background: #dbe3ee; content: ""; }
.ec-case-timeline li:last-child { padding-bottom: 0; }
.ec-case-timeline li:last-child::before { display: none; }
.ec-case-timeline__marker { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; border: 3px solid #fff; border-radius: 50%; background: #0f2d5c; box-shadow: 0 0 0 1px #0f2d5c; }
.ec-case-timeline strong { color: #26354a; font-size: .8rem; }
.ec-case-timeline__meta,
.ec-case-timeline__note { margin: .18rem 0 0; color: #5a6779; font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.ec-case-timeline__note { color: #45566d; white-space: pre-wrap; }
.ec-case-exception { border-color: #e5d7bb; background: #fffcf5; }
.ec-case-exception textarea { min-height: 84px; resize: vertical; }
.ec-case-exception .ec-case-button { margin-top: .6rem; }
.ec-case-admin-tools summary { cursor: pointer; color: #0f2d5c; font-size: .82rem; font-weight: 750; }
.ec-case-admin-tools[open] summary { margin-bottom: 1rem; }
.ec-case-admin-tools .ec-routing-review { margin-bottom: 1rem; }
.ec-case-override > div { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .65rem; }
.ec-case-override .ec-case-button { grid-column: 1 / -1; }
.ec-case-loading,
.ec-case-error { display: flex; min-height: 360px; align-items: center; justify-content: center; gap: .8rem; padding: 2rem; color: #526071; background: #fff; text-align: left; }
.ec-case-loading div,
.ec-case-error { flex-direction: column; }
.ec-case-loading strong,
.ec-case-loading span,
.ec-case-error strong,
.ec-case-error span { display: block; }
.ec-case-loading span,
.ec-case-error span { margin-top: .25rem; font-size: .8rem; }
.ec-case-loading__spinner { width: 30px; height: 30px; border: 3px solid #dbe3ee; border-top-color: #0f2d5c; border-radius: 50%; animation: ec-spin .8s linear infinite; }
.ec-case-error { text-align: center; }
.ec-case-error button { margin-top: .75rem; border: 1px solid #b9c6d6; border-radius: 8px; padding: .55rem .8rem; color: #0f2d5c; background: #fff; font-weight: 700; cursor: pointer; }
.ec-photo-lightbox { z-index: 1100; background: rgba(3,10,23,.92); }
.ec-photo-lightbox__dialog { display: flex; flex-direction: column; width: min(1400px,100%); height: min(94vh,1000px); height: min(94dvh,1000px); overflow: hidden; border-radius: 14px; background: #101827; box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.ec-photo-lightbox header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; color: #fff; background: #0a1220; }
.ec-photo-lightbox h2 { margin: 0; font-size: 1rem; }
.ec-photo-lightbox #ec-photo-lightbox-close { color: #fff; border-color: #526071; background: #172033; }
.ec-photo-lightbox__stage { display: grid; min-height: 0; flex: 1; place-items: center; overflow: auto; padding: 1rem; touch-action: pinch-zoom; }
.ec-photo-lightbox__stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ec-photo-lightbox__stage p { color: #fff; }
.ec-case-modal button:focus-visible,
.ec-case-modal textarea:focus-visible,
.ec-case-modal select:focus-visible,
.ec-case-modal summary:focus-visible,
.ec-photo-lightbox button:focus-visible { outline: 3px solid rgba(242,169,0,.8); outline-offset: 3px; }
.ec-track-progress-card { margin: 1rem 0; }
.ec-track-progress-card__copy { margin: -.2rem 0 1rem; color: #5a6779; font-size: .86rem; line-height: 1.5; }

@media (max-width: 860px) {
	.ec-case-layout { grid-template-columns: 1fr; }
	.ec-case-layout__side { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ec-case-action,
	.ec-case-history,
	.ec-case-exception,
	.ec-case-admin-tools { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.ec-case-modal { place-items: stretch; padding: 0; }
	.ec-case-modal__dialog { width: 100%; max-height: 100vh; max-height: 100dvh; border: 0; border-radius: 0; }
	.ec-case-modal__header { padding: .9rem 1rem; }
	.ec-case-layout { padding: .65rem; }
	.ec-case-layout__side { grid-template-columns: 1fr; }
	.ec-case-action,
	.ec-case-history,
	.ec-case-exception,
	.ec-case-admin-tools { grid-column: auto; }
	.ec-case-information,
	.ec-case-resolution__meta,
	.ec-case-routing dl { grid-template-columns: 1fr; }
	.ec-case-progress { display: grid; gap: .5rem; }
	.ec-case-progress__step { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .55rem; text-align: left; }
	.ec-case-progress__marker { margin: 0; }
	.ec-case-progress__step:not(:last-child)::after { top: 25px; bottom: -.52rem; left: 12px; width: 2px; height: auto; }
	.ec-case-evidence__button { min-height: 180px; }
	.ec-case-evidence__button img { height: min(36vh,320px); }
	.ec-case-button { width: 100%; }
	.ec-photo-lightbox { padding: 0; }
	.ec-photo-lightbox__dialog { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
}

/* ================================================================== *
 * STEP 5 — Track / Complaint detail page
 * (summary card + Details / Progress-Timeline two-column + feedback).
 * New class names only; does not alter Step 1-4 rules.
 * ================================================================== */

/* Extra alert tones used by the Track banner (info / warn). */
.ec-alert--info {
	color: var(--ec-navy);
	background: rgba(15, 45, 92, .08);
	border-color: rgba(15, 45, 92, .18);
}

.ec-alert--warn {
	color: var(--ec-status-pending-text);
	background: rgba(183, 121, 31, .10);
	border-color: rgba(183, 121, 31, .25);
}

.ec-track__head {
	margin-bottom: var(--ec-space-5);
}

.ec-track__title {
	margin: 0;
	font-size: var(--ec-fs-2xl);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-track__subtitle {
	margin: var(--ec-space-2) 0 0;
	color: var(--ec-text-muted);
	font-size: var(--ec-fs-sm);
}

/* Priority pill (template-parts/priority-badge.php). Mirrors .ec-pill. */
.ec-prio-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ec-space-2);
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	border-radius: var(--ec-radius-sm);
	white-space: nowrap;
}

.ec-prio-pill--high   { background: rgba(220, 38, 38, .15); color: var(--ec-prio-high-text); }
.ec-prio-pill--medium { background: rgba(183, 121, 31, .15); color: var(--ec-prio-medium-text); }
.ec-prio-pill--low    { background: rgba(21, 128, 61, .15); color: var(--ec-prio-low-text); }

/* Top summary card --------------------------------------------------- */
.ec-track-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ec-space-4);
	margin-bottom: var(--ec-space-5);
}

.ec-track-summary__id {
	margin: 0;
	font-size: var(--ec-fs-2xl);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-track-summary__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-5);
	margin-top: var(--ec-space-3);
}

.ec-track-summary__metaitem {
	display: flex;
	flex-direction: column;
}

.ec-track-summary__metalabel {
	font-size: var(--ec-fs-xs);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ec-text-muted);
}

.ec-track-summary__metaval {
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-text);
}

/* Notifications page list (redesign — presentation only) ------------ */
.ec-notifs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ec-notifs__item {
	border-bottom: 1px solid var(--ec-border);
}

.ec-notifs__item:last-child {
	border-bottom: 0;
}

.ec-notifs__link {
	display: flex;
	align-items: flex-start;
	gap: var(--ec-space-3);
	padding: var(--ec-space-3) var(--ec-space-2);
	text-decoration: none;
	color: inherit;
	border-radius: var(--ec-radius-sm);
	transition: background-color 150ms ease;
}

a.ec-notifs__link:hover,
a.ec-notifs__link:focus-visible {
	background: var(--ec-surface-2, rgba(15, 23, 42, .04));
}

.ec-notifs__link--static {
	cursor: default;
}

.ec-notifs__unread {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--ec-gold);
}

.ec-notifs__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.ec-notifs__item.is-unread .ec-notifs__msg {
	font-weight: 600;
}

.ec-notifs__msg {
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
}

.ec-notifs__time {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
	margin-top: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ec-notifs__link {
		transition: none;
	}
}

/* Structured notification center and compact dashboard updates. */
.ec-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ec-notifications-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ec-notifications-mark-all { min-height: 40px; border: 1px solid #b9c6d6; border-radius: 9px; padding: .55rem .8rem; color: #0f2d5c; background: #fff; font-size: .78rem; font-weight: 750; cursor: pointer; }
.ec-notifications-mark-all:hover { background: #f4f7fb; }
.ec-notifications-mark-all:focus-visible,
.ec-notifs__mark-read:focus-visible,
.ec-notifs__action:focus-visible { outline: 3px solid rgba(242,169,0,.7); outline-offset: 3px; }
.ec-notifications-card { overflow: hidden; }
.ec-notifs__item { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: .8rem; padding: 1rem .7rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.ec-notifs__item.is-unread { background: #f7faff; box-shadow: inset 3px 0 0 #d89b00; }
.ec-notifs__marker { display: flex; justify-content: center; padding-top: .3rem; }
.ec-notifs__marker span { width: 9px; height: 9px; border: 2px solid #94a3b8; border-radius: 50%; background: #fff; }
.ec-notifs__item.is-unread .ec-notifs__marker span { border-color: #d89b00; background: #d89b00; box-shadow: 0 0 0 3px rgba(216,155,0,.16); }
.ec-notifs__heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ec-notifs__title { margin: 0; color: #172033; font-size: .92rem; line-height: 1.35; }
.ec-notifs__item.is-unread .ec-notifs__title { font-weight: 800; }
.ec-notifs__unread-label { padding: .18rem .42rem; border-radius: 999px; color: #704900; background: #fff2c7; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ec-notifs__reference { margin: .2rem 0 0; color: #0f2d5c; font-size: .74rem; font-weight: 800; letter-spacing: .025em; }
.ec-notifs__msg { margin: .35rem 0 0; color: #475569; font-size: .82rem; line-height: 1.55; overflow-wrap: anywhere; }
.ec-notifs__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; margin-top: .65rem; }
.ec-notifs__time { color: #5a6779; font-size: .7rem; }
.ec-notifs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ec-notifs__mark-read { border: 0; padding: .25rem; color: #526071; background: transparent; font-size: .72rem; font-weight: 700; cursor: pointer; }
.ec-notifs__action { color: #0f2d5c; font-size: .74rem; font-weight: 800; text-decoration: none; }
.ec-notifs__action:hover { text-decoration: underline; }
.ec-update-item { display: grid; gap: .2rem; padding: .65rem 0 .75rem .75rem; border-bottom: 1px solid #eef2f7; border-left: 3px solid transparent; color: #526071; }
.ec-update-item.is-unread { border-left-color: #d89b00; color: #26354a; }
.ec-update-item__title { color: #26354a; font-size: .78rem; }
.ec-update-item__reference { color: #0f2d5c; font-size: .68rem; font-weight: 800; }
.ec-update-item__message { font-size: .74rem; line-height: 1.45; }
.ec-update-item__time { color: #5f6b7b; font-size: .66rem; }
.ec-update-item__action,
.ec-update-item__read { justify-self: start; border: 0; padding: .15rem 0; color: #0f2d5c; background: transparent; font-size: .68rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.ec-update-item__action:hover,
.ec-update-item__read:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.ec-notifications-header { align-items: flex-start; flex-direction: column; }
	.ec-notifications-mark-all { width: 100%; }
	.ec-notifs__item { padding: .9rem .45rem; }
	.ec-notifs__footer { align-items: flex-start; flex-direction: column; }
}

.ec-track-summary__status {
	margin-top: var(--ec-space-1);
}

/* Two-column grid: Details (left) + Timeline (right) ----------------- */
.ec-track-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--ec-space-5);
	align-items: start;
}

.ec-track-grid__left {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-5);
}

/* Details card ------------------------------------------------------- */
.ec-track-dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ec-space-4);
	margin: var(--ec-space-4) 0 0;
}

.ec-track-dl__row--full {
	grid-column: 1 / -1;
}

.ec-track-dl__term {
	margin: 0 0 var(--ec-space-1);
	font-size: var(--ec-fs-xs);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ec-text-muted);
}

.ec-track-dl__desc {
	margin: 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
}

.ec-track-dl__desc--text {
	white-space: pre-line;
	line-height: 1.55;
}

.ec-track-dl__byline {
	margin: var(--ec-space-2) 0 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

/* Attachment (single photo) ----------------------------------------- */
.ec-attach {
	margin-top: var(--ec-space-5);
	padding-top: var(--ec-space-4);
	border-top: 1px solid var(--ec-border);
}

.ec-attach__label {
	margin: 0 0 var(--ec-space-2);
	font-size: var(--ec-fs-xs);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ec-text-muted);
}

.ec-attach__thumb {
	display: inline-block;
	border-radius: var(--ec-radius);
	overflow: hidden;
	border: 1px solid var(--ec-border);
	transition: box-shadow .15s ease;
}

.ec-attach__thumb:hover {
	box-shadow: var(--ec-shadow);
}

.ec-attach__img {
	display: block;
	max-height: 280px;
	max-width: 100%;
	height: auto;
}

.ec-attach__none {
	margin: 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

/* Need-Help box ------------------------------------------------------ */
.ec-help__title {
	margin: 0 0 var(--ec-space-2);
	font-size: var(--ec-fs-base);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-help__body {
	margin: 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
	line-height: 1.55;
}

.ec-help__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-4);
	margin: var(--ec-space-3) 0 0;
}

.ec-help__links a {
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-navy);
	text-decoration: none;
}

.ec-help__links a:hover {
	color: var(--ec-gold-600);
}

/* Progress Timeline -------------------------------------------------- */
.ec-timeline {
	list-style: none;
	margin: var(--ec-space-4) 0 0;
	padding: 0;
}

.ec-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--ec-space-3);
	padding-bottom: var(--ec-space-5);
}

/* Vertical connector line between dots. */
.ec-timeline__item::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 26px;
	bottom: 0;
	width: 2px;
	background: var(--ec-border);
}

.ec-timeline__item:last-child {
	padding-bottom: 0;
}

.ec-timeline__item:last-child::before {
	display: none;
}

.ec-timeline__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	background: var(--ec-text-muted);
	box-shadow: 0 0 0 4px var(--ec-surface);
}

.ec-timeline__dot svg {
	width: 14px;
	height: 14px;
}

.ec-timeline__dot--done     { background: var(--ec-status-resolved); }
.ec-timeline__dot--progress { background: var(--ec-status-progress); }
.ec-timeline__dot--pending  { background: var(--ec-status-pending); }
.ec-timeline__dot--review   { background: var(--ec-status-review); }
.ec-timeline__dot--rejected { background: var(--ec-status-rejected); }

/* Current (latest) entry: subtle ring emphasis. */
.ec-timeline__item--current .ec-timeline__dot {
	box-shadow: 0 0 0 4px var(--ec-surface), 0 0 0 7px rgba(15, 45, 92, .14);
}

.ec-timeline__label {
	margin: 0;
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-text);
	padding-top: 3px;
}

.ec-timeline__time {
	margin: 2px 0 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-timeline__note {
	margin: var(--ec-space-1) 0 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
	line-height: 1.5;
}

/* Admin routing review and append-only routing history ---------------- */
.ec-routing-review,
.ec-routing-history {
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius-lg);
	padding: var(--ec-space-4);
	background: var(--ec-surface);
}

.ec-routing-review {
	border-top: 4px solid var(--ec-gold);
}

.ec-routing-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-3);
	margin-bottom: var(--ec-space-4);
}

.ec-routing-review__title,
.ec-routing-history__title {
	margin: 0;
	font-size: var(--ec-fs-md);
	font-weight: 700;
	color: var(--ec-navy);
}

.ec-routing-review__priority {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: var(--ec-fs-xs);
	font-weight: 700;
	color: var(--ec-navy);
	background: var(--ec-gold-100);
}

.ec-routing-review__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ec-space-4);
	margin: 0;
}

.ec-routing-review__grid dt {
	font-size: var(--ec-fs-xs);
	font-weight: 600;
	color: var(--ec-text-muted);
}

.ec-routing-review__grid dd {
	margin: 2px 0 0;
	font-size: var(--ec-fs-sm);
	font-weight: 600;
	color: var(--ec-text);
	overflow-wrap: anywhere;
}

.ec-routing-review__note,
.ec-routing-empty {
	margin: 4px 0 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-routing-scores {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ec-space-2);
	margin-top: var(--ec-space-4);
}

/* Office score cells are rendered by app.js inside this wrapper; display:contents
   keeps them as direct grid items so the 4-column layout is unchanged. */
.ec-routing-scores .ec-routing-scores__offices {
	display: contents;
}

.ec-routing-scores > div,
.ec-routing-scores__offices > div {
	border-radius: var(--ec-radius-md);
	padding: var(--ec-space-3);
	text-align: center;
	background: var(--ec-bg);
}

.ec-routing-scores span,
.ec-routing-scores strong {
	display: block;
}

.ec-routing-scores span {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-routing-scores strong {
	margin-top: 2px;
	font-size: var(--ec-fs-lg);
	color: var(--ec-navy);
}

.ec-routing-history__list {
	list-style: none;
	margin: var(--ec-space-4) 0 0;
	padding: 0;
}

.ec-routing-history__item {
	position: relative;
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: var(--ec-space-3);
	padding-bottom: var(--ec-space-4);
}

.ec-routing-history__item::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 17px;
	bottom: 0;
	width: 2px;
	background: var(--ec-border);
}

.ec-routing-history__item:last-child {
	padding-bottom: 0;
}

.ec-routing-history__item:last-child::before {
	display: none;
}

.ec-routing-history__marker {
	position: relative;
	z-index: 1;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border: 3px solid var(--ec-surface);
	border-radius: 50%;
	background: var(--ec-navy);
	box-shadow: 0 0 0 1px var(--ec-navy);
}

.ec-routing-history__item--shadow .ec-routing-history__marker {
	background: var(--ec-text-muted);
	box-shadow: 0 0 0 1px var(--ec-text-muted);
}

.ec-routing-history__title {
	font-size: var(--ec-fs-sm);
}

.ec-routing-history__summary,
.ec-routing-history__meta,
.ec-routing-history__time {
	margin: 2px 0 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ec-routing-history__summary {
	font-size: var(--ec-fs-sm);
	color: var(--ec-text);
}

.ec-routing-history__meta strong {
	color: var(--ec-text);
}

#ec-modal-close:focus-visible,
.ec-assign-btn:focus-visible,
.ec-view-btn:focus-visible {
	outline: 3px solid var(--ec-gold);
	outline-offset: 3px;
}

@media (max-width: 560px) {
	.ec-routing-review__grid,
	.ec-routing-scores {
		grid-template-columns: 1fr 1fr;
	}
}

/* Give Feedback section --------------------------------------------- */
.ec-track-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	margin-top: var(--ec-space-5);
}

.ec-track-feedback__title {
	margin: 0;
	font-size: var(--ec-fs-lg);
	font-weight: 600;
	color: var(--ec-navy);
}

.ec-track-feedback__body {
	margin: var(--ec-space-1) 0 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

/* Responsive: stack to one column on tablet/mobile. */
@media (max-width: 900px) {
	.ec-track-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.ec-track-dl {
		grid-template-columns: 1fr;
	}

	.ec-track-feedback {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-attach__thumb {
		transition: none !important;
	}
}

/* Clickable Recent-Complaints row (navigation only; non-linked rows unaffected). */
.ec-recent__rowlink,
.ec-recent__rowinner {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	width: 100%;
}

.ec-recent__rowlink {
	text-decoration: none;
	color: inherit;
	margin: calc(var(--ec-space-2) * -1) calc(var(--ec-space-3) * -1);
	padding: var(--ec-space-2) var(--ec-space-3);
	border-radius: var(--ec-radius-sm);
	transition: background-color 150ms ease;
}

.ec-recent__rowlink:hover,
.ec-recent__rowlink:focus-visible {
	background: var(--ec-bg);
}

/* Track-page "My Complaints" list spacing. */
.ec-track-mylist {
	padding-top: var(--ec-space-2);
}

@media (prefers-reduced-motion: reduce) {
	.ec-recent__rowlink {
		transition: none !important;
	}
}

/* ================================================================== *
 * Staff Complaint List — focused office operations workspace.
 * Scoped to .ec-complaints so the legacy Dashboard/admin tables retain
 * their existing presentation until their dedicated migration phase.
 * ================================================================== */

.ec-complaints {
	max-width: 1180px;
	margin: 0 auto;
}

.ec-complaints [hidden] {
	display: none !important;
}

.ec-complaints .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ec-complaints__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ec-space-5);
	margin-bottom: var(--ec-space-5);
}

.ec-complaints__eyebrow {
	margin: 0 0 var(--ec-space-1);
	font-size: var(--ec-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
}

.ec-complaints__title {
	margin: 0;
	font-size: var(--ec-fs-2xl);
	line-height: 1.2;
	font-weight: 650;
	color: var(--ec-navy);
}

.ec-complaints__description {
	margin: var(--ec-space-2) 0 0;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

.ec-complaints__context {
	display: flex;
	align-items: baseline;
	gap: var(--ec-space-2);
	padding-bottom: 2px;
	white-space: nowrap;
}

.ec-complaints__count {
	font-size: var(--ec-fs-xl);
	font-weight: 700;
	line-height: 1;
	color: var(--ec-navy);
}

.ec-complaints__count-label {
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-complaints-card {
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius);
	box-shadow: var(--ec-shadow-sm);
	overflow: hidden;
}

.ec-complaints-toolbar {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 170px 170px auto;
	align-items: end;
	gap: var(--ec-space-3);
	padding: var(--ec-space-4) var(--ec-space-5);
	background: #FAFBFD;
	border-bottom: 1px solid var(--ec-border);
}

.ec-complaints-control__label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ec-fs-xs);
	font-weight: 650;
	color: var(--ec-text);
}

.ec-complaints-search__field {
	position: relative;
}

.ec-complaints-search__field svg {
	position: absolute;
	left: 12px;
	top: 50%;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--ec-text-muted);
	stroke-width: 2;
	pointer-events: none;
}

.ec-complaints-search input,
.ec-complaints-filter select {
	width: 100%;
	height: 42px;
	margin: 0;
	border: 1px solid #CFD5E1;
	border-radius: var(--ec-radius-sm);
	background-color: var(--ec-surface);
	color: var(--ec-text);
	font-family: var(--ec-font);
	font-size: var(--ec-fs-sm);
	line-height: 1.2;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ec-complaints-search input {
	padding: 0 12px 0 38px;
}

.ec-complaints-search input::placeholder {
	color: #8A93A3;
}

.ec-complaints-filter {
	position: relative;
}

.ec-complaints-filter::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 17px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--ec-text-muted);
	border-bottom: 1.5px solid var(--ec-text-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.ec-complaints-filter select {
	appearance: none;
	padding: 0 34px 0 12px;
	cursor: pointer;
}

.ec-complaints-search input:focus-visible,
.ec-complaints-filter select:focus-visible,
.ec-complaints-reset:focus-visible,
.ec-complaints-export:focus-visible,
.ec-complaint-id:focus-visible,
.ec-table-action:focus-visible,
.ec-table-page:focus-visible,
.ec-complaints-message button:focus-visible {
	outline: 3px solid rgba(242, 169, 0, .35);
	outline-offset: 2px;
	border-color: var(--ec-navy);
	box-shadow: 0 0 0 1px var(--ec-navy);
}

.ec-complaints-toolbar__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ec-space-2);
}

.ec-complaints-reset,
.ec-complaints-export {
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	padding: 0 var(--ec-space-3);
	border-radius: var(--ec-radius-sm);
	font-family: var(--ec-font);
	font-size: var(--ec-fs-sm);
	font-weight: 650;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}

.ec-complaints-reset {
	border: 1px solid transparent;
	background: transparent;
	color: var(--ec-text-muted);
}

.ec-complaints-reset:hover {
	color: var(--ec-navy);
	background: rgba(15, 45, 92, .05);
}

.ec-complaints-export {
	border: 1px solid var(--ec-navy);
	background: var(--ec-navy);
	color: #FFFFFF;
}

.ec-complaints-export:hover {
	background: var(--ec-navy-700);
	color: #FFFFFF;
}

.ec-complaints-export svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ec-complaints-export-note {
	margin: 0;
	padding: 8px var(--ec-space-5);
	border-bottom: 1px solid var(--ec-border);
	background: var(--ec-surface);
	font-size: 11px;
	color: var(--ec-text-muted);
}

.ec-complaints-feedback {
	min-height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ec-space-6);
}

.ec-complaints-loading,
.ec-complaints-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	max-width: 430px;
	text-align: center;
	font-size: var(--ec-fs-sm);
	color: var(--ec-text-muted);
}

.ec-complaints-message strong {
	font-size: var(--ec-fs-base);
	color: var(--ec-text);
}

.ec-complaints-message button {
	margin-top: var(--ec-space-2);
	padding: 8px 14px;
	border: 1px solid var(--ec-navy);
	border-radius: var(--ec-radius-sm);
	background: var(--ec-surface);
	color: var(--ec-navy);
	font: 650 var(--ec-fs-sm)/1 var(--ec-font);
	cursor: pointer;
}

.ec-complaints-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--ec-border);
	border-top-color: var(--ec-gold);
	border-radius: 50%;
	animation: ec-complaints-spin .75s linear infinite;
}

@keyframes ec-complaints-spin {
	to { transform: rotate(360deg); }
}

.ec-complaints-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.ec-complaints-table-wrap .dataTables_wrapper {
	width: 100%;
}

table.ec-complaints-table,
.dataTables_wrapper table.ec-complaints-table {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse !important;
	table-layout: fixed;
	font-family: var(--ec-font);
}

.ec-complaints-table thead th,
.dataTables_wrapper .ec-complaints-table thead th {
	position: relative;
	padding: 13px var(--ec-space-4) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ec-border) !important;
	background-color: #F7F8FB !important;
	background-image: none !important;
	color: #596273;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .055em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.ec-complaints-table thead th.sorting,
.ec-complaints-table thead th.sorting_asc,
.ec-complaints-table thead th.sorting_desc {
	padding-right: 30px !important;
	cursor: pointer;
}

.ec-complaints-table thead th.sorting::after,
.ec-complaints-table thead th.sorting_asc::after,
.ec-complaints-table thead th.sorting_desc::after {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #9AA2B1;
}

.ec-complaints-table thead th.sorting::after { content: "↕"; }
.ec-complaints-table thead th.sorting_asc::after { content: "↑"; color: var(--ec-navy); }
.ec-complaints-table thead th.sorting_desc::after { content: "↓"; color: var(--ec-navy); }

.ec-complaints-table thead th:focus-visible {
	outline: 3px solid rgba(242, 169, 0, .45);
	outline-offset: -3px;
}

.ec-complaints-table th:nth-child(1) { width: 18%; }
.ec-complaints-table th:nth-child(2) { width: 24%; }
.ec-complaints-table th:nth-child(3) { width: 16%; }
.ec-complaints-table th:nth-child(4) { width: 13%; }
.ec-complaints-table th:nth-child(5) { width: 16%; }
.ec-complaints-table th:nth-child(6) { width: 13%; }

.ec-complaints-table tbody td,
.dataTables_wrapper .ec-complaints-table tbody td {
	padding: 15px var(--ec-space-4) !important;
	border: 0 !important;
	border-bottom: 1px solid #EDF0F5 !important;
	background: var(--ec-surface);
	color: var(--ec-text);
	font-size: var(--ec-fs-sm);
	vertical-align: middle;
}

.ec-complaints-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.ec-complaints-table tbody tr:hover td {
	background: #FAFBFD;
}

.ec-complaint-id {
	padding: 3px 0;
	border: 0;
	background: transparent;
	color: var(--ec-navy);
	font: 700 var(--ec-fs-sm)/1.3 var(--ec-font);
	letter-spacing: .015em;
	cursor: pointer;
	text-align: left;
}

.ec-complaint-id:hover {
	color: var(--ec-gold-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ec-priority-pill,
.ec-status-pill {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: var(--ec-fs-xs);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.ec-priority-pill--high { color: #A61B1B; background: rgba(220, 38, 38, .10); }
.ec-priority-pill--medium { color: #8A5B0A; background: rgba(183, 121, 31, .12); }
.ec-priority-pill--low { color: #126B35; background: rgba(21, 128, 61, .10); }
.ec-priority-pill--unset { color: var(--ec-text-muted); background: #EEF0F4; }

.ec-status-pill--submitted { color: #526071; background: #EDF0F4; }
.ec-status-pill--pending { color: #85570A; background: rgba(183, 121, 31, .12); }
.ec-status-pill--progress { color: #1E55B3; background: rgba(37, 99, 235, .10); }
.ec-status-pill--resolved,
.ec-status-pill--completed { color: #126B35; background: rgba(21, 128, 61, .10); }
.ec-status-pill--auto-resolved { color: #0D6C65; background: rgba(20, 184, 166, .10); }
.ec-status-pill--review { color: #7225AF; background: rgba(147, 51, 234, .10); }
.ec-status-pill--rejected { color: #A61B1B; background: rgba(220, 38, 38, .10); }

.ec-table-action {
	min-height: 36px;
	padding: 7px 11px;
	border: 1px solid #CCD4E0;
	border-radius: var(--ec-radius-sm);
	background: var(--ec-surface);
	color: var(--ec-navy);
	font: 650 var(--ec-fs-xs)/1.2 var(--ec-font);
	white-space: nowrap;
	cursor: pointer;
}

.ec-table-action:hover {
	border-color: var(--ec-navy);
	background: rgba(15, 45, 92, .04);
}

.ec-table-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	padding: var(--ec-space-3) var(--ec-space-5);
	border-top: 1px solid var(--ec-border);
	background: #FAFBFD;
}

.ec-table-pagination__summary {
	margin: 0;
	font-size: var(--ec-fs-xs);
	color: var(--ec-text-muted);
}

.ec-table-pagination__controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ec-table-page {
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-sm);
	background: transparent;
	color: var(--ec-text-muted);
	font: 600 var(--ec-fs-xs)/1 var(--ec-font);
	cursor: pointer;
}

.ec-table-page:hover:not(:disabled) {
	background: var(--ec-surface);
	border-color: var(--ec-border);
	color: var(--ec-navy);
}

.ec-table-page.is-current {
	background: var(--ec-navy);
	color: #FFFFFF;
}

.ec-table-page:disabled {
	opacity: .45;
	cursor: default;
}

@media (max-width: 1080px) {
	.ec-complaints-toolbar {
		grid-template-columns: minmax(250px, 1fr) 160px 160px;
	}
	.ec-complaints-toolbar__actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}
}

@media (max-width: 760px) {
	.ec-complaints__header {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--ec-space-3);
	}

	.ec-complaints-toolbar {
		grid-template-columns: 1fr 1fr;
		padding: var(--ec-space-4);
	}

	.ec-complaints-search,
	.ec-complaints-toolbar__actions {
		grid-column: 1 / -1;
	}

	.ec-complaints-toolbar__actions {
		justify-content: space-between;
	}

	.ec-complaints-export-note {
		padding-right: var(--ec-space-4);
		padding-left: var(--ec-space-4);
	}

	.ec-complaints-table-wrap {
		overflow: visible;
		padding: var(--ec-space-3);
		background: var(--ec-bg);
	}

	table.ec-complaints-table,
	.ec-complaints-table tbody {
		display: block;
	}

	.ec-complaints-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.ec-complaints-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--ec-space-3) var(--ec-space-4);
		margin-bottom: var(--ec-space-3);
		padding: var(--ec-space-4);
		border: 1px solid var(--ec-border);
		border-radius: var(--ec-radius);
		background: var(--ec-surface);
		box-shadow: var(--ec-shadow-sm);
	}

	.ec-complaints-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.ec-complaints-table tbody td,
	.dataTables_wrapper .ec-complaints-table tbody td {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.ec-complaints-table tbody td::before {
		content: attr(data-label);
		margin-bottom: 3px;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--ec-text-muted);
	}

	.ec-complaints-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.ec-complaints-table tbody td:nth-child(5) { grid-column: 2; grid-row: 1; align-items: flex-end; }
	.ec-complaints-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
	.ec-complaints-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; align-items: flex-end; }
	.ec-complaints-table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
	.ec-complaints-table tbody td:nth-child(6) {
		grid-column: 1 / -1;
		grid-row: 4;
		padding-top: var(--ec-space-3) !important;
		border-top: 1px solid var(--ec-border) !important;
	}

	.ec-complaints-table tbody td:nth-child(1)::before,
	.ec-complaints-table tbody td:nth-child(5)::before,
	.ec-complaints-table tbody td:nth-child(6)::before {
		display: none;
	}

	.ec-table-action {
		width: 100%;
		min-height: 42px;
	}

	.ec-table-pagination {
		align-items: stretch;
		flex-direction: column;
		padding: var(--ec-space-3) var(--ec-space-4);
	}

	.ec-table-pagination__summary {
		text-align: center;
	}

	.ec-table-pagination__controls {
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.ec-complaints-toolbar {
		grid-template-columns: 1fr;
	}

	.ec-complaints-search,
	.ec-complaints-filter,
	.ec-complaints-toolbar__actions {
		grid-column: 1;
	}

	.ec-complaints-toolbar__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.ec-complaints-reset,
	.ec-complaints-export {
		width: 100%;
	}

	.ec-complaints-table tbody tr {
		gap: var(--ec-space-3);
	}

	.ec-priority-pill,
	.ec-status-pill {
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-complaints-spinner {
		animation: none;
	}
	.ec-complaints-search input,
	.ec-complaints-filter select {
		transition: none;
	}
}

/* Final cascade guard for the Admin operations pages (kept after shared list CSS). */
.ec-admin-complaints { width: min(1480px, 100%); max-width: 1480px; min-width: 0; margin-inline: auto; }
.ec-admin-complaints .ec-complaints__header { align-items: flex-end; flex-wrap: wrap; min-width: 0; }
.ec-admin-complaints .ec-complaints__header > div:first-child { flex: 1 1 420px; min-width: 0; }
.ec-admin-filterbar { grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(128px, 160px)) auto; gap: .75rem; }
.ec-admin-filterbar > * { min-width: 0; }
.ec-admin-filterbar .ec-complaints-toolbar__actions { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; }
.ec-admin-table { width: 100%; table-layout: fixed; }
.ec-admin-table .ec-admin-col-id { width: 19%; }
.ec-admin-table .ec-admin-col-submitted { width: 21%; }
.ec-admin-table .ec-admin-col-office { width: 13%; }
.ec-admin-table .ec-admin-col-priority { width: 13%; }
.ec-admin-table .ec-admin-col-status { width: 20%; }
.ec-admin-table .ec-admin-col-action { width: 14%; }
.ec-admin-table th,
.ec-admin-table td { max-width: none; vertical-align: middle; }
.ec-admin-table td:first-child strong,
.ec-admin-table td:nth-child(2),
.ec-admin-table .ec-view-btn { white-space: nowrap; }
.ec-admin-table .ec-view-btn { width: auto; min-width: 0; }

@media (max-width: 1180px) {
	.ec-admin-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-admin-filterbar .ec-complaints-search,
	.ec-admin-filterbar .ec-complaints-toolbar__actions { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
	.ec-admin-filterbar { grid-template-columns: 1fr; }
	.ec-admin-filterbar .ec-complaints-search,
	.ec-admin-filterbar .ec-complaints-toolbar__actions { grid-column: auto; }
	.ec-admin-filterbar .ec-complaints-toolbar__actions { align-items: stretch; flex-direction: row; }
	.ec-admin-table,
	.ec-admin-table tbody,
	.ec-admin-table tr,
	.ec-admin-table td,
	.ec-pending-staff-table,
	.ec-pending-staff-table tbody,
	.ec-pending-staff-table tr,
	.ec-pending-staff-table td { display: block; width: 100%; }
	.ec-admin-table colgroup { display: none; }
	.ec-admin-table thead,
	.ec-pending-staff-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ec-admin-table tbody,
	.ec-pending-staff-table tbody { display: grid; grid-template-columns: 1fr; gap: .8rem; padding: .8rem; }
	.ec-admin-table tbody tr,
	.ec-pending-staff-table tbody tr { display: block; padding: .65rem 1rem; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
	.ec-admin-table tbody td,
	.ec-pending-staff-table tbody td { display: grid; grid-column: auto; grid-row: auto; grid-template-columns: minmax(108px, 38%) minmax(0, 1fr); align-items: center; gap: .75rem; max-width: none; padding: .55rem 0; border: 0; border-bottom: 1px solid #edf1f6; white-space: normal; text-align: left; }
	.ec-admin-table tbody td:last-child,
	.ec-pending-staff-table tbody td:last-child { border-bottom: 0; }
	.ec-admin-table tbody td::before,
	.ec-pending-staff-table tbody td::before { display: block; content: attr(data-label); color: #5a6779; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
	.ec-admin-table td:first-child strong,
	.ec-admin-table td:nth-child(2) { white-space: normal; }
	.ec-admin-table .ec-view-btn { width: 100%; }
}

@media (max-width: 480px) {
	.ec-admin-filterbar .ec-complaints-toolbar__actions { flex-direction: column; }
}

/* Admin command center and dedicated action queues. */
.ec-admin-command,
.ec-queue-page { width: min(1480px, 100%); min-width: 0; margin: 0 auto; color: var(--ec-text); }
.ec-admin-command .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec-command-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.35rem; }
.ec-command-header h1 { margin: 0; color: var(--ec-navy); font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.15; }
.ec-command-header > div > p:last-child { margin: .45rem 0 0; color: var(--ec-text-muted); }
.ec-command-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.ec-command-kpis article { position: relative; min-width: 0; min-height: 150px; padding: 1rem; border: 1px solid #dce3ed; border-top: 3px solid var(--ec-navy); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(15,45,92,.045); }
.ec-command-kpis article.is-attention { border-top-color: #c47c00; }
.ec-command-kpis article.is-priority { border-top-color: #b54708; }
.ec-command-kpis article.is-quality { border-top-color: #6b5ca5; }
.ec-command-kpis article > span { display: block; min-height: 2.3em; color: #475569; font-size: .72rem; font-weight: 750; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase; }
.ec-command-kpis article > strong { display: block; margin: .35rem 0 .25rem; color: var(--ec-navy); font-size: 1.9rem; line-height: 1; }
.ec-command-kpis article p { margin: 0; color: #5a6779; font-size: .75rem; line-height: 1.4; }
.ec-command-kpis article a { display: inline-flex; margin-top: .65rem; color: var(--ec-navy); font-size: .76rem; font-weight: 750; }
.ec-command-section { margin-top: 1.35rem; }
.ec-command-section__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.ec-command-section__head p,
.ec-command-panel > header p { margin: 0 0 .2rem; color: #8a6511; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ec-command-section__head h2,
.ec-command-panel > header h2 { margin: 0; color: var(--ec-navy); font-size: 1.1rem; }
.ec-command-section__head > span { color: #5a6779; font-size: .8rem; }
.ec-action-queues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ec-action-queues article { padding: .95rem 1rem; border: 1px solid #dbe3ee; border-left: 4px solid #8ba0bb; border-radius: 10px; background: #fff; }
.ec-action-queues article.is-critical { border-left-color: #c2410c; background: #fffaf7; }
.ec-action-queues article.is-quality { border-left-color: #6b5ca5; }
.ec-action-queues article > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ec-action-queues article span { color: #334155; font-size: .82rem; font-weight: 750; }
.ec-action-queues article strong { color: var(--ec-navy); font-size: 1.45rem; }
.ec-action-queues article p { min-height: 2.5em; margin: .35rem 0 .55rem; color: #5a6779; font-size: .75rem; line-height: 1.45; }
.ec-action-queues article a { color: var(--ec-navy); font-size: .76rem; font-weight: 750; }
.ec-command-main-grid,
.ec-command-secondary-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.ec-command-main-grid { grid-template-columns: minmax(0, 1.75fr) minmax(310px, .75fr); }
.ec-command-secondary-grid { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
.ec-command-panel { min-width: 0; padding: 1.1rem; border: 1px solid #dce3ed; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(15,45,92,.04); }
.ec-command-panel > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.ec-command-chart { position: relative; height: 270px; }
.ec-command-chart-totals { display: flex; flex-wrap: wrap; gap: .75rem; color: #5a6779; font-size: .72rem; }
.ec-command-chart-totals strong { color: var(--ec-navy); }
.ec-chart-equivalent { margin-top: .75rem; }
.ec-chart-equivalent > summary { cursor: pointer; color: var(--ec-navy); font-size: .75rem; font-weight: 700; }
.ec-chart-equivalent > div { max-height: 240px; margin-top: .6rem; overflow: auto; }
.ec-chart-equivalent table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.ec-chart-equivalent th,
.ec-chart-equivalent td { padding: .4rem; border-bottom: 1px solid #e8edf3; text-align: left; }
.ec-workload-bars { display: grid; gap: 1rem; }
.ec-workload-bars > div > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: #334155; font-size: .82rem; }
.ec-workload-track { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.ec-workload-track > span { display: block; min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ec-navy), #4d709b); }
.ec-command-note { margin: 1rem 0 0; color: #5a6779; font-size: .72rem; line-height: 1.45; }
.ec-resolution-metrics { display: grid; gap: .65rem; margin: 0; }
.ec-resolution-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #e8edf3; }
.ec-resolution-metrics dt { color: #5a6779; font-size: .77rem; }
.ec-resolution-metrics dd { margin: 0; color: var(--ec-navy); font-size: 1rem; font-weight: 750; text-align: right; }
.ec-command-activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ec-command-activity li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .7rem; padding: .6rem 0; border-bottom: 1px solid #edf1f6; }
.ec-command-activity li:last-child { border-bottom: 0; }
.ec-command-activity li > span { width: 9px; height: 9px; margin-top: .35rem; border: 2px solid #fff; border-radius: 50%; background: var(--ec-gold); box-shadow: 0 0 0 1px #c89219; }
.ec-command-activity a { color: var(--ec-navy); font-size: .8rem; font-weight: 750; text-decoration: none; }
.ec-command-activity p { margin: .15rem 0; color: #475569; font-size: .75rem; }
.ec-command-activity small { color: #5f6b7b; font-size: .68rem; }
/* why: the actor/time meta sits on its own line so it never runs into the complaint reference ("CMP-2026-0008admin"). */
.ec-command-activity .ec-command-activity__meta { display: block; margin-top: .15rem; }
.ec-command-empty { display: flex; flex-direction: column; gap: .3rem; padding: 1.5rem 1rem; border: 1px dashed #cbd5e1; border-radius: 10px; color: #5a6779; text-align: center; }
.ec-command-empty strong { color: #334155; }

.ec-queue-page .ec-complaints__header { align-items: flex-end; flex-wrap: wrap; }
.ec-queue-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(135px, 175px)) auto; align-items: end; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ec-border); background: #fafbfd; }
.ec-queue-filterbar > *,
.ec-queue-searchbar > * { min-width: 0; }
.ec-queue-searchbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: end; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ec-border); background: #fafbfd; }
.ec-queue-searchbar .ec-complaints-reset { min-height: 42px; }
.ec-queue-table { width: 100%; table-layout: fixed; }
.ec-queue-table th,
.ec-queue-table td { max-width: none; vertical-align: middle; }
.ec-queue-table th { white-space: nowrap; }
.ec-queue-table td:first-child strong { white-space: nowrap; }
.ec-queue-table td small { display: block; margin-top: .25rem; color: #5a6779; font-size: .7rem; line-height: 1.35; }
.ec-queue-table th:nth-child(1) { width: 16%; }
.ec-queue-table th:nth-child(2) { width: 17%; }
.ec-queue-table th:nth-child(3) { width: 12%; }
.ec-queue-table th:nth-child(4) { width: 14%; }
.ec-queue-table th:nth-child(5) { width: 27%; }
.ec-queue-table th:nth-child(6) { width: 14%; }
.ec-privacy-table { table-layout: auto; }
.ec-ratings-table { table-layout: auto; }
.ec-queue-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #475569; line-height: 1.45; }
.ec-text-action { appearance: none; padding: 0; border: 0; background: none; color: var(--ec-navy); font: inherit; font-weight: 750; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ec-privacy-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ec-privacy-actions .ec-case-button,
.ec-review-form .ec-case-button { min-height: 38px; padding: .5rem .7rem; white-space: nowrap; }
.ec-review-form { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.ec-rating-stars { color: #b45309; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
.ec-queue-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; }
.ec-queue-feedback.hidden { display: none; }
.ec-queue-feedback.is-success { border-color: #86c5a9; background: #f0fdf4; color: #14532d; }
.ec-queue-feedback.is-error { border-color: #efb0aa; background: #fff7f6; color: #8f1c13; }

@media (max-width: 1220px) {
	.ec-command-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ec-command-kpis article { min-height: 135px; }
	.ec-queue-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-queue-filterbar .ec-complaints-search,
	.ec-queue-filterbar .ec-complaints-toolbar__actions { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
	.ec-command-main-grid,
	.ec-command-secondary-grid { grid-template-columns: 1fr; }
	.ec-action-queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.ec-command-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-queue-filterbar,
	.ec-queue-searchbar { grid-template-columns: 1fr; }
	.ec-queue-filterbar .ec-complaints-search,
	.ec-queue-filterbar .ec-complaints-toolbar__actions { grid-column: auto; }
	.ec-queue-filterbar .ec-complaints-toolbar__actions { align-items: stretch; }
	.ec-queue-table,
	.ec-queue-table tbody,
	.ec-queue-table tr,
	.ec-queue-table td { display: block; width: 100%; }
	.ec-queue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ec-queue-table tbody { display: grid; grid-template-columns: 1fr; gap: .8rem; padding: .8rem; }
	.ec-queue-table tbody tr { display: block; padding: .65rem 1rem; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
	.ec-queue-table tbody td { display: grid; grid-column: auto; grid-row: auto; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); align-items: center; gap: .75rem; padding: .6rem 0 !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; background: transparent !important; }
	.ec-queue-table tbody td:last-child { border-bottom: 0 !important; }
	.ec-queue-table tbody td::before { display: block !important; content: attr(data-label); margin: 0; color: #5a6779; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
	.ec-privacy-actions { align-items: stretch; flex-direction: column; }
	.ec-privacy-actions .ec-case-button,
	.ec-review-form .ec-case-button { width: 100%; }
}

@media (max-width: 520px) {
	.ec-command-header .ec-case-button { width: 100%; }
	.ec-command-kpis,
	.ec-action-queues { grid-template-columns: 1fr; }
	.ec-command-kpis article { min-height: 0; }
	.ec-action-queues article p { min-height: 0; }
	.ec-command-chart { height: 230px; }
	.ec-queue-filterbar .ec-complaints-toolbar__actions { flex-direction: column; }
	.ec-queue-table tbody td { grid-template-columns: 1fr; gap: .25rem; }
}

.ec-command-reports-note { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1rem 1.25rem; border:1px solid #dbe4ea; border-radius:12px; background:#fff; }
.ec-command-reports-note p { margin:0 0 .15rem; color:#587080; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ec-command-reports-note h2 { margin:0; font-size:1.05rem; }
.ec-command-reports-note span { display:block; margin-top:.2rem; color:#587080; font-size:.875rem; }
@media (max-width: 520px) { .ec-command-reports-note { align-items:flex-start; flex-direction:column; } }

/* ---------------------------------------------------------------------- *
 * Post-defense Phase 5A — On Hold status + modal panel + Known Issues page
 * The "On Hold" colour (indigo) is always paired with its text label.
 * ---------------------------------------------------------------------- */
.ec-case-badge--deferred,
.ec-case-badge[data-status="DEFERRED"] { color: #3730a3; border-color: #c7d2fe; background: #eef2ff; }
.ec-status-pill--on-hold { color: #3730A3; background: rgba(79, 70, 229, .10); }
.ec-pill--on-hold { background: rgba(79, 70, 229, .15); color: #3730A3; }
.ec-timeline__dot--hold { background: #4F46E5; }
.ec-case-hold { min-width: 0; padding: 1rem; border: 1px solid #dbe3ee; border-top: 4px solid #4f46e5; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(15,45,92,.045); }
.ec-case-hold.hidden,
.ec-case-hold .hidden { display: none !important; }
.ec-case-hold h3 { margin: 0; color: #172033; font-size: 1rem; line-height: 1.3; }
.ec-case-hold__details { display: grid; gap: .55rem; margin: .8rem 0 0; }
.ec-case-hold__details > div { min-width: 0; padding: .6rem .7rem; border-radius: 9px; background: #f7f9fc; }
.ec-case-hold__details dt { color: #5a6779; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ec-case-hold__details dd { margin: .25rem 0 0; color: #26354a; font-size: .84rem; overflow-wrap: anywhere; }
.ec-case-hold__text { white-space: pre-line; }
.ec-case-hold__buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.ec-case-hold__form input[type="text"] { width: 100%; border: 1px solid #b9c6d6; border-radius: 9px; padding: .65rem .7rem; color: #172033; background: #fff; font: inherit; }
.ec-case-hold__form textarea { min-height: 96px; }
.ec-case-hold__form [aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,.12); }
.ec-track-hold { border-left: 4px solid #4f46e5; }
.ec-track-hold__helper { margin: .25rem 0 .75rem; color: #475569; font-size: .9rem; }
.ec-track-hold__reason { white-space: pre-line; overflow-wrap: anywhere; }

.ec-ki-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.ec-ki-tabs__tab { display: inline-flex; align-items: center; min-height: 40px; padding: .5rem .9rem; border: 1px solid #cbd5e1; border-radius: 999px; color: #334155; background: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.ec-ki-tabs__tab.is-active { color: #fff; border-color: #0f2d5c; background: #0f2d5c; }
.ec-ki-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ec-ki-card { min-width: 0; }
.ec-ki-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ec-ki-card__ref { margin: 0; color: #53657a; font-size: .78rem; font-weight: 750; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ec-ki-card__summary { margin: .6rem 0 .8rem; color: #172033; font-size: 1.02rem; line-height: 1.4; overflow-wrap: anywhere; }
.ec-ki-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.ec-ki-card__facts > div { min-width: 0; padding: .55rem .65rem; border-radius: 9px; background: #f7f9fc; }
.ec-ki-card__facts dt { color: #5a6779; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ec-ki-card__facts dd { margin: .2rem 0 0; color: #26354a; font-size: .84rem; overflow-wrap: anywhere; }
.ec-ki-card__reason { grid-column: 1 / -1; }
.ec-ki-card__reason dd { white-space: pre-line; overflow-wrap: anywhere; }
.ec-ki-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0 0; font-size: .875rem; }
.ec-ki-pager a { font-weight: 700; }
@media (max-width: 520px) { .ec-ki-card__facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------- *
 * Post-defense Phase 5B — linked same-day reports ("Already Reported").
 * Distinct violet / teal hues, always paired with the text label.
 * ---------------------------------------------------------------------- */
.ec-case-badge--duplicate-linked { color: #5b21b6; border-color: #ddd6fe; background: #f5f3ff; }
.ec-case-badge--duplicate-resolved { color: #0e7490; border-color: #a5f3fc; background: #ecfeff; }
.ec-status-pill--linked { color: #5B21B6; background: rgba(124, 58, 237, .10); }
.ec-status-pill--linked-resolved { color: #0E7490; background: rgba(8, 145, 178, .10); }
.ec-pill--linked { background: rgba(124, 58, 237, .15); color: #5B21B6; }
.ec-pill--linked-resolved { background: rgba(8, 145, 178, .15); color: #155E75; }
.ec-recent__dot--linked { background: #7C3AED; }
.ec-recent__dot--linked-resolved { background: #0891B2; }
.ec-timeline__dot--linked { background: #7C3AED; }
.ec-track-linked { border-left: 4px solid #7c3aed; }
.ec-track-linked__copy { margin: .25rem 0 .5rem; color: #334155; font-size: .95rem; }
.ec-track-linked__ref { margin: 0; color: #53657a; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ec-case-duplicate.hidden { display: none !important; }

/* Post-defense Phase 6: Admin Reports panel (J3/J4), office report summary and
   informational priority target timeframes (L-98). Reuses the command/dashboard styles. */
.ec-report-panel .ec-report-filterbar { grid-template-columns: repeat(3, minmax(140px, 200px)) auto; margin: 0 0 1rem; border: 1px solid var(--ec-border); border-radius: 12px; }
.ec-report-panel .ec-report-filterbar input[type="date"] { width: 100%; min-height: 42px; padding: 0 .6rem; border: 1px solid var(--ec-border); border-radius: 8px; background: #fff; }
.ec-report-panel__title { margin: 1.1rem 0 .6rem; color: var(--ec-navy); font-size: .95rem; }
.ec-report-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ec-report-cards article > strong { font-size: 1.45rem; }
.ec-report-summary__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ec-case-modal__target { margin: .4rem 0 0; color: #475569; font-size: .8rem; }
.ec-prio-target { display: block; margin-top: .3rem; color: #475569; font-size: .8rem; }
@media (max-width: 900px) { .ec-report-panel .ec-report-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ec-report-summary__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ec-report-panel .ec-report-filterbar, .ec-report-summary__list { grid-template-columns: 1fr; } }

/* ================================================================== *
 * Admin Dashboard redesign (2026-11) — presentation only.
 * Every rule is scoped to .ec-admin-command or an ec-dash-* class so the
 * shared .ec-complaints-* / .ec-case-button / .ec-queue-* rules are untouched.
 * why: hierarchy (5 KPIs -> Action Required -> charts -> collapsed Reports),
 * no colour-only meaning (text badges, legend counts, text tables).
 * ================================================================== */
.ec-admin-command .ec-dash-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ec-admin-command .ec-dash-kpis article { min-height: 140px; }
.ec-admin-command .ec-dash-kpis article.is-hold { border-top-color: #4f46a3; } /* indigo = the On Hold family (Phase 5A), always paired with its text badge. */
.ec-dash-badge { display: inline-block; margin-left: .3rem; padding: .1rem .4rem; border-radius: 999px; background: #eef2f7; color: #334155; font-size: .58rem; font-weight: 750; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; vertical-align: middle; }
.ec-admin-command .is-attention .ec-dash-badge { background: #fff4df; color: #8a5a00; }
.ec-admin-command .is-priority .ec-dash-badge,
.ec-admin-command .is-critical .ec-dash-badge { background: #fdebe3; color: #8f2f0b; }
.ec-admin-command .is-hold .ec-dash-badge { background: #ecebfa; color: #3f3a8a; }
.ec-admin-command .is-quality .ec-dash-badge { background: #efecf9; color: #4c3f8f; }
.ec-dash-muted { color: #6b7280; font-style: italic; }
.ec-admin-command .ec-dash-actions article a { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--ec-navy); border-radius: 8px; text-decoration: none; }
.ec-admin-command .ec-dash-actions article a:hover { background: var(--ec-navy); color: #fff; }
.ec-admin-command .ec-dash-actions article.is-empty strong { color: #8a94a6; }
/* why: the zero-state Pending Staff tile was retired, so the three queue cards fill the row (≤1024px / ≤520px rules below still apply). */
.ec-admin-command .ec-dash-actions--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ec-dash-grid--tertiary { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.ec-dash-panel-link { color: var(--ec-navy); font-size: .76rem; font-weight: 750; white-space: nowrap; }
.ec-dash-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid #e8edf3; }
.ec-dash-strip > div { min-width: 0; }
.ec-dash-strip dt { color: #5a6779; font-size: .72rem; }
.ec-dash-strip dd { margin: .15rem 0 0; color: var(--ec-navy); font-size: 1.05rem; font-weight: 750; }
.ec-dash-strip small { display: block; color: #6b7280; font-size: .66rem; line-height: 1.35; }
/* why: the status panel is the narrow column at desktop, so the legend sits BELOW the donut; side-by-side only when panels stack to full width (521–1023px). */
.ec-dash-donut { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.ec-dash-donut__chart { height: 200px; }
.ec-dash-donut__centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ec-dash-donut__centre strong { display: block; color: var(--ec-navy); font-size: 1.6rem; line-height: 1; }
.ec-dash-donut__centre span { color: #5a6779; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.ec-dash-legend { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ec-dash-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; color: #334155; font-size: .76rem; }
.ec-dash-legend li a { color: var(--ec-navy); font-weight: 650; text-decoration: none; }
.ec-dash-legend li a:hover { text-decoration: underline; }
.ec-dash-legend li strong { color: var(--ec-navy); font-variant-numeric: tabular-nums; }
.ec-dash-legend li small { min-width: 2.6em; color: #6b7280; font-variant-numeric: tabular-nums; text-align: right; }
.ec-dash-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ec-dash-legend--inline { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .55rem; }
.ec-dash-legend--inline li { display: inline-flex; gap: .35rem; }
.ec-dash-bars { height: 200px; }
.ec-dash-bars--short { height: 170px; }
/* Complaints by Department (2026-11-06): stacked office bars, a headline total and a scrollable value table. */
.ec-command-panel > header .ec-dash-dept__total { margin: 0; color: var(--ec-text-muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ec-dash-dept__total strong { margin-right: .2rem; color: var(--ec-navy); font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ec-dash-dept__chart { height: 190px; }
.ec-dash-dept__legend { margin-top: .5rem; }
.ec-dash-dept__legend li strong { color: var(--ec-navy); font-variant-numeric: tabular-nums; }
.ec-dash-dept .ec-chart-equivalent th,
.ec-dash-dept .ec-chart-equivalent td { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Staff "Complaint Status Overview" (2026-11-06): one stacked bar for the user's own office only. */
.ec-office-dept .ec-dashboard-panel__heading { flex-wrap: wrap; }
.ec-office-dept__total { margin: 0; color: var(--ec-text-muted); font-size: .78rem; font-weight: 600; }
.ec-office-dept__total strong { margin-right: .2rem; color: var(--ec-navy); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ec-office-dept__chart { position: relative; height: 160px; } /* tall enough for the 7-line canvas tooltip (it cannot overflow the canvas) */
.ec-office-dept__legend { margin-top: .6rem; }
.ec-office-dept__legend li strong { color: var(--ec-navy); font-variant-numeric: tabular-nums; }
.ec-office-dept .ec-chart-equivalent table { max-width: 420px; font-variant-numeric: tabular-nums; }
.ec-dash-data-note { margin: 0 0 .75rem; padding: .5rem .7rem; border: 1px solid #f1d28a; border-radius: 8px; background: #fff8e6; color: #6b4b00; }
.ec-dash-reports { margin-top: 1.35rem; border: 1px solid #dce3ed; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(15,45,92,.04); }
.ec-dash-reports > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "title scope"; align-items: end; gap: .1rem 1rem; padding: 1rem 1.1rem 1rem 2.4rem; cursor: pointer; list-style: none; }
.ec-dash-reports > summary::-webkit-details-marker { display: none; }
.ec-dash-reports > summary::before { content: ""; position: absolute; top: 1.5rem; left: 1.1rem; width: .55rem; height: .55rem; border-right: 2px solid var(--ec-navy); border-bottom: 2px solid var(--ec-navy); transform: rotate(-45deg); transition: transform .15s; }
.ec-dash-reports[open] > summary::before { transform: rotate(45deg); }
.ec-dash-reports__eyebrow { grid-area: eyebrow; color: #8a6511; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ec-dash-reports__title { grid-area: title; color: var(--ec-navy); font-size: 1.1rem; font-weight: 750; }
.ec-dash-reports__scope { grid-area: scope; color: #5a6779; font-size: .8rem; text-align: right; }
.ec-dash-reports__body { padding: 0 1.1rem 1.1rem; border-top: 1px solid #e8edf3; }
.ec-dash-reports .ec-report-filterbar { margin-top: 1rem; }
.ec-dash-cohort { display: flex; height: 22px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.ec-dash-cohort__seg { display: block; min-width: 2px; height: 100%; }
.ec-dash-table { width: 100%; margin: .6rem 0 0; border-collapse: collapse; font-size: .8rem; }
.ec-dash-table th,
.ec-dash-table td { padding: .5rem .4rem; border-bottom: 1px solid #e8edf3; text-align: left; vertical-align: top; }
.ec-dash-table thead th { color: #5a6779; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.ec-dash-table tbody th { color: #1f2733; font-weight: 650; }
.ec-dash-table td:nth-child(2) { color: var(--ec-navy); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-dash-table td:nth-child(3) { color: #5a6779; font-size: .74rem; }
.ec-dash-table .ec-dash-table__total th,
.ec-dash-table .ec-dash-table__total td { background: #f8fafc; }
.ec-admin-command a:focus-visible,
.ec-admin-command button:focus-visible,
.ec-admin-command summary:focus-visible,
.ec-admin-command input:focus-visible,
.ec-admin-command select:focus-visible { outline: 3px solid rgba(242, 169, 0, .45); outline-offset: 2px; }
/* why: 1024px matches the existing ≤1024 dashboard breakpoint so KPIs, actions and panels switch together. */
@media (max-width: 1024px) {
	.ec-admin-command .ec-dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ec-admin-command .ec-dash-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-admin-command .ec-dash-grid { grid-template-columns: 1fr; }
	.ec-admin-command .ec-dash-donut { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-items: center; }
	.ec-admin-command .ec-dash-donut__chart { height: 220px; }
}
@media (max-width: 520px) {
	.ec-admin-command .ec-dash-kpis,
	.ec-admin-command .ec-dash-actions,
	.ec-admin-command .ec-dash-strip,
	.ec-admin-command .ec-dash-donut { grid-template-columns: 1fr; }
	.ec-admin-command .ec-dash-kpis article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; min-height: 0; }
	.ec-admin-command .ec-dash-kpis article > span { min-height: 0; }
	.ec-admin-command .ec-dash-kpis article > strong { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.6rem; }
	.ec-admin-command .ec-dash-kpis article > p,
	.ec-admin-command .ec-dash-kpis article > a { grid-column: 1 / -1; }
	.ec-admin-command .ec-dash-kpis article > a { margin-top: .4rem; }
	.ec-admin-command .ec-dash-donut__chart { height: 220px; }
	.ec-admin-command .ec-dash-bars { height: 190px; }
	.ec-admin-command .ec-dash-reports > summary { grid-template-areas: "eyebrow" "title" "scope"; grid-template-columns: 1fr; }
	.ec-admin-command .ec-dash-reports__scope { text-align: left; }
	.ec-admin-command .ec-dash-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ec-admin-command .ec-dash-table tr { display: block; padding: .5rem 0; border-bottom: 1px solid #e8edf3; }
	.ec-admin-command .ec-dash-table th,
	.ec-admin-command .ec-dash-table td { display: block; padding: .1rem 0; border: 0; }
	.ec-admin-command .ec-dash-table td:nth-child(2) { white-space: normal; }
	.ec-admin-command .ec-dash-legend--inline { display: grid; }
}

/* ================================================================== *
 * Post-defense Phase 6G — browser-QA fixes (presentation only).
 * Responsive overflow, WCAG AA contrast, admin queue tables, All Complaints
 * mobile cards and the WordPress admin bar offset.
 * ================================================================== */

/* Header: long names never widen the page; the title and the user menu truncate. */
.ec-header { min-width: 0; }
.ec-usermenu__trigger { max-width: 100%; min-width: 0; }
.ec-usermenu__meta { min-width: 0; }
.ec-usermenu__name,
.ec-usermenu__role { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
	.ec-header { padding: 0 var(--ec-space-4); gap: var(--ec-space-2); }
	.ec-header__right { gap: var(--ec-space-1); }
}
@media (max-width: 480px) {
	/* why: on phones the avatar alone identifies the account menu; name + role would push the page wider. */
	.ec-usermenu__meta { display: none; }
	.ec-header__title { font-size: var(--ec-fs-base); }
}

/* Long references / words wrap inside the content column instead of overflowing it. */
.ec-content h1,
.ec-content h2,
.ec-content p,
.ec-content dd,
.ec-content li { overflow-wrap: anywhere; }

/* Complaint modal: the dialog never exceeds the viewport (box-sizing keeps the border inside). */
.ec-case-modal__dialog { box-sizing: border-box; max-width: 100%; min-width: 0; }
.ec-case-modal__content,
.ec-case-layout,
.ec-case-layout > * { min-width: 0; }

/* Notification count badge: white on rose-600 (4.7:1) instead of rose-500 (3.67:1). */
#ec-notif-bell { background-color: #E11D48; }

/* Sign-in notes ("Didn't get a code?", "Forgot password?"): darker amber text (≥4.5:1). */
.ec-auth__note { color: var(--ec-status-pending-text); }

/* Admin queue tables (Privacy Review, Low Ratings): fit the card at desktop widths so the
 * Actions column is never hidden behind horizontal scroll; the last column also stays pinned
 * if a narrow desktop window still has to scroll. Mobile card layout (≤800px) is unchanged. */
@media (min-width: 801px) {
	.ec-queue-table.ec-privacy-table,
	.ec-queue-table.ec-ratings-table { table-layout: fixed; }
	.ec-privacy-table th,
	.ec-ratings-table th { white-space: normal; }
	.ec-privacy-table td,
	.ec-ratings-table td { overflow-wrap: anywhere; }
	.ec-privacy-table .ec-case-badge,
	.ec-ratings-table .ec-case-badge { white-space: normal; line-height: 1.25; }
	.ec-privacy-table th:nth-child(1) { width: 14%; }
	.ec-privacy-table th:nth-child(2) { width: 13%; }
	.ec-privacy-table th:nth-child(3) { width: 14%; }
	.ec-privacy-table th:nth-child(4) { width: 21%; }
	.ec-privacy-table th:nth-child(5) { width: 12%; }
	.ec-privacy-table th:nth-child(6) { width: 12%; }
	.ec-privacy-table th:nth-child(7) { width: 14%; }
	.ec-ratings-table th:nth-child(1) { width: 13%; }
	.ec-ratings-table th:nth-child(2) { width: 9%; }
	.ec-ratings-table th:nth-child(3) { width: 12%; }
	.ec-ratings-table th:nth-child(4) { width: 19%; }
	.ec-ratings-table th:nth-child(5) { width: 11%; }
	.ec-ratings-table th:nth-child(6) { width: 11%; }
	.ec-ratings-table th:nth-child(7) { width: 11%; }
	.ec-ratings-table th:nth-child(8) { width: 14%; }
	.ec-privacy-table .ec-privacy-actions .ec-case-button,
	.ec-ratings-table .ec-review-form .ec-case-button { white-space: normal; text-align: center; }
	.ec-queue-table th:last-child,
	.ec-queue-table td:last-child { position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--ec-border); }
	.ec-queue-table td:last-child { background: var(--ec-surface); }
}

/* Deleted Complaints audit table (10 columns). why: it inherits the 6-column queue widths
 * (th:nth-child(1–6) = 100%) under table-layout: fixed, which left Previous Office, Reporter,
 * Reason and Action at 0px so their headers and the Restore button spilled over each other.
 * Auto layout never sizes a column below its content; the wrapper scrolls (overflow-x: auto)
 * when the card is narrower, and the existing sticky last column keeps Restore in view.
 * Mobile card layout (≤800px) is unchanged. */
@media (min-width: 801px) {
	.ec-queue-table.ec-deleted-table { table-layout: auto; min-width: 1000px; }
	.ec-queue-table.ec-deleted-table th { width: auto; white-space: normal; }
	.ec-queue-table.ec-deleted-table td { overflow-wrap: normal; }
	.ec-queue-table.ec-deleted-table thead th,
	.ec-queue-table.ec-deleted-table tbody td { padding-left: .65rem !important; padding-right: .65rem !important; } /* 10 columns: tighter than the shared 16px */
	.ec-deleted-table .ec-case-badge { white-space: nowrap; }
	.ec-deleted-table td[data-label="When"] { min-width: 7rem; }
	.ec-deleted-table td[data-label="By"],
	.ec-deleted-table td[data-label="Reporter"] { min-width: 7rem; }
	.ec-deleted-table td[data-label="Previous Status"] { min-width: 6.5rem; }
	.ec-deleted-table td[data-label="Reason"] { min-width: 13rem; max-width: 24rem; overflow-wrap: anywhere; }
	.ec-deleted-table td[data-label="Action"] { white-space: nowrap; }
}

/* All Complaints (admin) mobile cards: one labelled row per field (data-label pattern). why:
 * the shared staff-list card grid placed the status pill under the PRIORITY label without a
 * label of its own; the admin table has different columns, so it gets its own simple layout. */
@media (max-width: 760px) {
	.ec-admin-complaints .ec-complaints__header > div:first-child { flex: 0 1 auto; }
	.ec-complaints-table.ec-admin-table tbody tr { display: block; padding: .65rem 1rem; }
	.ec-complaints-table.ec-admin-table tbody td,
	.dataTables_wrapper .ec-complaints-table.ec-admin-table tbody td { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); grid-column: auto; grid-row: auto; align-items: center; gap: .75rem; padding: .5rem 0 !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; }
	.ec-complaints-table.ec-admin-table tbody td:last-child { grid-template-columns: minmax(0, 1fr); padding-top: .75rem !important; border-bottom: 0 !important; border-top: 0 !important; }
	.ec-complaints-table.ec-admin-table tbody td::before { display: block; margin: 0; color: var(--ec-text-muted); font-size: .7rem; }
	.ec-complaints-table.ec-admin-table tbody td:last-child::before { display: none; }
	.ec-complaints-table.ec-admin-table tbody td > * { justify-self: start; }
	.ec-complaints-table.ec-admin-table td:first-child strong { white-space: nowrap; }
	.ec-complaints-table.ec-admin-table .ec-case-badge { white-space: normal; line-height: 1.25; }
}

/* WordPress admin bar (administrators on the frontend): keep the fixed sidebar below it. */
body.admin-bar .ec-sidebar { top: 32px; height: calc(100vh - 32px); }
body.admin-bar .ec-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ec-sidebar { top: 46px; height: calc(100vh - 46px); }
	body.admin-bar .ec-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .ec-header { top: 0; } /* WordPress lets the admin bar scroll away here */
}