/* SmartPlant EHS Webmail Custom Styling - Navy & White Theme */

/* FORCE LIGHT THEME (White Backgrounds) EVEN IN DARK MODE */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-list .footer,
html.dark-mode .sidebar,
html.dark-mode .sidebar .footer,
html.dark-mode #messagepartframe,
html.dark-mode #message-header,
html.dark-mode .message-htmlpart,
html.dark-mode .ui-widget-content,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog-content,
html.dark-mode .listing,
html.dark-mode .listing tbody,
html.dark-mode .listing tbody tr,
html.dark-mode .listing tbody tr td,
html.dark-mode .listing li,
html.dark-mode .treelist li,
html.dark-mode .treelist li div,
html.dark-mode .listitem,
html.dark-mode .listitem a,
html.dark-mode .listmenu li,
html.dark-mode .listmenu li a,
html.dark-mode .messagelist,
html.dark-mode .messagelist tr,
html.dark-mode .messagelist tr td,
html.dark-mode #messagelist,
html.dark-mode #messagelist tr,
html.dark-mode #messagelist tr td {
    background-color: #ffffff !important;
    color: #64748b !important;
}

/* Force standard text colors on dark mode overrides */
html.dark-mode .formcontent,
html.dark-mode .formbuttons,
html.dark-mode .listing tbody tr td,
html.dark-mode .listing-info,
html.dark-mode .listing span.secondary,
html.dark-mode .contactlist span.email,
html.dark-mode #contacthead.readonly .source.row,
html.dark-mode #login-footer {
    color: #64748b !important;
}

/* Borders */
html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode .table thead th,
html.dark-mode .table-widget,
html.dark-mode .table-widget > .footer,
html.dark-mode .message-part,
html.dark-mode .nav-tabs,
html.dark-mode .nav-tabs .nav-link {
    border-color: #e2e8f0 !important;
}

/* Roundcube logo compact sizing in leftmost menu to prevent clipping */
#layout-menu .logo,
#layout-menu a.logo {
    display: block !important;
    text-align: center !important;
    margin: 8px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#layout-menu .logo img,
#layout-menu a.logo img,
#layout-menu img.logo,
#logo.logo {
    max-height: 44px !important;
    max-width: 44px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Left menubar (Compose, Mail, Contacts, Settings) */
#layout-menu, html.dark-mode #layout-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e2e8f0 !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: #1565c0 !important;
    fill: #1565c0 !important;
}

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

/* Left folder list / sidebar items and icons - SmartPlant Brand Blue (#1565c0) */
#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: #1565c0 !important;
}

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

/* Selected / Active folder list and mail list items - Gray Background (#e2e8f0) */
.listing tr.selected td,
.listing li.selected,
.treelist li.selected,
.treelist li.selected > div,
.treelist li.selected > a,
.treelist li.selected > div a,
.listitem.selected,
.listitem.selected > a,
.listmenu li.active,
.listmenu li.active > a,
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 .listitem.selected,
html.dark-mode .listmenu li.active {
    background-color: #e2e8f0 !important;
    color: #1565c0 !important;
}

/* Hovered folder list and mail list items - Light Gray Background (#f1f5f9) */
.listing tr:hover td,
.listing li:hover,
.treelist li div:hover,
.treelist li a:hover,
.listitem:hover,
.listmenu li:hover,
html.dark-mode .listing tr:hover td,
html.dark-mode .treelist li div:hover {
    background-color: #f1f5f9 !important;
    color: #1565c0 !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: #1565c0 !important;
    stroke: #1565c0 !important;
    color: #1565c0 !important;
}

.listitem.selected, 
.listmenu li.active,
html.dark-mode .listitem.selected,
html.dark-mode .listmenu li.active {
    border-left: 4px solid #0d47a1 !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: #1565c0 !important;
    font-weight: bold !important;
}

/* All other text and icons - Standard SmartPlant slate gray (#64748b) */
body,
a,
.link,
#layout,
#layout-content,
#layout-content a,
#layout-content span,
.toolbar,
.toolbar a,
.toolbar a *,
.toolbar button,
.toolbar button *,
.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: #1565c0 !important;
    border-color: #1565c0 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(21, 101, 192, 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: #0d47a1 !important;
    border-color: #0d47a1 !important;
    color: #ffffff !important;
}

/* Login panel card */
.login-panel, #login-form {
    border-top: 4px solid #1565c0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(21, 101, 192, 0.15) !important;
    background: #ffffff !important;
}

#logo {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: 1.5rem !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06)) !important;
}