/**
 * "max" skin -- a monochrome override on top of Roundcube's Elastic skin.
 *
 * Inspired by news.ycombinator.com: Verdana, black on white, grey metadata,
 * hairlines instead of boxes. No radius, no shadows, no gradients, and colour
 * only where it carries meaning -- see the accent tokens below.
 *
 * This file is loaded after the compiled Elastic stylesheet (see
 * templates/includes/layout.html), so almost every rule has to out-weigh an
 * existing one -- !important is used deliberately throughout.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  --m-font: Verdana, Geneva, sans-serif;
  --m-bg: #fff;
  --m-bg-sunken: #f6f6f6;
  --m-fg: #000;
  --m-fg-dim: #828282;
  --m-fg-read: #4a4a4a;  /* subject of a message that has been read */
  --m-line: #e4e4e4;
  --m-line-strong: #c4c4c4;
  --m-selected-bg: #f0f0f0;
  --m-hover-bg: #f0f0f0;

  /* Specks of colour. Everything else stays black on white -- these are only
     ever used for a single icon, a hairline or a badge, never for text. */
  --m-accent: #ff6600;   /* attention: unread mail, focus, current task */
  --m-flag: #d1383d;     /* flagged mail, errors, destructive actions */
  --m-ok: #2f8f45;
  --m-warn: #d98200;
}

html.dark-mode {
  --m-bg: #0b0b0b;
  --m-bg-sunken: #151515;
  --m-fg: #e6e6e6;
  --m-fg-dim: #8b8b8b;
  --m-fg-read: #a4a4a4;
  --m-line: #262626;
  --m-line-strong: #3d3d3d;
  --m-selected-bg: #1e1e1e;
  --m-hover-bg: #1e1e1e;

  --m-accent: #ff7a29;
  --m-flag: #ff6b6b;
  --m-ok: #51cf66;
  --m-warn: #ffa94d;
}

/* --------------------------------------------------------------- removals */

.remotehint {
  display: none !important;
}

/* Roundcube logo (task menu popover, login page, about dialog) */
#logo,
img#logo,
#layout-menu .popover-header,
#aboutframe #logo,
.about #logo {
  display: none !important;
}

/* Contacts task and the About entry */
#taskmenu a.contacts,
#taskmenu a.about {
  display: none !important;
}

/* ------------------------------------------------------------------- base */

html {
  font-size: 13px !important;
}

body,
input,
select,
textarea,
button,
.form-control,
.menu.listing a,
.propform,
#messagestack div {
  font-family: var(--m-font) !important;
}

body {
  color: var(--m-fg) !important;
  background-color: var(--m-bg) !important;
}

/* Everything is a line, never a box */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

a,
a:link,
a:visited,
a.btn-link,
.menu.listing a,
.listing tbody td a {
  color: var(--m-fg) !important;
  text-decoration: none;
}

/* Only prose-ish links underline on hover; toolbar icons must not */
#login-footer a:hover,
.hint a:hover,
a.btn-link:hover,
#message-header a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--m-fg);
  color: var(--m-bg);
}

html,
body {
  scrollbar-color: var(--m-line-strong) transparent !important;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--m-line-strong) !important;
}

/* --------------------------------------------------------------- skeleton */

#layout > div > .header,
#layout > div > .footer,
#layout-sidebar,
#layout-list,
#layout-content,
.popup .listbox .footer,
.iframe-wrapper,
.watermark {
  background-color: var(--m-bg) !important;
  color: var(--m-fg) !important;
  border-color: var(--m-line) !important;
}

#layout > div > .header {
  border-bottom: 1px solid var(--m-line) !important;
  font-weight: normal !important;
}

#layout > div > .footer {
  border-top: 1px solid var(--m-line) !important;
  font-weight: normal !important;
}

#layout-sidebar,
#layout-list {
  border-right: 1px solid var(--m-line) !important;
}

#layout > div > .header .header-title {
  font-weight: normal !important;
  color: var(--m-fg) !important;
}

#layout > div > .header a.button,
#layout > div > .footer a.button,
.header a.button.icon {
  color: var(--m-fg) !important;
}

.header a.button.icon:not(.disabled):hover,
.header a.button.icon:not(.disabled):focus {
  background-color: var(--m-hover-bg) !important;
}

