/*
 * أنماط نماذج الدخول/التسجيل ولوحة الطالب. كل الألوان عبر متغيّرات CSS
 * الموجودة أصلًا في theme.json (لا hex مباشر هنا).
 */

.elm-auth-form {
	max-width: 26rem;
	margin-inline: auto;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.elm-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: 1rem;
}

.elm-field label {
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

.elm-field input,
.elm-field select {
	min-height: 44px;
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.5rem;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.elm-field input:focus-visible,
.elm-field select:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
}

.elm-field-error {
	color: var( --wp--preset--color--social );
	font-size: 0.9rem;
}

.elm-form-error {
	margin-block-end: 1rem;
}

.elm-auth-submit {
	display: inline-block;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: 0.5rem;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--surface );
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.elm-auth-submit--link {
	text-align: center;
}

.elm-auth-switch {
	max-width: 26rem;
	margin: 1rem auto 0;
	text-align: center;
	color: var( --wp--preset--color--muted );
}

/* مصيدة النحل: مخفيّة بصريًّا لا بـ type=hidden، مقروءة من قارئات الشاشة أحيانًا لذا نُبعدها بصريًّا فقط. */
.elm-hp-wrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.elm-auth-form-notice {
	max-width: 26rem;
	margin-inline: auto;
	text-align: center;
}

/* -----------------------------------------------------------------------
 * لوحة الطالب [elm_dashboard]: غلاف عريض بلا حدود/خلفية خاصة به، كل بطاقة
 * (section.elm-dash-card) تحمل مظهر .elm-auth-form نفسه بشكل مستقل.
 * -------------------------------------------------------------------- */

.elm-dashboard {
	max-width: 60rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.elm-dash-card {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.elm-dash-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.elm-dash-grade-badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--muted );
	font-size: 0.9rem;
}

.elm-dash-cta {
	margin-block-start: 0.75rem;
}

.elm-dash-empty {
	color: var( --wp--preset--color--muted );
	margin-block-end: 0.75rem;
}

.elm-dash-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1rem;
}

@media ( max-width: 480px ) {
	.elm-dash-stats {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.elm-stat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-align: center;
}

.elm-stat-num {
	font-size: 1.6rem;
	font-weight: 700;
	color: var( --wp--preset--color--contrast );
}

.elm-stat-label {
	font-size: 0.85rem;
	color: var( --wp--preset--color--muted );
}

.elm-dash-meta {
	color: var( --wp--preset--color--muted );
	font-size: 0.9rem;
}

.elm-tabular {
	font-variant-numeric: tabular-nums;
}

.elm-dash-continue-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.elm-dash-continue-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var( --wp--preset--color--line );
}

.elm-dash-continue-row:last-child {
	border-block-end: none;
}

.elm-dash-continue-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.elm-dash-subjects {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );
	gap: 1rem;
}

.elm-dash-subject-card {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.6rem;
	padding: 1rem;
}

.elm-dash-subject-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.5rem;
}

.elm-dash-subject-name {
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

.elm-progress-track {
	background: var( --wp--preset--color--base );
	border-radius: 999px;
	height: 0.5rem;
	overflow: hidden;
	margin-block: 0.5rem;
}

.elm-progress-fill {
	background: var( --elm-subject-color, var( --wp--preset--color--accent ) );
	height: 100%;
	border-radius: 999px;
}

.elm-table-wrap {
	overflow-x: auto;
}

.elm-dash-table {
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
}

.elm-dash-table th,
.elm-dash-table td {
	padding: 0.5rem 0.75rem;
	text-align: start;
	border-block-end: 1px solid var( --wp--preset--color--line );
}

.elm-dash-table th {
	color: var( --wp--preset--color--muted );
	font-weight: 600;
	font-size: 0.85rem;
}

.elm-dash-activity-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var( --wp--preset--color--line );
}

.elm-dash-activity-row:last-child {
	border-block-end: none;
}

.elm-dash-hidden {
	display: none;
}

.elm-dash-activity-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var( --wp--preset--color--muted );
}

.elm-dash-activity-title {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.elm-dash-grade-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.elm-dash-grade-chip {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.5rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.9rem;
	color: var( --wp--preset--color--muted );
}

.elm-dash-settings-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 26rem;
	margin-block-end: 1.5rem;
}

.elm-dash-settings-form:last-child {
	margin-block-end: 0;
}

.elm-icon-svg {
	width: 1.2em;
	height: 1.2em;
}