/**
 * Batu LMS — Frontend Design System
 * Same tokens and notice/toast/component styles as admin/css/batuedu-admin.css.
 * No frontend module defines its own colors or rebuilds a component that lives here.
 */

/* ==========================================================================
   Design tokens (kept identical to admin/css/batuedu-admin.css)
   ========================================================================== */

:root,
html[data-batuedu-theme="light"] {
	--batuedu-color-primary: #4f46e5;
	--batuedu-color-primary-hover: #4338ca;
	--batuedu-color-primary-contrast: #ffffff;
	--batuedu-color-secondary: #64748b;
	--batuedu-color-secondary-hover: #475569;

	--batuedu-color-success: #16a34a;
	--batuedu-color-success-bg: #f0fdf4;
	--batuedu-color-danger: #dc2626;
	--batuedu-color-danger-bg: #fef2f2;
	--batuedu-color-warning: #d97706;
	--batuedu-color-warning-bg: #fffbeb;
	--batuedu-color-info: #0284c7;
	--batuedu-color-info-bg: #f0f9ff;

	--batuedu-color-bg: #f8fafc;
	--batuedu-color-surface: #ffffff;
	--batuedu-color-surface-muted: #f1f5f9;
	--batuedu-color-border: #e2e8f0;
	--batuedu-color-text: #0f172a;
	--batuedu-color-text-muted: #64748b;
	--batuedu-color-text-on-primary: #ffffff;

	--batuedu-radius-sm: 4px;
	--batuedu-radius-md: 8px;
	--batuedu-radius-lg: 12px;
	--batuedu-radius-full: 999px;

	--batuedu-space-xs: 4px;
	--batuedu-space-sm: 8px;
	--batuedu-space-md: 16px;
	--batuedu-space-lg: 24px;
	--batuedu-space-xl: 32px;

	--batuedu-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--batuedu-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
	--batuedu-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

	/* Body/description font. --batuedu-heading-font-family below is the
	   separate title/heading font — see the "Font Settings" card on the
	   Settings screen: with "Use Theme Font" off (default) these are Batu
	   LMS's own two fonts (loaded by batuedu_enqueue_font_assets() in
	   includes/helpers.php); switched on, that same helper overrides both
	   to `inherit` instead, right after this stylesheet loads. */
	--batuedu-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--batuedu-heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--batuedu-font-size-sm: 13px;
	--batuedu-font-size-md: 14px;
	--batuedu-font-size-lg: 18px;
	--batuedu-font-size-xl: 22px;

	--batuedu-transition: 150ms ease;
}

html[data-batuedu-theme="dark"] {
	--batuedu-color-primary: #6366f1;
	--batuedu-color-primary-hover: #818cf8;
	--batuedu-color-primary-contrast: #0f172a;
	--batuedu-color-secondary: #94a3b8;
	--batuedu-color-secondary-hover: #cbd5e1;

	--batuedu-color-success: #4ade80;
	--batuedu-color-success-bg: #052e16;
	--batuedu-color-danger: #f87171;
	--batuedu-color-danger-bg: #450a0a;
	--batuedu-color-warning: #fbbf24;
	--batuedu-color-warning-bg: #451a03;
	--batuedu-color-info: #38bdf8;
	--batuedu-color-info-bg: #082f49;

	--batuedu-color-bg: #0f172a;
	--batuedu-color-surface: #1e293b;
	--batuedu-color-surface-muted: #273449;
	--batuedu-color-border: #334155;
	--batuedu-color-text: #f1f5f9;
	--batuedu-color-text-muted: #94a3b8;
	--batuedu-color-text-on-primary: #0f172a;

	--batuedu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--batuedu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--batuedu-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Base
   ========================================================================== */

.batuedu-frontend {
	font-family: var(--batuedu-font-family);
	color: var(--batuedu-color-text);
}

.batuedu-frontend * {
	box-sizing: border-box;
}

/* Title/heading font (see the "Font Settings" card + --batuedu-heading-
   font-family above) — every native heading across every frontend page. */
.batuedu-frontend h1,
.batuedu-frontend h2,
.batuedu-frontend h3,
.batuedu-frontend h4,
.batuedu-frontend h5,
.batuedu-frontend h6 {
	font-family: var(--batuedu-heading-font-family);
}

.batuedu-frontend a {
	color: var(--batuedu-color-primary);
}

/* ==========================================================================
   Card / Table / Forms / Buttons / Badges
   (identical component styles to admin, scoped under .batuedu-frontend)
   ========================================================================== */

.batuedu-frontend .batuedu-card {
	background: var(--batuedu-color-surface);
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-lg);
	box-shadow: var(--batuedu-shadow-sm);
	padding: var(--batuedu-space-lg);
}

