/* ====================================================================
   Digital Harbor — Roundcube Elastic skin overrides
   - Login page: Digital Harbor branding (cyan gradient, white card, D-icon button)
   - Post-login: Microsoft Outlook visual language with DH brand accents
   ==================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --dh-primary:       #5ACDED;
  --dh-primary-dark:  #1491b4;
  --dh-primary-darker:#0e6f8a;
  --dh-bg-soft:       #f6fafd;
  --dh-text:          #1a2332;
  --dh-text-muted:    #5a6b7d;
  --dh-card-bg:       #ffffff;
  --dh-border:        #e3ebf2;
  --dh-shadow:        0 20px 60px -15px rgba(20, 145, 180, 0.25),
                       0 8px 20px -8px rgba(0, 0, 0, 0.08);
  --ol-row-hover:     #f5f5f5;
  --ol-row-sep:       #f3f2f1;
  --ol-side-bg:       #faf9f8;
  --ol-side-border:   #e1dfdd;
}




/* ====================================================================
   LOGIN PAGE — Digital Harbor (SOGo 2-column card, rebuilt for Elastic)
   Left:  cyan gradient panel + white logo.  Right: Sign in + form.
   DOM (real): #login-form.propform > table > tbody > tr > td.title|td.input
               Elastic JS may wrap inputs in .input-group/.input-group-prepend
   ==================================================================== */

/* ---------- Page background: soft brand wash (lets the card's cyan panel pop) ---------- */
body.task-login {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(90, 205, 237, 0.18), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(20, 145, 180, 0.15), transparent 55%),
    linear-gradient(135deg, #eaf6fb 0%, #f6fafd 50%, #eaf6fb 100%) !important;
  background-attachment: fixed !important;
  font-family: "Inter", "Segoe UI", -apple-system, sans-serif !important;
  color: var(--dh-text) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* ---------- Brand cursor: Digital Harbor cyan arrow (white outline so it shows
   on the cyan panel, the white card and the light background) ---------- */
body.task-login,
body.task-login #layout,
body.task-login #layout-content,
body.task-login #login-form,
body.task-login #login-form table,
body.task-login #login-footer {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M4 1.5 L4 25 L9.2 20 L12.4 28.2 L15 27 L11.8 19 L18 19 Z" fill="%235ACDED" stroke="%23ffffff" stroke-width="1.6" stroke-linejoin="round"/></svg>') 4 2, auto !important;
}

/* Wrappers GROW to fill the viewport (flex:1), then the innermost one centers
   the card on both axes. No nested min-height:100vh (that overflowed) and no
   display:contents (didn't reliably promote the card). */
body.task-login #layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
}
body.task-login #layout-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: auto !important;
  position: relative !important;   /* sit above the net canvas (z-index:0) so the card covers the nets */
  z-index: 1 !important;
}

/* Animated connected-nets background canvas (created by dh-netbg.js).
   z-index:-1 keeps it BEHIND all page content (over the body gradient, under the
   card) so it can never intercept clicks; pointer-events:none for belt-and-braces. */
body.task-login #dh-netbg {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;            /* in the content layer (above the body gradient), card sits above at z-index:1 */
  pointer-events: none !important;
  display: block !important;
}

/* Hide Roundcube's default logo — we draw our own on the cyan panel */
body.task-login #logo { display: none !important; }

/* ---------- The card ---------- */
body.task-login #login-form {
  position: relative !important;
  top: 0 !important;          /* override Elastic's default `top: 20vh` that pushed the card down */
  display: block !important;
  width: 880px !important;
  max-width: 94vw !important;
  min-height: 520px !important;
  background: var(--dh-card-bg) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--dh-shadow) !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  /* reserve a FIXED 360px for the cyan panel (NOT a %, which resolves against
     the containing block and blows the card up). Form lives in the right column. */
  padding: 70px 52px 60px 412px !important;
}

/* Left cyan gradient panel */
body.task-login #login-form::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 360px !important;
  background:
    radial-gradient(420px 420px at 25% 18%, rgba(255,255,255,0.20), transparent 60%),
    radial-gradient(320px 320px at 82% 88%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(160deg, var(--dh-primary) 0%, var(--dh-primary-dark) 100%) !important;
  pointer-events: none !important;
}

