/* ==========================================================
   FM WEBMAIL - PROFESSIONAL MAILBOX INTERFACE
   #340-F005
   ----------------------------------------------------------
   Custom presentation layer for the FM Email System.
   Core mail behaviour remains provided by the existing
   webmail application and templates.
   ========================================================== */

:root {
    --fm-navy: #071426;
    --fm-navy-soft: #0c1d33;
    --fm-cyan: #08bfe8;
    --fm-cyan-soft: #e7faff;
    --fm-surface: #ffffff;
    --fm-background: #f4f7fb;
    --fm-border: #dfe7ef;
    --fm-text: #17263a;
    --fm-muted: #718096;
    --fm-success: #20b77a;
    --fm-radius: 12px;
}

/*
 * The detailed Inbox/sidebar/message-list styling is added
 * incrementally after the foundation is verified.
 */


/* ==========================================================
   FM NAVIGATION BRANDING - #340-F006
   ========================================================== */

#layout-menu {
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 191, 232, .16), transparent 32%),
        linear-gradient(180deg, #071426 0%, #091a2d 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

#layout-menu .popover-header {
    min-height: 94px;
    padding: 14px 10px;
    border: 0;
    background: transparent;
}

.fm-nav-brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.fm-nav-logo {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(8, 191, 232, .22));
}

.fm-nav-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.fm-nav-brand-text strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.fm-nav-brand-text span {
    margin-top: 3px;
    color: rgba(255, 255, 255, .54);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#layout-menu #taskmenu {
    background: transparent;
}

#layout-menu #taskmenu a {
    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

#layout-menu #taskmenu a:hover {
    background-color: rgba(8, 191, 232, .10);
}

#layout-menu #taskmenu a.selected {
    background-color: rgba(8, 191, 232, .15);
}

#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a.selected .inner {
    color: #ffffff;
}

/* FM accent indicator for selected application */
#layout-menu #taskmenu a.selected::before {
    color: var(--fm-cyan);
}

/* Keep branding compact on smaller screens */
@media screen and (max-width: 768px) {
    #layout-menu .popover-header {
        min-height: 72px;
    }

    .fm-nav-brand {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .fm-nav-logo {
        width: 38px;
        height: 38px;
    }

    .fm-nav-brand-text {
        align-items: flex-start;
    }
}


/* ==========================================================
   FM PROFESSIONAL DESKTOP SIDEBAR - #340-F008
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* Expand the original compact task rail into FM navigation */
    #layout-menu {
        width: 210px !important;
        min-width: 210px !important;
        background:
            radial-gradient(circle at 50% 0%,
                rgba(8, 191, 232, .16),
                transparent 27%),
            linear-gradient(180deg, #061525 0%, #091b2e 100%) !important;
        border-right: 1px solid rgba(255,255,255,.07) !important;
        box-shadow: 8px 0 30px rgba(7,20,38,.08);
    }

    /* Force the FM identity to be visible on desktop */
    #layout-menu .popover-header {
        display: flex !important;
        height: 128px !important;
        min-height: 128px !important;
        padding: 20px 18px 16px !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: normal !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        box-sizing: border-box;
    }

    #layout-menu .popover-header .fm-nav-brand {
        display: flex !important;
    }

    #layout-menu .popover-header .fm-nav-logo {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        padding: 0 !important;
    }

    .fm-nav-brand {
        flex-direction: column;
        gap: 7px;
    }

    .fm-nav-brand-text strong {
        font-size: 14px;
        letter-spacing: .02em;
    }

    .fm-nav-brand-text span {
        font-size: 9px;
        letter-spacing: .10em;
        color: rgba(255,255,255,.52);
    }

    /* Navigation stack */
    #layout-menu #taskmenu {
        width: 100%;
        padding: 14px 10px 12px;
        box-sizing: border-box;
        background: transparent !important;
    }

    #layout-menu #taskmenu > a,
    #layout-menu #taskmenu > span.action-buttons > a,
    #layout-menu #taskmenu > span.special-buttons > a {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px;
        margin: 3px 0 !important;
        padding: 0 13px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        border-radius: 10px;
        box-sizing: border-box;
        color: rgba(255,255,255,.72) !important;
        background: transparent;
        text-decoration: none;
    }

    #layout-menu #taskmenu > span.action-buttons {
        display: block;
        width: 100%;
    }

    #layout-menu #taskmenu > span.special-buttons {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
        bottom: 10px;
        box-sizing: border-box;
        background: transparent !important;
    }

    #layout-menu #taskmenu a:before {
        width: 28px !important;
        min-width: 28px;
        height: 48px !important;
        line-height: 48px !important;
        margin: 0 !important;
        text-align: center;
        font-size: 18px;
        color: rgba(255,255,255,.66);
    }

    #layout-menu #taskmenu a .inner {
        display: inline !important;
        width: auto !important;
        overflow: visible;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        color: inherit;
        text-align: left;
    }

    #layout-menu #taskmenu a:hover {
        color: #ffffff !important;
        background: rgba(8,191,232,.09) !important;
        transform: translateX(2px);
    }

    #layout-menu #taskmenu a:hover:before {
        color: var(--fm-cyan);
    }

    #layout-menu #taskmenu a.selected {
        position: relative;
        color: #ffffff !important;
        background:
            linear-gradient(90deg,
                rgba(8,191,232,.20),
                rgba(8,191,232,.08)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(8,191,232,.13);
    }

    #layout-menu #taskmenu a.selected:before {
        color: var(--fm-cyan) !important;
    }

    #layout-menu #taskmenu a.selected:after {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 0 4px 4px 0;
        background: var(--fm-cyan);
        box-shadow: 0 0 10px rgba(8,191,232,.55);
    }

    /* Keep utilities at the bottom */
    #layout-menu #taskmenu .special-buttons a.theme,
    #layout-menu #taskmenu .special-buttons a.logout {
        display: flex !important;
    }

    #layout-menu #taskmenu .special-buttons a.logout {
        color: #ff7c7c !important;
    }

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

    /* User-facing About dialog is not part of FM interface */
    #layout-menu #taskmenu .special-buttons a.about {
        display: none !important;
    }
}


/* Medium screens retain compact navigation */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .fm-nav-brand-text {
        display: none;
    }
}


/* ==========================================================
   FM SIDEBAR CLEANUP + FULL LABELS - #340-F013
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* Logo-only identity */
    #layout-menu .popover-header {
        height: 96px !important;
        min-height: 96px !important;
        padding: 14px !important;
    }

    #layout-menu .fm-nav-brand {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #layout-menu .fm-nav-logo {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .fm-nav-brand-text {
        display: none !important;
    }

    /* Remove old compact task-menu width restrictions */
    #layout-menu #taskmenu,
    #layout-menu #taskmenu > .action-buttons,
    #layout-menu #taskmenu > .special-buttons {
        box-sizing: border-box !important;
    }

    #layout-menu #taskmenu > .action-buttons {
        width: 100% !important;
        max-width: none !important;
    }

    #layout-menu #taskmenu a {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #layout-menu #taskmenu a .inner {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;

        font-size: 13px !important;
        line-height: 48px !important;
        text-align: left !important;
    }

    #layout-menu #taskmenu a:before {
        flex: 0 0 28px !important;
    }

    #layout-menu #taskmenu > .special-buttons {
        width: calc(100% - 20px) !important;
        max-width: none !important;
    }

    /* Ensure About remains removed from FM user interface */
    #layout-menu #taskmenu a.about {
        display: none !important;
    }
}


/* ==========================================================
   FM PROFESSIONAL INBOX WORKSPACE - #340-F015
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* ------------------------------------------------------
       Folder / account column
       ------------------------------------------------------ */

    #layout-sidebar {
        min-width: 275px !important;
        max-width: 275px !important;
        flex: 0 0 275px !important;
        background: #f8fafc !important;
        border-right: 1px solid #e5eaee !important;
    }

    #layout-sidebar > .header {
        height: 72px !important;
        min-height: 72px !important;
        line-height: 72px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e7edf1 !important;
        padding: 0 16px !important;
    }

    #layout-sidebar .header-title.username {
        margin: 0 !important;
        padding: 0 8px !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #162b36 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #layout-sidebar .sidebar-menu {
        margin-left: auto !important;
        color: #647681 !important;
    }

    #folderlist-content {
        padding: 12px 10px !important;
        background: #f8fafc !important;
    }

    #mailboxlist {
        background: transparent !important;
    }

    #mailboxlist li {
        margin: 3px 0 !important;
        border: 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
    }

    #mailboxlist li > a {
        min-height: 42px !important;
        line-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #344953 !important;
        font-weight: 500 !important;
    }

    #mailboxlist li > a:hover {
        background: #edf7fb !important;
        color: #0b789c !important;
    }

    #mailboxlist li.selected > a {
        background: #e5f7fd !important;
        color: #087da4 !important;
        font-weight: 700 !important;
    }

    #mailboxlist .unreadcount {
        border-radius: 12px !important;
        min-width: 25px !important;
        padding: 2px 7px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

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

    #layout-list {
        min-width: 430px !important;
        max-width: 430px !important;
        flex: 0 0 430px !important;
        border-right: 1px solid #e5eaee !important;
        background: #ffffff !important;
    }

    #messagelist-header {
        height: 72px !important;
        min-height: 72px !important;
        line-height: normal !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e7edf1 !important;
    }

    #messagelist-header .toolbar.menu {
        height: 72px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #messagelist-header .toolbar.menu a,
    #messagelist-header > a.refresh {
        height: 72px !important;
    }

    /* Search */
    #mailsearchform {
        margin: 12px !important;
        border: 1px solid #dce5e9 !important;
        border-radius: 10px !important;
        background: #f8fafb !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    #mailsearchform input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        height: 42px !important;
        font-size: 13px !important;
    }

    #mailsearchform:focus-within {
        border-color: #25b9e8 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(37,185,232,.10) !important;
    }

    /* Message rows */
    #messagelist-content {
        border-top: 1px solid #eef2f4 !important;
        background: #ffffff !important;
    }

    #messagelist tr {
        border-bottom: 1px solid #eef2f4 !important;
    }

    #messagelist td {
        background: #ffffff !important;
    }

    #messagelist tr:hover td {
        background: #f7fbfd !important;
    }

    #messagelist tr.selected td {
        background: #eaf8fd !important;
    }

    #messagelist tr.unread td {
        font-weight: 700 !important;
    }

    #messagelist td.subject {
        color: #263b45 !important;
    }

    #messagelist td.date {
        color: #71818a !important;
        font-size: 12px !important;
    }

    /* Pagination */
    #layout-list > .footer {
        background: #ffffff !important;
        border-top: 1px solid #e7edf1 !important;
    }

    #layout-list .menu.pagenav {
        background: #ffffff !important;
    }

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

    #layout-content {
        background:
            radial-gradient(circle at 50% 42%,
                rgba(26, 181, 226, .035),
                transparent 24%),
            #fbfcfd !important;
    }

    #layout-content > .header {
        height: 72px !important;
        min-height: 72px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e7edf1 !important;
    }

    #layout-content .iframe-wrapper {
        background: #fbfcfd !important;
    }

    #messagecontframe {
        background: #fbfcfd !important;
    }

    /* Cleaner scrollbar */
    #folderlist-content::-webkit-scrollbar,
    #messagelist-content::-webkit-scrollbar {
        width: 6px !important;
    }

    #folderlist-content::-webkit-scrollbar-thumb,
    #messagelist-content::-webkit-scrollbar-thumb {
        background: #c8d3d8 !important;
        border-radius: 10px !important;
    }
}

