/*
 * Sign-in, forgot and reset password pages for students and parents.
 * Two looks, picked by the school's "theme" setting: classic (school panel
 * beside the form) and modern (one centred card on navy).
 */

:root {
    --ap-ink: #0f172a;
    --ap-muted: #64748b;
    --ap-line: #e2e8f0;
    --ap-bg: #f3f5f9;
    --ap-primary: #f97316;
    --ap-primary-dark: #ea580c;
    --ap-navy: #0f2747;
    --ap-navy-2: #173a6a;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

.ap-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ap-bg);
    color: var(--ap-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ap-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Top bar: the school, not the software ----- */
.ap-top {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: #fff;
    border-bottom: 1px solid var(--ap-line);
}

.ap-school { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ap-ink); }
.ap-school:hover { text-decoration: none; }
.ap-school img, .ap-monogram { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--ap-line); border-radius: 10px; background: #fff; object-fit: contain; }
.ap-monogram { display: grid; place-items: center; background: var(--ap-primary); border: 0; color: #fff; font-weight: 700; }
.ap-school strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ap-school small { display: block; color: var(--ap-muted); font-size: 12px; }

.ap-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px 28px; }

@media (min-width: 768px) {
    .ap-top { padding: 14px 28px; }
    .ap-main { align-items: center; padding: 40px 24px; }
}

/* ----- Card and form ----- */
.ap-card { width: 100%; max-width: 420px; border: 1px solid var(--ap-line); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.08); }
.ap-card-body { padding: 24px 20px; }
@media (min-width: 480px) { .ap-card-body { padding: 30px 28px; } }

.ap-kicker { color: var(--ap-primary-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ap-title { margin: 4px 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ap-sub { margin: 0 0 20px; color: var(--ap-muted); font-size: 14.5px; line-height: 1.5; }

.ap-field { margin-bottom: 16px; }
.ap-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ap-input-wrap { position: relative; }
.ap-input-wrap > .fa { position: absolute; top: 50%; left: 14px; color: #94a3b8; transform: translateY(-50%); pointer-events: none; }
.ap-input { width: 100%; height: 50px; padding: 0 14px 0 40px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: var(--ap-ink); font-family: inherit; font-size: 16px; }
.ap-input:focus { border-color: var(--ap-primary); outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); }
.ap-input.has-toggle { padding-right: 70px; }
.ap-field.has-error .ap-input { border-color: #ef4444; }
.ap-toggle { position: absolute; top: 50%; right: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ap-primary-dark); font-family: inherit; font-size: 13.5px; font-weight: 600; transform: translateY(-50%); cursor: pointer; }
.ap-toggle:hover { background: #fff7ed; }
.ap-error { display: block; margin-top: 6px; color: #b91c1c; font-size: 13px; }

.ap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 20px; font-size: 14px; }
.ap-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #334155; cursor: pointer; }
.ap-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ap-primary); }

.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--ap-primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25); }
.ap-btn:hover { background: var(--ap-primary-dark); }
.ap-btn:disabled { opacity: 0.75; cursor: default; }
.ap-btn.is-busy::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%; animation: ap-spin 0.8s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }

