/**
 * =============================================================================
 * ANNULARITY WORKSPACE - PURE BLACK & WHITE MINIMALIST DESIGN
 * Rock-solid flex layout. Zero coordinate hacks. Crisp monochrome aesthetic.
 * =============================================================================
 */

/* 1. Global Reset & Theme */
html, body, .dark-mode, .annularity-app {
    background-color: #000000 !important;
    color: #EDEDED !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Accessibility & Visibility Guards */
.hidden, .rcmaddcontact, .voice, #searchmenu.hidden {
    display: none !important;
}

ul, ol, ul.treelist, ul.listing, #folderlist {
    list-style: none !important;
    list-style-type: none !important;
}

a.button.icon > span.inner {
    display: none !important;
}

a {
    text-decoration: none !important;
}

/* 2. Main Flex Container */
#layout {
    background-color: #000000 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* 3. Navigation Dock (Leftmost 72px) */
#layout-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
    height: 100% !important;
    background-color: #000000 !important;
    border-right: 1px solid #1E1E1E !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
}

#layout-menu .popover-header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-bottom: 1px solid #1E1E1E !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#layout-menu #logo,
#layout-menu #logo img,
#layout-menu .popover-header img,
#layout-menu .popover-header a,
#layout-menu .popover-header a img,
#layout-menu img,
img#logo {
    height: 26px !important;
    width: 26px !important;
    max-height: 26px !important;
    max-width: 26px !important;
    object-fit: contain !important;
    filter: none !important;
    display: block !important;
    margin: 0 auto !important;
}

#layout-menu .popover-header a.cancel {
    display: none !important;
}

#layout-menu #taskmenu {
    position: relative !important;
    width: 72px !important;
    flex: 1 1 auto !important;
    height: calc(100% - 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 0 12px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Top Dock Buttons */
#layout-menu #taskmenu a.button {
    width: 56px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-width: 56px !important;
    margin: 3px auto !important;
    padding: 6px 2px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #777777 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

#layout-menu #taskmenu a.button:before {
    display: none !important;
}

#layout-menu #taskmenu a.button .dock-icon {
    display: block !important;
    margin: 0 auto 3px auto !important;
    color: #777777 !important;
    transition: color 0.15s ease !important;
}

#layout-menu #taskmenu a.button .inner {
    display: block !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    color: #777777 !important;
    text-align: center !important;
    line-height: 1 !important;
}

#layout-menu #taskmenu a.button:hover {
    background: #161616 !important;
    color: #FFFFFF !important;
}

#layout-menu #taskmenu a.button:hover .dock-icon,
#layout-menu #taskmenu a.button:hover .inner {
    color: #FFFFFF !important;
}

#layout-menu #taskmenu a.button.selected {
    background: #222222 !important;
    color: #FFFFFF !important;
}

#layout-menu #taskmenu a.button.selected .dock-icon,
#layout-menu #taskmenu a.button.selected .inner {
    color: #FFFFFF !important;
}

/* Redactar / Compose: Minimalist White Button */
#layout-menu #taskmenu .action-buttons {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 8px !important;
    margin: 2px auto !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose .dock-icon {
    color: #000000 !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose .inner {
    color: #000000 !important;
    font-weight: 600 !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose:hover {
    background: #E5E5E5 !important;
}

/* Bottom Group: Settings & Logout (Icon-Only Stacked Vertically) */
#layout-menu #taskmenu .special-buttons {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    z-index: 50 !important;
}

#layout-menu #taskmenu .special-buttons a.button {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    border-radius: 8px !important;
    background: #141414 !important;
    border: 1px solid #282828 !important;
    color: #888888 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

#layout-menu #taskmenu .special-buttons a.button .inner {
    display: none !important;
}

#layout-menu #taskmenu .special-buttons a.button .dock-icon {
    margin: auto !important;
    display: block !important;
    color: #888888 !important;
}

#layout-menu #taskmenu .special-buttons a.button:hover {
    background: #242424 !important;
    border-color: #404040 !important;
}

