/* ============================================================
   J&A AUTOMATION MAIL UI V2
   Modern mail workspace layered over Roundcube Elastic
   ============================================================ */


/* ------------------------------------------------------------
   MAIL DESIGN TOKENS
   ------------------------------------------------------------ */

body.task-mail {
    --jam-bg: #eef3f8;
    --jam-panel: #ffffff;
    --jam-panel-soft: #f7f9fc;
    --jam-panel-hover: #f0f6fb;

    --jam-sidebar: #081522;
    --jam-sidebar-2: #0c1d30;

    --jam-text: #172235;
    --jam-text-strong: #101828;
    --jam-muted: #718096;

    --jam-border: rgba(15, 40, 70, .09);
    --jam-border-strong: rgba(15, 40, 70, .14);

    --jam-accent: #0796d8;
    --jam-accent-bright: #38bdf8;
    --jam-accent-soft: rgba(7, 150, 216, .10);

    --jam-selected: #e8f5fc;

    --jam-radius-sm: 9px;
    --jam-radius: 13px;
    --jam-radius-lg: 18px;

    --jam-shadow:
        0 10px 30px rgba(15, 32, 55, .07);

    background: var(--jam-bg);
}


/* ------------------------------------------------------------
   MAIN THREE-PANE WORKSPACE
   ------------------------------------------------------------ */

body.task-mail #layout-sidebar,
body.task-mail #layout-list,
body.task-mail #layout-content {
    border-color: var(--jam-border) !important;
}


body.task-mail #layout-sidebar {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f3f7fb 100%
        ) !important;
}


body.task-mail #layout-list,
body.task-mail #layout-content {
    background: var(--jam-panel) !important;
}


/* subtle separation instead of heavy borders */

body.task-mail #layout-sidebar {
    border-right:
        1px solid var(--jam-border) !important;
}

body.task-mail #layout-list {
    border-right:
        1px solid var(--jam-border) !important;
}


/* ------------------------------------------------------------
   GLOBAL TASK BAR / LEFT DARK STRIP
   ------------------------------------------------------------ */

body.task-mail #layout-menu {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(7,150,216,.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--jam-sidebar) 0%,
            var(--jam-sidebar-2) 100%
        ) !important;

    box-shadow:
        5px 0 24px
        rgba(7, 20, 36, .10) !important;
}


body.task-mail #taskmenu a {
    margin:
        4px 7px !important;

    border-radius:
        11px !important;

    color:
        rgba(232, 242, 250, .68) !important;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease !important;
}


body.task-mail #taskmenu a:hover {
    color:
        #ffffff !important;

    background:
        rgba(255,255,255,.075) !important;
}


body.task-mail #taskmenu a.selected {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(7,150,216,.34),
            rgba(7,150,216,.16)
        ) !important;

    box-shadow:
        inset 3px 0 0
        var(--jam-accent-bright),
        0 7px 18px
        rgba(0,0,0,.10) !important;
}


/* ------------------------------------------------------------
   PANE HEADERS
   ------------------------------------------------------------ */

body.task-mail #layout > div > .header {
    min-height:
        58px;

    background:
        rgba(255,255,255,.91) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        var(--jam-text-strong) !important;

    border-bottom:
        1px solid var(--jam-border) !important;

    font-weight:
        650 !important;
}


/* ------------------------------------------------------------
   ACCOUNT HEADER
   ------------------------------------------------------------ */

body.task-mail #layout-sidebar .header-title.username {
    padding-left:
        .2rem;

    color:
        var(--jam-text-strong) !important;

    font-weight:
        650;
}


body.task-mail .ja-user-avatar {
    background:
        linear-gradient(
            135deg,
            #0aa7e9,
            #05699e
        ) !important;

    box-shadow:
        0 6px 18px
        rgba(7,150,216,.26) !important;
}


/* ------------------------------------------------------------
   MAILBOX / FOLDER LIST
   ------------------------------------------------------------ */

body.task-mail #mailboxlist {
    padding:
        .7rem .55rem !important;
}


body.task-mail #mailboxlist li > a {
    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    margin:
        2px 3px !important;

    padding:
        .45rem .65rem !important;

    border-radius:
        10px !important;

    color:
        #44546a !important;

    font-weight:
        500;

    transition:
        background .14s ease,
        color .14s ease,
        transform .14s ease;
}


body.task-mail #mailboxlist li > a:hover {
    color:
        #13334c !important;

    background:
        rgba(7,150,216,.075) !important;
}


