/* ============================================================
   J&A AUTOMATION — WORKSPACE V2
   Unified Mail / Contacts / Settings experience
   ============================================================ */


/* ============================================================
   FIX: MOBILE COMPOSE BUTTON
   ============================================================ */

@media (max-width: 600px) {

    html.layout-phone body.task-mail
    #taskmenu .action-buttons {
        width: 100% !important;
        box-sizing: border-box !important;

        padding:
            .55rem !important;
    }


    html.layout-phone body.task-mail
    #taskmenu .action-buttons .compose {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            .55rem !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            48px;

        margin:
            0 !important;

        padding:
            0 .9rem !important;

        box-sizing:
            border-box !important;

        border-radius:
            12px !important;
    }


    /*
     * Elastic's icon has its own sizing.
     * Reset it so icon + text are centered as one unit.
     */

    html.layout-phone body.task-mail
    #taskmenu .action-buttons .compose::before {
        position:
            static !important;

        float:
            none !important;

        display:
            inline-block !important;

        flex:
            0 0 auto;

        width:
            auto !important;

        height:
            auto !important;

        line-height:
            1 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    html.layout-phone body.task-mail
    #taskmenu .action-buttons .compose .inner {
        display:
            inline-block !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        line-height:
            1.2;
    }


    /* Floating Compose button safety */

    body.task-mail
    .floating-action-buttons
    a.button.compose {
        max-width:
            calc(100vw - 28px) !important;

        box-sizing:
            border-box !important;

        gap:
            .5rem !important;
    }


    body.task-mail
    .floating-action-buttons
    a.button.compose::before {
        margin:
            0 !important;
    }

}


/* ============================================================
   SHARED APP TOKENS
   ============================================================ */

body.task-addressbook,
body.task-settings {
    --jaw-bg: #eef3f8;
    --jaw-panel: #ffffff;
    --jaw-panel-soft: #f7f9fc;

    --jaw-hover: #f0f6fb;
    --jaw-selected: #e7f5fc;

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

    --jaw-border:
        rgba(15,40,70,.09);

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

    --jaw-accent: #0796d8;
    --jaw-accent-bright: #38bdf8;

    background:
        var(--jaw-bg) !important;

    color:
        var(--jaw-text);
}


/* ============================================================
   LEFT GLOBAL J&A NAV
   ============================================================ */

body.task-addressbook #layout-menu,
body.task-settings #layout-menu {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(7,150,216,.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #081522 0%,
            #0c1d30 100%
        ) !important;

    border-right:
        0 !important;

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


body.task-addressbook #taskmenu a,
body.task-settings #taskmenu a {
    color:
        rgba(232,242,250,.68) !important;

    margin:
        4px 7px !important;

    border-radius:
        11px !important;

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


body.task-addressbook #taskmenu a:hover,
body.task-settings #taskmenu a:hover {
    color:
        #ffffff !important;

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


body.task-addressbook #taskmenu a.selected,
body.task-settings #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(--jaw-accent-bright),
        0 7px 18px
        rgba(0,0,0,.10) !important;
}


/* ============================================================
   PANES
   ============================================================ */

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


body.task-addressbook #layout-sidebar,
body.task-settings #layout-sidebar {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f3f7fb
        ) !important;

    border-right:
        1px solid
        var(--jaw-border) !important;
}


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


body.task-addressbook #layout-list,
body.task-settings #layout-list {
    border-right:
        1px solid
        var(--jaw-border) !important;
}


/* ============================================================
   HEADERS
   ============================================================ */

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

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

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

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

    font-weight:
        650;

    backdrop-filter:
        blur(12px);

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


/* ============================================================
   TOOLBARS
   ============================================================ */