#layout-menu #taskmenu .special-buttons a.button:hover .dock-icon {
    color: #FFFFFF !important;
}

#layout-menu #taskmenu .special-buttons a.button.logout:hover {
    background: #241414 !important;
    border-color: #552222 !important;
}

#layout-menu #taskmenu .special-buttons a.button.logout:hover .dock-icon {
    color: #FF5552 !important;
}

/* 4. Folders Sidebar (#layout-sidebar) - ZERO OVERLAP */
#layout-sidebar {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 200px !important;
    max-width: 260px !important;
    flex: 0 0 220px !important;
    height: 100% !important;
    background-color: #000000 !important;
    border-right: 1px solid #1E1E1E !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

#layout-sidebar > .header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    background-color: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#layout-sidebar > .header .header-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #888888 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

#layout-sidebar > .header a.button.sidebar-menu,
#layout-sidebar > .header a.sidebar-menu {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    max-width: 28px !important;
    line-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    color: #777777 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

#layout-sidebar > .header a.button.sidebar-menu:hover,
#layout-sidebar > .header a.sidebar-menu:hover {
    color: #FFFFFF !important;
    background: #1C1C1C !important;
}

#layout-sidebar > .header a.button.sidebar-menu:before,
#layout-sidebar > .header a.sidebar-menu:before {
    font-family: 'Icons' !important;
    content: "\f142" !important;
    font-size: 1rem !important;
    height: 28px !important;
    line-height: 28px !important;
    width: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    color: inherit !important;
}

#layout-sidebar > .header a.button.sidebar-menu .inner,
#layout-sidebar > .header a.sidebar-menu .inner {
    display: none !important;
}

/* Hide Username */
.username, span.username, .header-title.username,
#layout-sidebar > .header .username,
#layout-sidebar > .header span.header-title.username {
    display: none !important;
}

#layout-sidebar #folderlist,
#layout-sidebar .treelist,
#layout-sidebar #folderlist-content {
    margin: 0 !important;
    padding: 4px 0 !important;
    width: 100% !important;
}

#folderlist li, .treelist li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#folderlist li a, .treelist li a {
    color: #888888 !important;
    border-radius: 0 !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}

#folderlist li a:hover, .treelist li a:hover {
    background: #121212 !important;
    color: #EDEDED !important;
}

#folderlist li.selected > a, .treelist li.selected > a {
    background: #181818 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-left: 3px solid #FFFFFF !important;
}

#folderlist li a:before, .treelist li a:before {
    font-family: 'Icons' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    margin-right: 10px !important;
    color: #777777 !important;
    line-height: 1 !important;
}

#folderlist li:hover > a:before, .treelist li:hover > a:before,
#folderlist li.selected > a:before, .treelist li.selected > a:before {
    color: #FFFFFF !important;
}

#folderlist li.inbox > a:before, .treelist li.inbox > a:before { content: "\f01c" !important; color: #FFFFFF !important; }
#folderlist li.drafts > a:before, .treelist li.drafts > a:before { content: "\f044" !important; }
#folderlist li.sent > a:before, .treelist li.sent > a:before { content: "\f1d8" !important; }
#folderlist li.trash > a:before, .treelist li.trash > a:before { content: "\f2ed" !important; }
#folderlist li.junk > a:before, .treelist li.junk > a:before { content: "\f05e" !important; }
#folderlist li.archive > a:before, .treelist li.archive > a:before { content: "\f187" !important; }

#folderlist .unreadcount, .treelist .unreadcount {
    background: #262626 !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    padding: 1px 7px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    margin-left: auto !important;
}

/* 5. Messages List (#layout-list) - ZERO OVERLAP */
#layout-list {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 320px !important;
    min-width: 280px !important;
    max-width: 380px !important;
    flex: 0 0 320px !important;
    height: 100% !important;
    background-color: #000000 !important;
    border-right: 1px solid #1E1E1E !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

#layout-list > .header, #messagelist-header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    background-color: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