body.task-mail #mailboxlist li.selected > a {
    color:
        #026ca4 !important;

    background:
        linear-gradient(
            135deg,
            rgba(7,150,216,.14),
            rgba(56,189,248,.075)
        ) !important;

    font-weight:
        650 !important;

    box-shadow:
        inset 3px 0 0
        var(--jam-accent);
}


/* unread badge */

body.task-mail #mailboxlist .unreadcount {
    min-width:
        22px;

    height:
        20px;

    padding:
        0 6px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            var(--jam-accent),
            #0575b3
        ) !important;

    color:
        #ffffff !important;

    font-size:
        .68rem;

    font-weight:
        750;

    box-shadow:
        0 4px 12px
        rgba(7,150,216,.20);
}


/* ------------------------------------------------------------
   SEARCH BAR
   ------------------------------------------------------------ */

body.task-mail #searchbar {
    min-height:
        39px;

    border:
        1px solid
        var(--jam-border-strong) !important;

    border-radius:
        12px !important;

    background:
        var(--jam-panel-soft) !important;

    box-shadow:
        inset 0 1px 2px
        rgba(15,30,50,.025) !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


body.task-mail #searchbar:focus-within {
    background:
        #ffffff !important;

    border-color:
        rgba(7,150,216,.55) !important;

    box-shadow:
        0 0 0 3px
        rgba(7,150,216,.10) !important;
}


body.task-mail #searchbar input {
    color:
        var(--jam-text) !important;

    background:
        transparent !important;
}


body.task-mail #searchbar input::placeholder {
    color:
        #97a5b6 !important;
}


/* ------------------------------------------------------------
   TOOLBAR
   ------------------------------------------------------------ */

body.task-mail .toolbar {
    gap:
        3px;
}


body.task-mail .toolbar a {
    border-radius:
        10px !important;

    transition:
        background .14s ease,
        color .14s ease,
        transform .14s ease !important;
}


body.task-mail .toolbar a:hover {
    color:
        #037db9 !important;

    background:
        rgba(7,150,216,.09) !important;

    transform:
        translateY(-1px);
}


body.task-mail .toolbar a:active {
    transform:
        translateY(0);
}


/* ------------------------------------------------------------
   MESSAGE LIST
   ------------------------------------------------------------ */

body.task-mail #messagelist {
    background:
        var(--jam-panel) !important;
}


/* roomier modern rows */

body.task-mail #messagelist tr > td {
    min-height:
        52px;

    padding-top:
        .55rem !important;

    padding-bottom:
        .55rem !important;

    border-bottom:
        1px solid
        var(--jam-border) !important;

    color:
        var(--jam-text) !important;

    background:
        var(--jam-panel) !important;

    transition:
        background .12s ease,
        color .12s ease;
}


/* hover */

body.task-mail #messagelist tr:hover > td {
    background:
        var(--jam-panel-hover) !important;
}


/* selected */

body.task-mail #messagelist tr.selected > td,
body.task-mail #messagelist tr.selected:hover > td {
    background:
        linear-gradient(
            90deg,
            rgba(7,150,216,.13),
            rgba(56,189,248,.065)
        ) !important;

    color:
        #10273a !important;
}


/* selected accent */

body.task-mail #messagelist tr.selected > td:first-child {
    box-shadow:
        inset 3px 0 0
        var(--jam-accent) !important;
}


/* unread */

body.task-mail #messagelist tr.unread > td {
    background:
        #fbfdff !important;

    font-weight:
        650 !important;
}


body.task-mail #messagelist tr.unread > td:first-child {
    box-shadow:
        inset 3px 0 0
        var(--jam-accent-bright) !important;
}


/* subject */

body.task-mail #messagelist .subject {
    color:
        var(--jam-text-strong);

    font-weight:
        580;
}


/* metadata */

body.task-mail #messagelist .date,
body.task-mail #messagelist .size {
    color:
        var(--jam-muted) !important;

    font-size:
        .82rem;
}


/* ------------------------------------------------------------
   GENERIC ELASTIC LISTS
   ------------------------------------------------------------ */

body.task-mail .listing li {
    border-color:
        var(--jam-border) !important;

    transition:
        background .12s ease;
}


body.task-mail .listing li:hover {
    background:
        var(--jam-panel-hover) !important;
}


body.task-mail .listing li.selected {
    background:
        var(--jam-selected) !important;
}


/* ------------------------------------------------------------
   READING PANE
   ------------------------------------------------------------ */

