/*
 * MedFix sign in / sign up / password reset / email verification (hospital panel) and the
 * operator sign in (platform). Fixed MedFix identity colours on purpose: these screens come before
 * any user theme. Fonts are self-hosted (report-fonts.css).
 */
:root {
    --mfa-brand: #0C3765;
    --mfa-brand-700: #082A4D;
    --mfa-brand-50: #EAF0F7;
    --mfa-teal: #32B3B7;
    --mfa-teal-ink: #17777A;
    --mfa-teal-50: #E4F5F5;
    --mfa-ink: #0F1B2D;
    --mfa-muted: #5B6B7F;
    --mfa-faint: #7D8A9B;
    --mfa-line: #E2E7EE;
    --mfa-field-line: #CFD7E1;
    --mfa-bg: #F3F5F8;
    --mfa-field: #FBFCFD;
    --mfa-ok: #12805C;
    --mfa-bad: #C2342B;
    --mfa-pf-bg: #141B26;
    --mfa-pf-card: #1C2533;
    --mfa-pf-line: #2C3747;
    --mfa-pf-ink: #E8EDF4;
    --mfa-pf-muted: #93A1B4;
    --mfa-pf-accent: #E0A33A;
}

/* Filament's simple layout: let the auth screen take the whole page. */
html:has(.mfa), body:has(.mfa) { background: var(--mfa-bg) !important; }
body:has(.mfa) .fi-simple-layout,
body:has(.mfa) .fi-simple-main-ctn,
body:has(.mfa) .fi-simple-main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-height: 0 !important;
}
body:has(.mfa) .medfix-copyright-footer,
body:has(.mfa) .medfix-copyright-sidebar { display: none !important; }

.mfa, .mfa * { box-sizing: border-box; }
.mfa {
    font-family: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--mfa-ink);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
}
.mfa :focus-visible { outline: 2px solid var(--mfa-teal); outline-offset: 2px; }
.mfa button, .mfa input, .mfa select { font: inherit; }
@media (prefers-reduced-motion: reduce) { .mfa * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
.mfa-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }

