/* M&R Mail — M&R Blue, the default look.
 *
 * The company blue carried to the canvas. Everything here is a SURFACE, not a fill:
 * each panel has a direction of light, a lit top edge and a shadow underneath, so the
 * three columns read as cards lying on a desk rather than coloured rectangles butted
 * together. The depth scale itself lives in base.css; this file decides the colours
 * and which way the light falls.
 *
 * The message list stays near-white on purpose. It is the part people read for hours,
 * and tinting it would spend legibility on decoration.
 */

:root {
  --mb-navy:    #0b1b33;   /* the rail and the headers */
  --mb-navy-hi: #16304f;   /* its lit edge */
  --mb-blue:    #0146e8;   /* M&R blue, the accent */
  --mb-ink:     #16202e;
  --mb-ink-2:   #5a6a7e;
  --mb-page:    #e8edf4;
  --mb-panel:   #ffffff;

  --t-rail: #0b1b33;
  --t-rail-ink: #b7c8e2;
  --t-accent: #0146e8;
  --t-sel: #0146e8;
}

/* ---- the desk the cards lie on ----
   A flat page makes floating panels look like a mistake. A very shallow vertical
   gradient, plus a cool pool of light at the top left — which is where the highlight
   on every panel implies the light is coming from. */
body, #layout {
  background-color: var(--mb-page) !important;
  background-image:
    radial-gradient(1100px 520px at 12% -12%, rgba(1,70,232,.10), transparent 62%),
    linear-gradient(180deg, #eef2f8 0%, #e2e8f1 100%) !important;
  background-attachment: fixed !important;
}

/* ---- rail ---- */
#taskmenu, #layout-menu {
  background-color: var(--mb-navy) !important;
  background-image: linear-gradient(180deg, var(--mb-navy-hi) 0%, var(--mb-navy) 22%, #081528 100%) !important;
  border-right: 1px solid #050e1c !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 3px 0 14px rgba(5,14,28,.30) !important;
}
#taskmenu a { color: #9fb6d8 !important; }
#taskmenu a:hover { color: #fff !important; background-color: rgba(255,255,255,.07) !important; }
#taskmenu a.selected {
  color: #fff !important;
  background-image: linear-gradient(180deg, #2a6bff 0%, var(--mb-blue) 55%, #0b3fc4 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 8px rgba(1,70,232,.45) !important;
}
#taskmenu a.selected:before { background: transparent !important; }

/* ---- headers: dark bands with a lit top edge ---- */
#layout > .header, #layout-list > .header, #layout-content > .header,
#layout-sidebar > .header, #layout-list #messagelist-header {
  background-color: var(--mb-navy) !important;
  background-image: linear-gradient(180deg, #16304f 0%, #0d2039 100%) !important;
  color: #eaf1ff !important;
  border-bottom: 1px solid #061225 !important;
}
/* ⚠️ Anchored to #layout. A bare `.header a` also matches markup inside the OPEN
   MESSAGE iframe, where the surface is white — the "Details" and "Headers" links came
   out at 1.13:1, effectively invisible, while the app chrome looked fine. */
#layout > .header a, #layout > .header .username, #layout > .header .header-title,
#layout-list > .header a, #layout-list > .header .header-title,
#layout-content > .header a, #layout-content > .header .header-title,
#layout-sidebar > .header a, #layout-sidebar > .header .username,
#messagelist-header a, #messagelist-header .header-title { color: #eaf1ff !important; }
#toolbar-menu > li > a, #toolbar-list-menu > li > a,
#toolbar-menu > li > a span.inner, #toolbar-list-menu > li > a span.inner,
#messagetoolbar a, #messagetoolbar a span.inner { color: #dce7f8 !important; }
#toolbar-menu > li > a:hover, #toolbar-list-menu > li > a:hover {
  background-color: rgba(255,255,255,.10) !important;
}
#toolbar-menu > li > a.disabled, #toolbar-list-menu > li > a.disabled,
#toolbar-menu > li > a.disabled span.inner, #toolbar-list-menu > li > a.disabled span.inner {
  color: rgba(220,231,248,.50) !important;
}

/* ---- panels ---- */
#layout-sidebar { background-color: #f7f9fc !important; }
#layout-list    { background-color: var(--mb-panel) !important; }
#layout-content { background-color: var(--mb-panel) !important; }

