/*
 * هوية صفحات الدخول والتسجيل (طالب، إدارة، داعم) بنفس شكل الصفحة الرئيسية «لوحة حيّة»:
 * خلفية فاتحة، كبسولة تنقّل بيضاء، بطاقات بزوايا كبيرة من غير حدود، عناوين بخط ريم كوفي،
 * والبطاقة الجانبية بالأخضر البترولي. بيتحمّل بعد CSS كل صفحة؛ الماركب والسلوك زي ما هم.
 */

/* All auth entry points opt into foundation. These existing aliases are layout adapters. */
body.public-shell:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page) {
    --au-bg: var(--ui-surface-canvas);
    --au-ink: var(--ui-surface-text);
    --au-text: var(--ui-surface-text-soft);
    --au-muted: var(--ui-surface-muted);
    --au-line: var(--ui-surface-border);
    --au-teal: var(--ui-color-brand-700);
    --au-teal-dark: var(--ui-color-brand-800);
    --au-mint: var(--ui-color-brand-100);
    --au-mint-ink: var(--ui-color-brand-800);
    --au-gold: var(--ui-color-warning-soft);
    --au-gold-ink: var(--ui-color-warning);
    --au-gold-text: var(--ui-color-warning);
    --au-on-dark: var(--ui-color-brand-100);
    --au-shadow: var(--ui-shadow-md);
    --au-display: "Reem Kufi", "Cairo", system-ui, sans-serif;
    --au-font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- الأساس ---------- */
html:has(body:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page)) { background: var(--ui-surface-canvas); }
body:is(.student-login-page, .student-register-page, .supporter-auth-page),
body.public-shell:is(.admin-login-page, .admin-register-page) {
    background: var(--au-bg) !important; /* يغطي تدرّجات الخلفية القديمة في login.css وauth.css */
    color: var(--au-text);
    font-family: var(--au-font);
}
body:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page) :is(h1, h2) {
    font-family: var(--au-display);
    font-weight: 700;
    letter-spacing: 0;
}
body:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--ui-color-brand-700);
    outline-offset: 3px;
}

/* ---------- التنقّل: كبسولة بيضاء عايمة ---------- */
body.student-login-page .student-auth-nav,
body.student-register-page .student-register-nav,
body.supporter-auth-page .support-auth-nav {
    width: min(1180px, calc(100% - 24px));
    margin: 14px auto 0;
    padding: 10px 12px;
    padding-inline-start: 14px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--au-shadow);
}
body.student-login-page .student-auth-nav__inner { width: 100%; max-width: none; padding: 0; min-height: 0; }
body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-brand, .student-register-brand, .support-auth-brand) { color: var(--au-ink); }
body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-brand strong, .student-register-brand strong, .support-auth-brand span) {
    font-family: var(--au-display);
    font-size: 1.1rem;
    font-weight: 700;
}
body.student-login-page .student-auth-brand > span,
body.student-register-page .student-register-brand img,
body.supporter-auth-page .support-auth-brand img {
    border: 0;
    border-radius: 14px;
    background: var(--au-mint);
    box-shadow: none;
}
body.student-register-page .student-register-brand img,
body.supporter-auth-page .support-auth-brand img { width: 44px; height: 44px; padding: 6px; }
body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-home, .student-register-login, .support-auth-home) {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--au-ink);
    color: #fff;
    font-weight: 800;
    box-shadow: none;
}
body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-home, .student-register-login, .support-auth-home):hover { background: var(--au-teal); color: #fff; transform: none; }
body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-home, .student-register-login, .support-auth-home) i { color: inherit; }

