/**
 * ESA-K Core Integration — front-end styles.
 *
 * Covers: member dashboard, staff portal, resource search, conference
 * calendar, announcements, contact form, and admin dashboard KPI cards.
 *
 * Brand colours are exposed as CSS custom properties on :root so they are
 * easy to update in one place.
 */

:root {
	--esak-navy: #003366;
	--esak-navy-dark: #002244;
	--esak-amber: #F5A623;
	--esak-amber-dark: #d98f12;
	--esak-dark: #1A1A2E;
	--esak-light: #F5F5F5;
	--esak-white: #FFFFFF;
	--esak-text: #2C2C2C;
	--esak-muted: #6B7280;
	--esak-success: #16A34A;
	--esak-warning-yellow-bg: #FEF3C7;
	--esak-warning-yellow-text: #92400E;
	--esak-warning-red-bg: #FEE2E2;
	--esak-warning-red-text: #991B1B;
	--esak-radius: 8px;
	--esak-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
	--esak-sidebar-width: 220px;
}

/* -----------------------------------------------------------------------
 * Base / shared
 * --------------------------------------------------------------------- */

.esak-dashboard,
.esak-staff-portal,
.esak-file-search,
.esak-conf-section,
.esak-announcements-list,
.esak-contact-form {
	color: var( --esak-text );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
	box-sizing: border-box;
}

.esak-dashboard *,
.esak-staff-portal *,
.esak-file-search *,
.esak-conf-section *,
.esak-announcements-list *,
.esak-contact-form * {
	box-sizing: inherit;
}

.esak-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var( --esak-radius );
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.esak-btn-primary {
	background-color: var( --esak-amber );
	color: var( --esak-dark );
}
.esak-btn-primary:hover {
	background-color: var( --esak-amber-dark );
	color: var( --esak-dark );
}

.esak-btn-secondary {
	background-color: transparent;
	color: var( --esak-navy );
	border: 2px solid var( --esak-navy );
}
.esak-btn-secondary:hover {
	background-color: var( --esak-navy );
	color: var( --esak-white );
}

.esak-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background-color: var( --esak-navy );
	color: var( --esak-white );
	margin-left: 6px;
}

.esak-badge-success {
	background-color: var( --esak-success );
	color: var( --esak-white );
}

.esak-badge-type {
	background-color: var( --esak-light );
	color: var( --esak-navy );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.esak-empty,
.esak-no-announcements,
.esak-no-results,
.esak-search-hint {
	color: var( --esak-muted );
	font-style: italic;
	padding: 16px 0;
}

.esak-error {
	color: var( --esak-warning-red-text );
}

.esak-form-message {
	display: inline-block;
	margin-left: 12px;
	font-size: 14px;
}
.esak-form-success {
	color: var( --esak-success );
}
.esak-form-error {
	color: var( --esak-warning-red-text );
}

/* -----------------------------------------------------------------------
 * Renewal warning banners
 * --------------------------------------------------------------------- */

.esak-renewal-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 20px;
	border-radius: var( --esak-radius );
	margin-bottom: 20px;
}
.esak-renewal-banner p {
	margin: 0;
	font-weight: 600;
}

.esak-warning-yellow {
	background-color: var( --esak-warning-yellow-bg );
	color: var( --esak-warning-yellow-text );
	border-left: 5px solid var( --esak-amber );
}

.esak-warning-red {
	background-color: var( --esak-warning-red-bg );
	color: var( --esak-warning-red-text );
	border-left: 5px solid #DC2626;
}

.esak-warning-expired {
	background-color: var( --esak-warning-red-text );
	color: var( --esak-white );
	border-left: 5px solid #7F1D1D;
}
.esak-warning-expired .esak-btn-primary {
	background-color: var( --esak-white );
	color: var( --esak-warning-red-text );
}

/* -----------------------------------------------------------------------
 * Member dashboard — two-column layout with sidebar tab navigation
 * --------------------------------------------------------------------- */

.esak-dashboard {
	display: grid;
	grid-template-columns: var( --esak-sidebar-width ) 1fr;
	gap: 24px;
	max-width: 1140px;
	margin: 0 auto;
}

.esak-dash-header,
.esak-renewal-banner {
	grid-column: 1 / -1;
}

.esak-dash-header {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 2px solid var( --esak-light );
	margin-bottom: 8px;
}
.esak-dash-header h2 {
	margin: 0;
	color: var( --esak-navy );
	flex-grow: 1;
}

.esak-tier-badge {
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	background-color: var( --esak-navy );
	color: var( --esak-white );
	text-transform: capitalize;
}
.esak-tier-badge.esak-tier-corporate { background-color: var( --esak-navy ); }
.esak-tier-badge.esak-tier-associate { background-color: var( --esak-amber ); color: var( --esak-dark ); }
.esak-tier-badge.esak-tier-free-member,
.esak-tier-badge.esak-tier-free { background-color: var( --esak-muted ); }