.ap-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f6; color: var(--ap-muted); font-size: 14px; text-align: center; }
.ap-alt a { font-weight: 600; }
.ap-alert { display: flex; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.ap-alert.is-error { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.ap-alert.is-ok { border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
.ap-tip { margin-top: 14px; color: var(--ap-muted); font-size: 13px; line-height: 1.5; }

/* ----- Classic: school panel beside the form ----- */
.ap-split { display: grid; width: 100%; max-width: 940px; overflow: hidden; border: 1px solid var(--ap-line); border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); }
.ap-split .ap-card { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.ap-panel { position: relative; overflow: hidden; padding: 20px; background: linear-gradient(135deg, var(--ap-navy), var(--ap-navy-2)); color: #fff; }
.ap-panel::after { content: ""; position: absolute; top: -90px; right: -70px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, 0.45), transparent 70%); }
.ap-panel > * { position: relative; z-index: 1; }
.ap-panel-logo { display: none; width: 88px; height: 88px; margin-bottom: 18px; padding: 8px; border-radius: 22px; background: #fff; object-fit: contain; }
.ap-panel h2 { margin: 0; font-size: 19px; font-weight: 700; }
.ap-panel p { margin: 4px 0 0; color: #cbd5e1; font-size: 14px; line-height: 1.5; }
.ap-features { display: none; margin: 24px 0 0; padding: 0; list-style: none; }
.ap-features li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #e2e8f0; font-size: 14.5px; }
.ap-features i { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); color: #fdba74; }
@media (min-width: 860px) {
    .ap-split { grid-template-columns: 1fr 1fr; }
    .ap-panel { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; }
    .ap-panel-logo, .ap-features { display: block; }
    .ap-features li { display: flex; }
    .ap-panel h2 { font-size: 26px; }
    .ap-split .ap-card-body { padding: 44px 40px; }
}

/* ----- Modern: one card on navy ----- */
.ap-body.is-modern { background: linear-gradient(160deg, var(--ap-navy) 0%, var(--ap-navy-2) 55%, #1f4d86 100%); }
.ap-body.is-modern .ap-top { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.1); }
.ap-body.is-modern .ap-school, .ap-body.is-modern .ap-school small { color: #fff; }
.ap-body.is-modern .ap-school small { opacity: 0.7; }
.ap-body.is-modern .ap-foot, .ap-body.is-modern .ap-foot a { color: #cbd5e1; }
.ap-modern-badge { display: grid; place-items: center; width: 72px; height: 72px; margin: -60px auto 14px; border: 4px solid #fff; border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2); overflow: hidden; }
.ap-modern-badge img { width: 100%; height: 100%; object-fit: contain; }
.ap-body.is-modern .ap-main { padding-top: 56px; }
.ap-body.is-modern .ap-card { text-align: left; }
.ap-center { text-align: center; }

/* ----- Footer ----- */
.ap-foot { padding: 14px 16px 22px; color: var(--ap-muted); font-size: 13px; text-align: center; }
.ap-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-bottom: 6px; }
.ap-contact a { color: inherit; font-weight: 600; }
.ap-powered a { color: inherit; font-weight: 600; }

/* ----- Staff two-step sign-in (two-factor.css gives the layout; these set the theme) ----- */
.is-tfa .tfa-shell { width: 100%; padding: 0; }
.is-tfa .tfa-card { border: 1px solid var(--ap-line); border-radius: 20px; padding: 28px 20px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); }
@media (min-width: 480px) { .is-tfa .tfa-card { padding: 34px 30px; } }
.is-tfa .tfa-icon { border-radius: 16px; background: #fff1e6; color: var(--ap-primary-dark); box-shadow: none; }
.is-tfa .tfa-title { color: var(--ap-ink); font-size: 23px; font-weight: 700; }
.is-tfa .tfa-subtitle, .is-tfa .tfa-hint, .is-tfa .tfa-method-desc { color: var(--ap-muted); }
.is-tfa .tfa-otp-box, .is-tfa .tfa-code-input { border-color: #cbd5e1; border-radius: 12px; font-family: inherit; }
.is-tfa .tfa-otp-box:focus, .is-tfa .tfa-code-input:focus { border-color: var(--ap-primary); outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); }
.is-tfa .tfa-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; height: 50px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--ap-primary); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25); }
.is-tfa .tfa-btn-primary:hover, .is-tfa .tfa-btn-primary:focus { background: var(--ap-primary-dark); color: #fff; text-decoration: none; }
.is-tfa .tfa-link, .is-tfa .tfa-link:hover, .is-tfa .tfa-btn-link:hover { color: var(--ap-primary-dark); }
.is-tfa .tfa-link { border: 0; background: none; font-family: inherit; font-weight: 600; cursor: pointer; }
.is-tfa .tfa-btn-link { border: 0; background: none; color: var(--ap-muted); font-family: inherit; font-size: 14px; cursor: pointer; }
.is-tfa .tfa-method-option { border-color: var(--ap-line); border-radius: 16px; }
.is-tfa .tfa-method-option:hover { border-color: #fdba74; }
.is-tfa .tfa-method-icon { background: #fff1e6; color: var(--ap-primary-dark); }
.is-tfa .tfa-remember input { accent-color: var(--ap-primary); }
.is-tfa .tfa-status { border-radius: 12px; }
.is-tfa .tfa-error { color: #b91c1c; }

/* ----- Which portal am I on? ----- */
.ap-top { gap: 12px; justify-content: space-between; }
.ap-portal-tag { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff1e6; color: var(--ap-primary-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 380px) { .ap-portal-tag { padding: 6px 9px; font-size: 11px; } .ap-portal-tag .fa { display: none; } }

/* ----- Staff: dark page, compact card, navy button ----- */
.ap-body.is-staff { background: radial-gradient(circle at 15% 0%, #1e293b 0%, transparent 55%), #0b1220; }
.ap-body.is-staff .ap-top { background: #0b1220; border-bottom-color: rgba(255, 255, 255, 0.08); }
.ap-body.is-staff .ap-school, .ap-body.is-staff .ap-school small { color: #fff; }
.ap-body.is-staff .ap-school small { opacity: 0.6; }
.ap-body.is-staff .ap-portal-tag { background: #1e293b; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.12); }
.ap-body.is-staff .ap-foot, .ap-body.is-staff .ap-foot a { color: #94a3b8; }
.ap-body.is-staff .ap-card { max-width: 420px; border-color: transparent; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.ap-body.is-staff .ap-kicker { color: #475569; }
.ap-body.is-staff .ap-btn { background: var(--ap-navy-2); box-shadow: 0 8px 18px rgba(15, 39, 71, 0.3); }
.ap-body.is-staff .ap-btn:hover { background: var(--ap-navy); }
.ap-body.is-staff .ap-input:focus { border-color: var(--ap-navy-2); box-shadow: 0 0 0 4px rgba(23, 58, 106, 0.15); }
.ap-body.is-staff a, .ap-body.is-staff .ap-toggle { color: #1d4ed8; }
.ap-body.is-staff .ap-toggle:hover { background: #eff6ff; }
.ap-body.is-staff .ap-check input { accent-color: var(--ap-navy-2); }
.ap-staff-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: #0f2747; color: #fff; font-size: 22px; }
.ap-switch { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 12px; color: var(--ap-muted); font-size: 14px; text-align: center; }
.ap-switch a { font-weight: 700; }
.ap-body.is-staff.is-tfa .tfa-btn-primary { background: var(--ap-navy-2); box-shadow: 0 8px 18px rgba(15, 39, 71, 0.3); }
.ap-body.is-staff.is-tfa .tfa-btn-primary:hover { background: var(--ap-navy); }
.ap-body.is-staff.is-tfa .tfa-icon, .ap-body.is-staff.is-tfa .tfa-method-icon { background: #e0e7ff; color: #1e3a8a; }
.ap-body.is-staff.is-tfa .tfa-link, .ap-body.is-staff.is-tfa .tfa-link:hover { color: #1d4ed8; }
.ap-body.is-staff.is-tfa .tfa-otp-box:focus { border-color: var(--ap-navy-2); box-shadow: 0 0 0 4px rgba(23, 58, 106, 0.15); }
.ap-school > span { min-width: 0; }
.ap-tag-short { display: none; }
@media (max-width: 440px) { .ap-tag-long { display: none; } .ap-tag-short { display: inline; } }
.ap-body.is-staff a.ap-btn, .ap-body.is-staff a.tfa-btn-primary, .ap-body.is-staff a.tfa-btn-primary:hover { color: #fff; }