.batuedu-frontend .batuedu-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--batuedu-font-size-md);
}

.batuedu-frontend .batuedu-table th,
.batuedu-frontend .batuedu-table td {
	text-align: left;
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
	border-bottom: 1px solid var(--batuedu-color-border);
}

.batuedu-frontend .batuedu-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-xs);
	margin-bottom: var(--batuedu-space-md);
}

.batuedu-frontend .batuedu-input,
.batuedu-frontend .batuedu-select,
.batuedu-frontend .batuedu-textarea {
	font-family: var(--batuedu-font-family);
	font-size: var(--batuedu-font-size-md);
	color: var(--batuedu-color-text);
	background: var(--batuedu-color-surface);
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-sm);
	padding: var(--batuedu-space-sm);
	width: 100%;
}

.batuedu-frontend .batuedu-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--batuedu-space-xs);
	font-family: var(--batuedu-font-family);
	font-size: var(--batuedu-font-size-md);
	font-weight: 600;
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
	border-radius: var(--batuedu-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--batuedu-transition), border-color var(--batuedu-transition), color var(--batuedu-transition);
}

/* This class's own display:inline-flex above otherwise overrides the
   browser's default [hidden] { display: none } rule (same recurring fight
   as .batuedu-card-footer elsewhere in this file) — noticed on the
   Question Bank view's per-tab "Add Template" links, which stayed visible
   on every tab instead of just their own. */
.batuedu-frontend .batuedu-btn[hidden] {
	display: none;
}

/* A raw inline <svg> icon (viewBox only, no width/height) renders at a large
   scaled-up intrinsic size and blows the button out into a multi-line block
   — every button icon gets a fixed size by default here instead, matching
   admin/css/batuedu-admin.css's own .batuedu-btn svg rule. */
.batuedu-frontend .batuedu-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.batuedu-frontend .batuedu-btn-primary {
	background: var(--batuedu-color-primary);
	color: var(--batuedu-color-text-on-primary);
}

.batuedu-frontend .batuedu-btn-primary:hover {
	background: var(--batuedu-color-primary-hover);
}

.batuedu-frontend .batuedu-btn-secondary {
	background: var(--batuedu-color-surface-muted);
	color: var(--batuedu-color-text);
	border-color: var(--batuedu-color-border);
}

.batuedu-frontend .batuedu-btn-danger {
	background: var(--batuedu-color-danger);
	color: #ffffff;
}

.batuedu-frontend .batuedu-btn-danger:hover {
	filter: brightness(0.92);
}

.batuedu-frontend .batuedu-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--batuedu-font-size-sm);
	font-weight: 600;
	padding: 2px var(--batuedu-space-sm);
	border-radius: var(--batuedu-radius-full);
	background: var(--batuedu-color-surface-muted);
	color: var(--batuedu-color-text-muted);
}

.batuedu-frontend .batuedu-badge-success {
	background: var(--batuedu-color-success-bg);
	color: var(--batuedu-color-success);
}

.batuedu-frontend .batuedu-badge-danger {
	background: var(--batuedu-color-danger-bg);
	color: var(--batuedu-color-danger);
}