body.task-mail #message-header {
    padding:
        1rem 1.25rem !important;

    background:
        rgba(255,255,255,.96) !important;

    border-bottom:
        1px solid
        var(--jam-border) !important;

    box-shadow:
        0 5px 18px
        rgba(15,32,55,.025);
}


/* subject */

body.task-mail #message-header h2.subject,
body.task-mail h2.subject {
    color:
        var(--jam-text-strong) !important;

    font-weight:
        690 !important;

    letter-spacing:
        -.015em;

    line-height:
        1.3;
}


/* message metadata */

body.task-mail #message-header .header,
body.task-mail #message-header .headers-table,
body.task-mail #message-header .message-headers {
    color:
        var(--jam-muted);
}


/* body breathing room */

body.task-mail #messagebody {
    padding:
        1.1rem 1.4rem 2rem !important;

    background:
        #f7f9fc !important;
}


body.task-mail #messagebody > .message-part {
    max-width:
        980px;

    margin:
        0 auto;

    padding:
        1.6rem 1.8rem !important;

    border:
        1px solid
        var(--jam-border) !important;

    border-radius:
        16px !important;

    background:
        #ffffff !important;

    color:
        var(--jam-text) !important;

    box-shadow:
        0 8px 28px
        rgba(15,30,50,.045) !important;
}


/* plain text mail */

body.task-mail #messagebody .pre {
    line-height:
        1.62 !important;

    color:
        var(--jam-text) !important;
}


/* quoted mail */

body.task-mail #messagebody blockquote {
    margin:
        1rem 0;

    padding:
        .65rem .9rem;

    border-left:
        3px solid
        var(--jam-accent) !important;

    border-radius:
        0 8px 8px 0;

    background:
        #f5f9fc !important;

    color:
        #52657a;
}


/* ------------------------------------------------------------
   ATTACHMENTS
   ------------------------------------------------------------ */

body.task-mail .attachmentslist li,
body.task-mail .attachment {
    border-radius:
        10px !important;

    border-color:
        var(--jam-border) !important;

    background:
        var(--jam-panel-soft) !important;

    transition:
        border-color .14s ease,
        background .14s ease,
        transform .14s ease;
}


body.task-mail .attachmentslist li:hover,
body.task-mail .attachment:hover {
    border-color:
        rgba(7,150,216,.28) !important;

    background:
        #eef8fd !important;
}


/* ------------------------------------------------------------
   FOOTERS
   ------------------------------------------------------------ */

body.task-mail #layout > div > .footer {
    background:
        rgba(255,255,255,.96) !important;

    border-top:
        1px solid
        var(--jam-border) !important;
}


/* ------------------------------------------------------------
   POPOVERS / MENUS
   ------------------------------------------------------------ */

body.task-mail .popupmenu,
body.task-mail .popover,
body.task-mail .ui-dialog {
    border:
        1px solid
        var(--jam-border-strong) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 20px 50px
        rgba(15,32,55,.16) !important;
}


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

html.dark-mode body.task-mail {
    --jam-bg: #08111b;

    --jam-panel: #101a27;
    --jam-panel-soft: #0d1723;
    --jam-panel-hover: #162434;

    --jam-text: #dce6f0;
    --jam-text-strong: #f6f9fc;
    --jam-muted: #8fa1b5;

    --jam-border: rgba(170, 200, 225, .095);
    --jam-border-strong: rgba(170, 200, 225, .14);

    --jam-selected: #17324c;

    background:
        var(--jam-bg) !important;
}


/* sidebar */

html.dark-mode body.task-mail #layout-sidebar {
    background:
        linear-gradient(
            180deg,
            #0c1622,
            #0d1926
        ) !important;
}


/* main panes */

html.dark-mode body.task-mail #layout-list,
html.dark-mode body.task-mail #layout-content {
    background:
        var(--jam-panel) !important;
}


/* pane headers */

html.dark-mode body.task-mail #layout > div > .header {
    background:
        rgba(14, 25, 38, .94) !important;

    color:
        var(--jam-text-strong) !important;

    border-color:
        var(--jam-border) !important;
}


/* mailbox */

html.dark-mode body.task-mail #mailboxlist li > a {
    color:
        #bdcad8 !important;
}


html.dark-mode body.task-mail #mailboxlist li > a:hover {
    color:
        #ffffff !important;

    background:
        rgba(56,189,248,.075) !important;
}


