/* ==================================================
   DXESK Custom Theme
   Company branding CSS
   ================================================== */

:root {
    --dxesk-bg-dark: #05070d;
    --dxesk-bg-dark2: #101827;
    --dxesk-cyan: #00cfff;
    --dxesk-magenta: #ff00d8;
    --dxesk-purple: #7a4cff;
    --dxesk-white: #ffffff;
}

/* Left sidebar theme */
#layout-menu {
    background: linear-gradient(180deg, #03050a 0%, #07111f 45%, #120018 100%) !important;
    border-right: 3px solid var(--dxesk-cyan) !important;
    box-shadow: 3px 0 12px rgba(0, 207, 255, 0.25) !important;
}

/* Make inner sidebar transparent */
#layout-menu .scroller,
#layout-menu .menu,
#layout-menu .special-buttons,
#layout-menu #taskmenu {
    background: transparent !important;
}

/* Sidebar logo */
#layout-menu #logo {
    width: 82px !important;
    max-width: 82px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 16px auto 12px auto !important;
    object-fit: contain !important;
}

/* Center logo container */
#layout-menu .popover-header,
#layout-menu .header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Sidebar menu links */
#taskmenu a {
    color: var(--dxesk-white) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-left: 4px solid transparent !important;
}

/* Sidebar icons */
#taskmenu a:before,
#layout-menu .special-buttons a:before {
    color: var(--dxesk-white) !important;
}

/* Sidebar hover */
#taskmenu a:hover {
    background: linear-gradient(90deg, rgba(0,207,255,0.28), rgba(255,0,216,0.12)) !important;
    border-left: 4px solid var(--dxesk-cyan) !important;
    color: var(--dxesk-white) !important;
}

/* Sidebar selected item */
#taskmenu a.selected {
    background: linear-gradient(90deg, rgba(255,0,216,0.55), rgba(0,207,255,0.20)) !important;
    border-left: 4px solid var(--dxesk-magenta) !important;
    color: var(--dxesk-white) !important;
}

/* Selected/hover icons */
#taskmenu a.selected:before,
#taskmenu a:hover:before {
    color: var(--dxesk-cyan) !important;
}

/* Bottom sidebar buttons */
#layout-menu .special-buttons {
    background: transparent !important;
    border-top: 1px solid rgba(0,207,255,0.25) !important;
}

#layout-menu .special-buttons a {
    color: var(--dxesk-white) !important;
    background: transparent !important;
}

#layout-menu .special-buttons a:hover {
    background: linear-gradient(90deg, rgba(0,207,255,0.25), rgba(255,0,216,0.15)) !important;
}

/* Top toolbar and footer */
#layout-content > .header,
#layout-list > .header,
#layout-sidebar > .header,
#messagetoolbar,
.toolbar,
#layout-footer,
.footer {
    background: linear-gradient(90deg, #03050a 0%, #07111f 45%, #120018 100%) !important;
    border-color: var(--dxesk-cyan) !important;
    color: #ffffff !important;
}

/* Toolbar text/icons */
.toolbar a,
.toolbar button,
#messagetoolbar a,
#messagetoolbar button,
#layout-content > .header a,
#layout-content > .header button {
    color: #ffffff !important;
}

/* Search box */
#quicksearchbox,
.searchbar input {
    border: 1px solid var(--dxesk-cyan) !important;
    border-radius: 5px !important;
}

/* Folder selected item */
#folderlist li.selected > a,
#folderlist li a:hover {
    background: rgba(0,207,255,0.10) !important;
    color: #06111f !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--dxesk-cyan) !important;
}

/* Message selected item */
.listing li.selected,
.listing tbody tr.selected td {
    background: linear-gradient(90deg, rgba(0,207,255,0.10), rgba(255,0,216,0.08)) !important;
}

/* Sender/from names black */
#messagelist .fromto,
#messagelist .fromto span,
#messagelist .fromto a,
#messagelist .sender,
#messagelist .sender a,
#messagelist-content .fromto,
#messagelist-content .fromto span,
#messagelist-content .fromto a,
#messagelist-content .sender,
#messagelist-content .sender a {
    color: #000000 !important;
}

/* Subjects keep DXESK theme color */
#messagelist .subject,
#messagelist .subject a,
#messagelist-content .subject,
#messagelist-content .subject a {
    color: #008fb3 !important;
}

/* Keep Logout button red */
#layout-menu a.logout,
#layout-menu .logout,
#taskmenu a.logout,
#layout-menu a.button-logout,
#layout-menu .special-buttons a.logout {
    color: #ff2b2b !important;
}

#layout-menu a.logout:before,
#layout-menu .logout:before,
#taskmenu a.logout:before,
#layout-menu a.button-logout:before,
#layout-menu .special-buttons a.logout:before {
    color: #ff2b2b !important;
}

#layout-menu a.logout:hover,
#layout-menu .logout:hover,
#taskmenu a.logout:hover,
#layout-menu a.button-logout:hover,
#layout-menu .special-buttons a.logout:hover {
    background: linear-gradient(90deg, rgba(255,0,0,0.45), rgba(255,0,216,0.15)) !important;
    color: #ffffff !important;
}

/* In dark mode only: make sender/email names white */
html.dark-mode #messagelist .fromto,
html.dark-mode #messagelist .fromto span,
html.dark-mode #messagelist .fromto a,
html.dark-mode #messagelist .sender,
html.dark-mode #messagelist .sender a,
html.dark-mode #messagelist-content .fromto,
html.dark-mode #messagelist-content .fromto span,
html.dark-mode #messagelist-content .fromto a,
html.dark-mode #messagelist-content .sender,
html.dark-mode #messagelist-content .sender a {
    color: #ffffff !important;
}

