/* ==========================================================================
   مديد — Public / Auth Layout (Phase 3)
   PublicLayout: نموذج على جهة البداية + لوحة هوية على جهة النهاية (≥ 1024)
   ========================================================================== */

.a-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); background: var(--color-surface); }

/* ---------- Form side ---------- */
.a-main { display: flex; flex-direction: column; min-height: 100vh; padding: var(--space-8) var(--space-6); }
.a-main__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.a-main__body { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: var(--space-8); }
.a-form-wrap { width: 100%; max-width: 420px; }
.a-main__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--text-small); color: var(--color-text-muted); }
.a-main__foot a { color: inherit; text-decoration: none; }
.a-main__foot a:hover { color: var(--color-primary); text-decoration: underline; }

.a-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: var(--font-bold); font-size: var(--text-h4); text-decoration: none; }
.a-logo__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary); }
.a-main .a-logo { visibility: hidden; } /* يظهر على الشاشات الصغيرة فقط */

.a-head { margin-bottom: var(--space-6); }
.a-head__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: var(--color-primary-50); color: var(--color-primary); }
.a-head__icon .c-icon { width: 26px; height: 26px; }
.a-head h1 { margin: 0; }
.a-head p { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.a-head p strong { color: var(--color-text); }

.a-form { display: flex; flex-direction: column; gap: var(--space-5); }
.a-form .c-alert { margin-bottom: 0; }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.a-link { color: var(--color-primary); font-weight: var(--font-semibold); font-size: var(--text-small); text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.a-link:hover { text-decoration: underline; }
.a-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.a-link:disabled { color: var(--color-text-disabled); cursor: not-allowed; text-decoration: none; }

.a-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); margin-block: var(--space-2); }
.a-divider::before, .a-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.a-note { padding: var(--space-3) var(--space-4); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-muted); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* ---------- Brand side ---------- */
.a-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-12) var(--space-10);
  color: #fff; background-color: var(--color-primary-dark);
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.a-brand__logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-h3); font-weight: var(--font-bold); color: #fff; text-decoration: none; align-self: flex-start; border-radius: var(--radius-md); }
a.a-brand__logo:hover .a-logo__mark { background: rgba(255,255,255,.2); }
a.a-brand__logo:focus-visible { outline: 2px solid #8FE0D7; outline-offset: 4px; }
.a-brand__logo .a-logo__mark { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.12); }
.a-brand__title { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--font-bold); margin: 0 0 var(--space-3); max-width: 420px; }
.a-brand__text { margin: 0; color: #CFE6E0; max-width: 420px; }
.a-brand__list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.a-brand__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: #E6F2EF; }
.a-brand__list .c-icon { flex: none; margin-top: 4px; color: #7FD8C9; }
.a-brand__foot { font-size: var(--text-caption); color: #9EC4BA; }

@media (max-width: 1023px) {
  .a-page { grid-template-columns: minmax(0, 1fr); }
  .a-brand { display: none; }
  .a-main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .a-main .a-logo { visibility: visible; }
  .a-main__body { align-items: flex-start; padding-block: var(--space-8) var(--space-6); }
}

/* ---------- Step indicator ---------- */
.a-steps { display: flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.a-steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-caption); color: var(--color-text-muted); font-weight: var(--font-semibold); }
.a-steps li::before { content: ""; height: 4px; border-radius: var(--radius-pill); background: var(--color-neutral-100); }
.a-steps li.is-done::before, .a-steps li.is-current::before { background: var(--color-primary); }
.a-steps li.is-current { color: var(--color-primary); }
.a-steps li.is-done { color: var(--color-text); }

/* ---------- OTP ---------- */
.a-otp { display: flex; gap: var(--space-2); direction: ltr; justify-content: center; }
.a-otp input {
  width: 52px; height: 60px; padding: 0;
  font: inherit; font-size: 1.5rem; font-weight: var(--font-bold); text-align: center; font-variant-numeric: tabular-nums;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  caret-color: var(--color-primary);
}
.a-otp input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.a-otp.is-error input { border-color: var(--color-danger); }
.a-otp.is-success input { border-color: var(--color-success); background: var(--color-success-50); }
@media (max-width: 380px) { .a-otp { gap: 6px; } .a-otp input { width: 44px; height: 54px; } }
.a-resend { text-align: center; font-size: var(--text-small); color: var(--color-text-muted); }

/* ---------- Password strength ---------- */
.a-strength { display: flex; flex-direction: column; gap: var(--space-2); }
.a-strength__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.a-strength__bar span { height: 6px; border-radius: var(--radius-pill); background: var(--color-neutral-100); transition: background-color var(--duration-base); }
.a-strength[data-level="1"] .a-strength__bar span:nth-child(-n+1) { background: var(--color-danger); }
.a-strength[data-level="2"] .a-strength__bar span:nth-child(-n+2) { background: var(--color-warning); }
.a-strength[data-level="3"] .a-strength__bar span:nth-child(-n+3) { background: var(--color-secondary); }
.a-strength[data-level="4"] .a-strength__bar span { background: var(--color-success); }
.a-strength__label { font-size: var(--text-caption); color: var(--color-text-muted); }
.a-strength__label strong { color: var(--color-text); }

.a-rules { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: grid; gap: 6px; font-size: var(--text-small); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.a-rules li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.a-rules li .c-icon { width: 16px; height: 16px; stroke-width: 2.4; color: var(--color-text-disabled); }
.a-rules li.is-met { color: var(--color-success-text); }
.a-rules li.is-met .c-icon { color: var(--color-success); }

/* ---------- Status screen (مقفل / انتهت الجلسة / غير موجود) ---------- */
.a-status { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.a-status__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--color-primary-50); color: var(--color-primary); margin-bottom: var(--space-2); }
.a-status__icon .c-icon { width: 32px; height: 32px; stroke-width: 1.6; }
.a-status--danger .a-status__icon { background: var(--color-danger-50); color: var(--color-danger); }
.a-status--warning .a-status__icon { background: var(--color-warning-50); color: var(--color-warning-text); }
.a-status h1 { margin: 0; }
.a-status p { margin: 0; color: var(--color-text-muted); max-width: 380px; }
.a-status__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-top: var(--space-4); }
.a-countdown { font-variant-numeric: tabular-nums; font-weight: var(--font-bold); color: var(--color-text); direction: ltr; unicode-bidi: isolate; }

/* Found-account preview (تفعيل ولي الأمر) */
.a-match { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-success-50); border: 1px solid var(--color-success-100); border-radius: var(--radius-md); }
.a-match__title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-bold); color: var(--color-success-text); }
.a-match ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--text-small); }
.a-match li { display: flex; justify-content: space-between; gap: var(--space-3); }
.a-match li span:first-child { color: var(--color-text-muted); }