.esak-logout {
	color: var( --esak-muted );
	text-decoration: underline;
	font-size: 14px;
}

.esak-dash-tabs {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: start;
	position: sticky;
	top: 20px;
}

.esak-dash-tabs .esak-tab-link,
.esak-staff-tabs .esak-staff-tab-link {
	display: block;
	padding: 12px 16px;
	border-radius: var( --esak-radius );
	color: var( --esak-text );
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.esak-dash-tabs .esak-tab-link:hover,
.esak-staff-tabs .esak-staff-tab-link:hover {
	background-color: var( --esak-light );
}

.esak-dash-tabs .esak-tab-link.esak-tab-active,
.esak-staff-tabs .esak-staff-tab-link.esak-tab-active {
	background-color: var( --esak-navy );
	color: var( --esak-white );
}

.esak-dash-tab-panel {
	grid-column: 2;
	display: none;
}
.esak-dash-tab-panel.esak-tab-panel-active {
	display: block;
}

.esak-account-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 500px;
	margin-bottom: 16px;
}
.esak-account-table th,
.esak-account-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var( --esak-light );
}
.esak-account-table th {
	width: 180px;
	color: var( --esak-muted );
	font-weight: 600;
}

.esak-login-wrap {
	max-width: 400px;
	margin: 40px auto;
	padding: 32px;
	border-radius: var( --esak-radius );
	box-shadow: var( --esak-shadow );
}
.esak-login-wrap h2 {
	color: var( --esak-navy );
	margin-top: 0;
}

/* -----------------------------------------------------------------------
 * Staff portal — same sidebar tab pattern
 * --------------------------------------------------------------------- */

.esak-staff-portal {
	display: grid;
	grid-template-columns: var( --esak-sidebar-width ) 1fr;
	gap: 24px;
	max-width: 1140px;
	margin: 0 auto;
}

.esak-staff-header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 2px solid var( --esak-light );
	margin-bottom: 8px;
}
.esak-staff-title {
	margin: 0;
	color: var( --esak-navy );
}
.esak-staff-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.esak-staff-logout {
	color: var( --esak-muted );
	text-decoration: underline;
	font-size: 14px;
}

.esak-staff-tabs {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: start;
	position: sticky;
	top: 20px;
}

.esak-staff-panel {
	grid-column: 2;
	display: none;
}
.esak-staff-panel.esak-panel-active {
	display: block;
}

.esak-staff-table-wrap {
	overflow-x: auto;
}

.esak-staff-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	overflow: hidden;
}
.esak-staff-table th,
.esak-staff-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var( --esak-light );
	font-size: 14px;
}
.esak-staff-table th {
	background-color: var( --esak-navy );
	color: var( --esak-white );
	font-weight: 600;
}
.esak-staff-loading-row,
.esak-staff-empty-row {
	text-align: center !important;
	color: var( --esak-muted );
	font-style: italic;
}

.esak-staff-field-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.esak-staff-form p {
	margin-bottom: 14px;
}
.esak-staff-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}
.esak-staff-form input[type="text"],
.esak-staff-form input[type="url"],
.esak-staff-form input[type="date"],
.esak-staff-form select,
.esak-staff-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid #D1D5DB;
	border-radius: var( --esak-radius );
	font-size: 14px;
}

.esak-message-item {
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	padding: 16px;
	margin-bottom: 14px;
	border-left: 4px solid transparent;
}
.esak-message-unread {
	border-left-color: var( --esak-amber );
}
.esak-message-header {
	font-size: 13px;
	color: var( --esak-muted );
	margin-bottom: 6px;
}
.esak-message-item h4 {
	margin: 0 0 8px;
	color: var( --esak-navy );
}
.esak-reply-wrap {
	margin-top: 10px;
}
.esak-reply-wrap textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid #D1D5DB;
	border-radius: var( --esak-radius );
	margin-bottom: 8px;
	display: block;
}

.esak-access-denied {
	padding: 16px;
	background-color: var( --esak-warning-red-bg );
	color: var( --esak-warning-red-text );
	border-radius: var( --esak-radius );
}

/* -----------------------------------------------------------------------
 * Announcements
 * --------------------------------------------------------------------- */

.esak-announcement-item {
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	padding: 16px;
	margin-bottom: 14px;
	border-left: 4px solid transparent;
}
.esak-announcement-item.esak-unread {
	border-left-color: var( --esak-amber );
}
.esak-announcement-item h4 {
	margin: 8px 0 4px;
	color: var( --esak-navy );
}
.esak-announcement-date {
	font-size: 13px;
	color: var( --esak-muted );
}
.esak-announcement-item p {
	margin: 8px 0;
}
.esak-mark-read-btn {
	padding: 6px 14px;
	font-size: 13px;
}

/* -----------------------------------------------------------------------
 * Contact form
 * --------------------------------------------------------------------- */