/* ==========================================================
   FM BALANCED INBOX GEOMETRY - #340-F017F
   Uses Roundcube flex layout - no absolute positioning
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* Folder/account column */
    body.task-mail #layout-sidebar {
        min-width: 230px !important;
        max-width: 230px !important;
        flex: 0 0 230px !important;
        margin: 0 !important;
    }

    /* Message list */
    body.task-mail #layout-list {
        min-width: 420px !important;
        max-width: 420px !important;
        flex: 0 0 420px !important;
        margin: 0 !important;
    }

    /* Reading pane receives all remaining space */
    body.task-mail #layout-content {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
    }

    /* Keep every panel directly adjacent */
    body.task-mail #layout-sidebar,
    body.task-mail #layout-list,
    body.task-mail #layout-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Slightly more compact account header */
    body.task-mail #layout-sidebar > .header,
    body.task-mail #messagelist-header,
    body.task-mail #layout-content > .header {
        height: 68px !important;
        min-height: 68px !important;
    }

    body.task-mail #layout-sidebar > .header {
        line-height: 68px !important;
        padding-left: 14px !important;
        padding-right: 12px !important;
    }

    body.task-mail #messagelist-header .toolbar.menu,
    body.task-mail #messagelist-header .toolbar.menu a,
    body.task-mail #messagelist-header > a.refresh {
        height: 68px !important;
    }

    /* Cleaner folder spacing */
    body.task-mail #folderlist-content {
        padding: 10px 8px !important;
    }

    body.task-mail #mailboxlist li > a {
        min-height: 40px !important;
        line-height: 40px !important;
    }

    /* Keep search aligned with message list */
    body.task-mail #mailsearchform {
        margin: 10px 12px !important;
    }
}


/* ==========================================================
   FM PROFESSIONAL INBOX HEADER - #340-F018B
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* Account header */

    body.task-mail #layout-sidebar > .header {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
        padding: 0 12px 0 16px !important;
    }

    body.task-mail .fm-account-title {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    body.task-mail .fm-account-label {
        display: block !important;
        color: #08a8d1 !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 1.2px !important;
    }

    body.task-mail .fm-account-title .username {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #152b3b !important;
        font-size: 12px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.task-mail #layout-sidebar .sidebar-menu {
        flex: 0 0 auto !important;
        width: 34px !important;
        height: 34px !important;
        margin-left: 8px !important;
        border-radius: 9px !important;
    }

    /* Inbox header */

    body.task-mail #messagelist-header {
        display: flex !important;
        align-items: center !important;
        padding: 0 10px 0 14px !important;
    }

    body.task-mail .fm-inbox-title {
        min-width: 82px !important;
        margin-right: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        line-height: 1.1 !important;
    }

    body.task-mail .fm-inbox-title strong {
        color: #172c3c !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: -.2px !important;
    }

    body.task-mail .fm-inbox-title span {
        margin-top: 4px !important;
        color: #8a99a5 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: .8px !important;
        text-transform: uppercase !important;
    }

    body.task-mail #messagelist-header .toolbar.menu {
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }

    body.task-mail #messagelist-header .toolbar.menu a,
    body.task-mail #messagelist-header > a.refresh {
        width: 46px !important;
        min-width: 46px !important;
        height: 58px !important;
        border-radius: 9px !important;
    }

    body.task-mail #messagelist-header .toolbar.menu a:hover,
    body.task-mail #messagelist-header > a.refresh:hover {
        background: #eef8fb !important;
    }

    /* Reading toolbar */

    body.task-mail #layout-content > .header {
        display: flex !important;
        align-items: center !important;
        padding: 0 18px !important;
    }

    body.task-mail #mailtoolbar {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}


/* ==========================================================
   FM PROFESSIONAL FOLDER NAVIGATION - #340-F019C
   ========================================================== */

@media screen and (min-width: 1025px) {

    body.task-mail #layout-sidebar {
        background: #f7f9fc !important;
        border-right: 1px solid #e3eaf0 !important;
    }

    body.task-mail #layout-sidebar > .header {
        background: #ffffff !important;
        border-bottom: 1px solid #e7edf2 !important;
    }

    body.task-mail #folderlist-content {
        padding: 13px 9px !important;
        background:
            linear-gradient(
                180deg,
                #f8fafc 0%,
                #f5f8fb 100%
            ) !important;
    }

    body.task-mail #mailboxlist {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body.task-mail #mailboxlist li {
        position: relative !important;
        margin: 4px 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        overflow: visible !important;
    }

    body.task-mail #mailboxlist li > a {
        position: relative !important;
        min-height: 42px !important;
        line-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 10px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #405461 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        transition:
            background .15s ease,
            border-color .15s ease,
            color .15s ease,
            box-shadow .15s ease !important;
    }

    body.task-mail #mailboxlist li > a:hover {
        background: #ffffff !important;
        border-color: #dce9ef !important;
        color: #087fa7 !important;
        box-shadow: 0 2px 8px rgba(16, 45, 65, .05) !important;
    }

    body.task-mail #mailboxlist li.selected > a {
        background: #e4f7fd !important;
        border-color: #c5edf8 !important;
        color: #087da4 !important;
        font-weight: 800 !important;
        box-shadow:
            0 3px 10px rgba(8, 191, 232, .08) !important;
    }

    body.task-mail #mailboxlist li.selected::before {
        content: "" !important;
        position: absolute !important;
        z-index: 3 !important;
        left: -9px !important;
        top: 9px !important;
        width: 3px !important;
        height: 24px !important;
        border-radius: 0 4px 4px 0 !important;
        background: #08bfe8 !important;
    }

    body.task-mail #mailboxlist .unreadcount {
        min-width: 24px !important;
        height: 24px !important;
        line-height: 20px !important;
        padding: 2px 7px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #08bfe8 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-align: center !important;
        box-shadow: 0 2px 6px rgba(8, 191, 232, .18) !important;
    }

    body.task-mail #layout-sidebar > .footer {
        min-height: 38px !important;
        background: #f7f9fc !important;
        border-top: 1px solid #e7edf2 !important;
    }

    body.task-mail #quotadisplay {
        margin: 8px 12px !important;
        color: #71818d !important;
        font-size: 10px !important;
    }
}


/* ==========================================================
   FM MESSAGE CARD DESIGN - #340-F020C
   ========================================================== */

@media screen and (min-width: 1025px) {

    body.task-mail #messagelist-content {
        padding: 5px 6px 8px !important;
        background: #f7f9fb !important;
        border-top: 1px solid #edf1f4 !important;
    }

    body.task-mail #messagelist {
        border-collapse: separate !important;
        border-spacing: 0 4px !important;
        background: transparent !important;
    }

    body.task-mail #messagelist tr {
        position: relative !important;
        border: 0 !important;
    }

    body.task-mail #messagelist td {
        background: #ffffff !important;
        border-top: 1px solid #e9eef2 !important;
        border-bottom: 1px solid #e9eef2 !important;
        transition:
            background .15s ease,
            border-color .15s ease !important;
    }

    body.task-mail #messagelist tr td:first-child {
        border-left: 1px solid #e9eef2 !important;
        border-radius: 9px 0 0 9px !important;
    }

    body.task-mail #messagelist tr td:last-child {
        border-right: 1px solid #e9eef2 !important;
        border-radius: 0 9px 9px 0 !important;
    }

    body.task-mail #messagelist tr:hover td {
        background: #f7fcfe !important;
        border-color: #d9ebf1 !important;
    }

    body.task-mail #messagelist tr.selected td {
        background: #e9f8fd !important;
        border-color: #bfeaf6 !important;
    }

    body.task-mail #messagelist td.subject {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-right: 8px !important;
        color: #263b45 !important;
    }

    /* Sender */

    body.task-mail #messagelist td.subject span.fromto {
        color: #667985 !important;
        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 500 !important;
    }

    body.task-mail #messagelist tr.unread td.subject span.fromto {
        color: #324c5b !important;
        font-weight: 700 !important;
    }

    /* Subject */

    body.task-mail #messagelist td.subject span.subject {
        color: #253b48 !important;
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
    }

    body.task-mail #messagelist td.subject span.subject a {
        color: inherit !important;
    }

    body.task-mail #messagelist tr.unread td.subject span.subject,
    body.task-mail #messagelist tr.unread td.subject span.subject a {
        color: #132d3c !important;
        font-weight: 800 !important;
    }

    /* Date */

    body.task-mail #messagelist td.subject span.date,
    body.task-mail #messagelist td.subject span.size {
        color: #84939d !important;
        font-size: 10px !important;
        line-height: 18px !important;
        font-weight: 500 !important;
    }

    body.task-mail #messagelist tr.unread td.subject span.date {
        color: #647985 !important;
        font-weight: 700 !important;
    }

    /* Unread indicator */

    body.task-mail #messagelist
    td.subject span.msgicon.status.unread:before {
        color: #08bfe8 !important;
        font-size: .55rem !important;
    }

    /* Attachment */

    body.task-mail #messagelist span.attachment span {
        color: #82939d !important;
    }

    body.task-mail #messagelist tr:hover span.attachment span {
        color: #168caf !important;
    }

    /* Flagged mail stays visually distinct */

    body.task-mail #messagelist tr.flagged:not(.deleted) td.subject span.subject,
    body.task-mail #messagelist tr.flagged:not(.deleted) td.subject span.subject a {
        font-weight: 700 !important;
    }

    /* Selected row accent */

    body.task-mail #messagelist tr.selected td:first-child {
        box-shadow: inset 3px 0 0 #08bfe8 !important;
    }

    /* Cleaner pagination footer */

    body.task-mail #layout-list > .footer {
        min-height: 36px !important;
        background: #ffffff !important;
        border-top: 1px solid #e5ebef !important;
    }

    body.task-mail #layout-list .menu.pagenav {
        background: #ffffff !important;
    }
}



/* =========================================================
   FM FINAL EMPTY READING PANE - #340-F021I
   ========================================================= */

@media screen and (min-width: 769px) {

    body.task-mail #layout-content .iframe-wrapper {
        position: relative !important;
        overflow: hidden !important;
        background:
            radial-gradient(
                circle at 50% 42%,
                #ffffff 0,
                #ffffff 30%,
                #f8fbfd 100%
            ) !important;
    }

    body.task-mail #fm-empty-reading-pane {
        position: absolute;
        inset: 0;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        pointer-events: none;

        background:
            radial-gradient(
                circle at 50% 42%,
                rgba(8,191,232,.055) 0,
                rgba(255,255,255,.96) 34%,
                #ffffff 70%
            );
    }

    body.task-mail #fm-empty-reading-pane.fm-hidden {
        display: none !important;
    }

    body.task-mail .fm-empty-reading-card {
        width: min(420px, 72%);
        text-align: center;
        padding: 34px 38px 32px;

        background: rgba(255,255,255,.96);
        border: 1px solid #e5edf2;
        border-radius: 18px;

        box-shadow:
            0 18px 50px rgba(7,20,38,.07),
            0 2px 8px rgba(7,20,38,.035);
    }

    body.task-mail .fm-empty-reading-logo {
        display: block;

        width: 94px;
        height: auto;

        margin: 0 auto 20px;

        object-fit: contain;
    }

    body.task-mail .fm-empty-reading-kicker {
        margin-bottom: 8px;

        color: #08a9cf;

        font-size: 10px;
        line-height: 1.4;
        font-weight: 800;

        letter-spacing: .16em;
    }

    body.task-mail .fm-empty-reading-card h2 {
        margin: 0;

        color: #132d3c;

        font-size: 22px;
        line-height: 1.3;
        font-weight: 750;
    }

    body.task-mail .fm-empty-reading-card p {
        margin: 10px auto 0;

        max-width: 300px;

        color: #7a8c97;

        font-size: 13px;
        line-height: 1.6;
        font-weight: 400;
    }

    body.task-mail .fm-empty-reading-secure {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        margin-top: 22px;
        padding: 7px 11px;

        color: #607682;
        background: #f5fafc;

        border: 1px solid #e5eef2;
        border-radius: 999px;

        font-size: 9px;
        line-height: 1;
        font-weight: 800;

        letter-spacing: .10em;
    }

    body.task-mail .fm-empty-reading-secure span {
        display: block;

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background: #20b77a;

        box-shadow: 0 0 0 3px rgba(32,183,122,.10);
    }
}



/* =========================================================
   FM EMPTY PANE DIRECT SELECTION FIX - #340-F021M

   No selected message:
       FM welcome card visible

   Selected message:
       FM welcome card completely hidden
   ========================================================= */