/* White logo centered on the cyan panel */
body.task-login #login-form::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 360px !important;
  background-image: url("../images/brand/logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 72% auto !important;
  filter: brightness(0) invert(1) !important;
  pointer-events: none !important;
}

/* ---------- Right column: heading + form ---------- */
body.task-login #login-form table,
body.task-login #login-form tbody {
  display: block !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

/* The interactive form MUST sit above the decorative ::before/::after panel and
   logo (which are positioned and otherwise paint over the form, intercepting
   clicks on the left side of the fields and the button). */
body.task-login #login-form table,
body.task-login #login-form .formbuttons,
body.task-login #login-form #login-footer {
  position: relative !important;
  z-index: 5 !important;
}

/* "Sign in" heading above the first field */
body.task-login #login-form table::before {
  content: "Sign in" !important;
  display: block !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 4px !important;
}
/* Subhead */
body.task-login #login-form table::after {
  /* nothing — kept clear so it doesn't collide with rows */
}

body.task-login #login-form tr {
  display: block !important;
  margin-bottom: 22px !important;
}
body.task-login #login-form td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
}

/* First row gets a little breathing room under the heading */
body.task-login #login-form tr:first-child {
  margin-top: 26px !important;
}

/* Field labels removed — the input placeholders are enough */
body.task-login #login-form td.title {
  display: none !important;
}

/* Inputs — the <input> ITSELF is the visible box, so the clickable element is
   exactly what you see (no wrapper/overlay games). td.input is just a relative
   positioning context for the decorative icon. */
body.task-login #login-form td.input {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  height: auto !important;
}

/* Elastic's icon (.input-group-prepend > i.input-group-text) becomes a pure
   decoration pinned over the input's left padding — click-through. */
body.task-login #login-form .input-group-prepend {
  position: absolute !important;
  left: 14px !important;
  top: 25px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;   /* never steal a click meant for the input */
  z-index: 4 !important;             /* above the focused input (Bootstrap gives it z-index:3), else its white bg hides the icon */
  display: inline-flex !important;
  align-items: center !important;
}
body.task-login #login-form .input-group-text {
  position: static !important;       /* stay inside the wrapper; don't stack a 2nd absolute offset */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--dh-text-muted) !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
body.task-login #login-form .input-group-text svg,
body.task-login #login-form .input-group-text .font-icon,
body.task-login #login-form .input-group-text i {
  color: var(--dh-text-muted) !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}
/* drop any password-visibility append for simplicity */
body.task-login #login-form .input-group-append { display: none !important; }

/* The input is the box — full size, on top, obviously clickable */
body.task-login #login-form input.form-control,
body.task-login #login-form #rcmloginuser,
body.task-login #login-form #rcmloginpwd {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: #eef4f9 !important;
  border: 1.5px solid var(--dh-border) !important;
  border-radius: 10px !important;
  padding: 0 14px 0 42px !important;   /* left pad leaves room for the icon */
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--dh-text) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: text !important;
}
body.task-login #login-form input.form-control:focus,
body.task-login #login-form #rcmloginuser:focus,
body.task-login #login-form #rcmloginpwd:focus {
  border-color: var(--dh-primary-dark) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(20, 145, 180, 0.12) !important;
}

/* ---------- Submit button — D-icon pill ---------- */
body.task-login .formbuttons {
  text-align: left !important;
  margin: 34px 0 0 !important;
}
body.task-login button.mainaction,
body.task-login #rcmloginsubmit {
  /* white D-icon layered directly on the gradient — pseudo-elements don't
     render reliably on <button>, so we use a real background image */
  background:
    url("../images/brand/d-icon-white.png") center / auto 56% no-repeat,
    linear-gradient(160deg, var(--dh-primary-dark) 0%, var(--dh-primary-darker) 100%) !important;
  color: transparent !important;
  border: none !important;
  border-radius: 28px !important;
  height: 54px !important;
  width: 120px !important;
  min-width: 120px !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px -8px rgba(20, 145, 180, 0.55) !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, transform 0.05s ease !important;
}
body.task-login button.mainaction:hover,
body.task-login #rcmloginsubmit:hover { filter: brightness(1.08) !important; }
body.task-login button.mainaction:active,
body.task-login #rcmloginsubmit:active { transform: translateY(1px) !important; }
body.task-login button.mainaction:disabled,
body.task-login #rcmloginsubmit:disabled {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}