.batuedu-frontend .batuedu-badge-warning {
	background: var(--batuedu-color-warning-bg);
	color: var(--batuedu-color-warning);
}

.batuedu-frontend .batuedu-badge-info {
	background: var(--batuedu-color-info-bg);
	color: var(--batuedu-color-info);
}

/* ==========================================================================
   Notices (inline banners) & Toasts — identical markup/classes to admin
   ========================================================================== */

.batuedu-notice-region {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-sm);
}

.batuedu-notice-region:empty {
	display: none;
}

.batuedu-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--batuedu-space-sm);
	border: 1px solid var(--batuedu-color-border);
	border-left-width: 4px;
	border-radius: var(--batuedu-radius-sm);
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
	background: var(--batuedu-color-surface);
	box-shadow: var(--batuedu-shadow-sm);
	font-family: var(--batuedu-font-family);
}

.batuedu-notice-icon {
	font-weight: 700;
	flex-shrink: 0;
}

.batuedu-notice-message {
	flex-grow: 1;
	font-size: var(--batuedu-font-size-md);
}

.batuedu-notice-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--batuedu-font-size-lg);
	line-height: 1;
	color: var(--batuedu-color-text-muted);
	padding: 0;
}

.batuedu-notice-success {
	border-left-color: var(--batuedu-color-success);
	background: var(--batuedu-color-success-bg);
}

.batuedu-notice-danger {
	border-left-color: var(--batuedu-color-danger);
	background: var(--batuedu-color-danger-bg);
}

.batuedu-notice-warning {
	border-left-color: var(--batuedu-color-warning);
	background: var(--batuedu-color-warning-bg);
}

.batuedu-notice-info {
	border-left-color: var(--batuedu-color-info);
	background: var(--batuedu-color-info-bg);
}

.batuedu-toast-region {
	position: fixed;
	top: var(--batuedu-space-lg);
	right: var(--batuedu-space-lg);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-sm);
	max-width: 360px;
}

.batuedu-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--batuedu-space-sm);
	border-radius: var(--batuedu-radius-md);
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
	background: var(--batuedu-color-surface);
	border: 1px solid var(--batuedu-color-border);
	border-left: 4px solid var(--batuedu-color-text-muted);
	box-shadow: var(--batuedu-shadow-md);
	font-family: var(--batuedu-font-family);
	animation: batuedu-toast-in 150ms ease;
}

.batuedu-toast-success {
	border-left-color: var(--batuedu-color-success);
}

.batuedu-toast-danger {
	border-left-color: var(--batuedu-color-danger);
}

.batuedu-toast-warning {
	border-left-color: var(--batuedu-color-warning);
}

.batuedu-toast-info {
	border-left-color: var(--batuedu-color-info);
}

.batuedu-toast-message {
	flex-grow: 1;
	font-size: var(--batuedu-font-size-md);
}

.batuedu-toast-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--batuedu-font-size-lg);
	line-height: 1;
	color: var(--batuedu-color-text-muted);
	padding: 0;
}

@keyframes batuedu-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Modal
   ========================================================================== */

.batuedu-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100010;
}

.batuedu-modal-overlay[hidden] {
	display: none;
}

.batuedu-modal {
	background: var(--batuedu-color-surface);
	border-radius: var(--batuedu-radius-lg);
	box-shadow: var(--batuedu-shadow-lg);
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	font-family: var(--batuedu-font-family);
}

.batuedu-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--batuedu-space-md) var(--batuedu-space-lg);
	border-bottom: 1px solid var(--batuedu-color-border);
}

.batuedu-modal-body {
	padding: var(--batuedu-space-lg);
}

.batuedu-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--batuedu-space-sm);
	padding: var(--batuedu-space-md) var(--batuedu-space-lg);
	border-top: 1px solid var(--batuedu-color-border);
}

.batuedu-confirm-modal {
	max-width: 420px;
}

.batuedu-confirm-modal-message {
	margin: 0;
	font-size: var(--batuedu-font-size-md);
	color: var(--batuedu-color-text);
}