@media screen and (min-width: 769px) {

    body.task-mail #fm-empty-reading-pane {
        display: flex !important;
    }

    body.task-mail #layout:has(#messagelist tr.selected)
    #fm-empty-reading-pane {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

}



/* =========================================================
   FM COMMAND TOOLBAR - #340-F022C
   Professional FM Webmail command interface
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* -----------------------------------------------------
       Inbox command bar
       ----------------------------------------------------- */

    body.task-mail #messagelist-header {
        gap: 6px !important;
        padding-left: 14px !important;
        padding-right: 8px !important;
    }

    body.task-mail #messagelist-header .fm-inbox-title {
        min-width: 92px !important;
        flex: 1 1 auto !important;
    }

    body.task-mail #messagelist-header .toolbar.menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        height: 68px !important;
        overflow: visible !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a,
    body.task-mail #messagelist-header > a.refresh {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 48px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 4px 2px !important;
        margin: 0 !important;

        border: 1px solid transparent !important;
        border-radius: 9px !important;

        color: #536773 !important;
        background: transparent !important;

        overflow: visible !important;
        text-overflow: clip !important;
        transition:
            background-color .15s ease,
            border-color .15s ease,
            color .15s ease !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a:before,
    body.task-mail #messagelist-header > a.refresh:before {
        float: none !important;
        width: auto !important;
        height: 20px !important;
        line-height: 20px !important;
        margin: 0 0 2px 0 !important;
        font-size: 16px !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a .inner,
    body.task-mail #messagelist-header > a.refresh .inner {
        display: block !important;
        width: 100% !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        font-size: 9px !important;
        line-height: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a:not(.disabled):hover,
    body.task-mail #messagelist-header > a.refresh:not(.disabled):hover {
        color: #008fb2 !important;
        background: #eefbfe !important;
        border-color: #cceff7 !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a.disabled {
        opacity: .42 !important;
    }


    /* -----------------------------------------------------
       Message reader command bar
       ----------------------------------------------------- */

    body.task-mail #layout-content > .header {
        padding: 0 14px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5edf2 !important;
    }

    body.task-mail #mailtoolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        height: 68px !important;
        gap: 5px !important;

        overflow: visible !important;
    }

    body.task-mail #mailtoolbar > a,
    body.task-mail #mailtoolbar > .dropbutton > a:first-child {
        min-width: 54px !important;
        max-width: none !important;
        height: 46px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 4px 8px !important;
        margin: 0 !important;

        border: 1px solid transparent !important;
        border-radius: 9px !important;

        background: transparent !important;
        color: #344955 !important;

        overflow: visible !important;
        transition:
            background-color .15s ease,
            border-color .15s ease,
            color .15s ease !important;
    }

    body.task-mail #mailtoolbar > a:before,
    body.task-mail #mailtoolbar > .dropbutton > a:first-child:before {
        float: none !important;
        width: auto !important;
        height: 20px !important;
        line-height: 20px !important;

        margin: 0 0 2px 0 !important;
        font-size: 16px !important;
    }

    body.task-mail #mailtoolbar > a .inner,
    body.task-mail #mailtoolbar > .dropbutton > a:first-child .inner {
        display: block !important;

        font-size: 10px !important;
        line-height: 12px !important;
        font-weight: 600 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    body.task-mail #mailtoolbar > a:not(.disabled):hover,
    body.task-mail #mailtoolbar > .dropbutton > a:first-child:not(.disabled):hover {
        color: #008fb2 !important;
        background: #eefbfe !important;
        border-color: #cceff7 !important;
    }

    /* Delete receives a subtle destructive treatment */

    body.task-mail #mailtoolbar > a.delete:not(.disabled):hover {
        color: #c83d4d !important;
        background: #fff4f5 !important;
        border-color: #ffd9dd !important;
    }


    /* -----------------------------------------------------
       Reply-all / Forward dropdown arrows
       ----------------------------------------------------- */

    body.task-mail #mailtoolbar .dropbutton {
        display: flex !important;
        align-items: center !important;
        height: 46px !important;
        border-radius: 9px !important;
    }

    body.task-mail #mailtoolbar .dropbutton > a.dropdown {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 0 9px 9px 0 !important;
    }

    body.task-mail #mailtoolbar .dropbutton > a.dropdown:before {
        line-height: 46px !important;
        margin: 0 !important;
        font-size: 10px !important;
    }

    body.task-mail #mailtoolbar .dropbutton > a.dropdown .inner {
        display: none !important;
    }


    /* -----------------------------------------------------
       Separators
       ----------------------------------------------------- */

    body.task-mail #mailtoolbar > .spacer {
        width: 1px !important;
        min-width: 1px !important;
        height: 30px !important;
        margin: 0 5px !important;
        background: #e2e9ed !important;
    }


    /* -----------------------------------------------------
       Mark / More
       ----------------------------------------------------- */

    body.task-mail #mailtoolbar > a.markmessage,
    body.task-mail #mailtoolbar > a.more {
        min-width: 48px !important;
    }


    /* -----------------------------------------------------
       Disabled command state
       ----------------------------------------------------- */

    body.task-mail #mailtoolbar .disabled {
        opacity: .38 !important;
        cursor: default !important;
    }
}



/* =========================================================
   FM FINAL TOOLBAR REFINEMENT - #340-F022D
   ========================================================= */

@media screen and (min-width: 1025px) {

    /*
     * Inbox controls:
     * enough room for Select / Threads / Options / Refresh
     */

    body.task-mail #messagelist-header .toolbar.menu > a {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }

    body.task-mail #messagelist-header > a.refresh {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a .inner,
    body.task-mail #messagelist-header > a.refresh .inner {
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 9px !important;
        letter-spacing: -0.1px !important;
    }

    /*
     * Keep the Inbox title compact so command labels
     * receive sufficient horizontal space.
     */

    body.task-mail #messagelist-header .fm-inbox-title {
        min-width: 76px !important;
        margin-right: 2px !important;
    }

    /*
     * Professional active reader commands
     */

    body.task-mail #mailtoolbar > a:not(.disabled),
    body.task-mail #mailtoolbar > .dropbutton > a:first-child:not(.disabled) {
        color: #243d49 !important;
    }

    /*
     * FM cyan focus for actionable commands
     */

    body.task-mail #mailtoolbar > a:not(.disabled):focus,
    body.task-mail #mailtoolbar > .dropbutton > a:first-child:not(.disabled):focus {
        color: #008fb2 !important;
        background: #eefbfe !important;
        border-color: #cceff7 !important;
        outline: none !important;
    }

    /*
     * Keep disabled controls quiet and clearly unavailable
     */

    body.task-mail #mailtoolbar .disabled,
    body.task-mail #messagelist-header .disabled {
        opacity: .34 !important;
    }
}



/* =========================================================
   FM ACTION POPUP FIX - #340-F022G
   Keep Mark / More and other command menus clickable
   and above the FM mailbox workspace.
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * Command buttons must remain real interactive elements.
     */

    body.task-mail #messagemenulink,
    body.task-mail #markmessagemenulink {
        position: relative !important;
        z-index: 20 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /*
     * Popovers must sit above the reader, iframe and
     * FM empty-state layers.
     */

    body.task-mail .popover {
        z-index: 5000 !important;
        pointer-events: auto !important;
    }

    body.task-mail .popover .popover-body,
    body.task-mail .popover .popupmenu,
    body.task-mail .popover .menu,
    body.task-mail .popover .listing,
    body.task-mail .popover li,
    body.task-mail .popover li > a {
        pointer-events: auto !important;
    }

    /*
     * Professional FM action-menu appearance.
     */

    body.task-mail .popover {
        min-width: 210px !important;
        border: 1px solid #dce7ed !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow:
            0 14px 34px rgba(7,20,38,.16),
            0 3px 10px rgba(7,20,38,.08) !important;
        overflow: hidden !important;
    }

    body.task-mail .popover .popover-body {
        padding: 6px !important;
        background: #ffffff !important;
    }

    body.task-mail .popover .menu li > a {
        min-height: 38px !important;
        line-height: 38px !important;
        padding: 0 11px !important;
        border-radius: 8px !important;
        color: #314854 !important;
        background: transparent !important;
        font-size: 13px !important;
    }

    body.task-mail .popover .menu li > a:not(.disabled):hover,
    body.task-mail .popover .menu li > a:not(.disabled):focus {
        color: #007f9f !important;
        background: #eefbfe !important;
        outline: none !important;
    }

    body.task-mail .popover .menu li > a.disabled {
        opacity: .38 !important;
    }

    /*
     * Ensure mailbox iframe cannot visually cover an
     * open command menu.
     */

    body.task-mail #layout-content .iframe-wrapper {
        z-index: 1 !important;
    }

    body.task-mail #layout-content > .header {
        position: relative !important;
        z-index: 10 !important;
        overflow: visible !important;
    }

    body.task-mail #mailtoolbar {
        position: relative !important;
        z-index: 11 !important;
        overflow: visible !important;
    }
}


/* =========================================================
   FM FINAL INBOX VISUAL CLEANUP - #340-F023E
   Final authoritative desktop Inbox presentation.
   Preserve F017F flex geometry and F022 popup behavior.
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* Inbox heading / command relationship */

    body.task-mail #messagelist-header {
        padding-left: 12px !important;
        padding-right: 8px !important;
        gap: 3px !important;
    }

    body.task-mail #messagelist-header .fm-inbox-title {
        min-width: 64px !important;
        margin-right: 0 !important;
    }

    body.task-mail #messagelist-header .fm-inbox-title strong {
        color: #152d3b !important;
        font-weight: 750 !important;
    }

    /* Give Select / Threads / Options / Refresh readable labels */

    body.task-mail #messagelist-header .toolbar.menu {
        gap: 1px !important;
        flex: 0 0 auto !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a,
    body.task-mail #messagelist-header > a.refresh {
        width: 47px !important;
        min-width: 47px !important;
        max-width: 47px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.task-mail #messagelist-header .toolbar.menu > a .inner,
    body.task-mail #messagelist-header > a.refresh .inner {
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: 8.5px !important;
        letter-spacing: -.15px !important;
    }

    /* Search workspace */

    body.task-mail #layout-list .searchbar {
        margin: 8px 10px !important;
        border-radius: 10px !important;
    }

    body.task-mail #layout-list .searchbar input {
        color: #233d49 !important;
    }

    /* Message-list surface */

    body.task-mail #messagelist-content {
        background: #f7f9fb !important;
    }

    /* Selected message: stronger FM cyan identity */

    body.task-mail #messagelist tr.selected td {
        background-color: #e9f9fd !important;
    }

    /* Reader command bar */

    body.task-mail #layout-content > .header {
        border-bottom-color: #e4edf2 !important;
        box-shadow: 0 1px 0 rgba(7,20,38,.02) !important;
    }

    body.task-mail #mailtoolbar {
        gap: 4px !important;
    }

    /* Keep active commands readable without overpowering message */

    body.task-mail #mailtoolbar > a:not(.disabled),
    body.task-mail #mailtoolbar > .dropbutton > a:first-child:not(.disabled) {
        color: #263f4b !important;
    }

    body.task-mail #mailtoolbar .disabled {
        opacity: .46 !important;
    }

    /* Pagination/footer becomes part of FM workspace */

    body.task-mail #layout-list .footer {
        background: #ffffff !important;
        border-top: 1px solid #e3ebf0 !important;
        color: #667b86 !important;
    }

    body.task-mail #layout-list .footer a {
        color: #607682 !important;
    }

    body.task-mail #layout-list .footer a:not(.disabled):hover {
        color: #008fb2 !important;
        background: #eefbfe !important;
    }

    /* Maintain popup interaction above reader */

    body.task-mail .popover {
        z-index: 5000 !important;
    }

    body.task-mail #mailtoolbar {
        z-index: 11 !important;
        overflow: visible !important;
    }
}


