/* ============================================================
   Raya Admin — Login (standalone, premium dark glassmorphism)
   Accent: indigo. RTL Arabic. IBM Plex Sans Arabic.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* dark base */
    --bg-base: #070512;
    --bg-surface: #0d0a22;
    --bg-elevated: #141032;
    /* indigo accent */
    --indigo-600: #4f46e5;
    --indigo-500: #6366f1;
    --indigo-400: #818cf8;
    --violet-500: #8b5cf6;
    --cyan-400: #22d3ee;
    --gold: #f5a623;
    /* text */
    --text: #f4f3ff;
    --muted: rgba(244, 243, 255, .72);
    --dim: rgba(244, 243, 255, .42);
    --glass-border: rgba(129, 140, 248, .22);
}

html, body { height: 100%; }

body {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    color: var(--text);
    overflow: hidden;
    min-height: 100vh;
    background:
        radial-gradient(1100px 600px at 78% -8%, rgba(79, 70, 229, .30), transparent 60%),
        radial-gradient(900px 520px at 12% 110%, rgba(139, 92, 246, .22), transparent 60%),
        linear-gradient(160deg, #0a0720 0%, #070512 55%, #05040e 100%);
}

/* ---- floating geometric shapes ---- */
.bg-shapes {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 30% 70% 62% 38% / 42% 40% 60% 58%;
    filter: blur(2px);
    opacity: .55;
    animation: float 16s ease-in-out infinite;
}

.shape.s1 {
    width: 340px; height: 340px;
    top: -90px; inset-inline-start: -70px;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .55), transparent 70%);
    animation-duration: 20s;
}
.shape.s2 {
    width: 260px; height: 260px;
    bottom: -80px; inset-inline-end: -50px;
    background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, .5), transparent 70%);
    animation-duration: 24s;
    animation-delay: -6s;
}
.shape.s3 {
    width: 160px; height: 160px;
    top: 22%; inset-inline-end: 14%;
    background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, .35), transparent 70%);
    border-radius: 50%;
    animation-duration: 18s;
    animation-delay: -3s;
}
.shape.s4 {
    width: 90px; height: 90px;
    bottom: 20%; inset-inline-start: 16%;
    background: radial-gradient(circle at 50% 50%, rgba(245, 166, 35, .3), transparent 70%);
    border-radius: 24px;
    animation-duration: 22s;
    animation-delay: -9s;
}

/* subtle grid line ring */
.ring {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: 620px; height: 620px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(129, 140, 248, .10);
    border-radius: 50%;
    box-shadow: 0 0 0 90px rgba(129, 140, 248, .04);
    animation: spin 60s linear infinite;
}

@keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(24px, -30px, 0) rotate(18deg); }
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(5, 4, 14, .5) 100%);
    pointer-events: none;
}

/* ---- login layout ---- */
.login-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.25rem;
}

.login-card {
    position: relative;
    width: min(430px, 94vw);
    padding: 2.6rem 2.2rem 2rem;
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(20, 16, 50, .72), rgba(13, 10, 34, .58));
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(255, 255, 255, .03) inset,
        0 1px 0 rgba(255, 255, 255, .06) inset;
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) both;
}

/* animated gradient top edge */
.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(90deg, transparent, var(--indigo-400), var(--violet-500), transparent);
    opacity: .8;
}

/* ---- brand ---- */
.login-logo {
    display: block;
    width: 118px;
    height: auto;
    margin: 0 auto .7rem;
    filter: drop-shadow(0 8px 24px rgba(99, 102, 241, .45));
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) .05s both;
}

.login-tag {
    text-align: center;
    color: var(--indigo-400);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .2px;
    margin-bottom: 1.7rem;
    opacity: .95;
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) .12s both;
}

/* ---- error ---- */
.login-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    background: rgba(251, 113, 133, .12);
    color: #fda4b1;
    padding: .65rem .9rem;
    border-radius: 12px;
    margin-bottom: .9rem;
    font-size: .9rem;
    text-align: center;
    border: 1px solid rgba(251, 113, 133, .3);
    animation: shake .5s ease;
}

/* ---- form ---- */
.field {
    position: relative;
    margin-bottom: .3rem;
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) both;
}
.field.f1 { animation-delay: .18s; }
.field.f2 { animation-delay: .24s; }

label {
    display: block;
    margin: .95rem 0 .4rem;
    font-weight: 500;
    font-size: .86rem;
    color: var(--muted);
}

input {
    width: 100%;
    padding: .82rem 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    font-family: inherit;
    font-size: .95rem;
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

input::placeholder { color: var(--dim); }

input:focus {
    outline: none;
    border-color: var(--indigo-400);
    background: rgba(99, 102, 241, .10);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, .18),
        0 0 24px rgba(99, 102, 241, .25);
}

/* ---- submit ---- */
.btn-login {
    position: relative;
    width: 100%;
    margin-top: 1.6rem;
    padding: .9rem;
    background: linear-gradient(135deg, var(--indigo-600) 0%, var(--indigo-500) 45%, var(--violet-500) 100%);
    background-size: 180% 180%;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .3s ease, background-position .5s ease;
    box-shadow: 0 10px 30px -6px rgba(79, 70, 229, .55);
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) .3s both;
}

.btn-login::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 16px 40px -6px rgba(79, 70, 229, .7);
}

.btn-login:hover::after { transform: translateX(120%); }

.btn-login:active { transform: translateY(0); }

/* ---- footer ---- */
.footer-text {
    text-align: center;
    margin-top: 1.3rem;
    font-size: .76rem;
    color: var(--dim);
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) .36s both;
}

/* ---- keyframes ---- */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (max-width: 500px) {
    .login-card { padding: 2rem 1.5rem 1.7rem; }
    .login-logo { width: 92px; }
    .ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shape, .ring, .login-card, .login-logo, .login-tag,
    .field, .btn-login, .footer-text { animation: none !important; }
}