/* Trim visual noise on top of Elastic, aiming for a light / RainLoop-like look. */

/* Clean light accent instead of the default blue/green mix */
.button-panel .button.icon.create,
.btn-primary {
  background-color: #3b6dfa !important;
  border-color: #3b6dfa !important;
  color: #fff !important;
}

.button-panel .button.icon.create:hover,
.btn-primary:hover {
  background-color: #2f56d1 !important;
  border-color: #2f56d1 !important;
}

/* Header stays light; just soften the divider under it */
.header {
  background-color: #fff !important;
  border-bottom: 1px solid #eee !important;
}

/* Account badge: light, not a dark block. .header has a fixed 58px row with
   overflow:hidden, so vertical padding gets clipped - only push horizontally
   and let line-height center it instead. Soft corners instead of a full
   pill - a long email address squeezed into an oval looked cramped. */
.header-title.username {
  background: transparent !important;
  border: 0 !important;
  color: #2b2f3a !important;
  font-weight: 500 !important;
  font-size: .76rem !important;
  line-height: 58px !important;
  padding: 0 .5rem !important;
  max-width: 210px !important;
  text-align: center !important;
}

/* Flatten the toolbar: no boxed buttons, just icons that highlight on hover */
#toolbar-header .button.icon,
.toolbar .button.icon,
.toolbar-menu-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #4a4f5a !important;
}

#toolbar-header .button.icon:hover,
.toolbar .button.icon:hover {
  background: #f1f2f5 !important;
  border-radius: 8px;
}

/* Softer, thinner dividers everywhere */
.toolbar,
.listing.messagelist,
.folderlist,
#layout-sidebar,
#layout-list {
  border-color: #ececec !important;
}

/* Folder list: neutral off-white selected state, not a color pop */
.folderlist li.selected > .listitem,
.folderlist li.selected > .listitem:hover,
.folderlist li.droptarget > .listitem {
  background-color: #f2f3f5 !important;
  color: #2b2f3a !important;
  border-radius: 8px;
}

.folderlist li > .listitem:hover {
  background-color: #f8f8fa !important;
  border-radius: 8px;
}

.folderlist li > .listitem {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* Message list: more breathing room, lighter row divider, unread just bolder (no bg) */
.listing.messagelist tr {
  border-bottom: 1px solid #f1f1f1 !important;
}

.listing.messagelist tr td {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

.listing.messagelist tr.unread .subject {
  font-weight: 700 !important;
  color: #1d1d1d !important;
}

/* Unread / read / open states each get their own left bar + tint, like the
   Gmail-style reference (orange bar there = just an example; kept our own
   accent colors instead - blue for unread, teal for the message currently
   open, nothing for already-read). */
.listing.messagelist tr {
  border-left: 4px solid transparent !important;
}

.listing.messagelist tr.unread {
  border-left-color: #3b6dfa !important;
  background-color: #f5f8ff !important;
}

.listing.messagelist tr.unread td.subject span.fromto {
  color: #3b6dfa !important;
  font-weight: 700 !important;
}

.listing.messagelist tr td.subject span.fromto {
  color: #6b7280 !important;
  padding-left: 0 !important;
}

.listing.messagelist tr.selected,
.listing.messagelist tr.selected:hover {
  border-left-color: #0d9488 !important;
  background-color: #f0fdfa !important;
}

/* Search bar: it's a fixed 36px/overflow:hidden strip in Elastic (not a
   Bootstrap input-group like other forms) - grow the strip itself, not
   an inner wrapper, or the extra padding just gets clipped. */
.searchbar {
  width: 90% !important;
  height: 42px !important;
  min-height: 42px !important;
  line-height: 42px !important;
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 10px !important;
  margin: .4rem auto !important;
}

.searchbar input {
  padding-left: .9rem !important;
}

/* Toolbars: more room around icons instead of a cramped strip */
.toolbar,
#toolbar-header {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}

.toolbar .button.icon,
#toolbar-header .button.icon {
  padding: .45rem !important;
  margin: 0 .1rem !important;
}

/* Same height as Selecionar/Mover para/Opções (58px), just sitting ~5.8px
   higher than them - confirmed by measuring real boundingClientRect, not
   a flex-alignment issue at all. Nudge it down to match exactly. */
#messagelist-header .toolbar-button.refresh {
  margin-top: 5.8px !important;
}

/* Message action toolbar (Responder/Encaminhar/Excluir/Spam/etc.) only
   makes sense once something is selected - hide the whole row instead of
   showing a strip of greyed-out buttons when nothing is. Confirmed via
   live console inspection that the always-visible row IS #toolbar-menu
   (the same element also used as the "..." popup at narrow widths) -
   #mailtoolbar only gets created once a message is actually open. */
#toolbar-menu:has(.reply.disabled):has(.forward.disabled):has(.delete.disabled) {
  visibility: hidden !important;
}

/* Hide dark mode + about for now (easy to bring back later) */
#taskmenu .theme.dark,
#taskmenu .about {
  display: none !important;
}

/* Left icon rail: the dark background actually lives on the #layout-menu
   wrapper (also !important in Elastic's own CSS), not on #taskmenu itself -
   that's why overriding #taskmenu alone did nothing. */
#layout-menu,
#taskmenu {
  background-color: #f7f7f9 !important;
  border-right: 1px solid #ececec !important;
}

/* Two more dark boxes hiding in the rail: the logo tile at the top
   (.popover-header) and the logout area pinned to the bottom
   (.special-buttons) - both had their own separate dark background, and
   the logo one needs the #layout-menu prefix to actually out-specificity
   Elastic's own #layout-menu .popover-header rule. */
#layout-menu .popover-header,
.special-buttons {
  background-color: #f7f7f9 !important;
}

/* NOTE: tried forcing height/line-height on #taskmenu a for more room here
   and it broke the icon+label layout (they overlapped) - reverted, the
   default 47px row is staying as-is for now. */
#taskmenu a {
  color: #4a4f5a !important;
}

#taskmenu a:hover,
#taskmenu a.selected {
  background-color: #eef0f3 !important;
  color: #1d1d1d !important;
}

#taskmenu a.compose {
  color: #3b6dfa !important;
}

#taskmenu a.logout {
  color: #c14545 !important;
}

/* Checkbox-always-visible reverted for now (couples with "message open"
   state in Roundcube's list widget - clicking to read also checked it).
   Revisit later with a proper JS fix. The dot still goes away though -
   its job (mark unread) moved to the hover quick-actions panel either way. */
.listing.messagelist td.subject span.msgicon.status {
  display: none !important;
}

/* Hover quick-actions panel: drop the size/date text, it added no value.
   The read/unread/junk buttons themselves are injected by quickactions.js. */
.listing-hover-menu span.txt {
  display: none !important;
}

.listing-hover-menu a.junk {
  color: #b45309;
}

/* Lock the folders and message-list column widths at a comfortable size -
   Elastic lets you drag-resize them by default (adds a .column-resizer
   handle + inline width style via JS); hide the handle and force the
   width so it can't be dragged, overriding any saved/inline width. */
.column-resizer {
  display: none !important;
  pointer-events: none !important;
}

#layout-sidebar {
  width: 240px !important;
  flex: 0 0 240px !important;
}

#layout-list {
  width: 380px !important;
  flex: 0 0 380px !important;
}