/* ---------- Footer inside the card ---------- */
body.task-login #login-footer {
  font-size: 0 !important;
  text-align: left !important;
  margin-top: 28px !important;
}
body.task-login #login-footer::after {
  content: "Digital Harbor Mail" !important;
  font-size: 12px !important;
  color: var(--dh-text-muted) !important;
  letter-spacing: 0.4px !important;
}

/* ---------- Roundcube info/error messages (logout notice, bad password) ----------
   CRITICAL: Elastic sets #messagestack { bottom:.5em; height:auto }. If we set
   `top` without clearing `bottom`, the element gets BOTH top+bottom -> it stretches
   to full viewport height (320px wide, centered, z-index:9999) and becomes an
   invisible blanket over the centered login form, blocking ALL clicks.
   So we MUST reset bottom/right and let height be auto (0 when empty). */
body.task-login #messagestack {
  position: fixed !important;
  top: 24px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 90vw !important;
  height: auto !important;
  z-index: 9999 !important;
}
body.task-login #messagestack .alert,
body.task-login #messagestack > div {
  background: rgba(255,255,255,0.97) !important;
  color: var(--dh-text) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* Noscript warning */
body.task-login .noscriptwarning {
  background: rgba(255,255,255,0.95) !important;
  color: var(--dh-text) !important;
  padding: 14px !important;
  border-radius: 10px !important;
  margin-top: 14px !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Mobile: stack into a single column with a cyan top band ---------- */
@media (max-width: 760px) {
  body.task-login #login-form {
    width: 400px !important;
    min-height: auto !important;
    padding: 150px 32px 44px !important;
  }
  body.task-login #login-form::before {
    width: 100% !important;
    height: 120px !important;
    bottom: auto !important;
  }
  body.task-login #login-form::after {
    width: 100% !important;
    height: 120px !important;
    bottom: auto !important;
    background-size: auto 58px !important;
  }
  body.task-login #login-form tr:first-child { margin-top: 18px !important; }
}
/* ====================================================================
   POST-LOGIN — Microsoft "New Outlook" (web) clone, real Outlook blue.
   Full clone: drops DH cyan from the webmail chrome (login page keeps cyan).
   Targets the REAL Elastic DOM:
     #taskmenu (far-left rail) · #layout-sidebar > .folderlist/.treelist
     #layout-list > .messagelist (rows: td.subject > span.fromto/.date/.subject)
     #layout-content (reading pane) · .toolbar.menu · .header
   Excludes body.task-login entirely.
   NOTE: per-row avatar circles and body-preview snippets are NOT rendered by
   Roundcube's Elastic list, so those two Outlook traits can't be added by CSS.
   ==================================================================== */

/* New-Outlook / Fluent blue palette — NEW names only, so the cyan login vars
   (--dh-primary*) are left completely untouched. */
:root {
  --ol-blue:         #0078d4;   /* communication blue (primary) */
  --ol-blue-hover:   #106ebe;
  --ol-blue-pressed: #005a9e;
  --ol-blue-tint:    rgba(0,120,212,0.08);  /* row hover/selected wash */
  --ol-blue-tint-2:  rgba(0,120,212,0.12);  /* folder selected pill */
  --ol-ink:          #242424;   /* primary text */
  --ol-ink-muted:    #616161;   /* secondary text */
  --ol-rail-bg:      #faf9f8;
  --ol-pane-bg:      #ffffff;
}

body:not(.task-login),
body:not(.task-login) #layout {
  font-family: "Segoe UI", "Segoe UI Web (West European)",
               -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  background: #ffffff !important;
  color: var(--ol-ink) !important;
}

/* ---------- Far-left task rail — light, gray glyphs, blue accent.
   The dark background lives on the CONTAINER #layout-menu, not #taskmenu. ---------- */