/* Hide clutter toolbar buttons above search (Select, Threads, Options, etc.) & duplicate 3-dots */
#messagelist-header .toolbar.menu,
#messagelist-header a.button.select,
#messagelist-header a.button.threads,
#messagelist-header a.button.options,
#messagelist-header a.button.refresh,
#messagelist-header a.button.task-menu-button,
#messagelist-header a.button.back-sidebar-button,
#messagelist-header a.button.folders,
#messagelist-header a.toolbar-list-button,
#messagelist-header a.button.toolbar-list-button,
#messagelist-header a.icon.toolbar-list-button,
#layout-list > .header a.toolbar-list-button,
#layout-list > .header a.button.toolbar-list-button,
#layout-content > .header a.toolbar-menu-button,
#layout-content > .header a.button.toolbar-menu-button,
#layout-content > .header a.icon.toolbar-menu-button {
    display: none !important;
}

#messagelist-header a.toolbar-menu-button,
#messagelist-header a.button.toolbar-menu-button,
#messagelist-header .toolbar-menu-button,
#layout-list > .header a.toolbar-menu-button {
    display: none !important;
}

/* Search Bar */
.searchbar {
    background-color: #141414 !important;
    border-bottom: 1px solid #1E1E1E !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
}

.searchbar form:before {
    color: #666666 !important;
    font-size: 0.9rem !important;
}

.searchbar input {
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
}

.searchbar input::placeholder {
    color: #666666 !important;
}

/* Message Rows */
#messagelist thead {
    display: none !important;
}

#messagelist tbody tr td {
    border-bottom: 1px solid #181818 !important;
    padding: 12px 14px !important;
    background: transparent !important;
}

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

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

#messagelist tbody tr td.from {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

#messagelist tbody tr.unread td.from:before {
    content: "• " !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
}

#messagelist tbody tr td.subject {
    color: #999999 !important;
    font-size: 0.84rem !important;
}

#messagelist tbody tr td.date {
    color: #555555 !important;
    font-size: 0.78rem !important;
}

/* 6. Message Preview & Content (#layout-content) */
#layout-content {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100% !important;
    background-color: #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

#layout-content > .header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    background-color: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
}

/* Compact Modern Toolbar Buttons (Reply, Reply all, Forward, Delete, Mark, More) */
#mailtoolbar, .toolbar.menu {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

#mailtoolbar a.button,
#mailtoolbar button.button,
.toolbar a.button,
.toolbar button.button,
.dropbutton a.button,
.dropbutton a.dropdown {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 4px !important;
    background: #141414 !important;
    border: 1px solid #282828 !important;
    color: #CCCCCC !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

#mailtoolbar a.button.disabled,
#mailtoolbar button.button.disabled,
.toolbar a.button.disabled,
.toolbar button.button.disabled,
.dropbutton a.button.disabled,
.dropbutton a.dropdown.disabled,
#mailtoolbar a.disabled,
.toolbar a.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: #555555 !important;
    border-color: #222222 !important;
    background: #0d0d0d !important;
}

#mailtoolbar a.button:not(.disabled),
#mailtoolbar button.button:not(.disabled),
.toolbar a.button:not(.disabled),
.toolbar button.button:not(.disabled),
.dropbutton a.button:not(.disabled),
.dropbutton a.dropdown:not(.disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    color: #CCCCCC !important;
    border-color: #2e2e2e !important;
    background: #141414 !important;
}

#mailtoolbar a.button:not(.disabled):hover,
#mailtoolbar button.button:not(.disabled):hover,
.toolbar a.button:not(.disabled):hover,
.toolbar button.button:not(.disabled):hover,
.dropbutton a.button:not(.disabled):hover,
.dropbutton a.dropdown:not(.disabled):hover {
    background: #242424 !important;
    border-color: #444444 !important;
    color: #FFFFFF !important;
}

#mailtoolbar a.button.delete:not(.disabled):hover,
.toolbar a.button.delete:not(.disabled):hover {
    background: #241414 !important;
    border-color: #552222 !important;
    color: #FF5552 !important;
}

#mailtoolbar a.button:before,
#mailtoolbar button.button:before,
.toolbar a.button:before,
.toolbar button.button:before {
    font-size: 0.82rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: inherit !important;
}

