/* =========================================================
   DMmas Webmail - Custom Login
   ========================================================= */

body.task-login {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(99, 102, 241, 0.10) 0,
            rgba(99, 102, 241, 0.035) 22%,
            transparent 42%
        ),
        radial-gradient(
            circle at 8% 95%,
            rgba(20, 184, 166, 0.08) 0,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcff 45%,
            #f7f8ff 100%
        ) !important;

    color: #172554;
}


/* =========================================================
   Decorative curved waves
   ========================================================= */

body.task-login::before {
    content: "";
    position: fixed;

    width: 125%;
    height: 340px;

    left: -12%;
    bottom: -225px;

    border-radius: 50% 50% 0 0;

    border-top: 1px solid rgba(30, 58, 138, 0.14);

    box-shadow:
        0 -14px 0 -13px rgba(20, 184, 166, 0.13),
        0 -28px 0 -27px rgba(79, 70, 229, 0.10),
        0 -42px 0 -41px rgba(20, 184, 166, 0.08),
        0 -56px 0 -55px rgba(30, 58, 138, 0.06),
        0 -70px 0 -69px rgba(20, 184, 166, 0.05);

    transform: rotate(-2deg);

    pointer-events: none;
    z-index: 0;
}


/* موجة إضافية من الجهة اليمنى */

body.task-login #layout::before {
    content: "";
    position: fixed;

    width: 700px;
    height: 300px;

    right: -220px;
    bottom: -205px;

    border-radius: 50%;

    border-top: 1px solid rgba(79, 70, 229, 0.10);

    box-shadow:
        0 -15px 0 -14px rgba(20, 184, 166, 0.08),
        0 -30px 0 -29px rgba(79, 70, 229, 0.06),
        0 -45px 0 -44px rgba(20, 184, 166, 0.05);

    transform: rotate(7deg);

    pointer-events: none;
}


/* =========================================================
   Login container
   ========================================================= */

body.task-login #layout {
    position: relative;
    z-index: 2;
}


/* =========================================================
   Logo
   ========================================================= */

body.task-login #logo {
    width: 330px !important;
    max-width: 85vw !important;
    height: auto !important;

    max-height: none !important;

    margin: 0 auto 22px auto !important;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 15px rgba(30, 58, 138, 0.08));
}


/* =========================================================
   Login Card
   ========================================================= */

body.task-login #login-form {
    width: 390px;
    max-width: calc(100vw - 32px);

    padding: 30px 32px 32px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(30, 58, 138, 0.09);

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(30, 58, 138, 0.10),
        0 4px 18px rgba(15, 23, 42, 0.05);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   Title
   ========================================================= */

body.task-login #login-form::before {
    content: "تسجيل الدخول إلى البريد الإلكتروني";

    display: block;

    margin: 0 0 24px 0;

    text-align: center;

    color: #172554;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   Input Groups
   ========================================================= */

body.task-login #login-form .input-group {
    margin-bottom: 14px;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #dce3ee;

    background: #ffffff;

    box-shadow:
        0 2px 7px rgba(15, 23, 42, 0.025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


body.task-login #login-form .input-group:focus-within {
    border-color: #14a6a6;

    box-shadow:
        0 0 0 3px rgba(20, 166, 166, 0.12),
        0 4px 12px rgba(30, 58, 138, 0.05);
}


/* =========================================================
   Inputs
   ========================================================= */

body.task-login #login-form input.form-control {
    height: 48px;

    background: #ffffff !important;

    color: #172554 !important;

    border: 0 !important;

    box-shadow: none !important;

    font-size: 15px;

    padding-left: 15px;
    padding-right: 15px;
}


body.task-login #login-form input.form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}


/* =========================================================
   Input icons
   ========================================================= */

body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text {
    background: #f7f9fc !important;

    color: #536b8a !important;

    border: 0 !important;

    min-width: 48px;

    justify-content: center;
}


/* =========================================================
   Login button
   ========================================================= */