/* =========================================================
   FM AUTHORITATIVE INBOX HEADER - #340-F023P
   Single final desktop rule for:
   Inbox / Select / Threads / Options / Refresh
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.task-mail #messagelist-header {
        display: flex !important;
        align-items: center !important;

        padding-left: 10px !important;
        padding-right: 6px !important;
        gap: 2px !important;

        overflow: visible !important;
    }

    /*
     * Inbox title uses only the remaining space.
     */

    body.task-mail #messagelist-header .fm-inbox-title {
        flex: 1 1 0 !important;
        min-width: 68px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /*
     * Command group must not shrink.
     */

    body.task-mail #messagelist-header .toolbar.menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        flex: 0 0 174px !important;
        width: 174px !important;
        min-width: 174px !important;
        max-width: 174px !important;

        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /*
     * Three Inbox commands.
     * 58px each = 174px total.
     */

    body.task-mail #messagelist-header .toolbar.menu > a.select,
    body.task-mail #messagelist-header .toolbar.menu > a.threads,
    body.task-mail #messagelist-header .toolbar.menu > a.options {
        display: flex !important;
        flex: 0 0 58px !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        height: 58px !important;

        padding: 4px 0 !important;
        margin: 0 !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    /*
     * Refresh sits outside .toolbar.menu.
     */

    body.task-mail #messagelist-header > a.refresh {
        display: flex !important;
        flex: 0 0 58px !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        height: 58px !important;

        padding: 4px 0 !important;
        margin: 0 !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    /*
     * Full labels. No ellipsis.
     */

    body.task-mail #messagelist-header .toolbar.menu > a.select > .inner,
    body.task-mail #messagelist-header .toolbar.menu > a.threads > .inner,
    body.task-mail #messagelist-header .toolbar.menu > a.options > .inner,
    body.task-mail #messagelist-header > a.refresh > .inner {
        display: block !important;

        position: static !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;

        font-size: 9px !important;
        line-height: 12px !important;
        letter-spacing: -.1px !important;
        text-align: center !important;
    }
}



/* =========================================================
   FM PROFESSIONAL MESSAGE READER - #340-G004
   Visual presentation only.
   Mail/message command handlers remain unchanged.
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * Reader workspace
     */

    body.task-mail #layout-content > .content.frame-content {
        padding: 0 !important;
        background:
            linear-gradient(180deg, #f7fafc 0%, #ffffff 190px) !important;
    }

    /*
     * Message identity/header card
     */

    body.task-mail #message-header {
        position: relative !important;

        margin: 18px 22px 0 !important;
        padding: 20px 22px 18px !important;

        background: #ffffff !important;
        border: 1px solid #e5ebef !important;
        border-radius: 12px !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, .03),
            0 8px 24px rgba(15, 23, 42, .035) !important;
    }

    /*
     * Subject
     */

    body.task-mail #message-header > h2.subject {
        display: flex !important;
        align-items: flex-start !important;

        margin: 0 0 17px !important;
        padding: 0 44px 15px 0 !important;

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

        color: #172b3a !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        letter-spacing: -.25px !important;

        overflow-wrap: anywhere !important;
    }

    /*
     * Open-in-new-window control
     */

    body.task-mail #message-header > h2.subject > a.extwin {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 8px !important;
        color: #607783 !important;
        background: #f5f8fa !important;
        text-decoration: none !important;
    }

    body.task-mail #message-header > h2.subject > a.extwin:hover {
        color: #008fc9 !important;
        background: #eaf8ff !important;
    }

    /*
     * Sender area
     */

    body.task-mail #message-header > .header {
        display: flex !important;
        align-items: flex-start !important;

        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
    }

    /*
     * Contact avatar
     */

    body.task-mail #message-header .contactphoto {
        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;

        margin: 1px 14px 0 0 !important;

        border-radius: 50% !important;
        border: 1px solid #dfe8ed !important;

        background-color: #f3f7f9 !important;

        object-fit: cover !important;
    }

    /*
     * Sender/header information
     */

    body.task-mail #message-header .header-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        color: #526773 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    body.task-mail #message-header .header-summary {
        color: #253d4a !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    body.task-mail #message-header .header-summary a {
        color: #16394a !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    body.task-mail #message-header .header-summary a:hover {
        color: #009ed5 !important;
    }

    /*
     * Expanded message metadata
     */

    body.task-mail #message-header .header-headers {
        margin-top: 8px !important;
        padding: 10px 12px !important;

        border: 1px solid #e8eef1 !important;
        border-radius: 8px !important;

        background: #f8fafb !important;

        color: #506570 !important;
        font-size: 12px !important;
    }

    body.task-mail #message-header .header-headers .header-title {
        color: #7b8d96 !important;
        font-weight: 600 !important;
    }

    /*
     * Details / Headers / HTML-Text controls
     */

    body.task-mail #message-header .header-links {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 7px !important;

        margin-top: 8px !important;
    }

    body.task-mail #message-header .header-links a {
        display: inline-flex !important;
        align-items: center !important;

        min-height: 25px !important;

        padding: 3px 8px !important;

        border: 1px solid #dfe8ed !important;
        border-radius: 6px !important;

        background: #ffffff !important;
        color: #607681 !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;

        text-decoration: none !important;
    }

    body.task-mail #message-header .header-links a:hover {
        border-color: #b9e8f8 !important;
        background: #eefaff !important;
        color: #008fc9 !important;
    }

    /*
     * Message content surface
     */

    body.task-mail #message-content {
        display: flex !important;
        align-items: stretch !important;

        margin: 12px 22px 24px !important;

        background: #ffffff !important;
        border: 1px solid #e5ebef !important;
        border-radius: 12px !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, .02),
            0 8px 24px rgba(15, 23, 42, .025) !important;

        overflow: hidden !important;
    }

    /*
     * Attachment column.
     * Hidden automatically when there are no attachments.
     */

    body.task-mail #message-content > .leftcol {
        flex: 0 0 210px !important;

        width: 210px !important;
        max-width: 210px !important;

        padding: 16px 12px !important;

        border-right: 1px solid #edf1f4 !important;
        background: #f8fafb !important;
    }

    body.task-mail #message-content > .leftcol:has(#attachment-list:empty) {
        display: none !important;
    }

    /*
     * Attachment list
     */

    body.task-mail #message-content #attachment-list {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.task-mail #message-content #attachment-list li {
        margin: 0 0 7px !important;
        padding: 8px 9px !important;

        border: 1px solid #e1e8ec !important;
        border-radius: 7px !important;

        background: #ffffff !important;
    }

    body.task-mail #message-content #attachment-list li:hover {
        border-color: #bfe8f5 !important;
        background: #f3fbfe !important;
    }

    /*
     * Message body
     */

    body.task-mail #message-content > .rightcol {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        padding: 22px 24px 30px !important;

        background: #ffffff !important;
    }

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

        margin: 0 !important;

        color: #263b46 !important;
        font-size: 14px !important;
        line-height: 1.65 !important;

        overflow-wrap: anywhere !important;
    }

    body.task-mail #messagebody a {
        color: #008fc9 !important;
    }

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

    body.task-mail #messagebody blockquote {
        margin-left: 8px !important;
        padding-left: 14px !important;

        border-left: 3px solid #d7e8ef !important;

        color: #61737c !important;
    }

    /*
     * Embedded message notices / objects
     */

    body.task-mail #message-objects {
        margin-bottom: 12px !important;
    }
}


/*
 * Smaller layouts retain the underlying responsive engine,
 * with lighter FM reader spacing.
 */

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

    body.task-mail #message-header {
        margin: 10px !important;
        padding: 15px !important;

        border: 1px solid #e5ebef !important;
        border-radius: 10px !important;

        background: #ffffff !important;
    }

    body.task-mail #message-header > h2.subject {
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;

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

        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    body.task-mail #message-content {
        display: block !important;

        margin: 10px !important;

        border: 1px solid #e5ebef !important;
        border-radius: 10px !important;

        background: #ffffff !important;
    }

    body.task-mail #message-content > .leftcol {
        width: auto !important;
        max-width: none !important;

        padding: 12px !important;

        border-right: 0 !important;
        border-bottom: 1px solid #edf1f4 !important;

        background: #f8fafb !important;
    }

    body.task-mail #message-content > .rightcol {
        padding: 16px !important;
    }
}



/* =========================================================
   FM FINAL MESSAGE READER REFINEMENT - #340-G008
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * More compact premium header
     */

    body.task-mail #message-header {
        margin: 16px 18px 0 !important;
        padding: 18px 20px 16px !important;
    }

    body.task-mail #message-header > h2.subject {
        margin-bottom: 14px !important;
        padding-bottom: 13px !important;

        font-size: 20px !important;
    }

    /*
     * Stronger sender hierarchy
     */

    body.task-mail #message-header .contactphoto {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;

        margin-right: 13px !important;

        box-shadow: 0 0 0 3px #f5f9fb !important;
    }

    body.task-mail #message-header .header-summary {
        min-height: 22px !important;

        color: #29424f !important;
        font-size: 13px !important;
    }

    body.task-mail #message-header .header-summary a {
        color: #173d50 !important;
        font-weight: 700 !important;
    }

    /*
     * Cleaner secondary controls
     */

    body.task-mail #message-header .header-links {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    body.task-mail #message-header .header-links a {
        min-height: 24px !important;
        padding: 3px 9px !important;

        border-color: #dfe8ec !important;
        border-radius: 7px !important;

        background: #f9fbfc !important;

        font-size: 11px !important;
    }

    /*
     * Main reading card
     */

    body.task-mail #message-content {
        margin: 12px 18px 22px !important;

        min-height: 190px !important;

        border-color: #e3eaee !important;
    }

    /*
     * Compact attachment rail.
     * Keeps attachments accessible without taking
     * unnecessary reading space.
     */

    body.task-mail #message-content > .leftcol {
        flex: 0 0 190px !important;

        width: 190px !important;
        max-width: 190px !important;

        padding: 14px 10px !important;

        background:
            linear-gradient(180deg, #f8fafb 0%, #f5f8fa 100%) !important;
    }

    body.task-mail #message-content #attachment-list li {
        margin: 0 0 6px !important;
        padding: 8px !important;

        border-radius: 8px !important;

        box-shadow: 0 1px 2px rgba(15, 23, 42, .02) !important;
    }

    body.task-mail #message-content #attachment-list li:last-child {
        margin-bottom: 0 !important;
    }

    body.task-mail #message-content #attachment-list a {
        color: #344d59 !important;
        text-decoration: none !important;
    }

    body.task-mail #message-content #attachment-list a:hover {
        color: #008fc9 !important;
    }

    /*
     * Reading surface
     */

    body.task-mail #message-content > .rightcol {
        padding: 26px 28px 34px !important;
    }

    body.task-mail #messagebody {
        color: #263d49 !important;

        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /*
     * Tables inside plain/HTML mail should remain usable.
     */

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

    /*
     * Quoted/replied content
     */

    body.task-mail #messagebody blockquote {
        margin-top: 12px !important;
        margin-bottom: 12px !important;

        padding: 8px 0 8px 14px !important;

        border-left: 3px solid #cce6ef !important;

        background: linear-gradient(
            90deg,
            rgba(236, 248, 252, .65),
            rgba(255, 255, 255, 0)
        ) !important;

        color: #5a707a !important;
    }

    /*
     * Expanded details panel
     */

    body.task-mail #message-header .header-headers {
        margin-top: 9px !important;
        padding: 9px 11px !important;

        border-color: #e2eaee !important;

        background: #f8fafb !important;
    }

    /*
     * Open-window button refinement
     */

    body.task-mail #message-header > h2.subject > a.extwin {
        top: 16px !important;
        right: 16px !important;

        width: 32px !important;
        height: 32px !important;
    }
}


/*
 * FM reader small-screen refinement
 */

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

    body.task-mail #message-header,
    body.task-mail #message-content {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    body.task-mail #message-header .contactphoto {
        width: 40px !important;
        height: 40px !important;
    }

    body.task-mail #message-content > .leftcol {
        padding: 10px !important;
    }

    body.task-mail #message-content > .rightcol {
        padding: 15px !important;
    }

    body.task-mail #messagebody {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}