body.task-addressbook .toolbar a,
body.task-settings .toolbar a {
    border-radius:
        10px !important;

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


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

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


/* ============================================================
   SEARCH BARS
   ============================================================ */

body.task-addressbook .searchbar,
body.task-settings .searchbar {
    min-height:
        39px;

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

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

    border-radius:
        12px !important;

    box-shadow:
        none !important;
}


body.task-addressbook .searchbar:focus-within,
body.task-settings .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;
}


/* ============================================================
   GENERIC LISTS
   ============================================================ */

body.task-addressbook .listing li,
body.task-settings .listing li {
    border-color:
        var(--jaw-border) !important;

    color:
        var(--jaw-text);

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


body.task-addressbook .listing li:hover,
body.task-settings .listing li:hover {
    background:
        var(--jaw-hover) !important;
}


body.task-addressbook .listing li.selected,
body.task-settings .listing li.selected {
    color:
        #086c9e !important;

    background:
        linear-gradient(
            90deg,
            rgba(7,150,216,.13),
            rgba(56,189,248,.06)
        ) !important;

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


/* ============================================================
   CONTACTS
   ============================================================ */

body.task-addressbook #directorylist,
body.task-addressbook #savedsearchlist {
    padding:
        .55rem !important;
}


body.task-addressbook #directorylist li,
body.task-addressbook #savedsearchlist li {
    margin:
        2px 3px;

    border-radius:
        10px;
}


body.task-addressbook #contacts-table li {
    min-height:
        54px;

    padding-top:
        .55rem !important;

    padding-bottom:
        .55rem !important;

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


body.task-addressbook #contacts-table li:hover {
    background:
        var(--jaw-hover) !important;
}


/* New Contact = primary desktop action */

body.task-addressbook
#addressbooktoolbar
.create:not(.disabled) {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0796d8,
            #056da6
        ) !important;

    border-radius:
        10px !important;

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


/* ============================================================
   CONTACTS — MOBILE NEW CONTACT FAB
   ============================================================ */

@media (max-width: 600px) {

    body.task-addressbook
    .floating-action-buttons {
        position:
            fixed !important;

        right:
            max(14px, env(safe-area-inset-right)) !important;

        bottom:
            calc(
                18px + env(safe-area-inset-bottom)
            ) !important;

        z-index:
            1100 !important;
    }


    body.task-addressbook
    .floating-action-buttons
    a.button.create {
        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        gap:
            .5rem;

        width:
            auto !important;

        min-width:
            148px !important;

        max-width:
            calc(100vw - 28px) !important;

        height:
            54px !important;

        padding:
            0 1.15rem !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;

        border-radius:
            999px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #079fe3,
                #057fc0 55%,
                #045f96
            ) !important;

        box-shadow:
            0 14px 36px
            rgba(0,75,125,.34),
            0 4px 12px
            rgba(0,0,0,.16) !important;
    }


    body.task-addressbook
    .floating-action-buttons
    a.button.create::before {
        content:
            "+" !important;

        position:
            static !important;

        width:
            auto !important;

        height:
            auto !important;

        line-height:
            1 !important;

        margin:
            0 !important;

        font-family:
            inherit !important;

        font-size:
            1.5rem !important;
    }


    body.task-addressbook
    .floating-action-buttons
    a.button.create .inner {
        display:
            inline-block !important;

        font-size:
            0 !important;
    }


    body.task-addressbook
    .floating-action-buttons
    a.button.create .inner::after {
        content:
            "New contact";

        font-size:
            .92rem;

        font-weight:
            700;

        white-space:
            nowrap;
    }

}


/* ============================================================
   SETTINGS SIDEBAR
   ============================================================ */

body.task-settings #settings-menu {
    padding:
        .65rem .5rem !important;
}


body.task-settings #settings-menu li {
    margin:
        2px 3px !important;

    border-radius:
        10px !important;
}


body.task-settings #settings-menu li > a {
    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    padding:
        .5rem .7rem !important;

    border-radius:
        10px !important;

    color:
        #44546a !important;
}