#mailtoolbar a.button .inner,
#mailtoolbar button.button .inner,
.toolbar a.button .inner,
.toolbar button.button .inner {
    display: inline !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    text-transform: none !important;
}

.dropbutton {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 1px !important;
}

.dropbutton a.dropdown {
    width: 18px !important;
    min-width: 18px !important;
    height: 26px !important;
    padding: 0 !important;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dropbutton a.button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Pagination & Footers */
#messagelistfooter, .pagenav {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    background: #000000 !important;
    border-top: 1px solid #1E1E1E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    color: #888888 !important;
    font-size: 0.8rem !important;
}

#messagelistfooter .pagenav-text, .pagenav .pagenav-text,
#messagelistfooter .count, .pagenav .count {
    color: #888888 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

#messagelistfooter a.button, .pagenav a.button {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    color: #888888 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important;
}

#messagelistfooter a.button:hover, .pagenav a.button:hover {
    color: #FFFFFF !important;
    background: #1C1C1C !important;
}

/* 7. Modal & Dialogs (B&W Minimalist) */
.annularity-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.annularity-modal-backdrop:not(.active) {
    display: none !important;
}

.annularity-modal-backdrop.active {
    display: flex !important;
}

.annularity-modal-dialog {
    background: #0E0E0E !important;
    border: 1px solid #262626 !important;
    border-radius: 12px !important;
    width: 90% !important;
    max-width: 420px !important;
    color: #FFFFFF !important;
    padding: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important;
}

.annularity-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #202020 !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
}

.annularity-modal-header h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
}

.annularity-modal-close {
    background: none !important;
    border: none !important;
    color: #777777 !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
}

.annularity-modal-close:hover {
    color: #FFFFFF !important;
}

.annularity-form-group {
    margin-bottom: 14px !important;
}

.annularity-form-group label {
    display: block !important;
    font-size: 0.82rem !important;
    color: #888888 !important;
    margin-bottom: 5px !important;
}

.annularity-form-group input, .annularity-form-group select {
    width: 100% !important;
    background: #000000 !important;
    border: 1px solid #282828 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
}

.annularity-form-group input:focus, .annularity-form-group select:focus {
    border-color: #666666 !important;
    outline: none !important;
}

.annularity-status-box {
    margin-top: 10px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

.annularity-status-box.success {
    background: #142416 !important;
    border: 1px solid #225526 !important;
    color: #66EE77 !important;
}

.annularity-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 20px !important;
    border-top: 1px solid #202020 !important;
    padding-top: 16px !important;
}

.annularity-modal-footer .btn-primary {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
}

.annularity-modal-footer .btn-primary:hover {
    background: #E5E5E5 !important;
}

.annularity-modal-footer .btn-secondary {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
}

.annularity-modal-footer .btn-secondary:hover {
    background: #252525 !important;
}

/* 8. Login Page (Monochrome Clean) */
body.task-login {
    background-color: #000000 !important;
}

body.task-login #logo,
body.task-login #logo img,
body.task-login .annularity-auth-container img,
body.task-login img#logo {
    height: 48px !important;
    width: 48px !important;
    max-height: 48px !important;
    max-width: 48px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 18px auto !important;
    filter: none !important;
}

body.task-login #login-form {
    background: #0A0A0A !important;
    border: 1px solid #222222 !important;
    border-radius: 12px !important;
    padding: 36px 30px !important;
    max-width: 380px !important;
    width: 92% !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
}

body.task-login .input-group,
body.task-login .form-control {
    background: #000000 !important;
    border: 1px solid #262626 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
}

body.task-login .input-group:focus-within,
body.task-login .form-control:focus {
    border-color: #666666 !important;
    outline: none !important;
}

body.task-login .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #666666 !important;
}

body.task-login #rcmloginsubmit {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: none !important;
    height: 44px !important;
    width: 100% !important;
    margin-top: 14px !important;
    cursor: pointer !important;
}

body.task-login #rcmloginsubmit:hover {
    background: #E5E5E5 !important;
}