body:not(.task-login) #layout-menu,
body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #taskmenu,
body:not(.task-login) .taskmenu,
body:not(.task-login) #taskmenu .special-buttons,
body:not(.task-login) #taskmenu .action-buttons,
body:not(.task-login) #layout-menu .menu {
  background: var(--ol-rail-bg) !important;
  background-color: var(--ol-rail-bg) !important;
  background-image: none !important;
  border: none !important;
  border-right: 1px solid var(--ol-side-border) !important;
}
/* bottom utility buttons (Dark mode / About / Logout) — gray, blue hover */
body:not(.task-login) #taskmenu .special-buttons a,
body:not(.task-login) #taskmenu .action-buttons a {
  color: var(--ol-ink-muted) !important;
  background: transparent !important;
}
body:not(.task-login) #taskmenu .special-buttons a:before,
body:not(.task-login) #taskmenu .action-buttons a:before { color: var(--ol-ink-muted) !important; }
body:not(.task-login) #taskmenu .special-buttons a:hover,
body:not(.task-login) #taskmenu .action-buttons a:hover {
  background: #ecebe9 !important;
  color: var(--ol-blue) !important;
}
body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu .button {
  color: var(--ol-ink-muted) !important;
  fill: var(--ol-ink-muted) !important;
  font-size: 11px !important;
  border: none !important;
}
body:not(.task-login) #taskmenu a:before,
body:not(.task-login) #taskmenu .button:before { color: var(--ol-ink-muted) !important; }
body:not(.task-login) #taskmenu a:hover {
  background: #ecebe9 !important;
  color: var(--ol-blue) !important;
}
body:not(.task-login) #taskmenu a:hover:before { color: var(--ol-blue) !important; }
body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu .button.selected {
  background: var(--ol-blue-tint-2) !important;
  color: var(--ol-blue) !important;
  box-shadow: inset 3px 0 0 var(--ol-blue) !important;
}
body:not(.task-login) #taskmenu a.selected:before { color: var(--ol-blue) !important; }

/* "New mail" = Compose, styled as Outlook's blue primary button */
body:not(.task-login) #taskmenu a.compose,
body:not(.task-login) a.compose.button {
  background: var(--ol-blue) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  margin: 8px 6px 2px 6px !important;
}
body:not(.task-login) #taskmenu a.compose:before,
body:not(.task-login) a.compose.button:before { color: #ffffff !important; }
body:not(.task-login) #taskmenu a.compose:hover {
  background: var(--ol-blue-hover) !important;
  color: #ffffff !important;            /* stay white on hover (override the generic blue-text hover) */
}
body:not(.task-login) #taskmenu a.compose:hover:before { color: #ffffff !important; }

/* collapse the empty .popover-header that used to hold the rail logo (logo now in top bar) */
body:not(.task-login) #layout-menu .popover-header {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ---------- Folder sidebar (#layout-sidebar) ---------- */
body:not(.task-login) #layout-sidebar {
  background: var(--ol-side-bg) !important;
  border-right: 1px solid var(--ol-side-border) !important;
}
body:not(.task-login) #layout-sidebar > .header,
body:not(.task-login) #layout-sidebar .header {
  background: var(--ol-side-bg) !important;
  border-bottom: 1px solid var(--ol-side-border) !important;
}
body:not(.task-login) .header-title.username,
body:not(.task-login) #layout-sidebar .header-title {
  font-weight: 600 !important;
  color: var(--ol-ink) !important;
  font-size: 14px !important;
}

/* Folder list — New-Outlook fully-rounded selected pill (no left bar) */
body:not(.task-login) .folderlist li a,
body:not(.task-login) .treelist.folderlist li a,
body:not(.task-login) #layout-sidebar .listing li a {
  font-size: 13.5px !important;
  color: var(--ol-ink) !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  margin: 1px 6px !important;
}
body:not(.task-login) .folderlist li a:hover,
body:not(.task-login) #layout-sidebar .listing li:hover > a {
  background: #ededed !important;
}
body:not(.task-login) .folderlist li.selected > a,
body:not(.task-login) .treelist.folderlist li.selected > a,
body:not(.task-login) #layout-sidebar .listing li.selected > a {
  background: var(--ol-blue-tint-2) !important;
  color: var(--ol-blue-pressed) !important;
  font-weight: 600 !important;
}
/* Folder icons tinted on selected */
body:not(.task-login) .folderlist li.selected > a:before {
  color: var(--ol-blue) !important;
}
/* Unread count — New Outlook shows a plain blue number, not a filled pill */
body:not(.task-login) .unreadcount,
body:not(.task-login) .folderlist .unreadcount {
  background: transparent !important;
  color: var(--ol-blue) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 2px !important;
  border-radius: 0 !important;
}

