/*
 * Custom minimalist overlay for the Elastic skin.
 * Loaded AFTER styles.css (see templates/includes/layout.html) so every
 * rule here only overrides colors / spacing / borders / radii — it never
 * changes display, position, or box sizing that Roundcube's JS relies on
 * for layout math (column resizing, responsive breakpoints, etc).
 *
 * Every color rule is scoped to html:not(.dark-mode) with a matching
 * html.dark-mode block below, so Elastic's own dark theme (toggled via the
 * "Dark mode" sidebar button, which adds .dark-mode to <html>) is untouched
 * where we don't explicitly restyle it.
 *
 * To disable instantly: remove the <link rel="stylesheet" href="/styles/custom.css">
 * line from templates/includes/layout.html, or switch skin back to "elastic"
 * in Settings > Preferences > Interface.
 */

html:not(.dark-mode) {
  --mm-accent: #4a90c2;
  --mm-accent-soft: #e8f2fa;
  --mm-ink: #1c1c1c;
  --mm-line: #e8e6e1;
  --mm-line-soft: #f0eee9;
  --mm-surface-sunk: #faf9f6;
}

html.dark-mode {
  --mm-accent: #6f97a0;
  --mm-accent-soft: #374549;
  --mm-ink: #c5d1d3;
  --mm-line: #4d6066;
  --mm-line-soft: #2c373a;
  --mm-surface-sunk: #263033;
}

/* ---------- Icon rail (#layout-menu: logo + #taskmenu + dark/about/logout) ---------- */
/* This whole column is Elastic's dark icon rail by design (the popover-header
   and #taskmenu both use @color-taskmenu-background natively) - not
   something to lighten, just flattening its shadow. Do NOT set a background
   here or it only paints the gaps between the icon rows, since the dark
   color actually comes from #taskmenu and .popover-header individually. */
#layout-menu {
  box-shadow: none;
}

/* ---------- Folder list panel (Inbox/Drafts/Sent/...) ---------- */

#layout-sidebar {
  background-color: var(--mm-surface-sunk);
  border-right: 1px solid var(--mm-line);
  box-shadow: none;
}

/* Each panel's top strip is actually two stacked elements in Elastic's
   markup - the outer "#layout > div > .header" (username row / message-list
   action row) and, inside #layout-list's header, a nested ".toolbar.menu"
   holding the Select/Threads/Options/Refresh buttons. Both need the same
   background or you get a visible two-tone seam between them.
   #taskmenu also carries class="menu toolbar" (it's the dark icon rail,
   handled above), so it's explicitly excluded here. */
#layout > div > .header,
.header.toolbar,
.toolbar.menu:not(#taskmenu) {
  border-color: var(--mm-line);
  box-shadow: none;
}

html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) .header.toolbar,
html:not(.dark-mode) .toolbar.menu:not(#taskmenu) {
  background-color: #ffffff;
}

a.toolbar-button {
  border-radius: 7px;
}

a.toolbar-button:hover,
a.toolbar-button:focus {
  background-color: var(--mm-line-soft);
}

/* ---------- Search bar ---------- */
/* Sits inside the (white) #layout-list panel, so it should blend into
   that panel rather than read as its own tinted card - no background
   fill, just a quiet input-style border. */

.searchbar,
.searchbar input {
  background-color: transparent;
  border-color: var(--mm-line);
  box-shadow: none;
}

.searchbar {
  border-radius: 8px;
}

/* ---------- Folder list ---------- */

#mailboxlist.folderlist tr.selected > td,
#mailboxlist.folderlist tr.selected td {
  background-color: var(--mm-accent-soft);
  color: var(--mm-ink);
}

#mailboxlist.folderlist tr td.name {
  font-weight: 500;
}

#mailboxlist.folderlist tr:hover > td {
  background-color: var(--mm-line-soft);
}

/* ---------- Message list ---------- */

#layout-list {
  border-right: 1px solid var(--mm-line);
  box-shadow: none;
}

.listing tr {
  border-bottom: 1px solid var(--mm-line-soft);
}

.listing tr.unread td.subject span.subject,
.listing tr.unread td.subject {
  font-weight: 600;
}

.listing tr.selected td,
.listing tr.selected {
  background-color: var(--mm-accent-soft);
}

.listing tr:hover td {
  background-color: var(--mm-surface-sunk);
}

/* ---------- Buttons ---------- */

html:not(.dark-mode) .btn-primary {
  background-color: var(--mm-accent);
  border-color: var(--mm-accent);
  box-shadow: none;
}

html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn-primary:focus {
  background-color: color-mix(in srgb, var(--mm-accent) 85%, black);
  border-color: color-mix(in srgb, var(--mm-accent) 85%, black);
}

.btn-primary,
.btn-secondary {
  border-radius: 7px;
}

.btn-secondary {
  box-shadow: none;
}

/* ---------- Panels / boxes: flatten heavy borders + shadows ---------- */

.box,
.uibox,
.formcontent,
.contentbox {
  box-shadow: none;
  border-color: var(--mm-line);
}

/* ---------- Reading pane ---------- */

#messagecontframe,
.message-partheaders,
.message-part {
  border-color: var(--mm-line-soft);
}

/* Elastic deliberately keeps HTML-formatted message bodies on a white
   background even in dark mode (html.dark-mode .message-htmlpart in
   styles.min.css) - forcing a dark background instead breaks readability
   for any email whose own text color assumes a white background behind
   it (tested: dark red/maroon text became nearly invisible). Instead we
   keep the white background Roundcube already provides, and just style
   it as a deliberate "card" - padding, rounded corners, a soft border -
   so it reads as an intentional light surface floating on the dark UI,
   the same treatment Gmail/Outlook use for HTML email bodies in dark
   mode, rather than a stray unstyled white rectangle. */
html.dark-mode .message-htmlpart {
  border-radius: 12px;
  border: 1px solid #4d6066;
  padding: 20px 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.message-htmlpart {
  border-radius: 12px;
}

/* ---------- Scrollbars (Webkit) ---------- */

html:not(.dark-mode) ::-webkit-scrollbar-thumb {
  background-color: #d4d2cc;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}