/* Evomedia Webmail Custom Styling - Deep Blue & White Theme */


/* Hide logo image everywhere — catch all wrappers and both desktop/mobile layouts */
#layout-menu .popover-header img#logo,
#layout-menu .popover-header > img,
#taskmenu img#logo,
#taskmenu a.logo img,
#taskmenu a.button.logo img,
img#logo,
img[src*="logo.svg"],
img[src*="logo.png"] {
    display: none !important;
}

/* Show "EVO" text — covers both desktop (#taskmenu a.logo) and mobile (.popover-header) */
#layout-menu .popover-header,
#taskmenu a.logo,
#taskmenu a.button.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    background: transparent !important;
    text-decoration: none !important;
}

#layout-menu .popover-header::before,
#taskmenu a.logo::before,
#taskmenu a.button.logo::before {
    content: "EVO" !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #336699 !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Left menubar — white in light mode, native dark in dark mode */
html:not(.dark-mode) #layout-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e2e8f0 !important;
}

html.dark-mode #layout-menu {
    background-image: none !important;
}

#layout-menu .button,
#layout-menu .button *,
#layout-menu a,
#layout-menu a *,
html.dark-mode #layout-menu .button,
html.dark-mode #layout-menu a {
    color: #336699 !important;
    fill: #336699 !important;
}

html:not(.dark-mode) #layout-menu .button:hover,
html:not(.dark-mode) #layout-menu .button.active,
html:not(.dark-mode) #layout-menu .button.selected,
html:not(.dark-mode) #layout-menu a:hover,
html:not(.dark-mode) #layout-menu a.active,
html:not(.dark-mode) #layout-menu a.selected {
    color: #003366 !important;
    fill: #003366 !important;
    background-color: #e2e8f0 !important;
}

html.dark-mode #layout-menu .button:hover,
html.dark-mode #layout-menu .button.active,
html.dark-mode #layout-menu .button.selected,
html.dark-mode #layout-menu a:hover,
html.dark-mode #layout-menu a.active,
html.dark-mode #layout-menu a.selected {
    color: #7eb8e8 !important;
    fill: #7eb8e8 !important;
    background-color: #2d3748 !important;
}

/* Left folder list / sidebar items and icons - Evomedia Brand Blue (#336699) */
#layout-sidebar,
#layout-sidebar a,
#layout-sidebar span,
#layout-list,
#layout-list a,
#layout-list span,
.treelist li,
.treelist li a,
.treelist li span,
.treelist li span.name,
.treelist li span.unread,
.listmenu li,
.listmenu li a,
.listmenu li span,
.treelist li a:before,
.listmenu li a:before,
html.dark-mode #layout-sidebar a,
html.dark-mode #layout-list a,
html.dark-mode .treelist li a,
html.dark-mode .listmenu li a {
    color: #336699 !important;
}

#layout-sidebar svg,
#layout-list svg,
.treelist li a svg,
.listmenu li a svg,
.treelist li a .icon,
.listmenu li a .icon {
    fill: #336699 !important;
    stroke: #336699 !important;
    color: #336699 !important;
}

/* Selected / Active — light grey in light mode, dark grey in dark mode */
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .treelist li.selected,
html:not(.dark-mode) .treelist li.selected > div,
html:not(.dark-mode) .treelist li.selected > a,
html:not(.dark-mode) .treelist li.selected > div a,
html:not(.dark-mode) .listitem.selected,
html:not(.dark-mode) .listitem.selected > a,
html:not(.dark-mode) .listmenu li.active,
html:not(.dark-mode) .listmenu li.active > a {
    background-color: #e2e8f0 !important;
    color: #336699 !important;
}

html.dark-mode .listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .treelist li.selected,
html.dark-mode .treelist li.selected > div,
html.dark-mode .treelist li.selected > a,
html.dark-mode .listitem.selected,
html.dark-mode .listmenu li.active {
    background-color: #2d3748 !important;
    color: #336699 !important;
}

/* Hovered — light grey in light mode, dark grey in dark mode */
html:not(.dark-mode) .listing tr:hover td,
html:not(.dark-mode) .listing li:hover,
html:not(.dark-mode) .treelist li div:hover,
html:not(.dark-mode) .treelist li a:hover,
html:not(.dark-mode) .listitem:hover,
html:not(.dark-mode) .listmenu li:hover {
    background-color: #f1f5f9 !important;
    color: #336699 !important;
}