.column-resizer:hover {
  background-color: var(--m-line) !important;
}

/* -------------------------------------------------------------- task menu */

#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons {
  background-color: var(--m-bg) !important;
}

#layout-menu {
  border-right: 1px solid var(--m-line) !important;
}

#taskmenu a,
#taskmenu a.logout,
#taskmenu .action-buttons a {
  color: var(--m-fg-dim) !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.logout:hover,
#taskmenu .action-buttons a:hover {
  color: var(--m-fg) !important;
  background-color: var(--m-hover-bg) !important;
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  color: var(--m-fg) !important;
  background-color: var(--m-selected-bg) !important;
  font-weight: bold !important;
}

/* The current task is the one place in the chrome that carries the accent */
#taskmenu a.selected:before {
  color: var(--m-accent) !important;
}

#taskmenu .action-buttons a {
  border-bottom: 1px solid var(--m-line) !important;
}

#taskmenu .special-buttons {
  border-top: 1px solid var(--m-line) !important;
}

/* ------------------------------------------------------------- searchbar */

.searchbar {
  background-color: var(--m-bg) !important;
  border-bottom: 1px solid var(--m-line) !important;
}

.searchbar a,
.searchbar a.selected,
.searchbar form:before {
  color: var(--m-fg-dim) !important;
}

.searchbar a:hover,
.searchbar a.selected {
  color: var(--m-fg) !important;
}

.searchbar input {
  color: var(--m-fg) !important;
}

.searchbar input::placeholder {
  color: var(--m-fg-dim) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------- listings */

/* Tighter than Elastic's 35px rows -- closer to a plain HTML table */
html:not(.touch) .listing:not(.toolbar) li,
html:not(.touch) .listing tbody td {
  line-height: 30px !important;
}

.listing tbody td,
.listing li,
ul.listing li ul,
.listbox .navlist .listing tr:last-child td {
  border-color: var(--m-line) !important;
}

.listing tbody td,
.listing li a,
.listing tbody td a,
.menu.listing a {
  color: var(--m-fg) !important;
}

.listing span.secondary,
.listing-info,
.listing-hover-menu span.txt {
  color: var(--m-fg-dim) !important;
}

.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td {
  color: var(--m-fg) !important;
  background-color: var(--m-selected-bg) !important;
}

.listing li.droptarget > a,
.listing tr.droptarget > td {
  background-color: var(--m-selected-bg) !important;
  outline: 1px dashed var(--m-line-strong);
}

html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
  border-left-color: var(--m-fg) !important;
}

.listing-hover-menu {
  background-color: var(--m-bg) !important;
  border: 1px solid var(--m-line-strong) !important;
}

.listing-hover-menu a.button {
  color: var(--m-fg) !important;
}

/* Folders: badges are plain orange numbers, not pills */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
  background: transparent !important;
  color: var(--m-accent) !important;
  font-weight: normal !important;
  margin-right: 0 !important;
}

.folderlist li.mailbox.unread > a {
  font-weight: bold !important;
}

.folderlist li.mailbox.recent > a {
  color: var(--m-fg) !important;
}

.folderlist li a:before,
.listing.iconized li a:before,
.listing.iconized tr td:before,
ul.treelist li div.treetoggle:before {
  color: var(--m-fg-dim) !important;
}

/* ----------------------------------------------------------- message list */

.messagelist tbody td {
  border-color: var(--m-line) !important;
}

html:not(.touch) .messagelist td.subject span {
  line-height: 1.75em !important;
}

.messagelist td.subject span.fromto,
.messagelist td.subject span.date,
.messagelist td.subject span.size,
.messagelist span.attachment span,
.messagelist tr.flaggedroot:not(:hover) span.unflagged:before {
  color: var(--m-fg-dim) !important;
}

.messagelist td.subject a {
  color: var(--m-fg) !important;
}

/* Unread vs. read.  Elastic separates the two by font-weight alone, which is
   near invisible in a long list, so read mail recedes to grey while unread
   keeps full contrast, a bold subject and an orange dot. */
.messagelist tr:not(.unread):not(.deleted) td.subject span.subject a {
  color: var(--m-fg-read) !important;
}

.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.subject span.subject a {
  font-weight: bold !important;
  color: var(--m-fg) !important;
}