/* [data-when] — حالات العرض */
[data-when][hidden] { display: none !important; }

/* ==========================================================================
   Account security page (داخل هيكل المدرسة/ولي الأمر)
   ========================================================================== */
.s-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1100px) { .s-grid { grid-template-columns: minmax(0, 1fr); } }
.s-session { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.s-session:last-child { border-bottom: 0; }
.s-session__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--color-neutral-50); color: var(--color-neutral-text); }
.s-session.is-current .s-session__icon { background: var(--color-primary-50); color: var(--color-primary); }
.s-session__body { flex: 1; min-width: 0; }
.s-session__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-weight: var(--font-semibold); }
.s-session__meta { font-size: var(--text-small); color: var(--color-text-muted); }
@media (max-width: 639px) { .s-session { flex-wrap: wrap; padding: var(--space-4); } .s-session .c-btn { width: 100%; } }
.s-facts { margin: 0; display: grid; gap: var(--space-3); }
.s-facts div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); }
.s-facts dt { color: var(--color-text-muted); }
.s-facts dd { margin: 0; font-weight: var(--font-semibold); text-align: end; }
/* التفعيل برمز من المدرسة: الرمز (XXXX-XXXX) والرمز السري متباعدان ليُقرآ بلا خطأ */
.a-code-input { letter-spacing: .14em; font-weight: var(--font-semibold); text-transform: uppercase; }
.a-pin-input { letter-spacing: .4em; font-size: 1.15rem; }

/* هوية «مديد»: الرمز الجديد داخل بلاطة بيضاء */
.a-logo__mark, .a-brand__logo .a-logo__mark, a.a-brand__logo:hover .a-logo__mark { background: #fff; box-shadow: 0 1px 2px rgba(20, 45, 68, .18); }
.a-logo__mark .brand-mark { width: 78%; height: 78%; object-fit: contain; }