/* ---------- البطاقات ---------- */
body.student-login-page .student-auth-panel,
body.supporter-auth-page .support-auth-card,
body.student-register-page .student-register-section,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__form {
    border: 0;
    border-radius: 30px;
    background: #fff;
    box-shadow: none;
}
body.student-login-page .student-auth-main { gap: 16px; }
body.supporter-auth-page .support-auth-shell {
    gap: 16px;
    width: min(1180px, calc(100% - 24px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.supporter-auth-page .support-auth-card { box-shadow: none; }

/* أيقونة رأس البطاقة: مربع نعناعي */
body.student-login-page .student-auth-header__icon,
body.supporter-auth-page .support-auth-icon,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-form-head__icon,
body.student-register-page .student-register-section__title > i {
    border: 0;
    border-radius: 16px;
    background: var(--au-mint);
    color: var(--au-mint-ink);
    box-shadow: none;
}
body.student-login-page .student-auth-header { border: 0; }
body.student-login-page .student-auth-header h1,
body.supporter-auth-page .support-auth-card h1,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-form-head h2 {
    color: var(--au-ink);
    font-family: var(--au-display);
    font-size: min(clamp(1.9rem, 3vw, 2.4rem), 11vw);
    line-height: 1.3;
}
body.student-login-page .student-auth-header small,
body.supporter-auth-page .support-auth-card header small,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-kicker {
    color: var(--au-teal);
    font-weight: 800;
}
body.student-login-page .student-auth-header p,
body.supporter-auth-page .support-auth-card header p,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-form-head p { color: var(--au-muted); }

/* ---------- الحقول ---------- */
body.student-login-page .student-auth-control input,
body.supporter-auth-page .support-auth-control input,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-field__control input,
body.student-register-page :is(.student-register-grid input, .student-register-grid select, .student-register-selection select, .student-register-notes textarea) {
    border: 1.5px solid transparent;
    border-radius: 16px;
    background: var(--au-bg);
    color: var(--au-ink);
    font-weight: 700;
    box-shadow: none;
}
/* حقول الإدارة بتحتفظ بارتفاعها من login.css لأنه بيكبر مع تكبير الخط. */
body.student-login-page .student-auth-control input,
body.supporter-auth-page .support-auth-control input,
body.student-register-page :is(.student-register-grid input, .student-register-grid select, .student-register-selection select) { min-height: 52px; }
body.student-register-page .student-register-notes textarea { min-height: 96px; }
body.student-login-page .student-auth-control input:focus,
body.supporter-auth-page .support-auth-control input:focus,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-field__control input:focus,
body.student-register-page :is(.student-register-grid input, .student-register-grid select, .student-register-selection select, .student-register-notes textarea):focus {
    border-color: var(--au-teal);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 107, 96, .14);
    outline: none;
}
body.student-register-page .student-register-grid input[readonly] { background: #eaefec; color: var(--au-muted); }
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-field__control { border: 0; background: transparent; box-shadow: none; }
body:is(.student-login-page, .admin-login-page, .admin-register-page, .supporter-auth-page) :is(.student-auth-field > span, .admin-auth-field > label, .support-auth-form label > span),
body.student-register-page :is(.student-register-grid label > span, .student-register-selection__label, .student-register-fieldset legend) {
    color: var(--au-ink);
    font-weight: 800;
}

/* ---------- الأزرار ---------- */
/* اختيارات التسجيل (النوع، طريقة الحضور...) كبسولات */
body.student-register-page :is(.student-register-segments, .student-register-modes) label {
    min-height: 50px;
    border: 1.5px solid var(--au-line);
    border-radius: 16px;
    background: #fff;
    color: var(--au-text);
    font-weight: 800;
}
body.student-register-page :is(.student-register-segments, .student-register-modes) input:checked + label {
    border-color: var(--au-teal);
    background: var(--au-teal);
    color: #fff;
}

/* ---------- التنبيهات ---------- */
body:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page) :is(.student-auth-alert, .student-register-alert, .admin-auth-alert, .support-auth-alert) {
    border-radius: 16px;
}

/* ---------- البطاقة الجانبية: أخضر بترولي بعنوان كبير وعلامة مائية ---------- */
body.student-login-page .student-auth-onboarding,
body.supporter-auth-page .support-auth-story,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: var(--au-teal);
    color: #fff;
    box-shadow: none;
}
/* الزخارف القديمة (دواير وتدرّجات) بتتشال: البطاقة لون واحد صافي زي الرئيسية. */
body.student-login-page .student-auth-onboarding::after,
body.supporter-auth-page .support-auth-story::after,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual::after { content: none; }
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual::before { display: none; }
body.student-login-page .student-auth-onboarding > *,
body.supporter-auth-page .support-auth-story > *,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual > * { position: relative; z-index: 1; }
body.student-login-page .student-auth-onboarding h2,
body.supporter-auth-page .support-auth-story h2,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual h1 {
    color: #fff;
    font-family: var(--au-display);
    font-size: min(clamp(2rem, 3.4vw, 2.9rem), 11vw);
    font-weight: 700;
    line-height: 1.25;
}
body.student-login-page .student-auth-onboarding > p:not(.student-auth-eyebrow),
body.supporter-auth-page .support-auth-story > p:not(.support-auth-eyebrow),
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card__visual-copy p { color: var(--au-on-dark); }
body.student-login-page .student-auth-onboarding .student-auth-eyebrow,
body.supporter-auth-page .support-auth-story .support-auth-eyebrow,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 800;
}
body.student-login-page .student-auth-onboarding__mark,
body.supporter-auth-page .support-auth-story__mark,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-brand__mark {
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
}
body.supporter-auth-page .support-auth-story__mark > i { color: #fff; }
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-brand strong { font-family: var(--au-display); color: #fff; }
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-brand small { color: var(--au-on-dark); }

/* القوائم داخل البطاقة الجانبية */
body.student-login-page .student-auth-steps li,
body.supporter-auth-page .support-auth-points span,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-features li {
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
body.student-login-page .student-auth-steps li > span {
    border: 0;
    border-radius: 12px;
    background: var(--au-gold);
    color: var(--au-gold-ink);
    font-family: var(--au-display);
}
body.student-login-page .student-auth-steps strong { color: #fff; }
body.student-login-page .student-auth-steps small { color: var(--au-on-dark); }
body.supporter-auth-page .support-auth-points i,
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-features i {
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: var(--au-gold);
}

body.student-login-page .student-auth-groups-link { color: #fff; }

/* ---------- كارت الإدارة: البطاقتين جنب بعض بدل كارت واحد بإطار ---------- */
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-shell { padding: 16px 12px; }
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-card {
    gap: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
body.public-shell:is(.admin-login-page, .admin-register-page) .admin-auth-alt a { color: var(--au-teal); }

/* ---------- الداعم: الشريط الدهبي القديم بين البطاقتين ---------- */
body.supporter-auth-page .support-auth-shell::before,
body.supporter-auth-page .support-auth-shell::after,
body.supporter-auth-page .support-auth-card::before,
body.supporter-auth-page .support-auth-card::after,
body.supporter-auth-page .support-auth-story::before { display: none; }
body.supporter-auth-page .support-auth-switch a { color: var(--au-teal); }

/* ---------- التسجيل: رأس الصفحة بطاقة خضرا ---------- */
body.student-register-page .student-register-shell {
    width: min(1040px, calc(100% - 24px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.student-register-page .student-register-form { padding: 16px 0 0; gap: 16px; }
body.student-register-page .student-register-head {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: var(--au-teal);
    box-shadow: none;
}
body.student-register-page .student-register-head > * { position: relative; z-index: 1; }
body.student-register-page .student-register-head h1 { color: #fff; font-size: min(clamp(1.9rem, 3.2vw, 2.6rem), 10vw); }
body.student-register-page .student-register-head small { color: var(--au-gold); }
body.student-register-page .student-register-head p { color: var(--au-on-dark); }
body.student-register-page .student-register-head > span { border: 0; border-radius: 16px; background: #fff; color: var(--au-teal); }
body.student-register-page .student-register-section__title span { color: var(--au-ink); font-family: var(--au-display); font-size: 1.2rem; font-weight: 700; }
body.student-register-page .student-register-section__title { border-color: var(--au-line); }

@media (max-width: 560px) {
    body:is(.student-login-page, .student-register-page, .supporter-auth-page) :is(.student-auth-home, .student-register-login, .support-auth-home) { padding: 0 12px; }
}

/* الشاشات الضيقة: العناوين أصغر عشان أطول كلمة تفضل في سطرها حتى مع تكبير الخط 200%. */
@media (max-width: 420px) {
    body.student-login-page :is(.student-auth-header h1, .student-auth-onboarding h2),
    body.supporter-auth-page :is(.support-auth-card h1, .support-auth-story h2),
    body.public-shell:is(.admin-login-page, .admin-register-page) :is(.admin-auth-form-head h2, .admin-auth-card__visual h1),
    body.student-register-page .student-register-head h1 { font-size: 1.6rem; }
}

body.public-shell:is(.student-login-page, .student-register-page, .admin-login-page, .admin-register-page, .supporter-auth-page) .ui-request-review .ui-button:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}