/* Outlook-inspired theme for Roundcube Elastic */

/* Outlook blue accent */
:root {
    --main-color: #0078d4;

/* Header - Outlook blue */
#layout > .menu,
.header-title,
#taskmenu {
    background-color: #0078d4 !important;

#taskmenu a {
    color: #fff !important;
#taskmenu a:hover,
#taskmenu a.selected {
    background-color: #106ebe !important;
#taskmenu a.selected::after {
    background-color: #fff !important;

/* Sidebar - light grey like Outlook */
#layout-sidebar,
#layout > .sidebar,
.folderlist-widget {
    background-color: #f3f2f1 !important;

/* Folder list */
.folderlist-widget li a {
    color: #323130 !important;
.folderlist-widget li.selected > a {
    color: #0078d4 !important;
    font-weight: 600 !important;
    background-color: #e1dfdd !important;
.folderlist-widget li > a:hover {
    background-color: #edebe9 !important;

/* Unread count badges - Outlook blue */
.folderlist-widget .unreadcount {
    background-color: #0078d4 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;

/* Message list */
#messagelist tr {
    border-bottom: 1px solid #edebe9 !important;
#messagelist tr.selected td {
    background-color: #deecf9 !important;
    border-left: 3px solid #0078d4 !important;
#messagelist tr:hover td {
    background-color: #f3f2f1 !important;
#messagelist tr.unread td.subject span.subject {
    font-weight: 600 !important;
    color: #323130 !important;

/* Toolbar */
.toolbar {
    background-color: #f3f2f1 !important;
    border-bottom: 1px solid #edebe9 !important;

/* Compose button - Outlook blue pill */
a.button.compose,
a.button.create {
    background-color: #0078d4 !important;
    color: #fff !important;
    border-radius: 20px !important;
    border: none !important;
a.button.compose:hover,
a.button.create:hover {
    background-color: #106ebe !important;

/* Reading pane */
#layout-content,
#layout > .content {
    background-color: #ffffff !important;

/* Message view header */
.message-header,
.message-header table {
    background-color: #fff !important;
    border-bottom: 1px solid #edebe9 !important;

/* Buttons - Outlook style */
.btn-primary,
button.btn-primary {
    background-color: #0078d4 !important;
    border-color: #0078d4 !important;
    border-radius: 4px !important;
.btn-primary:hover {
    background-color: #106ebe !important;

/* Links */
a {
    color: #0078d4;

/* Search bar */
.searchbar input {
    border-radius: 4px !important;
    border: 1px solid #8a8886 !important;
.searchbar input:focus {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 1px #0078d4 !important;

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
::-webkit-scrollbar-track {
    background: #f3f2f1;
::-webkit-scrollbar-thumb {
    background: #c8c6c4;
    border-radius: 4px;
::-webkit-scrollbar-thumb:hover {
    background: #a19f9d;

/* Font - Segoe UI like Outlook */
body, #layout {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !important;

/* Login page */
#login-form {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;

/* Delete/Spam buttons - red/orange like Outlook */
a.button.delete {
    color: #d13438 !important;
a.button.junk {
    color: #d83b01 !important;

/* Toolbar - venstrejuster begge toolbar-containere */
#layout > .list > .header,
#layout > .content > .header {
    text-align: left !important;
    justify-content: flex-start !important;
}
#layout > .list > .header .toolbar.menu,
#layout > .content > .header .toolbar.menu,
#layout > .content > .header[role="toolbar"] {
    justify-content: flex-start !important;
    text-align: left !important;
}
#mailtoolbar {
    justify-content: flex-start !important;
}

/* List toolbar - højrejuster Vælg/Tråde/Indstillinger/Opdatér */
#layout > .list > .header .toolbar.menu {
    justify-content: flex-end !important;
}

/* Login logo større */
#logo {
    width: 250px !important;
    height: auto !important;
    max-height: none !important;
}

/* Login baggrund med stort fadet logo */
.task-login #layout,
.task-login #layout-content {
    background: url("/skins/elastic/images/PFM_LOGO.svg") center center / 50% no-repeat !important;
    position: relative;
}
.task-login #layout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.82);
    pointer-events: none;
}
.task-login #layout > * {
    position: relative;
    z-index: 1;
}

/* Welcome text colors */
#layout-content h2.welcome-text {
    color: #000 !important;
}
html.dark-mode #layout-content h2.welcome-text {
    color: #fff !important;
}

/* Hide logo on login page instantly - no flash */
.task-login #logo {
    display: none !important;
}

/* Prevent browser autofill background color - Chrome + Firefox */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
    background-color: transparent !important;
}
input:autofill {
    background-color: transparent !important;
    color: inherit !important;
}