/* ---------- typography ---------- */
body, input, select, textarea, button, .btn {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- canvas + floating white panels (desktop) ---------- */
html:not(.dark-mode) body:not(.task-login) #layout { background: #eef3f8; }
@media screen and (min-width: 1200px) {
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    margin: 10px 0 10px 10px; border-radius: 14px; overflow: hidden; border: 0 !important;
  }
  body:not(.task-login) #layout-content { margin-right: 10px; }
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar,
  html:not(.dark-mode) body:not(.task-login) #layout-list,
  html:not(.dark-mode) body:not(.task-login) #layout-content {
    background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  }
}
html:not(.dark-mode) .header { background: #fff; border-bottom: 1px solid #e3e8ef; }
html:not(.dark-mode) .header .header-title { color: #1f2937; font-weight: 600; }

/* ---------- left app rail (light, blue icons) ---------- */
html:not(.dark-mode) #layout-menu { background: #eef3f8; border-right: 0; }
html:not(.dark-mode) #layout-menu a,
html:not(.dark-mode) #layout-menu .special-buttons a { color: #5f6b7a; }
#layout-menu #taskmenu a, #layout-menu .special-buttons a { border-radius: 14px; margin: 2px 8px; }
html:not(.dark-mode) #layout-menu a:hover { color: #0b6aa8; background: rgba(11,106,168,.08); }
html:not(.dark-mode) #layout-menu a.selected { color: #0b6aa8; background: rgba(11,106,168,.14); }
/* the big "New mail" button */
#layout-menu a.compose { margin: 10px 8px 14px; border-radius: 16px; }
html:not(.dark-mode) #layout-menu a.compose,
html:not(.dark-mode) #layout-menu a.compose.selected { background: #0b6aa8; color: #fff; box-shadow: 0 2px 6px rgba(11,106,168,.35); }
html:not(.dark-mode) #layout-menu a.compose:hover { background: #0b3d63; color: #fff; }

/* ---------- folders as rounded pills ---------- */
#mailboxlist li > a, .listing.treelist li > a { border-radius: 0 20px 20px 0; margin-right: 10px; border-left: 0 !important; }
html:not(.dark-mode) #mailboxlist li > a { color: #1f2937; }
html:not(.dark-mode) #mailboxlist li > a:hover { background: #f1f4f8; }
html:not(.dark-mode) #mailboxlist li.selected > a { background: rgba(11,106,168,.14); color: #0b3d63; font-weight: 600; }
html:not(.dark-mode) #mailboxlist li.unread > a { font-weight: 700; }
html:not(.dark-mode) .unreadcount { background: transparent; color: #1f2937; font-weight: 700; }
html:not(.dark-mode) #mailboxlist li.selected .unreadcount { color: #0b3d63; }

/* ---------- rounded search bar ---------- */
html:not(.dark-mode) #layout-list .header .searchbar { background: #eef3f8; border-radius: 22px; border: 0; }
html:not(.dark-mode) #layout-list .header .searchbar input { background: transparent; border: 0; }

/* ---------- message list ---------- */
html:not(.dark-mode) #messagelist tr td { border-bottom: 1px solid #f0f3f7; }
html:not(.dark-mode) #messagelist tr:hover td { background: #f5f8fc; }
html:not(.dark-mode) #messagelist tr.unread td { background: #fff; }
html:not(.dark-mode) #messagelist tr.unread .subject a,
html:not(.dark-mode) #messagelist tr.unread .fromto { font-weight: 700; color: #1f2937; }
html:not(.dark-mode) #messagelist tr.unread td:first-child { box-shadow: inset 3px 0 0 #0b6aa8; }
html:not(.dark-mode) #messagelist tr.selected td,
html:not(.dark-mode) #messagelist tr.selected:hover td { background: rgba(11,106,168,.12) !important; color: #1f2937; }
html:not(.dark-mode) #messagelist tr .date, html:not(.dark-mode) #messagelist tr .size { color: #5f6b7a; }
html:not(.dark-mode) #messagelist .flagged .subject a { color: #1f2937; }

/* ---------- links + buttons ---------- */
html:not(.dark-mode) a, html:not(.dark-mode) .link { color: #0b6aa8; }
html:not(.dark-mode) #layout-menu a, html:not(.dark-mode) #mailboxlist a, html:not(.dark-mode) #messagelist a { text-decoration: none; }
.btn, .button.mainaction, button.mainaction { border-radius: 20px; text-transform: none; letter-spacing: 0; }
html:not(.dark-mode) .btn-primary, html:not(.dark-mode) .button.mainaction,
html:not(.dark-mode) button.mainaction, html:not(.dark-mode) input.mainaction {
  background: #0b6aa8; border-color: #0b6aa8; color: #fff;
}
html:not(.dark-mode) .btn-primary:hover, html:not(.dark-mode) .button.mainaction:hover { background: #0b3d63; border-color: #0b3d63; }
html:not(.dark-mode) .toolbar a.button, html:not(.dark-mode) .toolbar a.button:before { color: #5f6b7a; }
html:not(.dark-mode) .toolbar a.button:not(.disabled):hover, html:not(.dark-mode) .toolbar a.button:not(.disabled):hover:before { color: #0b6aa8; }

/* ---------- login: blue gradient + white "Sign in" card ---------- */
body.task-login { background: linear-gradient(135deg, #0b3d63 0%, #0b6aa8 60%, #3a8fd0 100%) fixed; }
body.task-login #layout, body.task-login #layout-content { background: transparent !important; }
body.task-login #logo { max-height: 64px; margin-bottom: 1.5rem; }
body.task-login #login-form {
  background: #fff; border-radius: 16px; padding: 2rem 2rem 1.5rem; max-width: 380px; margin: 0 auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
body.task-login #login-form:before {
  content: "Sign in"; display: block; font-size: 1.6rem; font-weight: 600; color: #1f2937; margin-bottom: .25rem;
}
body.task-login #login-form:after {
  content: "Use your full email address"; display: block; font-size: .85rem; color: #5f6b7a; margin-top: 1rem; text-align: center;
}
body.task-login #login-form .input-group-prepend { display: none; }
body.task-login #login-form input.form-control { border-radius: 10px !important; height: 46px; border: 1px solid #cfd6df; }
body.task-login #login-form input.form-control:focus { border-color: #0b6aa8; box-shadow: 0 0 0 3px rgba(11,106,168,.18); }
body.task-login #login-form button.mainaction { text-transform: none !important; height: 46px; border-radius: 23px; font-size: 1rem; font-weight: 600; margin-top: .5rem; }
body.task-login #login-footer, body.task-login #login-footer a { color: rgba(255,255,255,.9); }
html.dark-mode body.task-login #login-form { background: #22272e; }
html.dark-mode body.task-login #login-form:before { color: #e6edf3; }

/* ---------- tweaks after first look (2026-11-14) ---------- */
/* Elastic paints the logo corner and the bottom buttons dark (#2f3a3f !important): make them match the light rail */
@media screen and (min-width: 481px) {
  html:not(.dark-mode) #layout-menu .popover-header { background-color: #eef3f8 !important; }
}
html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #layout-menu .special-buttons { background-color: #eef3f8 !important; }
html:not(.dark-mode) #layout-menu .special-buttons a.logout { color: #c0392b; }
html:not(.dark-mode) #layout-menu .special-buttons a.logout:hover { background: rgba(192,57,43,.08); }
/* clean pills: no divider lines between folders */
#mailboxlist li, #mailboxlist li > a, #layout-sidebar .listing li { border-top: 0 !important; border-bottom: 0 !important; }
#mailboxlist li > a { padding-top: .45rem; padding-bottom: .45rem; }
/* message list: sender is the prominent line, subject below it */
html:not(.dark-mode) .messagelist td.subject span.fromto { font-size: 95%; color: #1f2937; font-weight: 600; }
html:not(.dark-mode) .messagelist tr.unread td.subject span.fromto { font-weight: 800; }
html:not(.dark-mode) .messagelist td.subject span.subject a { color: #3c4652; }
html:not(.dark-mode) .messagelist tr.unread td.subject span.subject a { color: #1f2937; }

/* ---------- Gmail-style inbox (layout = list, wide screens) ---------- */
/* one line per message: [sender] [subject ...........] [date]; read rows grey, unread rows white + bold */
@media screen and (min-width: 1200px) {
  html.rc-layout-list #messagelist tbody tr td.subject {
    display: flex; align-items: center; gap: 14px; padding: 9px 14px 9px 10px; height: 40px; box-sizing: border-box;
  }
  html.rc-layout-list #messagelist tbody tr td.subject span.fromto {
    order: 1; flex: 0 0 210px; padding-left: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.rc-layout-list #messagelist tbody tr td.subject span.subject {
    order: 2; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 95%;
  }
  html.rc-layout-list #messagelist tbody tr td.subject span.date { order: 3; flex: 0 0 auto; margin-left: auto; font-size: 85%; }
  html.rc-layout-list #messagelist tbody tr td.subject span.size { display: none; }
  html.rc-layout-list #messagelist tbody tr td.subject span.msgicon.status:not(.replied):not(.forwarded) { visibility: hidden; width: 0; margin: 0; }
  html.rc-layout-list #messagelist tbody tr td.flags { padding-right: 12px; }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr td { background: #f2f6fc; border-bottom: 1px solid #e6ebf2; }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr.unread td { background: #fff; }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr.unread td:first-child { box-shadow: none; }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr.unread td.subject span.date { font-weight: 700; color: #1f2937; }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr:hover td {
    box-shadow: 0 1px 2px rgba(60,64,67,.25), 0 1px 3px 1px rgba(60,64,67,.12); position: relative; z-index: 1;
  }
  html.rc-layout-list:not(.dark-mode) #messagelist tbody tr.selected td { background: #c2dbff !important; }
}
/* ---------- Webmail shell: top header bar + coloured canvas + sidebar + one white panel (desktop) ---------- */
/* Header = Elastic's #layout-menu turned into a horizontal bar; Compose sits at the top of the sidebar. */
@media screen and (min-width: 1200px) {
  html:not(.dark-mode) body:not(.task-login) { background: linear-gradient(135deg, #0b3d63 0%, #0b6aa8 70%, #3a8fd0 100%) fixed; }
  body:not(.task-login) #layout { padding-top: 64px; box-sizing: border-box; background: transparent !important; }

  /* header bar */
  body:not(.task-login) #layout-menu {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; width: auto !important; max-width: none !important;
    display: flex; flex-direction: row; align-items: center; padding: 0 12px 0 16px; z-index: 20;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  body:not(.task-login) #layout-menu .popover-header { background: transparent !important; height: 64px; line-height: 64px; width: 230px; text-align: left; }
  body:not(.task-login) #layout-menu #logo { height: 40px; width: auto; max-width: 220px; max-height: none; margin: 12px 0 0; }
  body:not(.task-login) #taskmenu { display: flex; flex-direction: row; align-items: center; margin-left: auto; height: 64px; position: static; width: auto; }
  body:not(.task-login) #taskmenu a, body:not(.task-login) #taskmenu .special-buttons a {
    color: rgba(255,255,255,.92) !important; background: transparent; width: auto; min-width: 64px; height: 52px; margin: 0 2px; padding: 4px 10px 0;
    border-radius: 12px; font-size: 75%;
  }
  body:not(.task-login) #taskmenu a:hover, body:not(.task-login) #taskmenu a.selected { background: rgba(255,255,255,.16) !important; color: #fff !important; }
  body:not(.task-login) #taskmenu .special-buttons { position: static; display: flex; flex-direction: row; background: transparent !important; margin-left: 8px; }
  html:not(.dark-mode) body:not(.task-login) #taskmenu .special-buttons a.logout { color: #ffd7d2 !important; }

  /* Compose: white pill at the top of the sidebar */
  body:not(.task-login) #taskmenu a.compose {
    position: fixed; top: 76px; left: 16px; width: 160px !important; min-width: 160px !important; max-width: none !important; overflow: visible !important; height: 56px; margin: 0; padding: 0 18px; z-index: 21;
    display: flex; align-items: center; gap: 12px; border-radius: 18px; font-size: 1rem; font-weight: 600;
    background: #fff !important; color: #1f2937 !important; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }
  body:not(.task-login) #taskmenu a.compose:hover { box-shadow: 0 4px 10px rgba(0,0,0,.3); background: #fff !important; }
  body:not(.task-login) #taskmenu a.compose:before { margin: 0; font-size: 1.2rem; color: #0b6aa8; }
  body:not(.task-login) #taskmenu a.compose span.inner { display: inline !important; width: auto !important; overflow: visible !important; white-space: nowrap; }

  /* sidebar on the canvas, white text */
  body:not(.task-login) #layout-sidebar {
    flex: 0 0 256px !important; max-width: 256px !important; min-width: 256px !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important; padding-top: 76px;
  }
  body.task-mail #layout-sidebar > .header { display: none; }
  body:not(.task-login) #layout-sidebar .header { background: transparent; border: 0; }
  body:not(.task-login) #layout-sidebar .header .header-title { color: #fff; }
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .listing li > a,
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .listing li > a:before,
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .unreadcount { color: rgba(255,255,255,.95) !important; background: transparent; }
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .listing li > a:hover { background: rgba(255,255,255,.12) !important; }
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .listing li.selected > a { background: rgba(255,255,255,.26) !important; color: #fff !important; font-weight: 700; }
  body:not(.task-login) #layout-sidebar .listing li > a { border-radius: 0 20px 20px 0; padding-left: 26px; }
  html:not(.dark-mode) body:not(.task-login) #layout-sidebar .footer, html:not(.dark-mode) body:not(.task-login) #layout-sidebar .footer * { background: transparent !important; color: rgba(255,255,255,.85); border: 0; }

  /* the white working panel(s) */
  body:not(.task-login) #layout-list, body:not(.task-login) #layout-content {
    margin: 4px 16px 16px 4px !important; border-radius: 18px !important; overflow: hidden;
  }
  html:not(.dark-mode) body:not(.task-login) #layout-list, html:not(.dark-mode) body:not(.task-login) #layout-content { background: #fff !important; }
  html.rc-layout-list body.task-mail #layout-list { flex: 1 1 auto !important; max-width: none !important; }
  html:not(.dark-mode) body:not(.task-login) #layout-list > .header, html:not(.dark-mode) body:not(.task-login) #layout-content > .header { background: #fff; }

  /* search moves into the header bar (mail list view) */
  body.task-mail #layout-list > .searchbar {
    position: fixed !important; top: 10px; left: 270px; width: min(720px, 46vw); height: 46px; z-index: 22; margin: 0;
    border-radius: 24px; display: flex; align-items: center;
  }
  html:not(.dark-mode) body.task-mail #layout-list > .searchbar { background: rgba(255,255,255,.92) !important; }
  body.task-mail #layout-list > .searchbar input { background: transparent !important; font-size: 1rem; }
}

/* Gmail-style rows, list layout: star column first, then sender, subject, date */
@media screen and (min-width: 1200px) {
  html.rc-layout-list #messagelist tbody { display: block; }
  html.rc-layout-list #messagelist tbody tr { display: flex; width: 100%; align-items: stretch; }
  html.rc-layout-list #messagelist tbody tr td { display: flex; align-items: center; }
  html.rc-layout-list #messagelist tbody tr td.selection { order: 0; }
  html.rc-layout-list #messagelist tbody tr td.flags { order: 1; flex: 0 0 auto; padding: 0 6px 0 14px; }
  html.rc-layout-list #messagelist tbody tr td.threads { order: 2; flex: 0 0 auto; }
  html.rc-layout-list #messagelist tbody tr td.subject { order: 3; flex: 1 1 auto; min-width: 0; }
  html.rc-layout-list #messagelist td.flags span.attachment { display: none; }
}

/* flagged mail in gold (Elastic's icon font has no star glyph, so its own flag icon is kept) */
html:not(.dark-mode) #messagelist td.flags span.flag span.flagged:before { color: #f4b400; }