/* RUFHUB Mail, option B (18 Sep). The task rail and the folder column are painted as
   one green sidebar, the lists get room to breathe, and the button you press is green.
   Nothing structural is moved, so every Roundcube behaviour still works. */

:root {
  --rufhub-green: #0b5b4d;
  --rufhub-green-dark: #073b33;
  --rufhub-green-soft: rgba(255, 255, 255, 0.14);
  --rufhub-line: #dfe6e1;
}

body, .username, .listing, .menu, input, select, textarea, button {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- the green sidebar: task rail + folder list read as one ---- */
#layout-menu,
#layout-menu .popover-header,
#layout-sidebar,
#layout-sidebar > .header,
#layout-sidebar .scroller,
#layout-sidebar .folderlist {
  background-color: var(--rufhub-green-dark);
  border-color: rgba(255, 255, 255, 0.12);
}

#layout-menu #taskmenu a,
#layout-sidebar .header,
#layout-sidebar .header a,
#layout-sidebar .listing li a,
#layout-sidebar .listing li a span,
#layout-sidebar .listing li a.name {
  color: #d6e8e2;
}

#layout-menu #taskmenu a:hover,
#layout-sidebar .listing li a:hover {
  background-color: var(--rufhub-green-soft);
  color: #ffffff;
}

#layout-menu #taskmenu a.selected,
#layout-sidebar .listing li.selected > a,
#layout-sidebar .listing li.selected > a span {
  background-color: var(--rufhub-green-soft);
  color: #ffffff;
  font-weight: 700;
}

#layout-sidebar .listing li a .unreadcount,
#layout-sidebar .listing li .unreadcount {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 700;
}

/* Compose reads as the one thing you start with. */
#layout-menu #taskmenu a.compose,
#taskmenu a.compose {
  background-color: #ffffff;
  color: var(--rufhub-green-dark);
  font-weight: 700;
  border-radius: 3px;
  margin: 8px 6px;
}

#layout-menu #taskmenu a.compose:hover {
  background-color: #eaf3ef;
  color: var(--rufhub-green-dark);
}

/* ---- message list: easier to read down the page ---- */
#messagelist tbody tr td,
.messagelist li,
.messagelist tbody tr {
  padding-top: 9px;
  padding-bottom: 9px;
}

.messagelist tr.unread td.subject,
.messagelist li.unread .subject {
  font-weight: 700;
}

.messagelist tr.selected td,
.messagelist li.selected {
  background-color: rgba(11, 117, 98, 0.1);
}

/* ---- buttons: green where you act ---- */
a.button.btn-primary,
button.btn-primary,
.btn-primary,
input.btn-primary,
#messagetoolbar a.button.reply,
.toolbar a.button.reply {
  background-color: var(--rufhub-green);
  border-color: var(--rufhub-green);
  color: #ffffff;
}

a.button.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:hover {
  background-color: var(--rufhub-green-dark);
  border-color: var(--rufhub-green-dark);
  color: #ffffff;
}

a, a:hover {
  color: var(--rufhub-green);
}

#layout-sidebar a,
#layout-menu a {
  color: inherit;
}

/* ---- login: the brand, once, with room around it ---- */
body.task-login #layout,
body.task-login {
  background-color: var(--rufhub-green);
}

body.task-login #login-form .box-inner,
body.task-login #login-form {
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(7, 59, 51, 0.28);
}

body.task-login #login-form .product-name,
.product-name {
  color: var(--rufhub-green-dark);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Reply is the action you take most, so it carries the green. */
.toolbar a.reply,
.toolbar a.reply:hover,
#messagetoolbar a.reply,
a.button.reply {
  color: var(--rufhub-green);
  font-weight: 700;
}

/* The row you are reading, in the brand tint rather than grey. */
#messagelist tr.selected td,
table.messagelist tr.selected td,
.messagelist tr.selected td,
.messagelist li.selected {
  background-color: rgba(11, 91, 77, 0.1);
}

/* The rail runs the full height, with no pale strip under it. */
#layout-menu,
#layout-menu .scroller,
#layout-sidebar,
#layout-sidebar .scroller {
  height: 100%;
}

/* Every part of the sidebar wears the same green, including its footer strip. */
#layout-sidebar > *,
#layout-menu > * {
  background-color: inherit;
}

/* A plain message is shown in typewriter letters by default, which is hard to read
   down a page. Same text, ordinary letters, with room between the lines. */
#messagebody .message-part pre,
#messagebody .message-htmlpart pre,
.message-part div.pre,
#messagebody div.message-part pre {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--rufhub-ink, #151817);
  max-width: 68ch;
}

#messagebody .message-part a,
#messagebody .message-htmlpart a {
  color: var(--rufhub-green);
  font-weight: 600;
}