/**
 * Vantariel skin overrides for RoundCube Elastic
 * Supports both light and dark modes using the palette from vantariel.com
 */

/* =========================================================
   LIGHT MODE (default)
   ========================================================= */

/* General palette */
html,
body {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a,
a.button,
.listing a,
.toolbar a,
.menu a {
    color: #0082a6 !important;
}

a:hover,
a.button:hover,
.listing a:hover,
.toolbar a:hover,
.menu a:hover {
    color: #00c0f0 !important;
}

/* Layout containers */
#layout > div > .header,
#layout > div > .footer {
    background: #5a6972 !important;
    color: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
}

#layout > div > .header a.button,
#layout > div > .header .header-title {
    color: #ffffff !important;
}

#layout-sidebar,
#layout-list {
    background: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.25) !important;
}

#layout-content {
    background: #f1f5f9 !important;
}

#layout-content .content,
#layout-content .formcontent,
#layout-content .scroller {
    background: #f1f5f9 !important;
}

/* Task menu (left sidebar on desktop) */
#taskmenu {
    background: #5a6972 !important;
}

#taskmenu a {
    color: #ffffff !important;
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus {
    background: rgba(0, 192, 240, 0.15) !important;
    color: #00c0f0 !important;
}

#taskmenu a.logout {
    color: #ef4444 !important;
}

#taskmenu a.logout:hover {
    color: #f87171 !important;
}

#layout-menu .popover-header {
    background: #5a6972 !important;
}

/* Toolbar / menu buttons */
.menu.toolbar a,
.toolbar a.button,
a.button {
    color: #0f172a !important;
    background: transparent !important;
}

.menu.toolbar a.selected,
.toolbar a.button.selected,
a.button.selected {
    color: #0082a6 !important;
    background: rgba(0, 192, 240, 0.12) !important;
}

.menu.toolbar a:hover,
.toolbar a.button:hover,
a.button:hover {
    background: rgba(0, 192, 240, 0.08) !important;
}

.menu a:not(.disabled):hover,
.menu a:not(.disabled):focus {
    background: #0082a6 !important;
    color: #ffffff !important;
}

/* Listings */
.listing,
.listing li,
.listing td,
.messagelist td,
.messagelist tr,
.folderlist li,
.contactlist li,
.contactlist td {
    color: #0f172a !important;
    border-color: rgba(90, 105, 114, 0.2) !important;
}

.listing tbody tr:hover,
.messagelist tbody tr:hover,
.folderlist li:hover,
.contactlist li:hover {
    background: rgba(0, 192, 240, 0.06) !important;
}

.listing tbody tr.selected,
.messagelist tbody tr.selected,
.folderlist li.selected,
.contactlist li.selected {
    background: rgba(0, 192, 240, 0.12) !important;
    color: #0f172a !important;
}

.listing tbody tr.selected a,
.messagelist tbody tr.selected a {
    color: #0082a6 !important;
}

.listing.iconized li a:before,
.listing.iconized tr td:before,
.messagelist td.subject span.msgicon.status:before,
.messagelist span.flagged:before {
    color: #0082a6 !important;
}

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

.messagelist tr.unread td.subject a {
    color: #0f172a !important;
}

/* Forms and inputs */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea,
.propform input,
.propform select,
.propform textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(90, 105, 114, 0.35) !important;
    border-radius: 6px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #00c0f0 !important;
    box-shadow: 0 0 0 2px rgba(0, 192, 240, 0.2) !important;
    outline: none !important;
}

/* Buttons */
button.btn,
a.button,
input.button,
.ui-dialog-buttonpane button,
.ui-button {
    border-radius: 6px !important;
}

button.btn-primary,
a.button.btn-primary,
input.button.btn-primary,
#rcmloginsubmit,
.ui-dialog-buttonpane button.btn-primary,
.ui-button.ui-state-default {
    background: #0082a6 !important;
    border-color: #0082a6 !important;
    color: #ffffff !important;
}