body.task-settings #settings-menu li > a:hover {
    background:
        rgba(7,150,216,.075) !important;
}


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

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

    font-weight:
        650;
}


/* Preference sections */

body.task-settings #sections-table li {
    min-height:
        48px;

    padding:
        .55rem .7rem !important;
}


/* ============================================================
   SETTINGS FORMS
   ============================================================ */

body.task-settings .propform,
body.task-settings .formcontent {
    color:
        var(--jaw-text);
}


body.task-settings fieldset {
    margin:
        .8rem;

    padding:
        1rem 1.1rem;

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

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 6px 22px
        rgba(15,30,50,.025);
}


body.task-settings legend {
    color:
        var(--jaw-text-strong) !important;

    font-weight:
        680 !important;
}


body.task-settings .form-control {
    border:
        1px solid
        var(--jaw-border-strong) !important;

    border-radius:
        10px !important;

    background:
        #fbfcfe;

    color:
        var(--jaw-text);
}


body.task-settings .form-control:focus {
    background:
        #ffffff;

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

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


body.task-settings .btn-primary {
    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            #0796d8,
            #056da6
        ) !important;

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


/* ============================================================
   POPUPS
   ============================================================ */

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

    border-radius:
        14px !important;

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


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

@media (max-width: 600px) {

    body.task-addressbook
    #layout > div > .header,

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

        padding-left:
            .7rem !important;

        padding-right:
            .7rem !important;
    }


    body.task-addressbook .toolbar a,
    body.task-settings .toolbar a,
    body.task-addressbook button,
    body.task-settings button {
        min-width:
            44px;

        min-height:
            44px;
    }


    body.task-addressbook .searchbar {
        min-height:
            44px;
    }


    body.task-addressbook .searchbar input,
    body.task-settings input,
    body.task-settings select,
    body.task-settings textarea {
        font-size:
            16px !important;
    }


    body.task-settings #settings-menu li > a {
        min-height:
            46px;
    }


    body.task-settings fieldset {
        margin:
            .5rem;

        padding:
            .8rem;

        border-radius:
            12px;
    }

}


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

html.dark-mode body.task-addressbook,
html.dark-mode body.task-settings {
    --jaw-bg: #08111b;
    --jaw-panel: #101a27;
    --jaw-panel-soft: #0d1723;

    --jaw-hover: #162434;
    --jaw-selected: #17324c;

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

    --jaw-border:
        rgba(170,200,225,.095);

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

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


html.dark-mode body.task-addressbook
#layout-sidebar,

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


html.dark-mode body.task-addressbook
#layout-list,

html.dark-mode body.task-addressbook
#layout-content,

html.dark-mode body.task-settings
#layout-list,

html.dark-mode body.task-settings
#layout-content {
    background:
        var(--jaw-panel) !important;
}


html.dark-mode body.task-addressbook
#layout > div > .header,

html.dark-mode body.task-settings
#layout > div > .header {
    color:
        var(--jaw-text-strong) !important;

    background:
        rgba(14,25,38,.94) !important;

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


html.dark-mode body.task-addressbook
.listing li,

html.dark-mode body.task-settings
.listing li {
    color:
        #c6d3df;
}


html.dark-mode body.task-addressbook
.listing li:hover,

html.dark-mode body.task-settings
.listing li:hover {
    background:
        var(--jaw-hover) !important;
}


html.dark-mode body.task-addressbook
.listing li.selected,

html.dark-mode body.task-settings
.listing li.selected {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #173750,
            #142b40
        ) !important;
}


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


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

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


html.dark-mode body.task-settings
fieldset {
    background:
        #111f2d !important;

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


html.dark-mode body.task-settings
.form-control {
    color:
        #eef5fb !important;

    background:
        #0d1926 !important;

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


html.dark-mode body.task-settings
.form-control:focus {
    background:
        #102234 !important;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    body.task-addressbook *,
    body.task-settings * {
        transition-duration:
            .01ms !important;
    }

}