/* ---------- Pane headers + toolbars (clean command bar) ---------- */
body:not(.task-login) #layout-list > .header,
body:not(.task-login) #layout-content > .header,
body:not(.task-login) .header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ol-side-border) !important;
}
body:not(.task-login) .toolbar.menu,
body:not(.task-login) .toolbar {
  background: #ffffff !important;
  border: none !important;
}
body:not(.task-login) .toolbar a.button,
body:not(.task-login) .toolbar .button {
  color: var(--ol-ink) !important;
  border-radius: 4px !important;
}
body:not(.task-login) .toolbar a.button:not(.disabled):hover,
body:not(.task-login) .toolbar .button:not(.disabled):hover {
  background: #f3f2f1 !important;
  color: var(--ol-blue) !important;
}
body:not(.task-login) .toolbar a.button:before,
body:not(.task-login) .toolbar .button:before {
  color: var(--ol-blue) !important;
}
body:not(.task-login) .toolbar a.button.disabled,
body:not(.task-login) .toolbar a.button.disabled:before {
  color: #c8c6c4 !important;
  opacity: 1 !important;
}

/* Search — Outlook rounded pill, blue focus ring */
body:not(.task-login) .searchbar,
body:not(.task-login) #mailsearchform {
  background: #f3f2f1 !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
}
body:not(.task-login) .searchbar:focus-within,
body:not(.task-login) #mailsearchform:focus-within {
  background: #ffffff !important;
  border-color: var(--ol-blue) !important;
  box-shadow: 0 0 0 2px rgba(0,120,212,0.25) !important;
}
body:not(.task-login) .searchbar input { background: transparent !important; border: none !important; }