/* 9. Compose View & Content Navigation (B&W Minimalist) */
body.action-compose,
body.action-compose #layout,
body.action-compose #layout-content,
body.action-compose #compose-content,
body.action-compose .formcontainer.content,
body.action-compose .compose-headers,
body.action-compose #compose-headers,
body.action-compose #composebodycontainer,
body.action-compose #layout-sidebar,
body.action-compose .scroller {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

body.action-compose .compose-headers {
    padding: 12px 18px !important;
    border-bottom: 1px solid #1E1E1E !important;
    background: #000000 !important;
}

body.action-compose .compose-headers .form-group {
    margin-bottom: 8px !important;
    align-items: center !important;
}

body.action-compose .compose-headers label {
    color: #777777 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

body.action-compose .compose-headers input.form-control,
body.action-compose .compose-headers .input-group,
body.action-compose .compose-headers .recipient-input,
body.action-compose .compose-headers [data-recipient-input] {
    background-color: #0A0A0A !important;
    border: 1px solid #222222 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 0.84rem !important;
    min-height: 32px !important;
    box-shadow: none !important;
}

body.action-compose .compose-headers input.form-control:focus,
body.action-compose .compose-headers .input-group:focus-within {
    border-color: #555555 !important;
    background-color: #111111 !important;
    outline: none !important;
}

body.action-compose .input-group-text,
body.action-compose .input-group-append a {
    background-color: transparent !important;
    border: none !important;
    color: #777777 !important;
}

body.action-compose .input-group-append a:hover {
    color: #FFFFFF !important;
}

.recipient-input .recipient,
.recipient-input a.recipient {
    background: #1C1C1C !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.8rem !important;
}

#composebodycontainer {
    background: #000000 !important;
    padding: 16px 18px !important;
    flex: 1 1 auto !important;
}

#composebody,
textarea#composebody {
    background-color: #000000 !important;
    border: 1px solid #1E1E1E !important;
    border-radius: 6px !important;
    color: #EDEDED !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

#composebody:focus,
textarea#composebody:focus {
    border-color: #444444 !important;
    outline: none !important;
}

.mce-tinymce, .mce-top-part, .mce-panel, .mce-btn,
.tox-tinymce, .tox .tox-toolbar, .tox .tox-menubar,
.tox .tox-toolbar-overlord, .tox .tox-toolbar__primary {
    background-color: #0A0A0A !important;
    border-color: #1E1E1E !important;
    color: #FFFFFF !important;
}

/* Compose Right Sidebar (Options & Attachments) */
#layout-sidebar.sidebar-right {
    background-color: #000000 !important;
    border-left: 1px solid #1E1E1E !important;
    border-right: none !important;
    width: 280px !important;
    min-width: 260px !important;
    max-width: 320px !important;
    flex: 0 0 280px !important;
    height: 100% !important;
}

#layout-sidebar.sidebar-right > .header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    background: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

#layout-sidebar.sidebar-right > .header .header-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #888888 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 !important;
}

#compose-attachments, #compose-options {
    background: #000000 !important;
    color: #CCCCCC !important;
    padding: 16px !important;
}

/* Eliminate Cyan border in attachment drop zone */
.file-upload,
.file-drop-area,
.attachmentslist,
#compose-attachments,
#compose-attachments .upload-form,
#attachment-list {
    border-color: #262626 !important;
    background-color: #0A0A0A !important;
    color: #888888 !important;
    outline: none !important;
    box-shadow: none !important;
}

.file-drop-area,
#compose-attachments .upload-form {
    border: 1px dashed #2A2A2A !important;
    border-radius: 8px !important;
    padding: 18px 12px !important;
    text-align: center !important;
    background: #0A0A0A !important;
    color: #888888 !important;
}

.file-drop-area:hover,
#compose-attachments .upload-form:hover {
    border-color: #444444 !important;
    background: #111111 !important;
}

#compose-attachments .upload-form button.btn,
#compose-attachments button.attach {
    background: #141414 !important;
    border: 1px solid #282828 !important;
    color: #CCCCCC !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
}