.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.fromto a {
  color: var(--m-fg) !important;
}

.messagelist tr.unread td.subject span.date {
  color: var(--m-fg) !important;
}

.messagelist td.subject span.msgicon.status:before {
  color: var(--m-fg-dim) !important;
}

/* The unread dot is the one marker you can find without reading anything */
.messagelist td.subject span.msgicon.status.unread:before,
.messagelist td.subject span.msgicon.status.unreadchildren:before {
  color: var(--m-accent) !important;
  font-size: .62rem !important;
}

/* Flagged is weight + a red flag; the text itself stays black */
.messagelist tr.flagged td,
.messagelist tr.flagged span.size,
.messagelist tr.flagged td.subject span.subject a,
.messagelist tr.flagged td.subject span.date,
.messagelist tr.flagged td.subject span.fromto,
.messagelist tr.flagged:not(.deleted) td,
.messagelist tr.flagged:not(.deleted) span.attachment span,
.messagelist span.flagged:before,
body.status-flagged #message-header > .subject:before {
  color: var(--m-fg) !important;
}

.messagelist tr.flagged td.subject span.subject a {
  font-weight: bold !important;
}

.messagelist span.flagged:before,
body.status-flagged #message-header > .subject:before {
  color: var(--m-flag) !important;
}

.messagelist tr.deleted td,
.messagelist tr.deleted td.subject span.subject a,
.messagelist tr.deleted td.subject span.date,
.messagelist tr.deleted td.subject span.fromto {
  color: var(--m-fg-dim) !important;
  text-decoration: line-through;
}

.messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
.messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
  color: var(--m-fg) !important;
}

.pagenav .pagenav-text,
.messagelist + .listing-info {
  color: var(--m-fg-dim) !important;
}

/* --------------------------------------------------------- toolbar & menus */

.menu.toolbar a,
.menu.toolbar a.selected,
.popover .menu li a,
.popupmenu .listing li > a {
  color: var(--m-fg) !important;
}

.menu.toolbar a.selected {
  font-weight: bold !important;
}

.menu.toolbar a:not(.disabled):hover,
.menu.toolbar .dropbutton:not(.disabled):hover,
.menu.toolbar .dropbutton a.dropdown:hover {
  background-color: var(--m-hover-bg) !important;
}

.popover,
.popupmenu,
.contextmenu,
.ui-menu,
.select-menu {
  background-color: var(--m-bg) !important;
  border: 1px solid var(--m-line-strong) !important;
}

.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active,
.googie_list li.googie_list_onhover {
  color: var(--m-fg) !important;
  background-color: var(--m-hover-bg) !important;
}

.popover .popover-header {
  background-color: var(--m-bg) !important;
  border-bottom: 1px solid var(--m-line) !important;
  color: var(--m-fg) !important;
}

/* ------------------------------------------------------- forms and buttons */

.form-control,
.custom-select,
.input-group-text,
.custom-file-label,
.multi-input > .content,
.recipient-input,
.tagedit-list {
  background-color: var(--m-bg) !important;
  color: var(--m-fg) !important;
  border-color: var(--m-line-strong) !important;
}

.input-group-text,
.custom-file-label {
  background-color: var(--m-bg-sunken) !important;
}

.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.input-group-text input:focus,
div.tox.focused {
  color: var(--m-fg) !important;
  border-color: var(--m-accent) !important;
  outline: 0 !important;
}

.form-control::placeholder {
  color: var(--m-fg-dim) !important;
  opacity: 1;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--m-fg) !important;
  border-color: var(--m-fg) !important;
}

.custom-control-label::before {
  border-color: var(--m-line-strong) !important;
}

a.btn,
button.btn,
.btn-secondary,
div.tox .tox-dialog__footer .tox-button {
  background: var(--m-bg) !important;
  color: var(--m-fg) !important;
  border: 1px solid var(--m-line-strong) !important;
  font-weight: normal !important;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:hover,
.btn-primary:focus,
div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary) {
  background: var(--m-fg) !important;
  color: var(--m-bg) !important;
  border-color: var(--m-fg) !important;
}

.btn-danger,
.btn-danger.disabled,
.btn-danger:disabled,
.btn-danger:hover,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger {
  background: var(--m-bg) !important;
  color: var(--m-flag) !important;
  border-color: var(--m-flag) !important;
}