/* =========================================================
   FM COMPOSE WORKSPACE FOUNDATION - #340-H003
   Proprietary FM presentation layer.
   Native compose/send handlers remain unchanged.
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * Compose workspace
     */

    body.task-mail.action-compose #layout-content {
        background:
            linear-gradient(180deg, #f5f9fb 0%, #ffffff 260px) !important;
    }

    body.task-mail.action-compose #layout-content > .header {
        min-height: 68px !important;
        height: 68px !important;

        padding: 0 18px !important;

        border-bottom: 1px solid #e5ecef !important;
        background: #ffffff !important;

        display: flex !important;
        align-items: center !important;
    }

    /*
     * Compose title
     */

    body.task-mail.action-compose #layout-content > .header > .header-title {
        display: flex !important;
        align-items: center !important;

        margin-right: 20px !important;

        color: #173747 !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    /*
     * Compose command toolbar
     */

    body.task-mail.action-compose #messagetoolbar {
        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        min-width: 0 !important;
        margin-left: auto !important;
    }

    body.task-mail.action-compose #messagetoolbar > a,
    body.task-mail.action-compose #messagetoolbar > .dropbutton > a:first-child {
        min-height: 34px !important;

        padding: 6px 9px !important;

        border: 1px solid transparent !important;
        border-radius: 7px !important;

        color: #506873 !important;
        background: transparent !important;

        text-decoration: none !important;
    }

    body.task-mail.action-compose #messagetoolbar > a:not(.disabled):hover,
    body.task-mail.action-compose #messagetoolbar > .dropbutton > a:first-child:not(.disabled):hover {
        border-color: #d8e8ee !important;
        background: #f1f9fc !important;
        color: #008fc9 !important;
    }

    /*
     * Main writing workspace
     */

    body.task-mail.action-compose #compose-content {
        position: relative !important;

        margin: 18px !important;
        padding: 0 !important;

        border: 1px solid #e2eaee !important;
        border-radius: 14px !important;

        background: #ffffff !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, .025),
            0 12px 32px rgba(15, 23, 42, .04) !important;

        overflow: hidden !important;
    }

    /*
     * Recipient/header area
     */

    body.task-mail.action-compose #compose-headers {
        padding: 18px 22px 12px !important;

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

        background:
            linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
    }

    body.task-mail.action-compose #compose-headers .form-group {
        margin-bottom: 9px !important;
    }

    body.task-mail.action-compose #compose-headers .col-form-label {
        color: #71858e !important;

        font-size: 11px !important;
        line-height: 34px !important;
        font-weight: 700 !important;

        letter-spacing: .45px !important;
        text-transform: uppercase !important;
    }

    /*
     * Recipient/subject inputs
     */

    body.task-mail.action-compose #compose-headers input,
    body.task-mail.action-compose #compose-headers textarea,
    body.task-mail.action-compose #compose-headers select,
    body.task-mail.action-compose #compose-headers .form-control {
        min-height: 36px !important;

        border: 1px solid #dfe8ec !important;
        border-radius: 8px !important;

        background: #ffffff !important;
        color: #263f4b !important;

        box-shadow: none !important;

        font-size: 13px !important;
    }

    body.task-mail.action-compose #compose-headers input:focus,
    body.task-mail.action-compose #compose-headers textarea:focus,
    body.task-mail.action-compose #compose-headers select:focus,
    body.task-mail.action-compose #compose-headers .form-control:focus {
        border-color: #8dd8ef !important;

        box-shadow:
            0 0 0 3px rgba(0, 158, 213, .08) !important;
    }

    /*
     * Recipient helper buttons
     */

    body.task-mail.action-compose #compose-headers .input-group-text {
        min-width: 36px !important;

        justify-content: center !important;

        border-color: #dfe8ec !important;
        background: #f7fafb !important;
        color: #607681 !important;
    }

    body.task-mail.action-compose #compose-headers .input-group-text:hover {
        background: #edf9fd !important;
        color: #008fc9 !important;
    }

    /*
     * Subject gets stronger visual priority
     */

    body.task-mail.action-compose #compose_subject {
        margin-top: 12px !important;
        padding-top: 12px !important;

        border-top: 1px solid #edf1f3 !important;
    }

    body.task-mail.action-compose #compose-subject {
        font-size: 15px !important;
        font-weight: 600 !important;

        color: #1f3a47 !important;
    }

    /*
     * Writing canvas
     */

    body.task-mail.action-compose #composebodycontainer {
        position: relative !important;

        padding: 20px 22px !important;

        background: #ffffff !important;
    }

    body.task-mail.action-compose #composebody {
        width: 100% !important;

        min-height: 330px !important;

        padding: 4px 2px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #ffffff !important;
        color: #263d49 !important;

        box-shadow: none !important;

        font-size: 14px !important;
        line-height: 1.7 !important;

        resize: vertical !important;
    }

    body.task-mail.action-compose #composebody:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /*
     * Bottom action area
     */

    body.task-mail.action-compose #compose-content > .formbuttons {
        display: flex !important;
        align-items: center !important;

        min-height: 66px !important;

        padding: 12px 22px !important;

        border-top: 1px solid #edf1f3 !important;

        background: #f8fafb !important;
    }

    /*
     * Primary FM Send action
     */

    body.task-mail.action-compose .formbuttons .send {
        min-width: 118px !important;
        min-height: 40px !important;

        padding: 9px 22px !important;

        border: 0 !important;
        border-radius: 9px !important;

        background: #009ed5 !important;
        color: #ffffff !important;

        box-shadow: 0 5px 14px rgba(0, 158, 213, .18) !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body.task-mail.action-compose .formbuttons .send:hover {
        background: #008fc2 !important;

        box-shadow: 0 7px 18px rgba(0, 143, 194, .22) !important;
    }

    /*
     * Options / attachment panel
     */

    body.task-mail.action-compose #layout-sidebar.sidebar-right {
        background: #f7fafb !important;

        border-left: 1px solid #e3eaee !important;
    }

    body.task-mail.action-compose #layout-sidebar.sidebar-right > .header {
        min-height: 68px !important;
        height: 68px !important;

        padding: 0 16px !important;

        background: #ffffff !important;

        border-bottom: 1px solid #e5ecef !important;
    }

    body.task-mail.action-compose #layout-sidebar.sidebar-right > .header .header-title {
        color: #24404d !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /*
     * Attachment zone
     */

    body.task-mail.action-compose #compose-attachments {
        margin: 14px !important;
        padding: 15px !important;

        border: 1px dashed #cddce3 !important;
        border-radius: 10px !important;

        background: #ffffff !important;
    }

    body.task-mail.action-compose #compose-attachments .attach {
        border-color: #cce6ef !important;
        border-radius: 7px !important;

        background: #eef9fd !important;
        color: #008fc9 !important;

        font-weight: 600 !important;
    }

    /*
     * Delivery options
     */

    body.task-mail.action-compose #compose-options {
        margin: 0 14px 14px !important;
        padding: 15px !important;

        border: 1px solid #e2eaee !important;
        border-radius: 10px !important;

        background: #ffffff !important;
    }

    body.task-mail.action-compose #compose-options .form-group {
        margin-bottom: 12px !important;
    }

    body.task-mail.action-compose #compose-options .col-form-label {
        color: #536a75 !important;

        font-size: 12px !important;
        font-weight: 600 !important;
    }
}


/*
 * FM Compose responsive presentation
 */

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

    body.task-mail.action-compose #compose-content {
        margin: 8px !important;

        border-radius: 10px !important;
    }

    body.task-mail.action-compose #compose-headers {
        padding: 13px !important;
    }

    body.task-mail.action-compose #composebodycontainer {
        padding: 14px !important;
    }

    body.task-mail.action-compose #composebody {
        min-height: 260px !important;
    }

    body.task-mail.action-compose #compose-content > .formbuttons {
        padding: 10px 14px !important;
    }

    body.task-mail.action-compose .formbuttons .send {
        min-width: 105px !important;
    }
}



/* =========================================================
   FM COMPOSE IDENTITY LAYER - #340-H006
   Distinctive FM product presentation.
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * FM New Message identity
     */

    body.task-mail.action-compose .fm-compose-identity {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        min-width: 225px !important;

        margin-right: 22px !important;

        line-height: 1 !important;
    }

    body.task-mail.action-compose .fm-compose-kicker {
        margin-bottom: 4px !important;

        color: #009ed5 !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 1.15px !important;
    }

    body.task-mail.action-compose .fm-compose-title-row {
        display: flex !important;
        align-items: center !important;

        gap: 7px !important;
    }

    body.task-mail.action-compose .fm-compose-title-row strong {
        color: #163746 !important;

        font-size: 15px !important;
        line-height: 1.15 !important;
        font-weight: 750 !important;
    }

    body.task-mail.action-compose .fm-compose-secure-dot {
        display: inline-block !important;

        width: 7px !important;
        height: 7px !important;

        border-radius: 50% !important;

        background: #13b981 !important;

        box-shadow: 0 0 0 3px rgba(19, 185, 129, .10) !important;
    }

    body.task-mail.action-compose .fm-compose-subtitle {
        margin-top: 4px !important;

        color: #82939b !important;

        font-size: 10px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    /*
     * Delivery Center identity
     */

    body.task-mail.action-compose .fm-delivery-title {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        line-height: 1 !important;
    }

    body.task-mail.action-compose .fm-delivery-kicker {
        margin-bottom: 5px !important;

        color: #009ed5 !important;

        font-size: 8px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 1px !important;
    }

    body.task-mail.action-compose .fm-delivery-title strong {
        color: #294652 !important;

        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    /*
     * Send area identity
     */

    body.task-mail.action-compose .fm-send-group {
        display: flex !important;
        align-items: center !important;

        gap: 13px !important;
    }

    body.task-mail.action-compose .fm-send-security {
        display: inline-flex !important;
        align-items: center !important;

        gap: 6px !important;

        color: #71858e !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        letter-spacing: .7px !important;
    }

    body.task-mail.action-compose .fm-send-security-dot {
        width: 6px !important;
        height: 6px !important;

        border-radius: 50% !important;

        background: #13b981 !important;
    }

    /*
     * Give the writing card a stronger FM visual signature
     */

    body.task-mail.action-compose #compose-content {
        border-top: 3px solid #00a6dc !important;
    }

    body.task-mail.action-compose #compose-headers {
        position: relative !important;
    }

    body.task-mail.action-compose #compose-headers:before {
        content: "MESSAGE DETAILS" !important;

        display: block !important;

        margin: 0 0 13px 16.666667% !important;

        color: #8a9aa2 !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 1px !important;
    }

    /*
     * FM writing canvas indicator
     */

    body.task-mail.action-compose #composebodycontainer:before {
        content: "MESSAGE" !important;

        display: block !important;

        margin-bottom: 12px !important;

        color: #8a9aa2 !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: 1px !important;
    }

    /*
     * Attachment panel differentiation
     */

    body.task-mail.action-compose #compose-attachments {
        position: relative !important;

        padding-top: 35px !important;
    }

    body.task-mail.action-compose #compose-attachments:before {
        content: "ATTACHMENTS" !important;

        position: absolute !important;
        top: 14px !important;
        left: 15px !important;

        color: #82949d !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: .9px !important;
    }

    /*
     * Delivery settings label
     */

    body.task-mail.action-compose #compose-options {
        position: relative !important;

        padding-top: 38px !important;
    }

    body.task-mail.action-compose #compose-options:before {
        content: "DELIVERY SETTINGS" !important;

        position: absolute !important;
        top: 15px !important;
        left: 15px !important;

        color: #82949d !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        letter-spacing: .9px !important;
    }
}


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

    body.task-mail.action-compose .fm-compose-subtitle {
        display: none !important;
    }

    body.task-mail.action-compose .fm-compose-kicker {
        display: block !important;

        color: #009ed5 !important;

        font-size: 8px !important;
        font-weight: 800 !important;

        letter-spacing: .8px !important;
    }

    body.task-mail.action-compose .fm-compose-title-row strong {
        font-size: 13px !important;
    }

    body.task-mail.action-compose .fm-send-security {
        display: none !important;
    }
}



/* ============================================================
   FM PEOPLE WORKSPACE - #340-I005
   Contacts / Address Book visual foundation
   ============================================================ */

