/* =============================================================
   SignInRegister.css — Admin Panel Design
   A1-soft Management System
   ============================================================= */

/* ---- RESET / BASE ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f5f7fa;
    color: #1e293b;
}

/* ---- PAGE WRAPPER ---- */
.formLayout-verticalAlign {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f5f7fa;
}

.formLayout-container {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- HEADER SECTION ---- */
.signin-header {
    padding: 40px 32px 24px;
    text-align: center;
}

.signin-logo {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

    .signin-logo span {
        color: #3b82f6;
    }

.signin-subtitle {
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
    line-height: 1.5;
}

/* ---- FORM SECTION ---- */
.signin-form {
    padding: 0 32px 32px;
}

/* حذف تنسيق التبويبات القديمة */
.dxbts_ASPxTabControl_SignInRegisterTabControl {
    display: none !important;
}

/* ---- حقول الإدخال ---- */
.signin-input-group {
    margin-bottom: 20px;
}

.signin-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* تنسيق حقل اسم المستخدم */
.dxeTextBox_ {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

    .dxeTextBox_ td {
        padding: 0 !important;
        border: none !important;
    }

    .dxeTextBox_ input {
        width: 100%;
        height: 44px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0 16px;
        font-size: 14px;
        font-family: inherit;
        color: #1e293b;
        background: white;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

        .dxeTextBox_ input:hover {
            border-color: #cbd5e1;
        }

        .dxeTextBox_ input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            outline: none;
        }

        .dxeTextBox_ input::placeholder {
            color: #94a3b8;
            font-size: 14px;
        }

/* تنسيق حقل كلمة المرور */
.dxeButtonEdit_ {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

    .dxeButtonEdit_ td {
        padding: 0 !important;
        border: none !important;
    }

    .dxeButtonEdit_ input {
        width: 100%;
        height: 44px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0 16px;
        font-size: 14px;
        font-family: inherit;
        color: #1e293b;
        background: white;
        transition: all 0.2s ease;
    }

        .dxeButtonEdit_ input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            outline: none;
        }

        .dxeButtonEdit_ input::placeholder {
            color: #94a3b8;
        }

/* تنسيق زر العين (مخفي في هذا التصميم) */
.dxeButtonEditButtonContainer,
.eye-button {
    display: none !important;
}

/* ---- زر Sign In ---- */
#SignInButton {
    width: 100% !important;
    height: 44px !important;
    background: #0f172a !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin: 8px 0 16px !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

    #SignInButton:hover {
        background: #1e293b !important;
    }

    #SignInButton:active {
        transform: translateY(0);
    }

/* ---- Back to Website Link ---- */
.signin-back-link {
    text-align: center;
    margin-top: 16px;
}

    .signin-back-link a,
    .dxeHyperLink_ {
        color: #64748b !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .signin-back-link a:hover,
        .dxeHyperLink_:hover {
            color: #0f172a !important;
        }

        .signin-back-link a::before {
            content: "←";
            font-size: 16px;
            line-height: 1;
        }

/* ---- إخفاء العناصر غير المستخدمة ---- */
/* إخفاء التبويبات */
#SignInRegisterTabControl {
    display: none !important;
}

/* إخفاء عنوان LoginUser القديم */
.dxflItem_ .dxflCaptionCell {
    display: none !important;
}

/* إخفاء Remember Me و Forgot Password */
.si-row-check,
.signin-checkbox,
.signin-forgot-link,
#RememberMeCheckBox {
    display: none !important;
}

/* إخفاء رسائل الخطأ العامة إذا كانت فارغة */
#GeneralErrorDiv:empty {
    display: none !important;
}

/* ---- رسائل الخطأ ---- */
#GeneralErrorDiv,
.formLayout-generalErrorText {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    color: #991b1b;
    padding: 12px 16px;
    font-size: 13px;
    font-family: inherit;
    margin: 16px 0 0;
    text-align: center;
}

/* ---- رسائل التحقق من الحقول ---- */
.dxeValidationSummary_ {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 0;
    font-size: 13px;
    color: #991b1b;
}

.dxeErrorFrame_ {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
}

    .dxeErrorFrame_ img {
        display: none; /* إخفاء أيقونة الخطأ الافتراضية */
    }

/* ---- تنسيق المجموعة السفلية ---- */
.dxflGroupCell_ .dxflGroup_ {
    padding: 0 !important;
}

.formLayout-groupBox {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
    .formLayout-verticalAlign {
        padding: 16px;
        background: white;
    }

    .formLayout-container {
        max-width: 100%;
        box-shadow: none;
        border-radius: 0;
    }

    .signin-header {
        padding: 32px 24px 20px;
    }

    .signin-form {
        padding: 0 24px 24px;
    }

    .signin-logo {
        font-size: 24px;
    }

    .signin-subtitle {
        font-size: 13px;
    }

    .dxeTextBox_ input,
    .dxeButtonEdit_ input {
        height: 42px;
    }

    #SignInButton {
        height: 42px !important;
    }
}

@media (min-width: 768px) {
    .formLayout-container {
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);
    }
}

/* ---- RTL Support ---- */
html[dir="rtl"] .signin-back-link a::before {
    content: "→";
}

html[dir="rtl"] .signin-back-link a {
    gap: 6px;
}

/* ---- أنيميشن بسيط للحقول ---- */
@keyframes fieldFocus {
    0% {
        border-color: #e2e8f0;
    }

    100% {
        border-color: #3b82f6;
    }
}

.dxeTextBox_ input:focus,
.dxeButtonEdit_ input:focus {
    animation: fieldFocus 0.2s ease forwards;
}