/* =====================================================================
   صفحة الدخول — مستشفى بن سينا التعليمي سرت
   ===================================================================== */

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 460px;
}

/* ---------- اللوحة المؤسسية ---------- */
.auth__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3rem 3.25rem;
    background: var(--ink);
    color: #C3DAD8;
    overflow: hidden;
}

/* نسيج خفيف يوحي بورق النماذج */
.auth__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* توهج نحاسي خافت خلف الشعار */
.auth__panel::after {
    content: '';
    position: absolute;
    top: -14%;
    inset-inline-end: -12%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176,138,62,.13), transparent 68%);
    pointer-events: none;
}

.auth__panel > * { position: relative; z-index: 1; }

/* ---------- الهوية ---------- */
.ident { display: flex; align-items: center; gap: 1.15rem; }

.ident__seal {
    position: relative;
    width: 88px;
    height: 88px;
    flex: none;
    display: grid;
    place-items: center;
}
.ident__seal::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(176,138,62,.55);
    border-radius: 50%;
}
.ident__seal::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(176,138,62,.25);
    border-radius: 50%;
}
.ident__seal img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.ident__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.32rem;
    line-height: 1.45;
    color: #fff;
    letter-spacing: -.01em;
}
.ident__sub {
    font-size: .84rem;
    color: #7FA5A2;
    margin-top: .15rem;
}

/* ---------- الرسالة ---------- */
.auth__mid { margin-top: auto; padding: 2.5rem 0; }

.auth__lede {
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.55;
    color: #fff;
    margin: 0 0 .7rem;
    letter-spacing: -.02em;
}
.auth__note-p {
    max-width: 42ch;
    color: #93B4B1;
    font-size: .95rem;
    line-height: 1.9;
    margin: 0;
}

/* ---------- العنصر المميز: الركائز الثلاث ---------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.75rem;
    padding-top: 1.9rem;
    border-top: 1px solid rgba(176,138,62,.28);
}
.pillar {
    opacity: 0;
    animation: rise .55s var(--ease) forwards;
}
.pillar:nth-child(1) { animation-delay: .18s; }
.pillar:nth-child(2) { animation-delay: .30s; }
.pillar:nth-child(3) { animation-delay: .42s; }

.pillar__no {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .22em;
    color: var(--brass);
    margin-bottom: .5rem;
}
.pillar__t {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: .2rem;
}
.pillar__d {
    display: block;
    font-size: .78rem;
    line-height: 1.7;
    color: #7FA5A2;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- تذييل اللوحة ---------- */
.auth__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .75rem;
    color: #587A78;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.auth__credit { color: #7C9C99; }
.auth__credit b { color: var(--brass); font-weight: 600; }

/* ---------- جهة النموذج ---------- */
.auth__side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: var(--card);
}
.auth__box { width: 100%; max-width: 330px; }

.auth__mobile { display: none; }

.auth__title {
    font-size: 1.55rem;
    margin: 0 0 .3rem;
}
.auth__hint {
    color: var(--muted);
    font-size: .9rem;
    margin: 0 0 1.9rem;
}

.auth__seal-line {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    font-size: .78rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.8;
}

/* =====================================================================
   الجوال واللوحيات
   ===================================================================== */
@media (max-width: 940px) {
    .auth {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* اللوحة تصبح ترويسة مضغوطة */
    .auth__panel {
        padding: 1.75rem 1.5rem 1.5rem;
    }
    .auth__panel::after { width: 300px; height: 300px; top: -30%; }

    .ident { gap: .9rem; }
    .ident__seal { width: 66px; height: 66px; }
    .ident__seal img { width: 46px; height: 46px; }
    .ident__name { font-size: 1.06rem; }
    .ident__sub { font-size: .78rem; }

    .auth__mid { display: none; }
    .auth__foot { display: none; }

    /* الركائز أفقية مضغوطة */
    .pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem;
        margin-top: 1.35rem;
        padding-top: 1.1rem;
    }
    .pillar__no { font-size: .6rem; margin-bottom: .25rem; }
    .pillar__t { font-size: .84rem; margin-bottom: 0; }
    .pillar__d { display: none; }

    .auth__side { padding: 2rem 1.5rem 1.5rem; align-items: flex-start; }
    .auth__box { max-width: 400px; margin: 0 auto; }

    .auth__title { font-size: 1.35rem; }
    .auth__hint { margin-bottom: 1.5rem; }

    /* حقول أكبر للمس */
    .auth__box .input { padding: .85rem .95rem; font-size: 1rem; }
    .auth__box .btn { padding: .85rem 1.35rem; font-size: 1rem; }

    /* التذييل يظهر أسفل النموذج */
    .auth__mobile {
        display: block;
        margin-top: 1.75rem;
        padding-top: 1.1rem;
        border-top: 1px solid var(--line-soft);
        text-align: center;
        font-size: .74rem;
        color: var(--muted);
        line-height: 1.9;
    }
    .auth__mobile b { color: var(--brass); font-weight: 600; }
}

@media (max-width: 400px) {
    .auth__panel { padding: 1.35rem 1.15rem 1.25rem; }
    .ident__seal { width: 56px; height: 56px; }
    .ident__seal img { width: 39px; height: 39px; }
    .ident__name { font-size: .95rem; line-height: 1.4; }
    .ident__sub { font-size: .72rem; }
    .pillar__t { font-size: .76rem; }
    .auth__side { padding: 1.5rem 1.15rem; }
}

/* الشاشات القصيرة أفقياً */
@media (max-height: 620px) and (min-width: 941px) {
    .auth__panel { padding: 2rem 2.5rem; }
    .auth__lede { font-size: 1.6rem; }
    .auth__mid { padding: 1.5rem 0; }
    .pillars { margin-top: 1.5rem; padding-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pillar { opacity: 1; animation: none; }
}