body.task-addressbook {
    background:#f4f7fb;
}

/* Three-panel FM People workspace */
@media screen and (min-width:1025px) {

    body.task-addressbook #layout-sidebar {
        flex:0 0 230px !important;
        min-width:230px !important;
        max-width:230px !important;
        background:#f8fafc;
        border-right:1px solid #e5eaf1;
    }

    body.task-addressbook #layout-list {
        flex:0 0 390px !important;
        min-width:390px !important;
        max-width:390px !important;
        background:#ffffff;
        border-right:1px solid #e5eaf1;
    }

    body.task-addressbook #layout-content {
        min-width:0 !important;
        flex:1 1 auto !important;
        background:#f4f7fb;
    }
}

/* Workspace headers */
body.task-addressbook #layout-sidebar > .header,
body.task-addressbook #layout-list > .header,
body.task-addressbook #layout-content > .header {
    min-height:68px;
    height:68px;
    background:#ffffff;
    border-bottom:1px solid #e7ebf1;
    box-shadow:none;
}

/* Directory / group navigation */
body.task-addressbook #directorylist,
body.task-addressbook #savedsearchlist {
    padding:10px 8px;
}

body.task-addressbook #directorylist li > a,
body.task-addressbook #savedsearchlist li > a {
    min-height:40px;
    margin:3px 0;
    padding:9px 12px;
    border-radius:10px;
    font-weight:600;
    transition:background .15s ease, color .15s ease;
}

body.task-addressbook #directorylist li > a:hover,
body.task-addressbook #savedsearchlist li > a:hover {
    background:#edf8fc;
}

body.task-addressbook #directorylist li.selected > a,
body.task-addressbook #savedsearchlist li.selected > a {
    background:#e8f8fc;
    color:#087f9c;
}

/* Contact search */
body.task-addressbook #layout-list #searchform {
    margin:12px;
    border:1px solid #dfe5ec;
    border-radius:12px;
    background:#f8fafc;
    box-shadow:none;
}

body.task-addressbook #layout-list #searchform:focus-within {
    border-color:#36b9d5;
    background:#ffffff;
    box-shadow:0 0 0 3px rgba(54,185,213,.10);
}

/* Contact list */
body.task-addressbook #contacts-table {
    border-collapse:separate;
    border-spacing:0 5px;
}

body.task-addressbook #contacts-table tr {
    background:#ffffff;
    transition:background .15s ease, box-shadow .15s ease;
}

body.task-addressbook #contacts-table tr:hover {
    background:#f5fbfd;
}

body.task-addressbook #contacts-table tr.selected {
    background:#e9f8fc;
}

body.task-addressbook #contacts-table td {
    border-top:1px solid transparent;
    border-bottom:1px solid transparent;
    padding-top:10px;
    padding-bottom:10px;
}

/* Contact action toolbar */
body.task-addressbook #addressbooktoolbar {
    display:flex;
    align-items:center;
    gap:4px;
}

body.task-addressbook #addressbooktoolbar a {
    border-radius:9px;
}

/* Contact details area */
body.task-addressbook #layout-content .iframe-wrapper {
    margin:18px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 8px 28px rgba(15,23,42,.06);
    overflow:hidden;
}

/* Contact viewer/editor */
body.task-addressbook .contact-header {
    padding:24px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);
    border-bottom:1px solid #e8edf3;
}

body.task-addressbook .contact-photo {
    border-radius:18px;
    overflow:hidden;
}

body.task-addressbook #contacttabs {
    padding:18px 24px 24px;
}

body.task-addressbook .propform {
    border-radius:12px;
}

body.task-addressbook .formbuttons {
    padding:16px 24px 24px;
}

body.task-addressbook .formbuttons .btn-primary {
    min-width:110px;
    border-radius:10px;
    font-weight:700;
}

/* FM accent for primary contact actions */
body.task-addressbook .btn-primary {
    border-color:#16a9c7;
    background:#16a9c7;
}

body.task-addressbook .btn-primary:hover,
body.task-addressbook .btn-primary:focus {
    border-color:#1195b0;
    background:#1195b0;
}

/* Mobile/tablet: let native panel navigation remain functional */
@media screen and (max-width:1024px) {
    body.task-addressbook #layout-sidebar,
    body.task-addressbook #layout-list,
    body.task-addressbook #layout-content {
        min-width:0;
        max-width:none;
    }

    body.task-addressbook #layout-content .iframe-wrapper {
        margin:10px;
        border-radius:12px;
    }
}


/* ============================================================
   FM MAIL EMPTY STATE TASK ISOLATION - #340-I007
   Never expose the Mail reading placeholder in Contacts,
   Settings, Compose, or other non-mail workspaces.
   ============================================================ */

body:not(.task-mail) #fm-empty-reading-pane {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* Contacts owns its details workspace */
body.task-addressbook #fm-empty-reading-pane {
    display:none !important;
}


/* ============================================================
   FM CONTACTS EMPTY WORKSPACE - #340-I014
   ============================================================ */

body.task-addressbook #layout-content {
    position:relative;
}

body.task-addressbook #fm-contacts-empty {
    position:absolute;
    top:68px;
    right:0;
    bottom:0;
    left:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    background:
        radial-gradient(circle at 50% 38%, rgba(22,169,199,.08), transparent 34%),
        #f4f7fb;
}

body.task-addressbook #fm-contacts-empty .fm-contacts-empty-card {
    width:min(440px, 90%);
    padding:38px 34px;
    text-align:center;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#ffffff;
    box-shadow:0 16px 42px rgba(15,23,42,.07);
}

body.task-addressbook .fm-contacts-empty-logo {
    width:70px;
    height:auto;
    margin:0 auto 16px;
    display:block;
}

body.task-addressbook .fm-contacts-empty-kicker {
    margin-bottom:8px;
    color:#159fbd;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}

body.task-addressbook .fm-contacts-empty-card h2 {
    margin:0 0 9px;
    color:#152033;
    font-size:25px;
    font-weight:750;
}

body.task-addressbook .fm-contacts-empty-card p {
    max-width:330px;
    margin:0 auto;
    color:#697586;
    font-size:14px;
    line-height:1.6;
}

body.task-addressbook .fm-contacts-empty-status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:20px;
    padding:7px 11px;
    border:1px solid #d9edf2;
    border-radius:999px;
    color:#55717a;
    background:#f7fcfd;
    font-size:10px;
    font-weight:800;
    letter-spacing:.10em;
}

body.task-addressbook .fm-contacts-empty-status span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20b987;
    box-shadow:0 0 0 3px rgba(32,185,135,.10);
}

/*
 * While the FM Contacts empty workspace is visible, keep the
 * underlying native blank contact iframe out of sight.
 */
body.task-addressbook #fm-contacts-empty + .iframe-wrapper {
    visibility:hidden;
}


/* FM CONTACTS DYNAMIC VISIBILITY - #340-I016 */
body.task-addressbook #fm-contacts-empty.fm-hidden {
    display:none !important;
}


/* ============================================================
   FM CONTACT PROFILE EXPERIENCE - #340-I025
   Professional editor + viewer
   ============================================================ */

/* Framed contact viewer/editor workspace */
html.iframe body.task-addressbook {
    background:#f4f7fb;
}

html.iframe body.task-addressbook .formcontent {
    width:auto;
    max-width:none;
    margin:16px;
    padding:0;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(15,23,42,.055);
}

/* Profile identity zone */
html.iframe body.task-addressbook .contact-header {
    display:flex;
    align-items:center;
    gap:24px;
    min-height:170px;
    margin:0;
    padding:26px 30px;
    border:0;
    border-bottom:1px solid #e7edf4;
    border-radius:0;
    background:
        radial-gradient(circle at 90% 10%,
            rgba(16,174,203,.10),
            transparent 34%),
        linear-gradient(135deg,#ffffff 0%,#f8fcfd 100%);
}

/* Avatar */
html.iframe body.task-addressbook .contact-photo {
    flex:0 0 118px;
    width:118px;
    min-width:118px;
    height:118px;
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid #dce7ed;
    border-radius:22px;
    background:#f1f6f8;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}

html.iframe body.task-addressbook .contact-photo img,
html.iframe body.task-addressbook .contact-photo .image-upload {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Main identity fields */
html.iframe body.task-addressbook .contact-head {
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}

html.iframe body.task-addressbook .contact-head table {
    width:100%;
    margin:0;
}

html.iframe body.task-addressbook .contact-head td,
html.iframe body.task-addressbook .contact-head th {
    padding:5px 8px;
    border:0;
}

/* Inputs */
html.iframe body.task-addressbook input[type="text"],
html.iframe body.task-addressbook input[type="email"],
html.iframe body.task-addressbook input[type="tel"],
html.iframe body.task-addressbook input[type="url"],
html.iframe body.task-addressbook textarea,
html.iframe body.task-addressbook select {
    min-height:38px;
    border:1px solid #d7e0e8;
    border-radius:9px;
    background:#fff;
    box-shadow:none;
}

html.iframe body.task-addressbook input:focus,
html.iframe body.task-addressbook textarea:focus,
html.iframe body.task-addressbook select:focus {
    border-color:#13a9c8;
    outline:0;
    box-shadow:0 0 0 3px rgba(19,169,200,.10);
}

/* Tabs become FM profile navigation */
html.iframe body.task-addressbook #contacttabs {
    margin:0;
    padding:0;
    border:0;
    background:#fff;
}

html.iframe body.task-addressbook #contacttabs > .nav,
html.iframe body.task-addressbook #contacttabs > ul {
    margin:0;
    padding:0 24px;
    border-bottom:1px solid #e6edf3;
    background:#f9fbfd;
}

html.iframe body.task-addressbook #contacttabs .nav-link,
html.iframe body.task-addressbook #contacttabs > ul > li > a {
    padding:14px 16px;
    border:0;
    border-bottom:2px solid transparent;
    color:#66758a;
    background:transparent;
    font-weight:700;
}

html.iframe body.task-addressbook #contacttabs .nav-link.active,
html.iframe body.task-addressbook #contacttabs > ul > li.active > a {
    border-bottom-color:#11a9ca;
    color:#078eac;
    background:transparent;
}

/* Contact data sections */
html.iframe body.task-addressbook #contacttabs .tab-content,
html.iframe body.task-addressbook #contacttabs .tab-content-wrapper {
    padding:22px 26px 26px;
}

html.iframe body.task-addressbook .propform.grouped {
    margin:0 0 16px;
    padding:18px 20px;
    border:1px solid #e5ebf1;
    border-radius:14px;
    background:#fbfcfe;
}

html.iframe body.task-addressbook .propform.grouped legend {
    width:auto;
    margin:0 0 10px;
    padding:0;
    color:#172235;
    font-size:14px;
    font-weight:800;
}

/* Cleaner labels */
html.iframe body.task-addressbook .propform label,
html.iframe body.task-addressbook .contact-head label {
    color:#4f5f73;
    font-weight:650;
}

/* Add-field controls */
html.iframe body.task-addressbook .addfield,
html.iframe body.task-addressbook select.addfield {
    border-color:#d6e3e9;
    color:#405266;
    background:#fff;
}

/* Bottom action center */
html.iframe body.task-addressbook .formbuttons {
    margin:0 16px 18px;
    padding:0;
    border:0;
    background:transparent;
}

/* FM primary contact command */
html.iframe body.task-addressbook .formbuttons .btn-primary {
    min-width:138px;
    min-height:42px;
    padding:9px 18px;
    border:0;
    border-radius:10px;
    background:#12abc9;
    box-shadow:0 7px 16px rgba(18,171,201,.18);
    color:#fff;
    font-weight:800;
}

html.iframe body.task-addressbook .formbuttons .btn-primary:hover,
html.iframe body.task-addressbook .formbuttons .btn-primary:focus {
    background:#0798b7;
}

/* Read-only contact profile */
html.iframe body.task-addressbook .contact-head.readonly {
    color:#172235;
}

html.iframe body.task-addressbook .propform.readonly {
    color:#344256;
}

