/* ==========================================================================
   دار عمار بن ياسر - أنماط صفحة تسجيل دخول الإدارة
   العنصر المميز: قوس "محراب" مزخرف بنجمة ثمانية أعلى بطاقة الدخول
   ========================================================================== */

.login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, var(--color-green-light) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, var(--color-gold-soft) 0%, transparent 35%),
        var(--color-cream);
    transition: background var(--transition-base);
}

/* نمط زخرفي هندسي متكرر (نجمة ثمانية) خافت جدًا في الخلفية */
.login-page__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23146C43' stroke-width='1.2'%3E%3Cpath d='M42 4 L52 20 L70 14 L64 32 L80 42 L64 52 L70 70 L52 64 L42 80 L32 64 L14 70 L20 52 L4 42 L20 32 L14 14 L32 20 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 84px 84px;
    pointer-events: none;
}

[data-theme="dark"] .login-page__pattern {
    opacity: 0.08;
}

/* -------------------- حاوية بطاقة الدخول -------------------- */
.login-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    animation: card-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-wrapper--wide {
    max-width: 480px;
}

/* ملاحظة: تعريف @keyframes card-rise أصبح في static/css/main.css كملف مشترك بين كل الصفحات */

/* -------------------- زخرفة القوس (المحراب) العلوية -------------------- */
.mihrab-arch {
    position: relative;
    width: 100%;
    height: 118px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
    margin-bottom: -1px;
}

.mihrab-arch svg {
    width: 100%;
    height: 100%;
}

.mihrab-arch .arch-shape {
    fill: var(--color-green-deep);
    transition: fill var(--transition-base);
}

.mihrab-arch .arch-star {
    transform-origin: center;
    animation: star-glow 3.6s ease-in-out infinite;
}

@keyframes star-glow {
    0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

/* -------------------- بطاقة الدخول -------------------- */
.login-card {
    position: relative;
    z-index: 1;
    background: var(--color-sand);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px 38px 38px;
    text-align: center;
    transition: background var(--transition-base), border-color var(--transition-base);
}
.login-card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-block;
}

.login-card__title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--color-green-deep);
    margin-bottom: 4px;
    transition: color var(--transition-base);
}

.login-card__subtitle {
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    margin-bottom: 28px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* -------------------- الفورم -------------------- */
.login-form {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-green-deep);
    transition: color var(--transition-base);
}

.field-hint {
    font-size: 0.76rem;
    color: var(--color-ink-soft);
    margin-top: -2px;
}

/* -------------------- رابط التبديل بين تسجيل الدخول وإنشاء حساب -------------------- */
.auth-switch-text {
    margin-top: 20px;
    font-size: 0.88rem;
    color: var(--color-ink-soft);
}

.auth-switch-text a {
    color: var(--color-green-primary);
    font-weight: 700;
}

.auth-switch-text a:hover {
    text-decoration: underline;
}

.input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.input-shell svg {
    position: absolute;
    right: 14px;
    width: 19px;
    height: 19px;
    stroke: var(--color-ink-soft);
    pointer-events: none;
    transition: stroke var(--transition-base);
}

.input-shell input {
    width: 100%;
    padding: 13px 44px 13px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-cream);
    color: var(--color-ink);
    font-size: 0.95rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.input-shell input::placeholder {
    color: var(--color-ink-soft);
    opacity: 0.7;
}

.input-shell input:focus {
    border-color: var(--color-green-primary);
    box-shadow: 0 0 0 3px rgba(20, 108, 67, 0.15);
}

.input-shell input:focus ~ svg,
.form-field:focus-within svg {
    stroke: var(--color-green-primary);
}

/* زر إظهار/إخفاء كلمة المرور */
.toggle-password {
    position: absolute;
    left: 14px;
    display: flex;
    color: var(--color-ink-soft);
}

.toggle-password svg {
    position: static;
    width: 19px;
    height: 19px;
    stroke: var(--color-ink-soft);
}

.toggle-password:hover svg {
    stroke: var(--color-green-primary);
}

/* تذكرني */
.form-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.remember-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.remember-check input {
    accent-color: var(--color-green-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* -------------------- زر الدخول -------------------- */
.btn-login {
    position: relative;
    overflow: hidden;
    margin-top: 6px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-green-primary), var(--color-green-deep));
    color: #FBF8F1;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 24px rgba(20, 108, 67, 0.30);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(20, 108, 67, 0.38), var(--shadow-gold-glow);
}

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

.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(201, 162, 39, 0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
}

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

/* رابط العودة للرئيسية */
.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    transition: color var(--transition-base);
}

.login-back-link:hover {
    color: var(--color-green-primary);
}

.login-back-link svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

/* -------------------- تجاوب مع الشاشات الصغيرة -------------------- */
@media (max-width: 480px) {
    .login-card {
        padding: 16px 22px 30px;
    }

    .login-card__title {
        font-size: 1.6rem;
    }
}