/* ---------- Message list — Outlook 2-line compact rows ---------- */
body:not(.task-login) .messagelist { background: #ffffff !important; }
body:not(.task-login) .messagelist tr {
  border-bottom: 1px solid var(--ol-row-sep) !important;
}
body:not(.task-login) .messagelist tr:hover { background: var(--ol-row-hover) !important; }
body:not(.task-login) .messagelist td { padding: 8px 10px !important; vertical-align: middle !important; }

/* line 1: sender (left, semibold) + date (right, muted) */
body:not(.task-login) .messagelist td.subject span.fromto {
  font-weight: 600 !important;
  color: var(--ol-ink) !important;
  font-size: 13.5px !important;
}
body:not(.task-login) .messagelist td.subject span.date {
  color: var(--ol-ink-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
/* line 2: subject (muted) */
body:not(.task-login) .messagelist td.subject span.subject,
body:not(.task-login) .messagelist td.subject .subject {
  color: var(--ol-ink-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Unread — bold + blue status dot/bar (Outlook blue) */
body:not(.task-login) .messagelist tr.unread td.subject span.fromto {
  font-weight: 700 !important;
  color: var(--ol-ink) !important;
}
body:not(.task-login) .messagelist tr.unread td.subject span.subject,
body:not(.task-login) .messagelist tr.unread td.subject .subject {
  color: var(--ol-ink) !important;
  font-weight: 600 !important;
}
body:not(.task-login) .messagelist td.subject span.msgicon.status.unread:before,
body:not(.task-login) .messagelist td.subject span.msgicon.status.unreadchildren:before {
  color: var(--ol-blue) !important;
}
/* blue left accent bar on unread rows (on the flags cell so it hugs the edge) */
body:not(.task-login) .messagelist tr.unread td.flags {
  box-shadow: inset 3px 0 0 var(--ol-blue) !important;
}

/* Selected row — light blue wash + blue left accent (New Outlook) */
body:not(.task-login) .messagelist tr.selected,
body:not(.task-login) .messagelist tr.focused {
  background: var(--ol-blue-tint) !important;
}
body:not(.task-login) .messagelist tr.selected td,
body:not(.task-login) .messagelist tr.focused td {
  background: transparent !important;
  color: var(--ol-ink) !important;
}
body:not(.task-login) .messagelist tr.selected td.flags {
  box-shadow: inset 3px 0 0 var(--ol-blue) !important;
}
body:not(.task-login) .messagelist tr.selected td.subject span.date { color: var(--ol-blue-pressed) !important; }

/* Row icons */
body:not(.task-login) .messagelist span.flagged:before { color: #d13438 !important; }
body:not(.task-login) .messagelist span.attachment span:before { color: #8a8886 !important; }

/* ---------- Reading pane (#layout-content) ---------- */
body:not(.task-login) #layout-content,
body:not(.task-login) .messageframe,
body:not(.task-login) #messagecontent {
  background: #ffffff !important;
}
body:not(.task-login) #messageheader,
body:not(.task-login) .message-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ol-side-border) !important;
  padding: 16px 20px !important;
}
body:not(.task-login) #messageheader .subject,
body:not(.task-login) .message-header .subject {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ol-ink) !important;
  letter-spacing: -0.2px !important;
}
body:not(.task-login) #messageheader .header-headers .header-name,
body:not(.task-login) #messageheader .header-value {
  font-size: 13px !important;
  color: var(--ol-ink-muted) !important;
}
body:not(.task-login) #messageheader a,
body:not(.task-login) #messageheader .rcmContactAddress {
  color: var(--ol-blue-pressed) !important;
}
/* sender avatar tint (reading pane has one even though the list does not) */
body:not(.task-login) #messageheader .contactphoto,
body:not(.task-login) .contactphoto {
  background-color: var(--ol-blue) !important;
}

/* ---------- Buttons / controls — Outlook flat blue ---------- */
body:not(.task-login) .btn-primary,
body:not(.task-login) .button.mainaction,
body:not(.task-login) button.mainaction,
body:not(.task-login) .formbuttons .button.mainaction {
  background: var(--ol-blue) !important;
  border-color: var(--ol-blue) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}
body:not(.task-login) .btn-primary:hover,
body:not(.task-login) .button.mainaction:hover {
  background: var(--ol-blue-hover) !important;
  border-color: var(--ol-blue-hover) !important;
}
/* Compose button in the task rail stays prominent */
body:not(.task-login) #taskmenu a.compose,
body:not(.task-login) .compose-button {
  color: #ffffff !important;
}

/* ---------- Popups / menus ---------- */
body:not(.task-login) .popupmenu,
body:not(.task-login) .popover,
body:not(.task-login) .dropdown-menu {
  border: 1px solid var(--ol-side-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}
body:not(.task-login) .popupmenu li a:hover,
body:not(.task-login) .menu.listing li a:hover {
  background: var(--ol-blue-tint) !important;
  color: var(--ol-blue-pressed) !important;
}

/* ---------- Strip remaining Roundcube tells ---------- */
/* bottom preview-size slider + quota bar ("11%") — Roundcube-isms */
body:not(.task-login) #listcontrols,
body:not(.task-login) .input-percent-slider,
body:not(.task-login) .quota-widget,
body:not(.task-login) .quota-info,
body:not(.task-login) #quotadisplay,
body:not(.task-login) .menu a.zoomin,
body:not(.task-login) .menu a.zoomout { display: none !important; }

/* pager footer — clean white, blue controls */
body:not(.task-login) .pagenav {
  background: #ffffff !important;
  border-top: 1px solid var(--ol-side-border) !important;
}
body:not(.task-login) .pagenav a.button:before { color: var(--ol-blue) !important; }
body:not(.task-login) .pagenav a.button.disabled:before { color: #c8c6c4 !important; }
body:not(.task-login) .pagenav-text,
body:not(.task-login) .countdisplay {
  color: var(--ol-ink-muted) !important;
  font-size: 12px !important;
}

/* Hide the rail D-icon — the full logo now lives in the top bar (single logo). */
body:not(.task-login) #logo { display: none !important; }

/* ---------- Scrollbars — thin Outlook style ---------- */
body:not(.task-login) ::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.task-login) ::-webkit-scrollbar-track { background: transparent; }
body:not(.task-login) ::-webkit-scrollbar-thumb {
  background: #c8c6c4;
  border-radius: 8px;
  border: 2px solid #ffffff;
}
body:not(.task-login) ::-webkit-scrollbar-thumb:hover { background: #a19f9d; }

/* ====================================================================
   NEW-OUTLOOK TOP HEADER BAR  (DOM injected by dh-custom.js)
   body becomes a flex column: [#dh-topbar 48px][#layout flex:1].
   ==================================================================== */
body.dh-has-topbar:not(.task-login) {
  display: flex !important;
  flex-direction: column !important;
}
body.dh-has-topbar:not(.task-login) > #layout {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

#dh-topbar {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 12px;
  background: linear-gradient(90deg, #0f548c 0%, #0a4376 100%);
  color: #ffffff;
  z-index: 60;
  font-family: "Segoe UI", "Segoe UI Web (West European)", sans-serif;
  box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}

/* left: waffle + wordmark */
#dh-topbar .dh-tb-left { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#dh-topbar .dh-tb-waffle {
  width: 36px; height: 36px; padding: 0; border: none; cursor: pointer;
  background: transparent; border-radius: 4px;
  display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px);
  gap: 3px; justify-content: center; align-content: center;
}
#dh-topbar .dh-tb-waffle span { width: 4px; height: 4px; border-radius: 1px; background: rgba(255,255,255,0.88); }
#dh-topbar .dh-tb-waffle:hover { background: rgba(255,255,255,0.14); }
#dh-topbar .dh-tb-brand { display: flex; align-items: center; height: 100%; cursor: pointer; text-decoration: none; padding: 0 4px; }
#dh-topbar .dh-tb-logo { height: 26px; width: auto; max-width: 210px; display: block; filter: brightness(0) invert(1); }

/* center: white Outlook search pill (wraps the relocated real form) */
#dh-topbar .dh-tb-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
#dh-topbar .dh-tb-search {
  display: flex; align-items: center; gap: 6px;
  width: min(640px, 48vw); height: 32px; padding: 0 10px;
  background: #ffffff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
#dh-topbar .dh-tb-search-ico { width: 18px; height: 18px; flex: 0 0 18px; background: center/18px no-repeat; }
#dh-topbar .dh-tb-search-ph { color: #605e5c; font-size: 14px; }
/* the relocated #mailsearchform / .searchbar — strip its old chrome, fill the pill */
#dh-topbar .dh-tb-search-real {
  flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center !important;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important; height: 30px !important;
}
/* the search input sits inside a <form> — make it stretch to fill the pill */
#dh-topbar .dh-tb-search-real form {
  display: flex !important; flex: 1 1 auto !important; align-items: center !important;
  min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