/* Small-screen safety */
@media screen and (max-width:700px) {
    html.iframe body.task-addressbook .contact-header {
        align-items:flex-start;
        flex-direction:column;
        padding:20px;
    }

    html.iframe body.task-addressbook .contact-photo {
        flex-basis:92px;
        width:92px;
        min-width:92px;
        height:92px;
    }

    html.iframe body.task-addressbook .formcontent {
        margin:10px;
        border-radius:14px;
    }
}


/* ============================================================
   FM CONTACT IDENTITY - #340-I027
   ============================================================ */

html.iframe body.task-addressbook .fm-contact-identity {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:16px 16px 0;
    padding:18px 22px;
    border:1px solid #dce8ee;
    border-radius:16px;
    background:
        radial-gradient(circle at 90% 0,
            rgba(15,174,204,.11),
            transparent 32%),
        linear-gradient(135deg,#ffffff,#f7fbfd);
    box-shadow:0 7px 22px rgba(15,23,42,.045);
}

html.iframe body.task-addressbook .fm-contact-identity-left {
    display:flex;
    flex-direction:column;
    min-width:0;
}

html.iframe body.task-addressbook .fm-contact-eyebrow {
    margin-bottom:4px;
    color:#0aa3c2;
    font-size:10px;
    font-weight:850;
    letter-spacing:.17em;
}

html.iframe body.task-addressbook .fm-contact-identity-left strong {
    color:#152033;
    font-size:21px;
    line-height:1.2;
    font-weight:800;
}

html.iframe body.task-addressbook .fm-contact-subtitle {
    margin-top:4px;
    color:#728094;
    font-size:12px;
}

html.iframe body.task-addressbook .fm-contact-identity-status {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    gap:7px;
    padding:7px 11px;
    border:1px solid #d7ebf0;
    border-radius:999px;
    background:#f7fcfd;
    color:#536c77;
    font-size:9px;
    font-weight:850;
    letter-spacing:.12em;
}

html.iframe body.task-addressbook .fm-contact-identity-status span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20b987;
    box-shadow:0 0 0 3px rgba(32,185,135,.10);
}

/* Integrate profile card with FM identity header */
html.iframe body.task-addressbook .fm-contact-identity + .formcontent {
    margin-top:10px;
}

/* More distinctive profile sections */
html.iframe body.task-addressbook .propform.grouped {
    position:relative;
    border-left:3px solid #13a9c8;
}

/* Stronger primary action identity */
html.iframe body.task-addressbook .formbuttons .btn-primary {
    text-transform:uppercase;
    letter-spacing:.045em;
}

/* Responsive FM identity */
@media screen and (max-width:700px) {
    html.iframe body.task-addressbook .fm-contact-identity {
        align-items:flex-start;
        flex-direction:column;
        margin:10px 10px 0;
        padding:16px;
    }
}

/* ============================================================
   FM SETTINGS EMPTY WORKSPACE - #340-I039
   ============================================================ */

body.task-settings #layout-content {
    position: relative;
}

body.task-settings #fm-settings-empty {
    position: absolute;
    top: 68px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(22,169,199,.09),
            transparent 34%
        ),
        #f4f7fb;
}

body.task-settings #fm-settings-empty.fm-hidden {
    display: none !important;
}

body.task-settings .fm-settings-empty-card {
    width: min(470px, 78%);
    padding: 38px 42px 36px;

    text-align: center;

    background: rgba(255,255,255,.97);
    border: 1px solid #dfe9ef;
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(7,20,38,.08),
        0 3px 10px rgba(7,20,38,.04);
}

body.task-settings .fm-settings-empty-logo {
    display: block;
    width: 86px;
    height: auto;
    margin: 0 auto 18px;
    object-fit: contain;
}

body.task-settings .fm-settings-empty-kicker {
    margin-bottom: 8px;

    color: #08a9cf;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

body.task-settings .fm-settings-empty-card h2 {
    margin: 0 0 10px;

    color: #071426;

    font-size: 27px;
    font-weight: 800;
}

body.task-settings .fm-settings-empty-card p {
    max-width: 360px;
    margin: 0 auto 24px;

    color: #68798d;

    font-size: 15px;
    line-height: 1.55;
}

body.task-settings .fm-settings-empty-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 13px;

    color: #52687a;
    background: #f8fcfd;
    border: 1px solid #dcecf0;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
}

body.task-settings .fm-settings-empty-status span {
    width: 8px;
    height: 8px;

    background: #20c997;
    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(32,201,151,.10);
}

body.task-settings #fm-settings-empty:not(.fm-hidden)
    + .iframe-wrapper {
    visibility: hidden;
}

@media screen and (max-width: 700px) {
    body.task-settings #fm-settings-empty {
        padding: 18px;
    }

    body.task-settings .fm-settings-empty-card {
        width: 100%;
        padding: 30px 22px;
    }
}


/* =========================================================
   FM SETTINGS CONTROL PANEL DESIGN - #340-I047
   ========================================================= */

html.iframe body.task-settings {
    background: #f4f8fc;
}

html.iframe body.task-settings .fm-settings-panel {
    min-height: 100%;
    padding: 26px 28px 38px;
    box-sizing: border-box;
    background: #f4f8fc;
}

html.iframe body.task-settings .fm-settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    margin-bottom: 18px;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    background:
        linear-gradient(110deg,
            #ffffff 0%,
            #ffffff 56%,
            #eafaff 100%);
    box-shadow: 0 10px 28px rgba(15, 43, 68, 0.06);
}

html.iframe body.task-settings .fm-settings-panel-heading {
    min-width: 0;
}

html.iframe body.task-settings .fm-settings-panel-kicker {
    display: block;
    margin-bottom: 5px;
    color: #00a6c7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

html.iframe body.task-settings .fm-settings-panel-heading h2 {
    margin: 0;
    color: #071a33;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 750;
}

html.iframe body.task-settings .fm-settings-panel-heading p {
    margin: 7px 0 0;
    color: #687b91;
    font-size: 14px;
    line-height: 1.45;
}

html.iframe body.task-settings .fm-settings-panel-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #d8e8ee;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    color: #52687b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    white-space: nowrap;
}

html.iframe body.task-settings .fm-settings-panel-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #19c59b;
    box-shadow: 0 0 0 4px rgba(25,197,155,0.11);
}

html.iframe body.task-settings .fm-settings-panel-body {
    overflow: hidden;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 43, 68, 0.05);
}

html.iframe body.task-settings .fm-settings-panel-body > .formcontent {
    padding: 26px 28px 20px;
    background: #ffffff;
}

html.iframe body.task-settings .fm-settings-panel .propform {
    width: 100%;
    max-width: none;
    margin: 0;
}

html.iframe body.task-settings .fm-settings-panel .propform legend {
    margin-bottom: 18px;
    color: #071a33;
    font-size: 16px;
    font-weight: 750;
}

html.iframe body.task-settings .fm-settings-panel .propform label {
    color: #344b63;
    font-weight: 600;
}

html.iframe body.task-settings .fm-settings-panel input[type="text"],
html.iframe body.task-settings .fm-settings-panel input[type="password"],
html.iframe body.task-settings .fm-settings-panel input[type="email"],
html.iframe body.task-settings .fm-settings-panel input[type="number"],
html.iframe body.task-settings .fm-settings-panel select,
html.iframe body.task-settings .fm-settings-panel textarea {
    border: 1px solid #d6e2ec;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: none;
}

html.iframe body.task-settings .fm-settings-panel input:focus,
html.iframe body.task-settings .fm-settings-panel select:focus,
html.iframe body.task-settings .fm-settings-panel textarea:focus {
    border-color: #14abc8;
    box-shadow: 0 0 0 3px rgba(20,171,200,0.10);
    outline: none;
}

html.iframe body.task-settings .fm-settings-panel-body > .formbuttons {
    margin: 0;
    padding: 18px 28px 22px;
    border-top: 1px solid #e5edf3;
    background: #f8fbfd;
}

html.iframe body.task-settings .fm-settings-panel-body > .formbuttons .btn-primary {
    min-width: 122px;
    padding: 10px 22px;
    border-color: #11aac8;
    border-radius: 10px;
    background: #11aac8;
    box-shadow: 0 8px 18px rgba(17,170,200,0.17);
    font-weight: 700;
}

html.iframe body.task-settings .fm-settings-panel-body > .formbuttons .btn-primary:hover,
html.iframe body.task-settings .fm-settings-panel-body > .formbuttons .btn-primary:focus {
    border-color: #0796b3;
    background: #0796b3;
}

@media (max-width: 800px) {
    html.iframe body.task-settings .fm-settings-panel {
        padding: 16px;
    }

    html.iframe body.task-settings .fm-settings-panel-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    html.iframe body.task-settings .fm-settings-panel-body > .formcontent {
        padding: 20px;
    }

    html.iframe body.task-settings .fm-settings-panel-body > .formbuttons {
        padding: 16px 20px 20px;
    }
}


/* =========================================================
   FM FOLDER MANAGEMENT EMPTY WORKSPACE - #340-I060
   ========================================================= */

#layout-content .fm-folders-empty {
    position: absolute;
    inset: 68px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #f4f8fc;
    z-index: 2;
}

#layout-content .fm-folders-empty[aria-hidden="true"] {
    display: none;
}

.fm-folders-empty-card {
    width: min(520px, 90%);
    padding: 42px 38px;
    text-align: center;
    background: #fff;
    border: 1px solid #e3ebf3;
    border-radius: 22px;
    box-shadow: 0 16px 45px rgba(20, 48, 76, 0.08);
}

.fm-folders-empty-logo {
    display: block;
    width: 76px;
    height: auto;
    margin: 0 auto 20px;
}

.fm-folders-empty-kicker {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2497b8;
}

.fm-folders-empty-card h2 {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 700;
    color: #152a3b;
}

.fm-folders-empty-card p {
    margin: 0 auto 22px;
    max-width: 390px;
    line-height: 1.6;
    color: #6d7e8d;
}

.fm-folders-empty-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #dce7ef;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #526777;
    background: #f8fbfd;
}

.fm-folders-empty-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35b879;
}

/* =========================================================
   FM FOLDER PROPERTIES DESIGN - #340-I067
   ========================================================= */

html.iframe body.task-settings .fm-folder-panel {
    min-height: 100vh;
    padding: 26px;
    background: #f4f8fc;
    box-sizing: border-box;
}

html.iframe body.task-settings .fm-folder-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #eefaff 100%);
    border: 1px solid #dce9f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 48, 76, 0.06);
}

html.iframe body.task-settings .fm-folder-panel-kicker {
    margin-bottom: 6px;
    color: #079fc2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

html.iframe body.task-settings .fm-folder-panel-header h2 {
    margin: 0 0 6px;
    color: #10283d;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 750;
}

html.iframe body.task-settings .fm-folder-panel-header p {
    margin: 0;
    color: #6a7f91;
    font-size: 15px;
    line-height: 1.5;
}

html.iframe body.task-settings .fm-folder-panel-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: #526b7c;
    background: rgba(255,255,255,.82);
    border: 1px solid #d9e6ee;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

html.iframe body.task-settings .fm-folder-panel-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c99a;
    box-shadow: 0 0 0 4px rgba(39,201,154,.12);
}

html.iframe body.task-settings .fm-folder-panel-body {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e9f0;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(20, 48, 76, 0.06);
}

html.iframe body.task-settings .fm-folder-panel-body > .formcontent {
    padding: 28px 30px;
}

html.iframe body.task-settings .fm-folder-panel .propform {
    margin: 0;
}

html.iframe body.task-settings .fm-folder-panel .propform legend {
    margin: 0 0 18px;
    color: #10283d;
    font-size: 18px;
    font-weight: 750;
}

html.iframe body.task-settings .fm-folder-panel .propform label {
    color: #28475e;
    font-weight: 650;
}

html.iframe body.task-settings .fm-folder-panel input,
html.iframe body.task-settings .fm-folder-panel select,
html.iframe body.task-settings .fm-folder-panel textarea {
    border: 1px solid #d7e3ec;
    border-radius: 10px;
    background: #fff;
    min-height: 42px;
}

