@import url("../../elastic/styles/styles.min.css");

:root {
  color-scheme: dark;
  --oled-black: #000;
  --oled-panel: #050505;
  --oled-raised: #0b0b0d;
  --oled-hover: #141418;
  --oled-border: #25252b;
  --oled-text: #ededf2;
  --oled-muted: #a2a2ad;
  --oled-accent: #8b6cff;
  --oled-accent-strong: #a48cff;
}

html,
body,
#layout,
#layout-content,
#layout-sidebar,
#layout-list,
#layout-menu,
.iframe-wrapper,
.content,
.content-wrapper,
.scroller,
.ui-widget-content {
  background: var(--oled-black) !important;
  color: var(--oled-text) !important;
}

html.dark-mode {
  scrollbar-color: #3a3a43 #000 !important;
}

#layout-menu,
#layout-sidebar,
.layout-sidebar,
.listing-info,
.searchbar,
.footer,
.boxfooter,
.formbuttons,
.pagenav,
.toolbar,
.menu.toolbar,
.popupmenu,
.popover,
.ui-dialog,
.ui-menu,
.ui-datepicker,
.modal-content {
  background: var(--oled-panel) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
  box-shadow: none !important;
}

#layout > div > .header,
#layout > div > .footer,
.boxtitle,
.boxpagenav,
.listing thead td,
.listing thead th,
.ui-dialog-titlebar,
.modal-header,
.modal-footer {
  background: var(--oled-raised) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
}

a,
.button,
.btn-link,
.listing a,
.menu a,
.toolbar a.button,
.folderlist li a,
.settings-button {
  color: var(--oled-text) !important;
}

a:hover,
a:focus,
.button:hover,
.btn-link:hover,
.menu a:hover,
.toolbar a.button:hover,
.folderlist li a:hover {
  color: var(--oled-accent-strong) !important;
}

.listing tbody td,
.listing tbody th,
.listing li,
.messagelist td,
.contactlist td,
.records-table td,
.propform td,
.propform th {
  background: var(--oled-black) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
}

.listing tbody tr:hover td,
.listing li:hover,
.menu a:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--oled-hover) !important;
}

.listing tbody tr.selected td,
.listing li.selected,
.folderlist li.selected > a,
.menu a.selected,
.nav-link.active,
.dropdown-item.active {
  background: #18102e !important;
  color: #fff !important;
  border-color: #3b2b68 !important;
}

input,
select,
textarea,
.form-control,
.custom-select,
.input-group-text,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-edit-area,
.tox .tox-statusbar {
  background: var(--oled-raised) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
}

input::placeholder,
textarea::placeholder,
.text-muted,
.listing-info,
.secondary,
.description,
.hint,
small {
  color: var(--oled-muted) !important;
}

.btn-primary,
button.mainaction,
input.button.mainaction {
  background: var(--oled-accent) !important;
  border-color: var(--oled-accent) !important;
  color: #fff !important;
}

.btn-primary:hover,
button.mainaction:hover,
input.button.mainaction:hover {
  background: var(--oled-accent-strong) !important;
  border-color: var(--oled-accent-strong) !important;
}

.btn-secondary,
.btn-light,
button,
input.button {
  background-color: var(--oled-raised) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
}

.message-header,
.message-part,
.message-htmlpart,
.message-headers,
.attachment,
.attachmentslist li,
.boxinformation,
.boxwarning,
.boxerror,
.boxconfirmation {
  background-color: var(--oled-panel) !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
}

#login-form,
#login-footer {
  background: transparent !important;
  color: var(--oled-muted) !important;
}

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

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

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

::-webkit-scrollbar-thumb {
  background: #29292f;
  border: 2px solid #000;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a43;
}

/* Refined OLED hierarchy: true black without harsh panel seams. */
#layout-menu {
  background: #030304 !important;
  border-right: 1px solid #17171c !important;
}

#layout-menu .popover-header {
  background: #070709 !important;
  border-bottom: 1px solid #1b1b20 !important;
}

#layout-menu .popover-header img {
  opacity: .88;
}

#layout-menu .popover-body,
#layout-menu .menu {
  background: #030304 !important;
}

#layout-menu .menu a {
  color: #d4d4dc !important;
  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

#layout-menu .menu a:hover {
  background: #0d0d11 !important;
  color: #fff !important;
}

#layout-menu .menu a.selected {
  background: #171127 !important;
  box-shadow: inset 3px 0 0 var(--oled-accent);
  color: #fff !important;
}

#layout-sidebar,
#layout-list {
  background: #000 !important;
  border-color: #1c1c22 !important;
}

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

#layout > div > .header,
#layout > div > .footer {
  background: #060608 !important;
  border-color: #1c1c22 !important;
}

#layout-sidebar .listing li,
#layout-list .listing li,
#layout-sidebar .listing tbody td,
#layout-list .listing tbody td {
  border-color: #18181d !important;
}

#layout-sidebar .listing li.selected,
#layout-list .listing li.selected,
#layout-sidebar .listing tr.selected td,
#layout-list .listing tr.selected td {
  background: #151024 !important;
  box-shadow: inset 3px 0 0 var(--oled-accent);
}