a.btn:hover,
button.btn:hover,
.btn-secondary:hover {
  background: var(--m-hover-bg) !important;
}

.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--m-fg) !important;
  text-decoration: underline;
}

.invalid-feedback,
.form-control.is-invalid,
.form-control.is-invalid:focus,
.multi-input.is-invalid > .content,
.multi-input.is-invalid > .content.focused {
  color: var(--m-fg) !important;
  border-color: var(--m-fg) !important;
}

.form-control.is-invalid,
.multi-input.is-invalid > .content {
  border-style: dashed !important;
}

/* -------------------------------------------------- dialogs and messages */

.ui-dialog,
.ui-widget-content {
  background-color: var(--m-bg) !important;
  color: var(--m-fg) !important;
  border-color: var(--m-line-strong) !important;
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane {
  background: var(--m-bg) !important;
  border-color: var(--m-line) !important;
  color: var(--m-fg) !important;
  font-weight: normal !important;
}

.ui-widget-overlay {
  background: rgba(0, 0, 0, .35) !important;
  opacity: 1 !important;
}

/* Notifications: a black slab, except errors -- those are worth a red one */
#messagestack div,
#messagestack .alert-info.information,
#messagestack .alert-success,
#messagestack .alert-warning,
#messagestack .alert-danger,
#messagestack .alert-loading {
  background-color: var(--m-fg) !important;
  color: var(--m-bg) !important;
  border: 0 !important;
  font-weight: normal !important;
}

#messagestack .alert-danger {
  background-color: var(--m-flag) !important;
  color: #fff !important;
}

.ui.alert {
  background-color: var(--m-bg) !important;
  color: var(--m-fg) !important;
  border: 1px solid var(--m-line-strong) !important;
}

/* Inline alerts keep black text; only the icon says what kind it is */
.ui.alert > i.icon:before {
  color: var(--m-fg) !important;
}

.ui.alert.alert-success > i.icon:before {
  color: var(--m-ok) !important;
}

.ui.alert.alert-warning > i.icon:before,
.suspicious-address-warning:before {
  color: var(--m-warn) !important;
}

.ui.alert.alert-danger > i.icon:before {
  color: var(--m-flag) !important;
}

.ui.alert a:not(.btn) {
  color: var(--m-fg) !important;
  text-decoration: underline;
}

.quota-widget .value,
.quota-widget .value.warning {
  background-color: var(--m-fg) !important;
  opacity: 1 !important;
}

.quota-widget {
  border: 1px solid var(--m-line) !important;
}

#rcmdraglayer {
  background-color: var(--m-fg) !important;
  color: var(--m-bg) !important;
  opacity: 1 !important;
}

.floating-action-buttons a.button {
  background: var(--m-fg) !important;
  color: var(--m-bg) !important;
  border-radius: 50% !important;
}

/* ------------------------------------------------------------ message view */

#message-header,
#messagelist-header,
.attachmentslist li,
.message-part blockquote,
.message-htmlpart blockquote {
  border-color: var(--m-line) !important;
  background-color: transparent !important;
}

#message-header .subject,
#message-header .header-title {
  font-weight: bold !important;
  color: var(--m-fg) !important;
}

#message-header .header-links a,
#message-header .adr,
#message-header .date {
  color: var(--m-fg-dim) !important;
}

#message-header > .header img.contactphoto {
  border-radius: 0 !important;
  background: var(--m-bg-sunken) !important;
}

.attachmentslist li a,
.attachmentslist li:before {
  color: var(--m-fg) !important;
}

/* --------------------------------------------------------------- calendar */

.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
  background: var(--m-selected-bg) !important;
  color: var(--m-fg) !important;
}

.ui-datepicker a.ui-state-active {
  background: var(--m-fg) !important;
  color: var(--m-bg) !important;
}

/* ------------------------------------------------------------ login screen */

body.task-login #layout-content,
body.task-login #login-form {
  background-color: var(--m-bg) !important;
}

body.task-login #login-form {
  border: 1px solid var(--m-line) !important;
  padding: 1.5rem !important;
}

#login-footer,
#login-footer a {
  color: var(--m-fg-dim) !important;
  font-size: .85rem;
}