@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root,
html,
html.dark-mode {
  color-scheme: dark;
  --hayti-bg: #000000;
  --hayti-surface: #0a0a0a;
  --hayti-hover: #111111;
  --hayti-text: #ededed;
  --hayti-muted: #888888;
  --hayti-dim: #666666;
  --hayti-border: #1a1a1a;
  --hayti-primary: #ffffff;
  --hayti-on-primary: #000000;
  --hayti-danger: #ff6b6b;
  --hayti-success: #3ecf8e;
  --hayti-radius: 8px;
  --hayti-font: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

html,
html.dark-mode,
html.dark-mode body,
body {
  background: var(--hayti-bg) !important;
  color: var(--hayti-text) !important;
  font-family: var(--hayti-font) !important;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

html.dark-mode #layout-menu,
#layout-menu {
  background: var(--hayti-bg) !important;
  border-right: 1px solid var(--hayti-border) !important;
}

html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
#layout-list,
#layout-content,
#layout-sidebar {
  background: var(--hayti-surface) !important;
  border-color: var(--hayti-border) !important;
}

html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
#layout > div > .header,
#layout > div > .footer,
.popup .listbox .footer {
  background: var(--hayti-bg) !important;
  border-color: var(--hayti-border) !important;
  color: var(--hayti-text) !important;
}

#logo {
  opacity: 1 !important;
  max-height: 42px;
  filter: none !important;
}

#logo img {
  max-height: 36px;
  width: auto;
}

#logo img[src*="elastic/images/logo"] {
  visibility: hidden;
}

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

.task-login #logo {
  top: 14vh;
  max-height: 48px;
}

#login-form {
  background: var(--hayti-surface);
  border: 1px solid var(--hayti-border);
  border-radius: 10px;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  max-width: 360px;
}

#login-form legend,
#login-form label,
#login-form .title {
  color: var(--hayti-muted) !important;
  font-weight: 500;
}

#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
  background: var(--hayti-hover) !important;
  border: 1px solid var(--hayti-border) !important;
  border-radius: var(--hayti-radius) !important;
  color: var(--hayti-text) !important;
  box-shadow: none !important;
}

#login-form input:focus {
  border-color: #333 !important;
  outline: none !important;
}

#rcmloginsubmit,
#login-form .mainaction,
input.button.mainaction,
button.mainaction,
a.button.mainaction {
  background: var(--hayti-primary) !important;
  color: var(--hayti-on-primary) !important;
  border: 0 !important;
  border-radius: var(--hayti-radius) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

#rcmloginsubmit:hover,
.mainaction:hover {
  background: #e4e4e7 !important;
  color: var(--hayti-on-primary) !important;
}

#login-footer,
#login-addon {
  color: var(--hayti-dim) !important;
}

#login-footer > div {
  background: var(--hayti-surface) !important;
  border: 1px solid var(--hayti-border);
}

.listing,
.listing tbody td,
.messagelist tbody td,
.listing li {
  border-color: var(--hayti-border) !important;
  color: var(--hayti-text) !important;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tbody tr:hover td {
  background: var(--hayti-hover) !important;
}

.listing li.selected,
.listing tr.selected td,
.messagelist tbody tr.selected td {
  background: var(--hayti-hover) !important;
  color: var(--hayti-primary) !important;
}

.listing li.unread,
.messagelist tbody tr.unread td {
  font-weight: 600;
  color: var(--hayti-primary) !important;
}

.folderlist li.mailbox.selected,
.folderlist li.selected > a {
  background: var(--hayti-hover) !important;
}

a, a:link {
  color: var(--hayti-text);
}

a:hover {
  color: var(--hayti-primary);
}

input, select, textarea, .form-control {
  background: var(--hayti-hover) !important;
  border: 1px solid var(--hayti-border) !important;
  color: var(--hayti-text) !important;
  border-radius: 6px !important;
}

.button, .btn, .formbuttons .btn {
  border-radius: var(--hayti-radius) !important;
  border-color: var(--hayti-border) !important;
}

.button:not(.mainaction),
.btn:not(.mainaction):not(.btn-primary) {
  background: transparent !important;
  color: var(--hayti-text) !important;
}

.menu a, .toolbar a, .header a.button {
  color: var(--hayti-text) !important;
}

.menu a.selected,
.toolbar a.selected {
  background: var(--hayti-hover) !important;
}

.popup, .popover, .ui-dialog, .ui-widget-content, .popupmenu {
  background: var(--hayti-surface) !important;
  color: var(--hayti-text) !important;
  border: 1px solid var(--hayti-border) !important;
  border-radius: 10px !important;
}

.ui-dialog-titlebar,
.ui-widget-header {
  background: var(--hayti-bg) !important;
  color: var(--hayti-text) !important;
  border-color: var(--hayti-border) !important;
}

.searchbar, .searchbox input {
  background: var(--hayti-hover) !important;
  border-color: var(--hayti-border) !important;
  color: var(--hayti-text) !important;
}

#message-header > .subject {
  color: var(--hayti-primary);
  letter-spacing: -0.03em;
}

#messagebody, .message-part, .message-htmlpart {
  color: var(--hayti-text);
}

.boxwarning, .warning {
  background: #2a1d08 !important;
  color: #f5a524 !important;
  border-color: #3d2a0c !important;
}

.boxerror, .error, .boxinformation.error {
  background: #2a0f0f !important;
  color: var(--hayti-danger) !important;
}

.boxinformation, .info {
  background: var(--hayti-hover) !important;
  color: var(--hayti-text) !important;
  border-color: var(--hayti-border) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; }

html.dark-mode .theme.dark,
.theme.dark {
  display: none !important;
}