/*
 * GBRemote Mail
 * Roundcube Elastic branding
 *
 * IMPORTANT:
 * Light mode remains LIGHT.
 * Dark styling is applied only when html.dark-mode exists.
 */

:root {
    --gb-blue: #49b6ff;
    --gb-violet: #705cff;
    --gb-green: #3bdd96;

    --gb-dark-bg: #06101a;
    --gb-dark-side: #07121d;
    --gb-dark-panel: #081624;
    --gb-dark-list: #091725;
    --gb-dark-content: #0b1825;
    --gb-dark-header: #0a1927;

    --gb-dark-line:
        rgba(130,178,219,.14);

    --gb-dark-text: #f3f7fb;
    --gb-dark-muted: #7e94a7;

    --gb-light-bg: #ffffff;
    --gb-light-soft: #f4f6f8;
    --gb-light-header: #f4f4f4;
    --gb-light-line: #d9e0e5;
    --gb-light-text: #263238;
    --gb-light-muted: #667780;
}


/* =========================================================
   COMMON BRANDING
   ========================================================= */

.btn-primary,
.button.mainaction {
    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            var(--gb-blue),
            var(--gb-violet)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 8px 20px
        rgba(54,151,245,.14);
}

.btn-primary:hover,
.button.mainaction:hover {
    filter: brightness(1.06);
}


/* =========================================================
   TASK MENU
   Remains dark in both modes, as Elastic normally does.
   ========================================================= */

#layout-menu {
    background:
        linear-gradient(
            180deg,
            #2b383e,
            #263238
        ) !important;
}

#layout-menu a.selected,
#layout-menu a:hover {
    background:
        rgba(73,182,255,.10) !important;
}


/* =========================================================
   GBREMOTE LOGO
   ========================================================= */

#layout-menu .popover-header img,
#layout-menu img.logo {
    content:
        url(
            "/plugins/gbremote_branding/assets/gbremote-logo.png"
        ) !important;

    max-width: 64px !important;
    max-height: 64px !important;

    object-fit: contain !important;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(73,182,255,.20)
        );
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html:not(.dark-mode),
html:not(.dark-mode) body {
    background:
        var(--gb-light-bg) !important;

    color:
        var(--gb-light-text) !important;
}


html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content {
    background:
        #fff !important;

    color:
        var(--gb-light-text) !important;
}


html:not(.dark-mode)
#layout-sidebar > .header,

html:not(.dark-mode)
#layout-list > .header,

html:not(.dark-mode)
#layout-content > .header,

html:not(.dark-mode)
.header {
    background:
        var(--gb-light-header) !important;

    color:
        var(--gb-light-text) !important;

    border-color:
        var(--gb-light-line) !important;
}


html:not(.dark-mode) .footer {
    background:
        #fff !important;

    border-color:
        var(--gb-light-line) !important;
}


html:not(.dark-mode) .listing li,
html:not(.dark-mode) .listing tbody tr,
html:not(.dark-mode) .listing td,
html:not(.dark-mode) .listing th {
    border-color:
        var(--gb-light-line) !important;
}


html:not(.dark-mode) .listing li > a,
html:not(.dark-mode) .listing td,
html:not(.dark-mode) .listing th {
    color:
        var(--gb-light-text) !important;
}


html:not(.dark-mode) .listing .secondary,
html:not(.dark-mode) .listing .date,
html:not(.dark-mode) .listing .size {
    color:
        var(--gb-light-muted) !important;
}


html:not(.dark-mode) .listing li:hover,
html:not(.dark-mode)
.listing tbody tr:hover > td {
    background:
        #f4f9fc !important;
}


html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode)
.listing tbody tr.selected > td,
html:not(.dark-mode)
.listing tr.selected td {
    background:
        #dff3fc !important;

    color:
        #18252c !important;
}


html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .popover,
html:not(.dark-mode) .dropdown-menu,
html:not(.dark-mode) .modal-content,
html:not(.dark-mode) .ui-dialog {
    background:
        #fff !important;

    color:
        var(--gb-light-text) !important;

    border-color:
        var(--gb-light-line) !important;
}


html:not(.dark-mode) .form-control,
html:not(.dark-mode) input,
html:not(.dark-mode) select,
html:not(.dark-mode) textarea {
    background:
        #fff !important;

    color:
        var(--gb-light-text) !important;

    border-color:
        #cdd6dc !important;
}


/* =========================================================
   LIGHT LOGIN
   ========================================================= */

html:not(.dark-mode) body.task-login {
    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(73,182,255,.10),
            transparent 28%
        ),
        #eef3f7 !important;
}


html:not(.dark-mode)
body.task-login #layout {
    min-height:
        100vh !important;

    display:
        grid !important;

    place-items:
        center !important;

    padding:
        24px !important;

    background:
        transparent !important;
}


html:not(.dark-mode)
body.task-login #layout-content {
    flex:
        none !important;

    width:
        min(480px,100%) !important;

    max-width:
        480px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        28px 38px
        30px !important;

    border:
        1px solid
        #d7e0e6 !important;

    border-radius:
        24px !important;

    background:
        #fff !important;

    box-shadow:
        0 25px 70px
        rgba(20,43,58,.13) !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-mode,