html.iframe body.task-settings .fm-folder-panel input:focus,
html.iframe body.task-settings .fm-folder-panel select:focus,
html.iframe body.task-settings .fm-folder-panel textarea:focus {
    border-color: #20afd0;
    box-shadow: 0 0 0 3px rgba(32,175,208,.12);
}

html.iframe body.task-settings .fm-folder-panel-body > .formbuttons {
    margin: 0;
    padding: 18px 30px 22px;
    background: #f8fbfd;
    border-top: 1px solid #e7eef3;
}

html.iframe body.task-settings .fm-folder-panel-body > .formbuttons .btn-primary {
    min-width: 120px;
    min-height: 48px;
    padding: 11px 22px;
    border: 0;
    border-radius: 11px;
    font-weight: 750;
    box-shadow: 0 8px 20px rgba(15,168,199,.18);
}

@media (max-width: 800px) {
    html.iframe body.task-settings .fm-folder-panel {
        padding: 16px;
    }

    html.iframe body.task-settings .fm-folder-panel-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    html.iframe body.task-settings .fm-folder-panel-body > .formcontent,
    html.iframe body.task-settings .fm-folder-panel-body > .formbuttons {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* =========================================================
   FM IDENTITY MANAGEMENT DESIGN - #340-I073
   ========================================================= */

html.iframe body.task-settings .fm-identity-panel {
    min-height: 100vh;
    padding: 26px;
    background: #f4f8fc;
    box-sizing: border-box;
}

html.iframe body.task-settings .fm-identity-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #eefaff 100%);
    border: 1px solid #dce9f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20,48,76,.06);
}

html.iframe body.task-settings .fm-identity-panel-kicker {
    margin-bottom: 6px;
    color: #079fc2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

html.iframe body.task-settings .fm-identity-panel-header h2 {
    margin: 0 0 6px;
    color: #10283d;
    font-size: 27px;
    font-weight: 750;
}

html.iframe body.task-settings .fm-identity-panel-header p {
    margin: 0;
    color: #6a7f91;
    font-size: 15px;
}

html.iframe body.task-settings .fm-identity-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(255,255,255,.85);
    border: 1px solid #d9e6ee;
    border-radius: 999px;
    color: #526b7c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

html.iframe body.task-settings .fm-identity-panel-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c99a;
}

html.iframe body.task-settings .fm-identity-panel-body {
    background: #fff;
    border: 1px solid #e0e9f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(20,48,76,.06);
}

html.iframe body.task-settings .fm-identity-panel-body > .formcontent {
    padding: 30px;
}

html.iframe body.task-settings .fm-identity-panel .propform label {
    color: #28475e;
    font-weight: 650;
}

html.iframe body.task-settings .fm-identity-panel input,
html.iframe body.task-settings .fm-identity-panel textarea {
    border: 1px solid #d7e3ec;
    border-radius: 10px;
}

html.iframe body.task-settings .fm-identity-panel input:focus,
html.iframe body.task-settings .fm-identity-panel textarea:focus {
    border-color: #20afd0;
    box-shadow: 0 0 0 3px rgba(32,175,208,.12);
}

html.iframe body.task-settings .fm-identity-panel-body > .formbuttons {
    padding: 18px 30px 22px;
    background: #f8fbfd;
    border-top: 1px solid #e7eef3;
}

html.iframe body.task-settings .fm-identity-panel-body .btn-primary {
    min-width: 120px;
    min-height: 48px;
    border-radius: 11px;
    font-weight: 750;
}

@media (max-width:800px) {

    html.iframe body.task-settings .fm-identity-panel {
        padding:16px;
    }

    html.iframe body.task-settings .fm-identity-panel-header {
        flex-direction:column;
        align-items:flex-start;
    }
}


/* =========================================================
   FM RESPONSES EMPTY WORKSPACE - #340-I083
   ========================================================= */

body.task-settings #fm-responses-empty {
    position: absolute;
    inset: 68px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 48%,
            rgba(32,175,208,.08) 0,
            rgba(32,175,208,.025) 28%,
            transparent 55%),
        #ffffff;
    z-index: 2;
}

body.task-settings #fm-responses-empty[aria-hidden="true"] {
    display: none;
}

body.task-settings .fm-responses-empty-card {
    width: min(520px, 90%);
    text-align: center;
}

body.task-settings .fm-responses-empty-logo {
    display: block;
    width: 82px;
    height: auto;
    margin: 0 auto 22px;
    object-fit: contain;
}

body.task-settings .fm-responses-empty-kicker {
    margin-bottom: 8px;
    color: #079fc2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.task-settings .fm-responses-empty-card h2 {
    margin: 0 0 10px;
    color: #10283d;
    font-size: 27px;
    font-weight: 750;
}

body.task-settings .fm-responses-empty-card p {
    max-width: 440px;
    margin: 0 auto;
    color: #718596;
    font-size: 15px;
    line-height: 1.6;
}

body.task-settings .fm-responses-empty-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #dce8ef;
    border-radius: 999px;
    color: #587082;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
}

body.task-settings .fm-responses-empty-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c99a;
}

@media (max-width: 800px) {
    body.task-settings #fm-responses-empty {
        padding: 24px;
    }

    body.task-settings .fm-responses-empty-card h2 {
        font-size: 23px;
    }
}


/* =========================================================
   FM RESPONSE BUILDER DESIGN - #340-I088
   ========================================================= */

html.iframe body.task-settings .fm-response-panel {
    min-height: 100vh;
    padding: 26px;
    background: #f4f8fc;
    box-sizing: border-box;
}

html.iframe body.task-settings .fm-response-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px 30px;
    background: linear-gradient(135deg, #ffffff 0%, #eefaff 100%);
    border: 1px solid #dce9f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20,48,76,.06);
}

html.iframe body.task-settings .fm-response-panel-kicker {
    margin-bottom: 6px;
    color: #079fc2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

html.iframe body.task-settings .fm-response-panel-header h2 {
    margin: 0 0 6px;
    color: #10283d;
    font-size: 27px;
    font-weight: 750;
}

html.iframe body.task-settings .fm-response-panel-header p {
    margin: 0;
    color: #6a7f91;
    font-size: 15px;
    line-height: 1.5;
}

html.iframe body.task-settings .fm-response-panel-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(255,255,255,.88);
    border: 1px solid #d9e6ee;
    border-radius: 999px;
    color: #526b7c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

html.iframe body.task-settings .fm-response-panel-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c99a;
}

html.iframe body.task-settings .fm-response-panel-body {
    background: #fff;
    border: 1px solid #e0e9f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(20,48,76,.06);
}

html.iframe body.task-settings .fm-response-content-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 30px 18px;
    border-bottom: 1px solid #e7eef3;
}

html.iframe body.task-settings .fm-response-content-label strong {
    color: #17354c;
    font-size: 17px;
    font-weight: 750;
}

html.iframe body.task-settings .fm-response-content-label span {
    color: #738797;
    font-size: 13px;
}

html.iframe body.task-settings .fm-response-panel .formcontent {
    padding: 26px 30px 30px;
}

html.iframe body.task-settings .fm-response-panel .propform label {
    color: #28475e;
    font-weight: 650;
}

html.iframe body.task-settings .fm-response-panel input,
html.iframe body.task-settings .fm-response-panel textarea {
    border: 1px solid #d7e3ec;
    border-radius: 10px;
}

html.iframe body.task-settings .fm-response-panel input:focus,
html.iframe body.task-settings .fm-response-panel textarea:focus {
    border-color: #20afd0;
    box-shadow: 0 0 0 3px rgba(32,175,208,.12);
}

html.iframe body.task-settings .fm-response-panel textarea {
    min-height: 280px;
    line-height: 1.6;
}

html.iframe body.task-settings .fm-response-panel .formbuttons {
    padding: 18px 30px 22px;
    margin: 0;
    background: #f8fbfd;
    border-top: 1px solid #e7eef3;
}

html.iframe body.task-settings .fm-response-panel .formbuttons .btn-primary {
    min-width: 120px;
    min-height: 48px;
    border-radius: 11px;
    font-weight: 750;
}

@media (max-width: 800px) {

    html.iframe body.task-settings .fm-response-panel {
        padding: 16px;
    }

    html.iframe body.task-settings .fm-response-panel-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    html.iframe body.task-settings .fm-response-content-label,
    html.iframe body.task-settings .fm-response-panel .formcontent,
    html.iframe body.task-settings .fm-response-panel .formbuttons {
        padding-left: 20px;
        padding-right: 20px;
    }
}



/* ==========================================================
   FM ABOUT PAGE DESIGN - #340-J003C
   ========================================================== */

.fm-about-page {
    box-sizing: border-box;
    min-height: 100%;
    padding: 38px;
    background:
        radial-gradient(circle at 88% 8%, rgba(0, 172, 255, .10), transparent 30%),
        linear-gradient(145deg, #f5f9fb 0%, #edf4f7 100%);
}

.fm-about-card {
    width: min(900px, 100%);
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce7ed;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(24, 52, 68, .10);
}

.fm-about-brand {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 32px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #122a39 0%, #193d50 58%, #0d526f 100%);
}

.fm-about-logo {
    display: block;
    width: 86px;
    height: 60px;
    flex: 0 0 auto;
    object-fit: contain;
}

.fm-about-brandtext {
    min-width: 0;
    flex: 1;
}

.fm-about-kicker {
    display: block;
    margin: 0 0 6px;
    color: #55d4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.fm-about-brandtext h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.fm-about-brandtext p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.5;
}

.fm-about-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 30px 32px 32px;
}

.fm-about-item {
    box-sizing: border-box;
    min-height: 125px;
    padding: 20px;
    border: 1px solid #e0e9ee;
    border-radius: 13px;
    background: #f9fbfc;
}

.fm-about-item > span {
    display: block;
    margin-bottom: 9px;
    color: #80919b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.fm-about-item > strong {
    display: block;
    margin-bottom: 7px;
    color: #17384a;
    font-size: 15px;
    font-weight: 700;
}

.fm-about-item > p {
    margin: 0;
    color: #74858f;
    font-size: 12px;
    line-height: 1.55;
}

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

    .fm-about-page {
        padding: 18px;
    }

    .fm-about-brand {
        padding: 24px;
    }

    .fm-about-logo {
        width: 68px;
        height: 50px;
    }

    .fm-about-brandtext h2 {
        font-size: 21px;
    }

    .fm-about-information {
        grid-template-columns: 1fr;
        padding: 20px 24px 24px;
    }

    .fm-about-item {
        min-height: auto;
    }
}


/* ==========================================================
   FM SYSTEM INFORMATION NAVIGATION - #340-J003E
   Restores the FM-branded system information control.
   ========================================================== */

#layout-menu #taskmenu .special-buttons a.about.fm-system-information,
#layout-menu #taskmenu a.about.fm-system-information {
    display: flex !important;
}

#layout-menu #taskmenu a.fm-system-information:before {
    content: "\f05a";
}

/* ============================================================
   FM MOBILE READER EMPTY-PANE FIX - #340-K008

   Mobile uses the native single-panel message navigation.
   The desktop preview placeholder must never appear there.
   ============================================================ */

@media screen and (max-width: 768px) {
    body.task-mail #fm-empty-reading-pane {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   FM REDUCED MOTION ACCESSIBILITY - #340-L004
   Respect the operating system/browser reduced-motion setting.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   FM COMPOSE BODY FOCUS ACCESSIBILITY - #340-L007
   Provide a visible keyboard-focus state for the message editor.
   ============================================================ */

body.task-mail.action-compose #composebody:focus-visible {
    outline: 2px solid #20afd0 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(32, 175, 208, .12) !important;
}

/* ============================================================
   FM FINAL EMPTY READING PANE ISOLATION - #340-S004
   Keep the FM desktop empty state visually isolated from the
   underlying native preview layer.
   ============================================================ */
@media screen and (min-width: 769px) {
    body.task-mail #fm-empty-reading-pane {
        background: #ffffff !important;
    }

    body.task-mail .fm-empty-reading-card {
        background: #ffffff !important;
    }
}