html.dark-mode body.task-mail #mailboxlist li.selected > a {
    color:
        #8fdcff !important;

    background:
        rgba(7,150,216,.14) !important;
}


/* search */

html.dark-mode body.task-mail #searchbar {
    background:
        #0b1622 !important;

    border-color:
        var(--jam-border-strong) !important;
}


html.dark-mode body.task-mail #searchbar:focus-within {
    background:
        #101e2d !important;
}


html.dark-mode body.task-mail #searchbar input {
    color:
        #eef6fc !important;
}


/* rows */

html.dark-mode body.task-mail #messagelist,
html.dark-mode body.task-mail #messagelist tr > td {
    background:
        var(--jam-panel) !important;

    color:
        var(--jam-text) !important;

    border-color:
        var(--jam-border) !important;
}


html.dark-mode body.task-mail #messagelist tr:hover > td {
    background:
        var(--jam-panel-hover) !important;
}


html.dark-mode body.task-mail #messagelist tr.unread > td {
    background:
        #111e2c !important;

    color:
        #f3f8fc !important;
}


html.dark-mode body.task-mail #messagelist tr.selected > td,
html.dark-mode body.task-mail #messagelist tr.selected:hover > td {
    background:
        linear-gradient(
            90deg,
            #173750,
            #142b40
        ) !important;

    color:
        #ffffff !important;
}


html.dark-mode body.task-mail #messagelist tr.selected > td *,
html.dark-mode body.task-mail #messagelist tr.selected:hover > td * {
    color:
        #ffffff !important;
}


html.dark-mode body.task-mail #messagelist .subject {
    color:
        #edf5fc;
}


/* reading pane */

html.dark-mode body.task-mail #message-header {
    background:
        #101c29 !important;

    color:
        #e7eff7 !important;

    border-color:
        var(--jam-border) !important;
}


html.dark-mode body.task-mail #message-header *,
html.dark-mode body.task-mail h2.subject,
html.dark-mode body.task-mail h2.subject * {
    color:
        #f5f9fc !important;
}


html.dark-mode body.task-mail #messagebody {
    background:
        #0b1520 !important;
}


html.dark-mode body.task-mail #messagebody > .message-part {
    background:
        #111f2d !important;

    color:
        #edf4fa !important;

    border-color:
        var(--jam-border) !important;

    box-shadow:
        0 12px 34px
        rgba(0,0,0,.15) !important;
}


html.dark-mode body.task-mail #messagebody .pre {
    background:
        transparent !important;

    color:
        #edf4fa !important;
}


html.dark-mode body.task-mail #messagebody blockquote {
    background:
        #0e1b28 !important;

    color:
        #b8c8d8 !important;
}


/* footer */

html.dark-mode body.task-mail #layout > div > .footer {
    background:
        #101a27 !important;

    border-color:
        var(--jam-border) !important;
}


/* ------------------------------------------------------------
   MOTION ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    body.task-mail *,
    body.task-mail *::before,
    body.task-mail *::after {
        transition-duration:
            .01ms !important;
    }
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

    body.task-mail #layout > div > .header {
        min-height:
            52px;
    }

    body.task-mail #messagelist tr > td {
        padding-top:
            .48rem !important;

        padding-bottom:
            .48rem !important;
    }

}


/* ------------------------------------------------------------
   PHONE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    body.task-mail #mailboxlist {
        padding:
            .45rem !important;
    }

    body.task-mail #mailboxlist li > a {
        min-height:
            42px;
    }

    body.task-mail #messagebody {
        padding:
            .6rem !important;
    }

    body.task-mail #messagebody > .message-part {
        padding:
            1rem !important;

        border-radius:
            12px !important;
    }

}



/* ============================================================
   J&A MAIL UI V2 — MOBILE APP POLISH
   ============================================================ */