html.dark-mode body {
    background:
        radial-gradient(
            circle at 80% 0,
            rgba(73,182,255,.08),
            transparent 30%
        ),
        var(--gb-dark-bg) !important;

    color:
        var(--gb-dark-text) !important;
}


html.dark-mode #layout-sidebar {
    background:
        var(--gb-dark-panel) !important;

    color:
        var(--gb-dark-text) !important;

    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode #layout-list {
    background:
        var(--gb-dark-list) !important;

    color:
        var(--gb-dark-text) !important;

    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode #layout-content {
    background:
        linear-gradient(
            180deg,
            #0b1825,
            #08131e
        ) !important;

    color:
        var(--gb-dark-text) !important;
}


html.dark-mode
#layout-sidebar > .header,

html.dark-mode
#layout-list > .header,

html.dark-mode
#layout-content > .header,

html.dark-mode .header {
    background:
        var(--gb-dark-header) !important;

    color:
        var(--gb-dark-text) !important;

    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode .footer {
    background:
        var(--gb-dark-panel) !important;

    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode .listing li,
html.dark-mode .listing tbody tr,
html.dark-mode .listing td,
html.dark-mode .listing th {
    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode .listing li > a,
html.dark-mode .listing td,
html.dark-mode .listing th {
    color:
        #dce9f4 !important;
}


html.dark-mode .listing .secondary,
html.dark-mode .listing .date,
html.dark-mode .listing .size {
    color:
        var(--gb-dark-muted) !important;
}


html.dark-mode .listing li:hover,
html.dark-mode
.listing tbody tr:hover > td {
    background:
        rgba(73,182,255,.05) !important;
}


html.dark-mode .listing li.selected,
html.dark-mode
.listing tbody tr.selected > td,
html.dark-mode
.listing tr.selected td {
    background:
        linear-gradient(
            90deg,
            rgba(73,182,255,.15),
            rgba(112,92,255,.06)
        ) !important;

    color:
        #fff !important;
}


html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .dropdown-menu,
html.dark-mode .modal-content,
html.dark-mode .ui-dialog {
    background:
        #0b1a29 !important;

    color:
        var(--gb-dark-text) !important;

    border-color:
        var(--gb-dark-line) !important;
}


html.dark-mode .form-control,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background:
        #06131f !important;

    color:
        #fff !important;

    border-color:
        var(--gb-dark-line) !important;
}


/* =========================================================
   LOGIN - COMMON
   ========================================================= */

body.task-login #logo {
    display:
        block !important;

    width:
        315px !important;

    height:
        270px !important;

    max-width:
        88% !important;

    margin:
        -24px auto
        -18px !important;

    object-fit:
        contain !important;

    content:
        url(
            "/plugins/gbremote_branding/assets/gbremote-logo.png"
        ) !important;
}


body.task-login #login-form {
    width:
        100% !important;

    max-width:
        none !important;
}


body.task-login #login-form::before {
    content:
        "SECURE WEBMAIL";

    display:
        block;

    margin:
        5px 0
        17px;

    color:
        #268fd1;

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .17em;
}


body.task-login button[type="submit"],
body.task-login .btn-primary,
body.task-login .button.mainaction {
    width:
        100% !important;

    min-height:
        49px !important;

    margin-top:
        8px !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            var(--gb-blue),
            var(--gb-violet)
        ) !important;

    color:
        #fff !important;

    font-weight:
        800 !important;
}


body.task-login #login-form::after {
    content:
        "mail.gbremote.com · connessione protetta";

    display:
        block;

    margin-top:
        18px;

    padding-top:
        16px;

    text-align:
        center;

    font-size:
        10px;

    letter-spacing:
        .06em;
}


/* =========================================================
   DARK LOGIN
   ========================================================= */

html.dark-mode body.task-login {
    background:
        radial-gradient(
            circle at 50% 7%,
            rgba(73,182,255,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(112,92,255,.10),
            transparent 30%
        ),
        #03080d !important;
}


html.dark-mode
body.task-login #layout {
    min-height:
        100vh !important;

    display:
        grid !important;

    place-items:
        center !important;

    padding:
        24px !important;

    background:
        transparent !important;
}


html.dark-mode
body.task-login #layout-content {
    flex:
        none !important;

    width:
        min(480px,100%) !important;

    max-width:
        480px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        28px 38px
        30px !important;

    border:
        1px solid
        rgba(131,184,227,.18) !important;

    border-radius:
        25px !important;

    background:
        radial-gradient(
            circle at 91% 3%,
            rgba(73,182,255,.09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #0d1b29,
            #08141f
        ) !important;

    box-shadow:
        0 35px 110px
        rgba(0,0,0,.60) !important;
}


html.dark-mode
body.task-login #login-form::before {
    color:
        #71c9ff;
}


html.dark-mode
body.task-login #login-form::after {
    color:
        #536d81;

    border-top:
        1px solid
        var(--gb-dark-line);
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

html.dark-mode * {
    scrollbar-color:
        #274963
        #07121d;
}


/* =========================================================
   MOBILE
   ========================================================= */

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

    body.task-login #layout {
        padding:
            14px !important;
    }

    body.task-login #layout-content {
        padding:
            22px !important;

        border-radius:
            20px !important;
    }

    body.task-login #logo {
        width:
            270px !important;

        height:
            225px !important;
    }
}