button.btn-primary:hover,
a.button.btn-primary:hover,
input.button.btn-primary:hover,
#rcmloginsubmit:hover,
.ui-dialog-buttonpane button.btn-primary:hover,
.ui-button.ui-state-default:hover {
    background: #00c0f0 !important;
    border-color: #00c0f0 !important;
    color: #0f172a !important;
}

button.btn-secondary,
a.button.btn-secondary,
input.button.btn-secondary {
    background: rgba(90, 105, 114, 0.2) !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
    color: #0f172a !important;
}

button.btn-secondary:hover,
a.button.btn-secondary:hover,
input.button.btn-secondary:hover {
    background: #5a6972 !important;
    color: #ffffff !important;
}

/* Dialogs and popovers */
.ui-dialog,
.popover,
.popupmenu,
.menu.popup,
.popover-body,
.popupmenu-body {
    background: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.ui-dialog-titlebar,
.popover-header,
.popupmenu-header {
    background: #5a6972 !important;
    color: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
}

.ui-dialog-buttonpane,
.popupmenu-footer {
    background: #f1f5f9 !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
}

/* Message view */
#message-header,
#message-content,
#messagebody,
.message-part,
.message-htmlpart {
    background: #ffffff !important;
    color: #0f172a !important;
}

#message-header .subject,
#message-header .from,
#message-header .to,
#message-header .date,
#message-header .header-links a {
    color: #0f172a !important;
}

#message-header .subject a,
#message-header .header-links a:hover {
    color: #0082a6 !important;
}

/* Compose */
#compose-content,
#composeheaders,
#composebody,
#compose-attachments {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
}

#composeheaders input,
#composeheaders select,
#composeheaders textarea {
    background: #f1f5f9 !important;
}

/* Search bar */
.searchbar,
.searchbar form,
.searchbar input,
#quicksearchbar,
#quicksearchbar input {
    background: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
    color: #0f172a !important;
}

.searchbar a,
#quicksearchbar a {
    color: #0082a6 !important;
}

/* Alerts and messages */
.ui.alert,
.alert,
.alert-info,
.alert-success,
.alert-warning,
.alert-danger,
.alert-error,
#messagestack .alert,
#messagestack .alert-success,
#messagestack .alert-warning,
#messagestack .alert-error {
    background: #ffffff !important;
    border-color: rgba(90, 105, 114, 0.35) !important;
    color: #0f172a !important;
}

.ui.alert.alert-info,
.alert.alert-info {
    border-left-color: #00c0f0 !important;
}

.ui.alert.alert-success,
.alert.alert-success {
    border-left-color: #10b981 !important;
}

.ui.alert.alert-warning,
.alert.alert-warning {
    border-left-color: #f59e0b !important;
}

.ui.alert.alert-danger,
.alert.alert-danger,
.ui.alert.alert-error,
.alert.alert-error {
    border-left-color: #ef4444 !important;
}

/* Login page */
.task-login #layout-content {
    background: #f1f5f9 !important;
}

#login-form {
    background: #ffffff !important;
    border: 1px solid rgba(90, 105, 114, 0.35) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

#login-form .form-control {
    background: #f1f5f9 !important;
}

#login-footer {
    color: #5a6972 !important;
}

#logo {
    max-height: 80px !important;
    margin-bottom: 1rem !important;
}

#layout-menu .popover-header img,
#layout-menu .popover-header #logo {
    max-height: 40px !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #5a6972;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00c0f0;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-mode body,
html.dark-mode #layout-content,
html.dark-mode #layout-content .content,
html.dark-mode #layout-content .formcontent,
html.dark-mode #layout-content .scroller,
html.dark-mode .task-login #layout-content {
    background: #12161a !important;
    color: #f1f5f9 !important;
}

html.dark-mode a,
html.dark-mode a.button,
html.dark-mode .listing a,
html.dark-mode .toolbar a,
html.dark-mode .menu a,
html.dark-mode .searchbar a,
html.dark-mode #quicksearchbar a,
html.dark-mode #message-header .subject a,
html.dark-mode #message-header .header-links a:hover {
    color: #00c0f0 !important;
}