html.dark-mode .listing tr:hover td,
html.dark-mode .listing li:hover,
html.dark-mode .treelist li div:hover,
html.dark-mode .treelist li a:hover,
html.dark-mode .listitem:hover,
html.dark-mode .listmenu li:hover {
    background-color: #374151 !important;
    color: #336699 !important;
}

.treelist li.selected a,
.listmenu li.active a,
html.dark-mode .treelist li.selected a,
html.dark-mode .listmenu li.active a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Ensure active SVG icons remain brand blue on the light gray background */
.treelist li.selected a svg,
.treelist li.selected a .icon,
.listmenu li.active a svg,
.listmenu li.active a .icon,
.treelist li.selected > div a svg,
.listmenu li.active > a svg,
html.dark-mode .treelist li.selected a svg,
html.dark-mode .listmenu li.active a svg {
    fill: #336699 !important;
    stroke: #336699 !important;
    color: #336699 !important;
}

.listitem.selected, 
.listmenu li.active,
html.dark-mode .listitem.selected,
html.dark-mode .listmenu li.active {
    border-left: 4px solid #003366 !important;
}

/* General unread subjects should also be colored blue to stand out */
.listing tbody tr td.name a.active,
.listing tbody tr td.subject a.unread,
html.dark-mode .listing tbody tr td.name a.active,
html.dark-mode .listing tbody tr td.subject a.unread {
    color: #336699 !important;
    font-weight: bold !important;
}

/* Popover header back (<) button and action bar dots (...) */
.popover-header a,
.popover-header button,
.popover-header a *,
.popover-header button *,
.header a.button,
.header button,
.header a.button *,
a.button.icon.cancel,
a.button.icon.more,
button.icon.cancel,
button.icon.more,
html.dark-mode .popover-header a,
html.dark-mode .popover-header button,
html.dark-mode .header a.button,
html.dark-mode a.button.icon.cancel,
html.dark-mode a.button.icon.more {
    color: #336699 !important;
    fill: #336699 !important;
    background-color: transparent !important;
}

.popover-header a:hover,
.popover-header button:hover,
.header a.button:hover,
.header button:hover,
a.button.icon.cancel:hover,
a.button.icon.more:hover,
button.icon.cancel:hover,
button.icon.more:hover,
html.dark-mode .popover-header a:hover,
html.dark-mode .popover-header button:hover,
html.dark-mode .header a.button:hover,
html.dark-mode a.button.icon.cancel:hover,
html.dark-mode a.button.icon.more:hover {
    background-color: #e2e8f0 !important;
    color: #003366 !important;
    fill: #003366 !important;
}

/* Toolbar buttons and icons (Select, Threads, Options, etc) */
.toolbar a,
.toolbar a *,
.toolbar button,
.toolbar button *,
html.dark-mode .toolbar a,
html.dark-mode .toolbar button {
    color: #336699 !important;
    fill: #336699 !important;
    stroke: #336699 !important;
    background-color: transparent !important;
}

/* Toolbar active/hover state - light grey background (#e2e8f0) */
.toolbar a:hover,
.toolbar a.active,
.toolbar a.selected,
.toolbar button:hover,
.toolbar button.active,
.toolbar button.selected,
html.dark-mode .toolbar a:hover,
html.dark-mode .toolbar a.active,
html.dark-mode .toolbar a.selected {
    background-color: #e2e8f0 !important;
    color: #003366 !important;
    fill: #003366 !important;
    stroke: #003366 !important;
}

/* All other text and icons - Standard SmartPlant slate gray (#64748b) */
body,
a,
.link,
#layout,
#layout-content,
#layout-content a,
#layout-content span,
.listing tbody tr td,
.listing tbody tr td a,
.listing span.title,
.listing span.name,
.listing span.subject,
.listing span.date,
.listing span.size,
#message-header,
#message-header *,
.formcontent,
.formbuttons,
.ui-widget-content,
.ui-dialog,
.ui-dialog-content,
html.dark-mode a,
html.dark-mode .link,
html.dark-mode #layout-content a,
html.dark-mode .listing tbody tr td a {
    color: #64748b !important;
}

/* Hover state for general links - darker slate gray */
a:hover,
.link:hover,
html.dark-mode a:hover,
html.dark-mode .link:hover {
    color: #1e293b !important;
}