#dh-topbar .dh-tb-search-real input,
#dh-topbar .dh-tb-search-real input.form-control {
  flex: 1 1 auto !important; min-width: 0 !important;
  border: none !important; background: transparent !important; box-shadow: none !important;
  height: 30px !important; width: 100% !important; font-size: 14px !important; color: #242424 !important;
  padding: 0 6px !important; margin: 0 !important;
}
/* The single magnifier is the searchbar's native one (.searchbar form::before).
   Hide the options chevron / reset / voice labels, and the scope popover whose
   caret appeared on focus. Enter still triggers the search. */
#dh-topbar .dh-tb-search-real .searchbar-title,
#dh-topbar .dh-tb-search-real a,
#dh-topbar .dh-tb-search-real button,
#dh-topbar .dh-tb-search-real h2.voice,
#dh-topbar .dh-tb-search-real label.voice { display: none !important; }
#searchmenu { display: none !important; }

/* right: notifications / settings / account */
#dh-topbar .dh-tb-right { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#dh-topbar .dh-tb-ico {
  width: 38px; height: 38px; border: none; cursor: pointer; border-radius: 4px;
  background: transparent center/20px no-repeat;
}
#dh-topbar .dh-tb-ico:hover { background-color: rgba(255,255,255,0.14); }
#dh-topbar .dh-tb-account {
  width: 38px; height: 38px; border: none; background: transparent; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