#compose-attachments .upload-form button.btn:hover,
#compose-attachments button.attach:hover {
    background: #242424 !important;
    border-color: #444444 !important;
    color: #FFFFFF !important;
}

/* Compose Options Switches & Selects */
#compose-options {
    border-top: 1px solid #181818 !important;
}

#compose-options label {
    color: #888888 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

#compose-options select.custom-select {
    background-color: #0E0E0E !important;
    border: 1px solid #262626 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
}

/* Compose Header & Toolbar */
body.action-compose #layout-content > .header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    background: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

body.action-compose #layout-content > .header .header-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #888888 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 !important;
}

#messagetoolbar {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* Reset all toolbar buttons to clean 32px height flex items */
#messagetoolbar a,
#messagetoolbar button,
#messagetoolbar .btn,
#messagetoolbar .button,
#messagetoolbar a.options,
#messagetoolbar a.responses,
#messagetoolbar a.signature,
#messagetoolbar a.attach,
#messagetoolbar a.save,
.content-frame-navigation a.button {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    background: #141414 !important;
    border: 1px solid #282828 !important;
    color: #CCCCCC !important;
    transition: all 0.15s ease !important;
}

#messagetoolbar a:hover,
#messagetoolbar button:hover,
.content-frame-navigation a.button:hover {
    background: #242424 !important;
    border-color: #444444 !important;
    color: #FFFFFF !important;
}

/* Send button in toolbar: white prominent button */
#messagetoolbar a.send,
#messagetoolbar button.send,
#messagetoolbar .btn-primary.send {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    order: -1 !important;
}

#messagetoolbar a.send:hover,
#messagetoolbar button.send:hover {
    background: #E5E5E5 !important;
    color: #000000 !important;
}

#messagetoolbar a.send:before,
#messagetoolbar button.send:before {
    color: #000000 !important;
}

/* Hide unused encryption popup clutter */
.encrypt,
[data-popup="encryption-menu"],
#encryption-menu-button {
    display: none !important;
}

/* In compose view, hide previous/next and duplicated bottom bar */
body.action-compose .content-frame-navigation {
    display: none !important;
}

/* In compose view, clean editor bottom bar */
body.action-compose .formbuttons {
    background: #000000 !important;
    border-top: 1px solid #1E1E1E !important;
    padding: 8px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

body.action-compose .formbuttons button.send {
    display: none !important;
}

body.action-compose .formbuttons .extwin {
    color: #777777 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
}

body.action-compose .formbuttons .extwin:hover {
    color: #FFFFFF !important;
}

/* Dock "Redactar" button active style */
#layout-menu #taskmenu .action-buttons a.button.compose,
#layout-menu #taskmenu .action-buttons a.button.compose.selected,
body.action-compose #layout-menu #taskmenu .action-buttons a.button.compose {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 8px !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose .dock-icon,
#layout-menu #taskmenu .action-buttons a.button.compose.selected .dock-icon,
body.action-compose #layout-menu #taskmenu .action-buttons a.button.compose .dock-icon {
    color: #000000 !important;
}

#layout-menu #taskmenu .action-buttons a.button.compose .inner,
#layout-menu #taskmenu .action-buttons a.button.compose.selected .inner,
body.action-compose #layout-menu #taskmenu .action-buttons a.button.compose .inner {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Content frame navigation footer for mail view only */
.content-frame-navigation {
    background: #000000 !important;
    border-top: 1px solid #1E1E1E !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* In-frame compose integration */
body.annularity-composing #layout-content > .header {
    display: none !important;
}

body.annularity-composing #layout-content .iframe-wrapper {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 100% !important;
}

body.annularity-composing #layout-content iframe#messagecontframe {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
}

html.iframe,
html.iframe body,
body.iframe {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
    display: flex !important;
    flex-direction: row !important;
}

html.iframe #layout-content,
body.iframe #layout-content {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #000000 !important;
    order: 1 !important;
}