.mfa-panel {
    position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column;
    background: linear-gradient(160deg, #0C3765 0%, #0F4275 100%);
}
/* The MedFix mark as a faint watermark (same places and tone as the former circles). */
.mfa-panel::before, .mfa-panel::after { content: ""; position: absolute; background: url("/medfix-mark-white.svg") no-repeat center / contain; opacity: .06; pointer-events: none; }
.mfa-panel::before { width: 260px; height: 260px; top: -90px; inset-inline-start: -90px; }
.mfa-panel::after { width: 380px; height: 380px; bottom: -150px; inset-inline-end: -120px; opacity: .07; }
.mfa-panel > * { position: relative; z-index: 1; }
/* The logo stays on the left in both languages, like the English layout. */
.mfa-panel-logo { display: flex; justify-content: flex-start; direction: ltr; }
.mfa-panel-logo img { display: block; width: 178px; height: auto; }
.mfa-panel-mid { margin: auto 0; padding: 40px 0; max-width: 440px; }
.mfa-panel h2 { font-size: 34px; line-height: 1.2; margin: 0 0 14px; font-weight: 600; color: #fff; }
.mfa[dir="rtl"] .mfa-panel h2 { line-height: 1.4; }
.mfa-panel p { color: #C7D4E3; margin: 0 0 22px; }
.mfa-panel ul, .mfa-panel ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mfa-panel li { display: flex; gap: 11px; align-items: flex-start; color: #E6EDF5; }
.mfa-panel ul i { width: 22px; height: 22px; border-radius: 6px; background: rgba(50, 179, 183, .24); color: #8BE3E5; display: grid; place-items: center; flex: none; margin-top: 1px; }
.mfa-panel ul i svg { width: 13px; height: 13px; }
.mfa-panel ol { gap: 16px; counter-reset: mfa-step; }
.mfa-panel ol li { counter-increment: mfa-step; }
.mfa-panel ol li::before {
    content: counter(mfa-step); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #8BE3E5; color: #8BE3E5;
    display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none;
}
.mfa-panel ol li b { display: block; color: #fff; font-weight: 600; }
.mfa-panel ol li span { color: #B3C4D8; font-size: 14px; }
.mfa-panel-foot { color: #93A9C3; font-size: 13px; direction: ltr; text-align: start; }

.mfa-side { display: flex; flex-direction: column; padding: 28px 40px; background: #fff; }
.mfa-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.mfa-lang button {
    border: 1px solid var(--mfa-line); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer;
    color: var(--mfa-brand); font-weight: 600; font-size: 13.5px;
}
.mfa-lang button:hover { border-color: var(--mfa-brand); }
.mfa-form { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }
.mfa-form h1 { font-size: 28px; line-height: 1.3; margin: 0 0 8px; color: var(--mfa-ink); font-weight: 600; }
.mfa-lead { color: var(--mfa-muted); margin: 0 0 26px; }

/* ---------- fields ---------- */
.mfa-field { margin-bottom: 16px; }
.mfa-field > label, .mfa-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--mfa-ink); }
.mfa-field label em { color: var(--mfa-bad); font-style: normal; margin-inline-start: 2px; }
.mfa-hint { font-size: 12.5px; color: var(--mfa-faint); margin-top: 5px; }
.mfa-err { font-size: 12.5px; color: var(--mfa-bad); margin-top: 5px; }
.mfa-ctrl { position: relative; }
.mfa-ctrl input, .mfa-ctrl select {
    width: 100%; height: 46px; border: 1px solid var(--mfa-field-line); border-radius: 8px; background: var(--mfa-field);
    padding: 0 14px; color: var(--mfa-ink); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.mfa-ctrl input::placeholder { color: #A3AFBE; }
.mfa-ctrl input:focus, .mfa-ctrl select:focus { outline: none; border-color: var(--mfa-brand); box-shadow: 0 0 0 3px rgba(12, 55, 101, .12); background: #fff; }
.mfa-ctrl input[aria-invalid="true"] { border-color: var(--mfa-bad); }
.mfa-ctrl.pw input { padding-inline-end: 46px; }
.mfa-eye {
    position: absolute; inset-inline-end: 6px; top: 6px; width: 34px; height: 34px; border: 0; background: none;
    color: var(--mfa-faint); cursor: pointer; border-radius: 6px; display: grid; place-items: center;
}
.mfa-eye:hover { background: var(--mfa-bg); }
.mfa-eye svg { width: 18px; height: 18px; }
.mfa-phone { direction: ltr; }
.mfa-phone .iti { display: block; width: 100%; }
.mfa-phone input[type=tel] { text-align: left; }
.mfa-phone .iti__search-input { height: 38px; border-radius: 0; box-shadow: none; padding-left: 34px; padding-right: 30px; }
.mfa-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; color: var(--mfa-faint); }
.mfa-rules span { display: flex; gap: 6px; align-items: center; }
.mfa-rules span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.mfa-rules span.ok { color: var(--mfa-ok); }
.mfa-rules span.ok::before { background: currentColor; }
.mfa-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; font-size: 14px; }
.mfa-check { display: flex; gap: 9px; align-items: center; cursor: pointer; color: var(--mfa-muted); font-size: 14px; }
.mfa-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--mfa-brand); flex: none; }
.mfa a, .mfa .mfa-link { color: var(--mfa-brand); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.mfa a:hover, .mfa .mfa-link:hover { text-decoration: underline; }

/* ---------- buttons & blocks ---------- */
.mfa-btn {
    width: 100%; height: 48px; border-radius: 8px; border: 0; background: var(--mfa-brand); color: #fff; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: background .15s;
}
.mfa-btn:hover { background: var(--mfa-brand-700); }
.mfa-btn:disabled { background: #B9C4D2; cursor: not-allowed; }
.mfa-btn.ghost { background: #fff; color: var(--mfa-brand); border: 1px solid var(--mfa-field-line); }
.mfa-btn.ghost:hover { border-color: var(--mfa-brand); }
.mfa-btn.ghost:disabled { color: var(--mfa-faint); border-color: var(--mfa-line); background: #fff; }
.mfa-btn svg { width: 18px; height: 18px; }
.mfa-alt { text-align: center; margin-top: 22px; color: var(--mfa-muted); font-size: 14px; }
.mfa-back { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; margin-bottom: 22px; }
.mfa-back svg { width: 16px; height: 16px; }
.mfa[dir="rtl"] .mfa-back svg { transform: scaleX(-1); }
.mfa-notice { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 14px 16px; background: var(--mfa-teal-50); color: #0B5556; margin: 22px 0 0; font-size: 14px; }
.mfa-notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.mfa-addr { display: flex; align-items: center; gap: 10px; border: 1px solid var(--mfa-line); border-radius: 8px; padding: 11px 14px; margin-bottom: 20px; background: var(--mfa-field); }
.mfa-addr svg { width: 18px; height: 18px; color: var(--mfa-teal-ink); flex: none; }
.mfa-addr bdi { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.mfa-wait { display: flex; align-items: center; gap: 10px; color: var(--mfa-muted); font-size: 14px; margin-bottom: 18px; }
.mfa-wait i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mfa-line); border-top-color: var(--mfa-teal-ink); animation: mfa-spin 1s linear infinite; flex: none; }
@keyframes mfa-spin { to { transform: rotate(360deg); } }
.mfa-stack { display: grid; gap: 10px; }
.mfa-stack .mfa-link { justify-self: center; margin-top: 6px; }
[x-cloak] { display: none !important; }

/* ---------- platform (operator) ---------- */
.mfa-pf { min-height: 100vh; min-height: 100dvh; background: var(--mfa-pf-bg); display: grid; place-items: center; padding: 32px 16px; color: var(--mfa-pf-ink); }
html:has(.mfa-pf), body:has(.mfa-pf) { background: var(--mfa-pf-bg) !important; }
.mfa-pf-card { width: 100%; max-width: 400px; background: var(--mfa-pf-card); border: 1px solid var(--mfa-pf-line); border-radius: 16px; padding: 32px; }
.mfa-pf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; direction: ltr; }
.mfa-pf-head img { width: 132px; height: auto; display: block; }
.mfa-pf-badge { font-size: 12px; font-weight: 600; color: var(--mfa-pf-accent); border: 1px solid rgba(224, 163, 58, .45); border-radius: 999px; padding: 3px 10px; }
.mfa-pf h1 { font-size: 21px; margin: 0 0 6px; font-weight: 600; color: var(--mfa-pf-ink); }
.mfa-pf .mfa-lead { color: var(--mfa-pf-muted); margin: 0 0 22px; font-size: 14px; }
.mfa-pf .mfa-field > label { color: var(--mfa-pf-ink); }
.mfa-pf .mfa-ctrl input { background: var(--mfa-pf-bg); border-color: var(--mfa-pf-line); color: #fff; }
.mfa-pf .mfa-ctrl input:focus { border-color: var(--mfa-pf-accent); box-shadow: 0 0 0 3px rgba(224, 163, 58, .18); background: var(--mfa-pf-bg); }
.mfa-pf .mfa-btn { background: var(--mfa-pf-accent); color: #1A1205; }
.mfa-pf .mfa-btn:hover { background: #EBB24D; }
.mfa-pf a, .mfa-pf .mfa-link { color: var(--mfa-pf-muted); font-weight: 500; }
.mfa-pf .mfa-check { color: var(--mfa-pf-muted); }
.mfa-pf .mfa-check input { accent-color: var(--mfa-pf-accent); }
.mfa-pf .mfa-eye:hover { background: var(--mfa-pf-line); }
.mfa-pf .mfa-lang button { background: transparent; border-color: var(--mfa-pf-line); color: var(--mfa-pf-muted); }
.mfa-pf-meta { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--mfa-pf-line); font-size: 12px; color: #6F7E93; display: flex; justify-content: space-between; gap: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
    .mfa-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--mfa-bg); align-content: start; }
    .mfa-panel { padding: 28px 24px 72px; }
    .mfa-panel-mid { padding: 22px 0 0; margin: 0; max-width: 520px; }
    .mfa-panel-mid p, .mfa-panel ul, .mfa-panel ol, .mfa-panel-foot { display: none; }
    .mfa-panel h2 { font-size: 22px; margin: 0; }
    .mfa-panel-logo img { width: 150px; }
    .mfa-panel::before { width: 180px; height: 180px; }
    .mfa-panel::after { width: 240px; height: 240px; bottom: -120px; }
    .mfa-side {
        width: calc(100% - 32px); max-width: 520px; margin: -44px auto 28px; border-radius: 16px; padding: 20px 22px 8px;
        box-shadow: 0 10px 30px rgba(12, 55, 101, .12); position: relative; z-index: 2; align-self: start;
    }
    .mfa-form { padding: 8px 0 18px; margin: 0 auto; }
    .mfa-form h1 { font-size: 24px; }
}
@media (max-width: 520px) {
    .mfa-rules { grid-template-columns: 1fr; }
    .mfa-panel { padding: 22px 20px 68px; }
}

/* Sign up: facility type beside the name; terms checkbox aligned to the first line of text. */
.mfa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mfa-check-top { align-items: flex-start; }
.mfa-check-top input { margin-top: 3px; }
@media (max-width: 520px) { .mfa-row2 { grid-template-columns: 1fr; } }

/* Edge adds its own reveal and clear buttons to password fields; the form has its own eye. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}