@media (max-width: 600px) {

    /* --------------------------------------------------------
       Safe areas / modern phones
       -------------------------------------------------------- */

    body.task-mail {
        padding-bottom:
            env(safe-area-inset-bottom);
    }

    #layout-menu {
        padding-bottom:
            env(safe-area-inset-bottom);
    }


    /* --------------------------------------------------------
       Headers
       -------------------------------------------------------- */

    body.task-mail #layout > div > .header {
        min-height: 52px !important;

        padding-left: .7rem !important;
        padding-right: .7rem !important;

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


    /* --------------------------------------------------------
       Touch targets
       -------------------------------------------------------- */

    body.task-mail .toolbar a,
    body.task-mail .menu a,
    body.task-mail #mailboxlist li > a,
    body.task-mail button {
        min-width: 44px;
        min-height: 44px;
    }


    /* Don't use desktop hover movement on touch screens */

    body.task-mail .toolbar a:hover {
        transform: none !important;
    }


    /* --------------------------------------------------------
       Folder list
       -------------------------------------------------------- */

    body.task-mail #mailboxlist {
        padding:
            .5rem .4rem !important;
    }

    body.task-mail #mailboxlist li > a {
        min-height: 46px;

        padding:
            .55rem .75rem !important;

        margin:
            2px 3px !important;

        border-radius:
            11px !important;

        font-size:
            .95rem;
    }

    body.task-mail #mailboxlist .unreadcount {
        min-width: 24px;
        height: 22px;

        font-size:
            .7rem;
    }


    /* --------------------------------------------------------
       Search
       -------------------------------------------------------- */

    body.task-mail #searchbar {
        min-height: 44px;

        border-radius:
            12px !important;
    }

    body.task-mail #searchbar input {
        /*
         * 16px avoids automatic zoom on iOS when focusing inputs.
         */
        font-size:
            16px !important;
    }


    /* --------------------------------------------------------
       Message list
       -------------------------------------------------------- */

    body.task-mail #messagelist tr > td {
        min-height:
            58px;

        padding-top:
            .65rem !important;

        padding-bottom:
            .65rem !important;
    }

    body.task-mail #messagelist .subject {
        font-size:
            .94rem;

        line-height:
            1.3;
    }

    body.task-mail #messagelist .fromto {
        font-size:
            .9rem;
    }

    body.task-mail #messagelist .date {
        font-size:
            .74rem !important;

        color:
            var(--jam-muted) !important;
    }

    /*
     * Message size is low-value information on a narrow phone.
     * Attachment icon remains available.
     */
    body.task-mail #messagelist .size {
        display:
            none !important;
    }


    /* --------------------------------------------------------
       Selected / unread mail
       -------------------------------------------------------- */

    body.task-mail #messagelist tr.selected > td:first-child,
    body.task-mail #messagelist tr.unread > td:first-child {
        box-shadow:
            inset 3px 0 0
            var(--jam-accent) !important;
    }


    /* --------------------------------------------------------
       Reading pane
       -------------------------------------------------------- */

    body.task-mail #message-header {
        padding:
            .85rem .9rem !important;
    }

    body.task-mail #message-header h2.subject,
    body.task-mail h2.subject {
        font-size:
            1.1rem !important;

        line-height:
            1.3;

        margin-bottom:
            .55rem;
    }

    body.task-mail #messagebody {
        padding:
            .55rem !important;
    }

    body.task-mail #messagebody > .message-part {
        width:
            100%;

        max-width:
            none;

        margin:
            0;

        padding:
            1rem !important;

        border-radius:
            12px !important;

        box-shadow:
            0 5px 18px
            rgba(15,30,50,.04) !important;
    }

    body.task-mail #messagebody .pre {
        font-size:
            .94rem;

        line-height:
            1.62 !important;
    }


    /* --------------------------------------------------------
       Images inside mail
       -------------------------------------------------------- */

    body.task-mail #messagebody img {
        max-width:
            100% !important;

        height:
            auto !important;
    }


    /* --------------------------------------------------------
       Attachments
       -------------------------------------------------------- */

    body.task-mail .attachmentslist {
        width:
            100%;
    }

    body.task-mail .attachmentslist li,
    body.task-mail .attachment {
        width:
            100%;

        min-height:
            46px;

        margin:
            .35rem 0 !important;

        border-radius:
            11px !important;
    }


    /* --------------------------------------------------------
       Forms / compose
       -------------------------------------------------------- */

    body.task-mail input,
    body.task-mail textarea,
    body.task-mail select {
        /*
         * Prevent iPhone Safari from zooming the page
         * when focusing a field.
         */
        font-size:
            16px;
    }


    /* --------------------------------------------------------
       Dialogs
       -------------------------------------------------------- */

    body.task-mail .ui-dialog {
        max-width:
            calc(100vw - 1rem) !important;

        max-height:
            calc(100vh - 1rem) !important;

        border-radius:
            16px !important;
    }

}


/* Fine-tuning specifically for coarse/touch pointers */

@media (pointer: coarse) {

    body.task-mail a,
    body.task-mail button {
        -webkit-tap-highlight-color:
            rgba(7,150,216,.12);
    }

}