.column-resizer {
  background: transparent !important;
  border-color: transparent !important;
}

.column-resizer:hover,
.column-resizer:active {
  background: rgba(139, 108, 255, .22) !important;
}

.iframe-wrapper,
.iframe-wrapper iframe {
  background: #020203 !important;
}

/* Bottom utility actions: quiet by default, intentional on interaction. */
#taskmenu .special-buttons {
  background: #030304 !important;
  border-top: 1px solid #1b1b20 !important;
  padding: 5px 0 !important;
}

#taskmenu .special-buttons a,
#taskmenu .special-buttons a.button {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 10px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #b9b9c3 !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, color 140ms ease !important;
}

#taskmenu .special-buttons a::before,
#taskmenu .special-buttons a .inner {
  color: inherit !important;
}

#taskmenu .special-buttons a.about:hover,
#taskmenu .special-buttons a.about:focus {
  background: #0d0d11 !important;
  color: #fff !important;
}

#taskmenu .special-buttons a.logout {
  color: #c9c9d1 !important;
}

#taskmenu .special-buttons a.logout:hover,
#taskmenu .special-buttons a.logout:focus {
  background: #170709 !important;
  color: #ff6f7d !important;
}

/* Message-row quick actions: keep the floating hover surface OLED-native. */
.listing-hover-menu {
  background: #09090c !important;
  border: 1px solid #2b2933 !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .72), 0 0 0 1px rgba(139, 108, 255, .08) !important;
  color: #c9c9d2 !important;
}

.listing-hover-menu span.txt {
  color: #aaa9b4 !important;
}

.listing-hover-menu a.button {
  border-radius: 4px !important;
  color: #c9c9d2 !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}

.listing-hover-menu a.button:hover,
.listing-hover-menu a.button:focus {
  background: #17131f !important;
  color: #fff !important;
}

.listing-hover-menu a.button.delete:hover,
.listing-hover-menu a.button.delete:focus {
  background: #21090d !important;
  color: #ff6f7d !important;
}

/* Text selection: replace the browser's harsh cobalt block in message content. */
::selection {
  background: #38275f !important;
  color: #fff !important;
  text-shadow: none !important;
}

::-moz-selection {
  background: #38275f !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Simple HTML mail often arrives with an inline black font and no canvas.
   Recolor only text-only messages; preserve designed newsletters unchanged. */
.message-htmlpart .rcmBody:not(:has(table, img, picture, svg, video, canvas, [bgcolor], [style*="background"])) {
  color: var(--oled-text) !important;
}

.message-htmlpart .rcmBody:not(:has(table, img, picture, svg, video, canvas, [bgcolor], [style*="background"]))
  :where(div, p, span, font, b, strong, em, i, u, small, big) {
  color: inherit !important;
}

.message-htmlpart .rcmBody:not(:has(table, img, picture, svg, video, canvas, [bgcolor], [style*="background"])) a {
  color: var(--oled-accent-strong) !important;
}

/* Component audit: cover stock Elastic light states that appear outside panels. */
html.dark-mode .html-editor .editor-toolbar,
html.dark-mode .editor-toolbar,
html.dark-mode .mce-container,
html.dark-mode .tox-tinymce,
html.dark-mode .tox .tox-editor-header,
html.dark-mode .tox .tox-menubar {
  background: #08080a !important;
  border-color: var(--oled-border) !important;
  color: var(--oled-text) !important;
  box-shadow: none !important;
}

html.dark-mode .editor-toolbar a,
html.dark-mode .editor-toolbar button,
html.dark-mode .tox .tox-tbtn,
html.dark-mode .tox .tox-mbtn {
  background: transparent !important;
  color: #d4d4dc !important;
}

html.dark-mode .editor-toolbar a:hover,
html.dark-mode .editor-toolbar button:hover,
html.dark-mode .tox .tox-tbtn:hover,
html.dark-mode .tox .tox-mbtn:hover {
  background: var(--oled-hover) !important;
  color: #fff !important;
}

#directorylist li.selected > a,
#addressbookslist li.selected > a,
#sections-table tr.selected td,
#settings-sections tr.selected td {
  background: #151024 !important;
  border-color: #3b2b68 !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--oled-accent);
}

.ui-dialog-title,
.popover-body,
.popover-header,
.dropdown-menu,
.dropdown-menu .dropdown-item,
.table,
.table th,
.table td {
  color: var(--oled-text) !important;
}

.popover,
.dropdown-menu,
.ui-dialog,
.ui-dialog-content {
  background: #070709 !important;
  border-color: var(--oled-border) !important;
}

.popover-header,
.ui-dialog-titlebar,
.table thead th {
  background: #0b0b0d !important;
  border-color: var(--oled-border) !important;
  color: #fff !important;
}

.ui-widget-overlay {
  background: #171b1f !important;
  opacity: .82 !important;
}

.skinselection .skinthumbnail {
  background: #070709 !important;
  border-color: var(--oled-border) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--oled-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #0b0b0d inset !important;
  caret-color: var(--oled-text) !important;
}