/* Primary / submit buttons (e.g. Login button) */
button.mainaction, 
button.submit, 
#rcmloginsubmit,
.button.mainaction,
.btn-primary,
.tox-dialog__footer .tox-button,
html.dark-mode button.mainaction,
html.dark-mode button.submit,
html.dark-mode #rcmloginsubmit,
html.dark-mode .btn-primary {
    background-color: #336699 !important;
    border-color: #336699 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(51, 102, 153, 0.2) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

button.mainaction:hover, 
button.mainaction:focus,
button.submit:hover,
#rcmloginsubmit:hover,
#rcmloginsubmit:focus,
.btn-primary:hover,
.tox-dialog__footer .tox-button:hover,
html.dark-mode button.mainaction:hover,
html.dark-mode #rcmloginsubmit:hover {
    background-color: #003366 !important;
    border-color: #003366 !important;
    color: #ffffff !important;
}

/* Login panel card */
.login-panel, #login-form {
    border-top: 4px solid #336699 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(51, 102, 153, 0.15) !important;
    background: #ffffff !important;
}

#logo {
    display: none !important;
}

/* Bottom of left menubar and popup menus — light mode only */
html:not(.dark-mode) #layout-menu .special-buttons,
html:not(.dark-mode) #layout-menu .special-buttons *,
html:not(.dark-mode) #layout-menu .footer,
html:not(.dark-mode) #layout-menu .footer *,
html:not(.dark-mode) .popover,
html:not(.dark-mode) .popover-body,
html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .popupmenu .listing li,
html:not(.dark-mode) .popupmenu ul li,
html:not(.dark-mode) .menu.popupmenu,
html:not(.dark-mode) .dropdown-menu li,
html:not(.dark-mode) .ui-menu .ui-menu-item,
html:not(.dark-mode) .ui-menu .ui-menu-item-wrapper {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Hide Y watermark in empty message preview pane */
#layout-content #logo,
#layout-content img#logo,
#messageframe #logo,
.watermark,
#layout-content .watermark,
#messagecontent .watermark,
#layout-content > img,
#layout-content > .placeholder,
#layout-content::before,
#layout-content::after {
    display: none !important;
    background-image: none !important;
}

#layout-menu .special-buttons a,
#layout-menu .special-buttons button,
#layout-menu .special-buttons .button,
#layout-menu .footer a,
#layout-menu .footer button,
.popover a,
.popover-body a,
.popupmenu a,
.popupmenu li a,
.dropdown-menu a,
.ui-menu .ui-menu-item a,
html.dark-mode #layout-menu .special-buttons a,
html.dark-mode #layout-menu .special-buttons button,
html.dark-mode #layout-menu .footer a,
html.dark-mode .popupmenu a,
html.dark-mode .dropdown-menu a {
    color: #336699 !important;
    fill: #336699 !important;
    stroke: #336699 !important;
    background-color: transparent !important;
}

#layout-menu .special-buttons a:hover,
#layout-menu .special-buttons button:hover,
#layout-menu .special-buttons .button:hover,
#layout-menu .footer a:hover,
.popover a:hover,
.popupmenu a:hover,
.popupmenu li:hover,
.popupmenu li:hover a,
.dropdown-menu a:hover,
.dropdown-menu li:hover,
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-state-active,
.ui-menu .ui-state-hover,
html.dark-mode #layout-menu .special-buttons a:hover,
html.dark-mode #layout-menu .footer a:hover,
html.dark-mode .popupmenu li:hover,
html.dark-mode .popupmenu a:hover,
html.dark-mode .dropdown-menu a:hover {
    background-color: #e2e8f0 !important;
    color: #003366 !important;
    fill: #003366 !important;
    stroke: #003366 !important;
}

/* Unread count badges on folder list items */
#layout-sidebar span.unreadcount,
#layout-sidebar span.badge,
#layout-list span.unreadcount,
#layout-list span.badge,
span.unreadcount,
span.unreadcount.skip-content,
.treelist li span.unreadcount,
.treelist li a span.unreadcount,
html.dark-mode #layout-sidebar span.unreadcount,
html.dark-mode #layout-sidebar span.badge,
html.dark-mode #layout-list span.unreadcount,
html.dark-mode #layout-list span.badge,
html.dark-mode span.unreadcount,
html.dark-mode span.unreadcount.skip-content,
html.dark-mode .treelist li span.unreadcount,
html.dark-mode .treelist li a span.unreadcount {
    background-color: #336699 !important;
    color: #ffffff !important;
    border-color: #336699 !important;
    fill: unset !important;
}

/* Popup menu icons */
.popover svg,
.popupmenu svg,
.popupmenu .icon,
.dropdown-menu svg,
.ui-menu svg,
#layout-menu .special-buttons svg,
#layout-menu .footer svg {
    fill: #336699 !important;
    stroke: #336699 !important;
    color: #336699 !important;
}