/* =========================================================
   MIDNIGHT BLUE — Roundcube Elastic Override
   SAFE: colors only, no layout changes
   ========================================================= */

:root {
  --mb-bg: #000000;
  --mb-bg-alt: #050505;

  --mb-text: #00e6ff;
  --mb-text-dim: #00bcd4;
  --mb-text-faint: #008c9e;

  --mb-border: #002f6c;
  --mb-border-strong: #0047ab;

  --mb-hover: #001a3a;
  --mb-selected: #002a5c;

  --mb-accent: #00ffff;

  --mb-ok: #00ff88;
  --mb-warn: #ffff66;
  --mb-bad: #ff5555;
}

/* ================= BASE ================= */

html, body {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
}

/* ================= MAIN LAYOUT ================= */

#layout,
#layout-sidebar,
#layout-list,
#layout-content,
#layout-preview,
#layout-menu,
#messagepreview,
#messagecontent,
.contentframe,
.iframe-wrapper,
.box,
.boxcontent,
.formcontent,
.listbox,
.ui-widget-content,
.ui-dialog,
.popupmenu,
.popover {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
}

/* ================= HEADERS / FOOTERS ================= */

#layout > div > .header,
#layout > div > .footer,
.header,
.footer {
  background-color: var(--mb-bg-alt) !important;
  color: var(--mb-text-dim) !important;
  border-color: var(--mb-border) !important;
}

/* ================= LINKS ================= */

a {
  color: var(--mb-accent) !important;
}

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

/* ================= MENUS ================= */

#taskmenu a,
.menu.toolbar a,
.menu a {
  color: var(--mb-text) !important;
}

#taskmenu a.selected,
.menu.toolbar a.selected {
  background-color: var(--mb-selected) !important;
  color: #ffffff !important;
}

/* ================= LISTS ================= */

#folderlist li,
.records-table tr,
#messagelist tbody tr {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}

#folderlist li:hover,
.records-table tr:hover td,
#messagelist tbody tr:hover td {
  background-color: var(--mb-hover) !important;
}

#folderlist li.selected,
.records-table tr.selected td,
#messagelist tbody tr.selected td {
  background-color: var(--mb-selected) !important;
  color: #ffffff !important;
}

/* ================= INPUTS ================= */

input,
select,
textarea {
  background-color: #000000 !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--mb-accent) !important;
  outline: none !important;
}

/* ================= BUTTONS ================= */

button,
.btn,
a.button {
  background-color: #000000 !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border) !important;
}

button:hover,
.btn:hover,
a.button:hover {
  background-color: var(--mb-hover) !important;
  color: #ffffff !important;
}

/* ================= TABLES ================= */

table,
th,
td {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}

/* ================= ALERTS ================= */

.ui.alert {
  background-color: #000000 !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border) !important;
}

.ui.alert.alert-success {
  color: var(--mb-ok) !important;
}

.ui.alert.alert-warning {
  color: var(--mb-warn) !important;
}

.ui.alert.alert-danger {
  color: var(--mb-bad) !important;
}

/* ================= LOGIN ================= */

body.task-login,
#login-form,
#login-footer > div {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
}

/* ================= SCROLLBARS ================= */

::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--mb-border-strong);
}