body.task-login #login-form button.mainaction {
    width: 100%;

    height: 50px;

    margin-top: 7px;

    border: 0 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            100deg,
            #243c96 0%,
            #3949ab 45%,
            #16a6a6 100%
        ) !important;

    color: #ffffff !important;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(36, 60, 150, 0.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


body.task-login #login-form button.mainaction:hover {
    transform: translateY(-1px);

    filter: brightness(1.05);

    box-shadow:
        0 12px 26px rgba(36, 60, 150, 0.25);
}


body.task-login #login-form button.mainaction:active {
    transform: translateY(0);
}


/* =========================================================
   Footer
   ========================================================= */

body.task-login::after {
    content: "© 2026 DMmas • Secure Webmail";

    position: fixed;

    bottom: 20px;
    left: 0;
    right: 0;

    text-align: center;

    color: #64748b;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .3px;

    z-index: 3;
}


/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 600px) {

    body.task-login #logo {
        width: 285px !important;
        margin-bottom: 18px !important;
    }

    body.task-login #login-form {
        width: calc(100vw - 30px);

        padding: 25px 20px 27px;

        border-radius: 15px;
    }

    body.task-login #login-form::before {
        font-size: 17px;
        margin-bottom: 20px;
    }

    body.task-login::before {
        height: 250px;
        bottom: -180px;
    }
}

/* =========================================================
   DMmas Webmail - Sidebar only
   ========================================================= */

body:not(.task-login) #layout-menu {
    background:
        linear-gradient(
            180deg,
            #172554 0%,
            #1e3a8a 58%,
            #0f766e 100%
        ) !important;

    border-right: 0 !important;

    box-shadow:
        3px 0 16px rgba(15, 23, 42, 0.16);
}


/* القائمة نفسها */
body:not(.task-login) #taskmenu {
    background: transparent !important;
}


/* جميع الأزرار */
body:not(.task-login) #taskmenu a {
    color: rgba(255, 255, 255, 0.88) !important;

    transition:
        background-color .18s ease,
        color .18s ease;
}


/* النص والأيقونات */
body:not(.task-login) #taskmenu a .inner {
    color: inherit !important;
}


/* Hover */
body:not(.task-login) #taskmenu a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}


/* العنصر الحالي */
body:not(.task-login) #taskmenu a.selected {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.17),
            rgba(20, 184, 166, 0.16)
        ) !important;

    color: #ffffff !important;

    box-shadow:
        inset 3px 0 0 #2dd4bf;
}


/* Compose */
body:not(.task-login) #taskmenu a.compose {
    color: #ffffff !important;
}

body:not(.task-login) #taskmenu a.compose:hover {
    background: rgba(45, 212, 191, 0.14) !important;
}


/* الأزرار السفلية */
body:not(.task-login) #taskmenu .special-buttons {
    background: rgba(8, 18, 45, 0.25) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* Logout */
body:not(.task-login) #taskmenu a.logout {
    color: #fecaca !important;
}

body:not(.task-login) #taskmenu a.logout:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.18) !important;
}

/* =========================================================
   DMmas Webmail - Message Reading Area
   ========================================================= */

/* Main reading pane */
#layout-content {
    background:
        radial-gradient(circle at 85% 15%,
            rgba(65, 168, 171, 0.10) 0,
            rgba(65, 168, 171, 0.03) 20%,
            transparent 42%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f8faff 45%,
            #f2f7fa 100%) !important;

    border-left: 1px solid rgba(34, 45, 117, 0.10) !important;
}


/* Reading pane top toolbar */
#layout-content > .header {
    background: rgba(255, 255, 255, 0.96) !important;

    border-bottom: 1px solid #e4e9f2 !important;

    box-shadow:
        0 2px 8px rgba(34, 45, 117, 0.05) !important;

    color: #222d75 !important;
}


/* Toolbar icons */
#layout-content > .header .toolbar a {
    color: #53627a !important;
}


/* Active toolbar buttons */
#layout-content > .header .toolbar a:not(.disabled):hover {
    color: #222d75 !important;
}


/* Message iframe container */
#layout-content .iframe-wrapper {
    background: transparent !important;
}


/* Actual message iframe */
#messagecontframe {
    background: #ffffff !important;
}