/* In light mode keep sender/email names black */
html:not(.dark-mode) #messagelist .fromto,
html:not(.dark-mode) #messagelist .fromto span,
html:not(.dark-mode) #messagelist .fromto a,
html:not(.dark-mode) #messagelist .sender,
html:not(.dark-mode) #messagelist .sender a,
html:not(.dark-mode) #messagelist-content .fromto,
html:not(.dark-mode) #messagelist-content .fromto span,
html:not(.dark-mode) #messagelist-content .fromto a,
html:not(.dark-mode) #messagelist-content .sender,
html:not(.dark-mode) #messagelist-content .sender a {
    color: #000000 !important;
}


/* ==================================================
   DXESK Login Page Custom Design
   ================================================== */

/* Login page background */
body.task-login {
    background:
        radial-gradient(circle at top left, rgba(0,207,255,0.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255,0,216,0.22), transparent 35%),
        linear-gradient(135deg, #03050a 0%, #07111f 45%, #120018 100%) !important;
}

/* Login form wrapper */
body.task-login #login-form {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(0,207,255,0.45) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 25px rgba(0,207,255,0.22),
        0 0 45px rgba(255,0,216,0.12) !important;
    padding: 28px 30px 24px 30px !important;
}

/* Login logo */
body.task-login #logo {
    width: 170px !important;
    max-width: 170px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 25px auto !important;
}

/* Username and password fields */
body.task-login input[type="text"],
body.task-login input[type="password"] {
    border: 1px solid rgba(0,207,255,0.55) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* Input focus effect */
body.task-login input[type="text"]:focus,
body.task-login input[type="password"]:focus {
    border-color: #ff00d8 !important;
    box-shadow: 0 0 8px rgba(255,0,216,0.25) !important;
}

/* Login button */
body.task-login .button.mainaction,
body.task-login input.button.mainaction,
body.task-login button.mainaction {
    background: linear-gradient(90deg, #00cfff, #ff00d8) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Login button hover */
body.task-login .button.mainaction:hover,
body.task-login input.button.mainaction:hover,
body.task-login button.mainaction:hover {
    filter: brightness(1.08) !important;
}

/* Product name text under login button */
body.task-login .formbuttons + div,
body.task-login #login-footer,
body.task-login .support-link {
    color: #ffffff !important;
}

/* Make DXESK Webmail text nicer if visible */
body.task-login .box-bottom,
body.task-login .formlinks {
    color: rgba(255,255,255,0.85) !important;
}


/* Bigger DXESK login logo and login form */
body.task-login #logo {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    margin: 0 auto 35px auto !important;
}

/* Bigger login box */
body.task-login #login-form {
    width: 430px !important;
    max-width: 430px !important;
    padding: 40px 45px 35px 45px !important;
    border-radius: 18px !important;
}

/* Bigger input fields */
body.task-login input[type="text"],
body.task-login input[type="password"] {
    height: 52px !important;
    font-size: 18px !important;
}

/* Bigger login button */
body.task-login .button.mainaction,
body.task-login input.button.mainaction,
body.task-login button.mainaction {
    height: 52px !important;
    font-size: 18px !important;
}

/* Bigger input icon area */
body.task-login .input-group-prepend,
body.task-login .input-group-text {
    height: 52px !important;
    min-width: 55px !important;
    font-size: 18px !important;
}

body.task-login #logo {
    display: block !important;
    width: 320px !important;
    height: 140px !important;
    max-width: 320px !important;
    max-height: 140px !important;
    margin: 0 auto 35px auto !important;
    background-size: contain !important;
}


/* Make login form shorter */
body.task-login #login-form {
    width: 400px !important;
    max-width: 400px !important;
    padding: 25px 38px 25px 38px !important;
    min-height: auto !important;
    height: auto !important;
}

/* Reduce input height */
body.task-login input[type="text"],
body.task-login input[type="password"] {
    height: 46px !important;
    font-size: 16px !important;
}

/* Reduce login button height */
body.task-login .button.mainaction,
body.task-login input.button.mainaction,
body.task-login button.mainaction {
    height: 46px !important;
    font-size: 16px !important;
}

/* Reduce input icon box */
body.task-login .input-group-prepend,
body.task-login .input-group-text {
    height: 46px !important;
    min-width: 52px !important;
}

/* Reduce spacing between fields */
body.task-login .input-group,
body.task-login .form-group {
    margin-bottom: 10px !important;
}


/* Mobile responsive fix for DXESK login page */
@media screen and (max-width: 600px) {

    body.task-login #logo {
        width: 180px !important;
        max-width: 180px !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

    body.task-login #login-form {
        width: 90% !important;
        max-width: 90% !important;
        padding: 22px 22px 22px 22px !important;
        border-radius: 14px !important;
    }

    body.task-login input[type="text"],
    body.task-login input[type="password"] {
        height: 44px !important;
        font-size: 15px !important;
    }

    body.task-login .button.mainaction,
    body.task-login input.button.mainaction,
    body.task-login button.mainaction {
        height: 44px !important;
        font-size: 15px !important;
    }
}


/* DXESK login logo size for desktop and mobile */

/* Desktop / laptop size */
body.task-login #logo {
    width: 420px !important;
    max-width: 420px !important;
    height: 180px !important;
    max-height: 180px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 30px auto !important;
}

/* Mobile phone size */
@media screen and (max-width: 600px) {
    body.task-login #logo {
        width: 350px !important;
        max-width: 350px !important;
        height: 150px !important;
        max-height: 150px !important;
        object-fit: contain !important;
        margin: 0 auto 20px auto !important;
    }
}