html.iframe #layout-sidebar.sidebar-right,
body.iframe #layout-sidebar.sidebar-right {
    width: 260px !important;
    min-width: 240px !important;
    max-width: 280px !important;
    flex: 0 0 260px !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: #000000 !important;
    border-left: 1px solid #1E1E1E !important;
    order: 2 !important;
}

html.iframe #compose-content,
body.iframe #compose-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    background: #000000 !important;
}

html.iframe #composebodycontainer,
body.iframe #composebodycontainer {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000000 !important;
    padding: 14px 16px !important;
}

html.iframe textarea#composebody,
body.iframe textarea#composebody {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 250px !important;
    background: #050505 !important;
    border: 1px solid #1E1E1E !important;
    border-radius: 6px !important;
    color: #EDEDED !important;
}

/* Guarantee navbar is never duplicated inside an iframe */
html.iframe #layout-menu,
body.iframe #layout-menu,
.iframe #layout-menu,
body.in-frame #layout-menu,
html.in-frame #layout-menu {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Guarantee duplicate mailbox/sidebar is NEVER rendered inside an iframe */
html.iframe #layout-sidebar:not(.sidebar-right),
body.iframe #layout-sidebar:not(.sidebar-right),
html.iframe #layout-list,
body.iframe #layout-list,
.in-frame #layout-sidebar:not(.sidebar-right),
.in-frame #layout-list {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide Anterior, Responder, Siguiente (.content-frame-navigation) */
.content-frame-navigation,
#content-frame-navigation,
.content-frame-navigation *,
body.action-compose .content-frame-navigation,
body.annularity-composing .content-frame-navigation {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide all top toolbar buttons in compose view and extwin */
#messagetoolbar,
body.action-compose #messagetoolbar,
html.iframe #messagetoolbar,
body.iframe #messagetoolbar,
#messagetoolbar a,
#messagetoolbar button,
body.action-compose .formbuttons,
.formbuttons .extwin,
a.extwin,
.extwin,
[data-command="extwin"] {
    display: none !important;
}

/* Prominent Save button for settings, identities, and signatures */
.formbuttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 16px 20px !important;
    background: #000000 !important;
    border-top: 1px solid #1E1E1E !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.formbuttons button.submit,
.formbuttons button.btn-primary,
.formbuttons input[type="submit"],
.formbuttons button[type="submit"],
.formbuttons .btn-primary {
    height: 36px !important;
    min-height: 36px !important;
    line-height: 34px !important;
    padding: 0 20px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 6px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.formbuttons button.submit:hover,
.formbuttons button.btn-primary:hover,
.formbuttons input[type="submit"]:hover,
.formbuttons button[type="submit"]:hover,
.formbuttons .btn-primary:hover {
    background: #E5E5E5 !important;
    border-color: #E5E5E5 !important;
}

/* Outlook-style Enviar button and layout beside fields */
.compose-headers.outlook-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 14px 18px !important;
    background: #000000 !important;
    border-bottom: 1px solid #1E1E1E !important;
}
.compose-send-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    flex: 0 0 82px !important;
}
.annularity-send-outlook-btn:before,
.annularity-send-outlook-btn:after,
button.annularity-send-outlook-btn:before,
button.annularity-send-outlook-btn:after {
    display: none !important;
    content: none !important;
}
.annularity-send-outlook-btn {
    width: 100% !important;
    height: 100% !important;
    min-height: 84px !important;
    max-height: 114px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.15s ease !important;
    padding: 10px 4px !important;
    outline: none !important;
}
.annularity-send-outlook-btn:hover {
    background: #E5E5E5 !important;
    border-color: #E5E5E5 !important;
    transform: translateY(-1px) !important;
}
.annularity-send-outlook-btn:active {
    transform: translateY(1px) !important;
}
.annularity-send-outlook-btn .send-icon {
    width: 22px !important;
    height: 22px !important;
    stroke: #000000 !important;
    color: #000000 !important;
    display: block !important;
    margin: 0 auto !important;
}
.annularity-send-outlook-btn .send-text {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1 !important;
}
.compose-fields-grid {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}
.compose-fields-grid .form-group {
    margin-bottom: 0 !important;
}