html.dark-mode a:hover,
html.dark-mode a.button:hover,
html.dark-mode .listing a:hover,
html.dark-mode .toolbar a:hover,
html.dark-mode .menu a:hover {
    color: #38bdf8 !important;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #message-header,
html.dark-mode #message-content,
html.dark-mode #messagebody,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart,
html.dark-mode #compose-content,
html.dark-mode #composeheaders,
html.dark-mode #composebody,
html.dark-mode #compose-attachments,
html.dark-mode .ui-dialog,
html.dark-mode .popover,
html.dark-mode .popupmenu,
html.dark-mode .menu.popup,
html.dark-mode .popover-body,
html.dark-mode .popupmenu-body,
html.dark-mode .form-control,
html.dark-mode input.form-control,
html.dark-mode select.form-control,
html.dark-mode textarea.form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .propform input,
html.dark-mode .propform select,
html.dark-mode .propform textarea,
html.dark-mode .searchbar,
html.dark-mode .searchbar form,
html.dark-mode .searchbar input,
html.dark-mode #quicksearchbar,
html.dark-mode #quicksearchbar input,
html.dark-mode .ui.alert,
html.dark-mode .alert,
html.dark-mode #login-form,
html.dark-mode #composeheaders input,
html.dark-mode #composeheaders select,
html.dark-mode #composeheaders textarea {
    background: #181f25 !important;
    color: #f1f5f9 !important;
    border-color: rgba(90, 105, 114, 0.45) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #00c0f0 !important;
    box-shadow: 0 0 0 2px rgba(0, 192, 240, 0.2) !important;
}

html.dark-mode .listing,
html.dark-mode .listing li,
html.dark-mode .listing td,
html.dark-mode .messagelist td,
html.dark-mode .messagelist tr,
html.dark-mode .folderlist li,
html.dark-mode .contactlist li,
html.dark-mode .contactlist td,
html.dark-mode #message-header .subject,
html.dark-mode #message-header .from,
html.dark-mode #message-header .to,
html.dark-mode #message-header .date,
html.dark-mode #message-header .header-links a,
html.dark-mode .menu.toolbar a,
html.dark-mode .toolbar a.button,
html.dark-mode a.button {
    color: #f1f5f9 !important;
    border-color: rgba(90, 105, 114, 0.3) !important;
}

html.dark-mode .listing tbody tr:hover,
html.dark-mode .messagelist tbody tr:hover,
html.dark-mode .folderlist li:hover,
html.dark-mode .contactlist li:hover {
    background: rgba(0, 192, 240, 0.08) !important;
}

html.dark-mode .listing tbody tr.selected,
html.dark-mode .messagelist tbody tr.selected,
html.dark-mode .folderlist li.selected,
html.dark-mode .contactlist li.selected {
    background: rgba(0, 192, 240, 0.15) !important;
}

html.dark-mode .messagelist tr.unread td.subject a {
    color: #ffffff !important;
}

html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus {
    background: #0082a6 !important;
    color: #ffffff !important;
}

html.dark-mode button.btn-secondary,
html.dark-mode a.button.btn-secondary,
html.dark-mode input.button.btn-secondary {
    background: rgba(90, 105, 114, 0.5) !important;
    color: #f1f5f9 !important;
}

html.dark-mode button.btn-secondary:hover,
html.dark-mode a.button.btn-secondary:hover,
html.dark-mode input.button.btn-secondary:hover {
    background: #5a6972 !important;
    color: #ffffff !important;
}

html.dark-mode .ui-dialog-buttonpane,
html.dark-mode .popupmenu-footer,
html.dark-mode #login-form .form-control {
    background: #12161a !important;
}

html.dark-mode #login-footer,
html.dark-mode .listing tbody tr.selected a,
html.dark-mode .messagelist tbody tr.selected a {
    color: #94a3b8 !important;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #12161a;
}

html.dark-mode #logo {
    filter: brightness(1.1) !important;
}