#dh-topbar .dh-tb-account:hover { background: rgba(255,255,255,0.14); }

/* ---- avatar circle (rows + account button) ---- */
.dh-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 600; font-size: 13px; line-height: 1;
  text-transform: uppercase; flex: 0 0 auto; box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
  /* placeholder = Digital Harbor white "D" logo, centered on the color circle */
  background-image: url("../images/brand/d-icon-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
}
/* per-row avatar sits at the left edge of the subject cell */
body:not(.task-login) .messagelist td.subject.dh-has-avatar { position: relative; padding-left: 52px !important; }
body:not(.task-login) .messagelist td.subject .dh-row-avatar {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
}

/* ============ Rail (taskmenu) polish — close Compose↔Mail gap, clean dividers ============ */
/* remove the divider lines and any stray vertical margin between rail items */
body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu .button {
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Compose: prominent blue button, snug to the items below it */
body:not(.task-login) #taskmenu a.compose,
body:not(.task-login) a.compose.button {
  margin: 6px 8px 4px 8px !important;
}
/* whatever item follows Compose sits flush (kills the gap before Mail) */
body:not(.task-login) #taskmenu a.compose + a,
body:not(.task-login) #taskmenu a.compose + .button { margin-top: 0 !important; }
/* uniform comfortable rows for the task buttons */
body:not(.task-login) #taskmenu a:not(.compose) { padding-top: 8px !important; padding-bottom: 8px !important; }
/* keep the bottom utility group (Dark mode / About / Logout) borderless too */
body:not(.task-login) #taskmenu .special-buttons a,
body:not(.task-login) #taskmenu .action-buttons a { border: none !important; }

/* === FIX: Compose is wrapped in <span class="action-buttons"> (inline span) — that
   wrapper, not the <a>, was creating the gap before Mail. Make it a tight block. === */
body:not(.task-login) #taskmenu .action-buttons {
  display: block !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  background: transparent !important;
}
body:not(.task-login) #taskmenu .action-buttons a.compose {
  display: block !important;
  float: none !important;
  height: auto !important;
  margin: 8px 8px 6px 8px !important;
  padding: 9px 0 !important;
  line-height: 1.2 !important;
}
/* task buttons (Mail/Contacts/Settings) flush, uniform */
body:not(.task-login) #taskmenu > a {
  display: block !important;
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 0 !important;
}

/* ---- account dropdown menu (top-bar avatar) ---- */
#dh-topbar .dh-tb-accwrap { position: relative; flex: 0 0 auto; }
#dh-topbar .dh-tb-accmenu {
  position: absolute; right: 0; top: 46px; min-width: 210px;
  background: #ffffff; border: 1px solid #e1dfdd; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20); padding: 6px; z-index: 200; display: none;
}
#dh-topbar .dh-tb-accwrap.open .dh-tb-accmenu { display: block; }
#dh-topbar .dh-accmenu-who {
  font-size: 12px; color: #605e5c; padding: 6px 10px 8px; margin-bottom: 4px;
  border-bottom: 1px solid #edebe9; word-break: break-all;
}
#dh-topbar .dh-accmenu-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; font-size: 14px; color: #242424; cursor: pointer; border-radius: 4px;
  font-family: "Segoe UI", sans-serif;
}
#dh-topbar .dh-accmenu-item:hover { background: #f3f2f1; }
#dh-topbar .dh-accmenu-logout { color: #d13438; }

/* search input: kill the hover/focus outline, ring, border and bg change */
#dh-topbar .dh-tb-search-real input,
#dh-topbar .dh-tb-search-real input:hover,
#dh-topbar .dh-tb-search-real input:focus,
#dh-topbar .dh-tb-search-real input:focus-visible,
#dh-topbar .dh-tb-search-real input:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
#dh-topbar .dh-tb-search:hover,
#dh-topbar .dh-tb-search:focus-within,
#dh-topbar .dh-tb-search-real:hover,
#dh-topbar .dh-tb-search-real:focus-within,
#dh-topbar .dh-tb-search-real form:focus-within {
  outline: none !important;
  border: none !important;
}