.esak-contact-form p {
	margin-bottom: 14px;
}
.esak-contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}
.esak-contact-form input[type="text"],
.esak-contact-form textarea {
	width: 100%;
	max-width: 500px;
	padding: 10px 12px;
	border: 1px solid #D1D5DB;
	border-radius: var( --esak-radius );
	font-size: 14px;
}
.esak-login-prompt {
	padding: 16px;
	background-color: var( --esak-light );
	border-radius: var( --esak-radius );
}

/* -----------------------------------------------------------------------
 * Resource search + file cards
 * --------------------------------------------------------------------- */

.esak-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.esak-search-input {
	flex: 1 1 260px;
	padding: 10px 14px;
	border: 1px solid #D1D5DB;
	border-radius: var( --esak-radius );
	font-size: 14px;
}
.esak-date-filter {
	padding: 10px 14px;
	border: 1px solid #D1D5DB;
	border-radius: var( --esak-radius );
	font-size: 14px;
}
.esak-loading-spinner {
	color: var( --esak-muted );
	font-size: 13px;
	font-style: italic;
}

.esak-results-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 16px;
}

.esak-file-card {
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.esak-file-card h4 {
	margin: 0;
	font-size: 15px;
}
.esak-file-card h4 a {
	color: var( --esak-navy );
	text-decoration: none;
}
.esak-file-card h4 a:hover {
	text-decoration: underline;
}
.esak-file-meta {
	font-size: 12px;
	color: var( --esak-muted );
}
.esak-category-badge,
.esak-tier-badge {
	display: inline-block;
	width: fit-content;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}
.esak-category-badge {
	background-color: var( --esak-light );
	color: var( --esak-navy );
}
span.esak-tier-badge {
	background-color: var( --esak-amber );
	color: var( --esak-dark );
}
.esak-download-btn {
	margin-top: auto;
	text-align: center;
	padding: 8px 16px;
	font-size: 13px;
}

/* -----------------------------------------------------------------------
 * Conferences
 * --------------------------------------------------------------------- */

.esak-conf-section {
	margin-bottom: 32px;
}
.esak-conf-section h3 {
	color: var( --esak-navy );
}

.esak-conf-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
}

.esak-conf-card {
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 4px solid var( --esak-amber );
}
.esak-conf-edition {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --esak-amber-dark );
	letter-spacing: 0.05em;
}
.esak-conf-card h4 {
	margin: 0;
	color: var( --esak-navy );
}
.esak-conf-theme {
	color: var( --esak-muted );
	font-style: italic;
	margin: 0;
}
.esak-conf-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var( --esak-text );
}

.esak-conf-past-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.esak-conf-past-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var( --esak-light );
}
.esak-conf-year {
	font-weight: 700;
	color: var( --esak-navy );
	width: 50px;
}
.esak-conf-past-list a {
	color: var( --esak-text );
	text-decoration: none;
	flex-grow: 1;
}
.esak-conf-past-list a:hover {
	text-decoration: underline;
}

/* -----------------------------------------------------------------------
 * Admin dashboard (wp-admin)
 * --------------------------------------------------------------------- */

.esak-admin-wrap .esak-kpi-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 20px 0 30px;
}

.esak-kpi-card {
	background-color: var( --esak-white );
	box-shadow: var( --esak-shadow );
	border-radius: var( --esak-radius );
	border-top: 4px solid var( --esak-navy );
	padding: 20px 24px;
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.esak-kpi-number {
	font-size: 36px;
	font-weight: 700;
	color: var( --esak-navy );
	line-height: 1;
}
.esak-kpi-label {
	font-size: 13px;
	color: var( --esak-muted );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* -----------------------------------------------------------------------
 * Mobile responsive — over 90% of Kenyan users are on mobile
 * --------------------------------------------------------------------- */

@media ( max-width: 768px ) {

	.esak-dashboard,
	.esak-staff-portal {
		grid-template-columns: 1fr;
	}

	.esak-dash-tabs,
	.esak-staff-tabs {
		grid-column: 1;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 8px;
		border-bottom: 1px solid var( --esak-light );
		margin-bottom: 12px;
	}

	.esak-dash-tabs .esak-tab-link,
	.esak-staff-tabs .esak-staff-tab-link {
		flex: 0 0 auto;
		padding: 8px 12px;
		font-size: 13px;
		white-space: nowrap;
	}

	.esak-dash-tab-panel,
	.esak-staff-panel {
		grid-column: 1;
	}

	.esak-dash-header,
	.esak-staff-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.esak-kpi-row {
		flex-direction: column;
	}

	.esak-search-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.esak-search-input,
	.esak-date-filter {
		width: 100%;
	}

	.esak-results-grid,
	.esak-conf-cards {
		grid-template-columns: 1fr;
	}

	.esak-renewal-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.esak-account-table th {
		width: auto;
	}
}