/* ==========================================================================
   Module 1 — Authentication & Account ([batuedu_account] shortcode)
   ========================================================================== */

.batuedu-account-card {
	max-width: 480px;
}

.batuedu-avatar-preview {
	border-radius: var(--batuedu-radius-full);
	object-fit: cover;
}

/* ==========================================================================
   Module 17 — Discussions, Community & Reviews ([batuedu_discussions] shortcode)
   ========================================================================== */

.batuedu-star-rating {
	color: var(--batuedu-color-warning);
	letter-spacing: 2px;
}

.batuedu-star-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	font-size: var(--batuedu-font-size-xl);
}

.batuedu-star-input input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.batuedu-star-input label {
	cursor: pointer;
	color: var(--batuedu-color-border);
	line-height: 1;
}

.batuedu-star-input input:checked ~ label,
.batuedu-star-input label:hover,
.batuedu-star-input label:hover ~ label {
	color: var(--batuedu-color-warning);
}

.batuedu-star-input input:focus-visible ~ label {
	outline: none;
}

.batuedu-discussion-thread {
	padding-bottom: var(--batuedu-space-sm);
}

.batuedu-reply-item {
	padding: var(--batuedu-space-sm) 0;
	border-top: 1px solid var(--batuedu-color-border);
}

.batuedu-reply-item:first-child {
	border-top: none;
}

/* ==========================================================================
   Pagination — numbered page buttons, shared by every paginated list.
   Same visual component the admin side's Global User Management list
   already used, mirrored here under the same generic name (see
   admin/css/batuedu-admin.css). Colors/spacing/radius all come from this
   file's own design tokens.
   ========================================================================== */

.batuedu-frontend .batuedu-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--batuedu-space-md);
	flex-wrap: wrap;
	margin: var(--batuedu-space-md) calc(-1 * var(--batuedu-space-lg)) calc(-1 * var(--batuedu-space-lg));
	padding: var(--batuedu-space-md) var(--batuedu-space-lg);
	border-top: 1px solid var(--batuedu-color-border);
	background: var(--batuedu-color-surface-muted);
	border-radius: 0 0 var(--batuedu-radius-lg) var(--batuedu-radius-lg);
}

/* This rule's own `display: flex` above otherwise beats the browser's
   default `[hidden] { display: none }` (an author stylesheet always wins
   over the user-agent one, regardless of selector specificity), so a
   `hidden` .batuedu-card-footer — e.g. a pagination bar hidden because
   everything fits on one page — would stay visibly on screen without this. */
.batuedu-frontend .batuedu-card-footer[hidden] {
	display: none;
}

.batuedu-frontend .batuedu-pagination {
	display: flex;
	align-items: center;
	gap: 4px;
}

.batuedu-frontend .batuedu-pagination-page,
.batuedu-frontend .batuedu-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-sm);
	background: var(--batuedu-color-surface);
	color: var(--batuedu-color-text);
	font-size: var(--batuedu-font-size-sm);
	cursor: pointer;
}

.batuedu-frontend .batuedu-pagination-page:hover {
	background: var(--batuedu-color-surface-muted);
}

.batuedu-frontend .batuedu-pagination-page.is-active {
	background: var(--batuedu-color-primary);
	border-color: var(--batuedu-color-primary);
	color: var(--batuedu-color-text-on-primary);
}

.batuedu-frontend .batuedu-pagination-next svg {
	width: 14px;
	height: 14px;
}

.batuedu-frontend .batuedu-pagination-next:disabled {
	opacity: 0.5;
	cursor: default;
}

.batuedu-frontend .batuedu-pagination-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	color: var(--batuedu-color-text-muted);
}

.batuedu-frontend .batuedu-pagination-info {
	margin: 0;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.batuedu-frontend :focus-visible,
.batuedu-toast :focus-visible,
.batuedu-notice :focus-visible {
	outline: none;
}