/*
 * African Learning Sphere — front-end dashboards (member/contributor/editor/admin).
 * Colours come from --als-primary / --als-accent.
 */

.als-dash {
	--als-primary: #1f6feb;
	--als-accent: #f59e0b;
	--als-ink: #1c2530;
	--als-muted: #64748b;
	--als-line: #e2e8f0;
	--als-bg: #f1f5f9;
	--als-sidebar-w: 264px;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: var(--als-sidebar-w) 1fr;
	min-height: 70vh;
	background: var(--als-bg);
	border-radius: 16px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--als-ink);
}

.als-dash *,
.als-dash *::before,
.als-dash *::after { box-sizing: border-box; }

/* Sidebar */
.als-dash__sidebar {
	background: #0f172a;
	color: #e2e8f0;
	display: flex;
	flex-direction: column;
	padding: 24px 18px;
}

.als-dash__brand { padding: 0 6px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.als-dash__logo { max-width: 150px; height: auto; }

.als-dash__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 6px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.als-dash__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--als-primary), var(--als-accent));
	color: #fff;
	font-weight: 700;
	overflow: hidden;
}

.als-dash__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.als-dash__user-meta { display: flex; flex-direction: column; line-height: 1.3; }
.als-dash__user-name { font-weight: 600; font-size: 0.92rem; }
.als-dash__user-role { font-size: 0.76rem; color: #94a3b8; }

.als-dash__nav { flex: 1; margin-top: 14px; }
.als-dash__nav-list { list-style: none; margin: 0; padding: 0; }
.als-dash__nav-item { margin: 2px 0; }

.als-dash__nav-link {
	display: block;
	padding: 11px 14px;
	border-radius: 9px;
	color: #cbd5e1;
	text-decoration: none;
	font-size: 0.9rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.als-dash__nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.als-dash__nav-link.is-active { background: var(--als-primary); color: #fff; }

.als-dash__sidebar-footer { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.als-dash__logout { color: #94a3b8; text-decoration: none; font-size: 0.88rem; }
.als-dash__logout:hover { color: #fff; }

/* Main */
.als-dash__main { display: flex; flex-direction: column; min-width: 0; }

.als-dash__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	background: #fff;
	border-bottom: 1px solid var(--als-line);
}

.als-dash__heading { margin: 0; font-size: 1.25rem; }

.als-dash__bell {
	position: relative;
	border: none;
	background: transparent;
	font-size: 1.3rem;
	cursor: pointer;
	color: var(--als-muted);
}

.als-dash__bell-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 0.68rem;
	line-height: 18px;
	text-align: center;
}

.als-dash__content { padding: 28px; overflow: auto; }

/* Sections */
.als-section { animation: als-fade 0.2s ease; }
.als-section[hidden] { display: none; }
.als-section__title { margin: 0 0 18px; font-size: 1.15rem; }

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

/* Cards */
.als-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.als-card {
	background: #fff;
	border: 1px solid var(--als-line);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 16px;
}

.als-card__title { margin: 0 0 14px; font-size: 1rem; }
.als-card__text { margin: 0 0 14px; color: var(--als-muted); line-height: 1.6; }

.als-stat { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.als-stat__num { font-size: 1.9rem; font-weight: 700; color: var(--als-primary); }
.als-stat__label { font-size: 0.82rem; color: var(--als-muted); }

/* Lists */
.als-list { list-style: none; margin: 0; padding: 0; }
.als-list__empty { color: var(--als-muted); font-size: 0.9rem; padding: 8px 0; }
.als-list > li { padding: 12px 0; border-bottom: 1px solid var(--als-line); }
.als-list > li:last-child { border-bottom: none; }

/* Tables */
.als-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.als-table th, .als-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--als-line); }
.als-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--als-muted); }
.als-table__empty td { color: var(--als-muted); }

/* Status pills */
.als-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; }
.als-pill--draft { background: #f1f5f9; color: #475569; }
.als-pill--review { background: #eff6ff; color: #1d4ed8; }
.als-pill--approved { background: #f0fdf4; color: #15803d; }
.als-pill--rejected { background: #fef2f2; color: #b91c1c; }
.als-pill--scheduled { background: #fffbeb; color: #b45309; }
.als-pill--published { background: #ecfeff; color: #0e7490; }

/* Forms inside dashboard */
.als-form { display: flex; flex-direction: column; gap: 16px; }
.als-form__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.als-form__messages:empty { display: none; }
.als-note { font-size: 0.8rem; color: var(--als-muted); margin: 12px 0 0; }

.als-msg { padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 8px; }
.als-msg--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.als-msg--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.als-notice { padding: 16px; background: #fff; border: 1px solid var(--als-line); border-radius: 12px; }

.als-photo-preview { display: none; max-width: 120px; max-height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid var(--als-line); }

/* Mobile menu toggle */
.als-dash__menu-toggle {
	display: none;
	position: absolute;
	top: 22px;
	left: 16px;
	z-index: 20;
	width: 38px;
	height: 38px;
	border: 1px solid var(--als-line);
	border-radius: 9px;
	background: #fff;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.als-dash__menu-toggle span { display: block; width: 18px; height: 2px; background: var(--als-ink); }

@media (max-width: 860px) {
	.als-dash { grid-template-columns: 1fr; }
	.als-dash__menu-toggle { display: flex; }
	.als-dash__sidebar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--als-sidebar-w);
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		z-index: 15;
	}
	.als-dash.is-menu-open .als-dash__sidebar { transform: none; }
	.als-dash__topbar { padding-left: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.als-section,
	.als-dash__sidebar { animation: none; transition: none; }
}

/* --- Clearer action buttons on dashboards (so Edit/Delete/etc. look clickable, not like text) --- */
.als-dash .als-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.als-dash .als-btn--primary { background: var(--als-primary); color: #fff; border-color: var(--als-primary); }
.als-dash .als-btn--primary:hover { filter: brightness(0.95); }
.als-dash .als-btn--accent { background: var(--als-accent); color: #1c1407; border-color: var(--als-accent); }
.als-dash .als-btn--accent:hover { filter: brightness(0.96); }
/* Ghost buttons now have a visible light fill + defined border so they read as buttons. */
.als-dash .als-btn--ghost {
	background: #eef2f7;
	border-color: #cbd5e1;
	color: var(--als-primary);
}
.als-dash .als-btn--ghost:hover { background: #e2e8f0; border-color: var(--als-primary); }
.als-dash .als-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Tighten spacing when several action buttons sit in a table cell or list row. */
.als-dash .als-table .als-btn,
.als-dash .als-list .als-btn { margin: 2px 4px 2px 0; }