/* ---- folders ---- */
#mailboxlist li > a { color: #324257 !important; font-weight: 500; }
#mailboxlist li > a:hover { background-color: rgba(1,70,232,.08) !important; }
#mailboxlist li.selected > a {
  color: #fff !important;
  background-image: linear-gradient(180deg, #2a6bff 0%, var(--mb-blue) 60%, #0b3fc4 100%) !important;
}
#mailboxlist li.selected > a .unreadcount,
#mailboxlist li.selected > a .badge { background-color: rgba(255,255,255,.24) !important; color: #fff !important; }
#mailboxlist .unreadcount, #mailboxlist .badge {
  background-color: var(--mb-blue) !important;
  color: #fff !important;
}

/* ---- compose ---- */
#layout-sidebar a.mr-compose {
  background-image: linear-gradient(180deg, #2a6bff 0%, var(--mb-blue) 55%, #0b3fc4 100%) !important;
  border: 1px solid #0b3fc4 !important;
}
#layout-sidebar a.mr-compose:hover {
  background-image: linear-gradient(180deg, #3d79ff 0%, #0a4ef0 55%, #0f47d0 100%) !important;
}

/* ---- message list ----
   Read rows sit on the panel; unread rows take a faint blue wash and a heavier subject,
   so the inbox has a scannable rhythm instead of fifty identical bands. */
#messagelist, .messagelist, #messagelist tbody, .webkit-scroller {
  background-color: var(--mb-panel) !important;
}
#messagelist tbody tr > td { background-color: #fbfcfe !important; }
#messagelist tbody tr.unread > td { background-color: #f3f7ff !important; }
#messagelist tbody tr:hover > td { background-color: #eef3fd !important; }

#messagelist td, #messagelist th,
#messagelist td.subject, #messagelist td.subject span, #messagelist td.subject a,
#messagelist .subject .inner, #messagelist td.fromto, #messagelist td.fromto span,
#messagelist td.size { color: var(--mb-ink) !important; }
#messagelist td.date, #messagelist td.date span { color: var(--mb-ink-2) !important; }
#messagelist tr.unread td.subject, #messagelist tr.unread td.subject span,
#messagelist tr.unread .subject .inner { color: #091626 !important; font-weight: 700 !important; }

#messagelist tbody tr.selected > td,
#messagelist tbody tr.selected > td span,
#messagelist tbody tr.selected td.subject span {
  background-color: var(--mb-blue) !important;
  color: #ffffff !important;
}
#messagelist tbody tr.selected > td.date,
#messagelist tbody tr.selected > td.date span { color: #e3ecff !important; }
#messagelist tr { border-bottom: 1px solid #eaeff7 !important; }

/* ---- search ---- */
.searchbar, .searchbar input {
  background-color: #f2f5fa !important;
  color: var(--mb-ink) !important;
  border: 1px solid #d3dce9 !important;
}
.searchbar input::placeholder { color: #7b8aa0 !important; }

/* ---- buttons ---- */
.btn-primary, a.btn-primary, button.btn-primary,
button[type="submit"], input[type="submit"] {
  background-image: linear-gradient(180deg, #2a6bff 0%, var(--mb-blue) 55%, #0b3fc4 100%) !important;
  border: 1px solid #0b3fc4 !important;
  color: #fff !important;
  font-weight: 600;
}
.btn-primary:hover, button[type="submit"]:hover {
  background-image: linear-gradient(180deg, #3d79ff 0%, #0a4ef0 55%, #0f47d0 100%) !important;
}

a { color: var(--mb-blue); }

/* ---- login ---- */
body.task-login {
  background-color: #081528 !important;
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(1,70,232,.35), transparent 60%),
    linear-gradient(180deg, #11263f 0%, #060f1d 100%) !important;
}

/* ---- empty reading pane ----
   Themed only with nothing selected, where the frame holds Elastic's watermark. An
   open message keeps a white page: that iframe is the sender's HTML, which assumes a
   light background, and darkening it yields dark-on-dark in real mail. */
body.action-none #messagecontframe, body.action-none #messagecontent,
body.action-none #preview-frame { background-color: #f4f7fb !important; }