/* gmailish - camada visual estilo Gmail sobre a skin Elastic (Roundcube 1.7) */

:root {
  --gm-blue: #0b57d0;
  --gm-blue-hover: #0842a0;
  --gm-surface: #ffffff;
  --gm-bg: #f6f8fc;
  --gm-sidebar-bg: #f6f8fc;
  --gm-hover: #f0f2f5;
  --gm-selected: #d3e3fd;
  --gm-selected-text: #001d35;
  --gm-border: #e3e3e3;
  --gm-text: #1f1f1f;
  --gm-text-muted: #5f6368;
  --gm-radius: 16px;
  --gm-font: "Google Sans", "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html, body,
.username, .messagelist, .listing,
input, button, select, textarea,
#layout .header .header-title,
.toolbar a.button {
  font-family: var(--gm-font) !important;
}

/* ---- Estrutura / fundos ---- */
body, #layout, #layout-content, .content, #mainscreen {
  background: var(--gm-bg) !important;
}

#layout-sidebar, #layout-sidebar .scroller,
#layout-list, #layout-list .scroller {
  background: var(--gm-sidebar-bg) !important;
  border: 0 !important;
}

#layout-content {
  background: var(--gm-surface) !important;
  border-radius: var(--gm-radius) !important;
  margin: 8px 8px 8px 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05) !important;
  overflow: hidden;
}

#layout-list {
  border-radius: var(--gm-radius) !important;
  margin: 8px !important;
  background: var(--gm-surface) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  overflow: hidden;
}

/* ---- Barra superior / cabecalhos ---- */
#layout .header,
.toolbar,
.menu.toolbar {
  background: var(--gm-surface) !important;
  border-bottom: 1px solid var(--gm-border) !important;
  box-shadow: none !important;
}

/* ---- Lista de pastas: pílula arredondada estilo Gmail ---- */
.folderlist li a,
.listing.folderlist li a {
  border-radius: 0 999px 999px 0 !important;
  margin-right: 12px !important;
  padding-left: 22px !important;
  color: var(--gm-text) !important;
  font-weight: 500;
}
.folderlist li a:hover,
.listing.folderlist li a:hover {
  background: var(--gm-hover) !important;
}
.folderlist li.selected > a,
.listing.folderlist li.selected > a,
.folderlist li.active > a {
  background: var(--gm-selected) !important;
  color: var(--gm-selected-text) !important;
  font-weight: 700 !important;
}
.folderlist li.selected > a .unreadcount { background: var(--gm-blue) !important; }

/* ---- Botao "Compor" tipo FAB/pill ---- */
.toolbar a.button.compose,
a.button.compose,
.toolbar-button.compose {
  background: #c2e7ff !important;
  color: #001d35 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
  min-height: 44px;
}
.toolbar a.button.compose:hover,
a.button.compose:hover {
  background: #b3ddff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
}

/* ---- Lista de mensagens ---- */
.messagelist tbody tr,
table.messagelist tbody tr {
  border: 0 !important;
  border-bottom: 1px solid #f1f1f1 !important;
}
.messagelist tbody tr:hover,
table.messagelist tbody tr:hover {
  background: var(--gm-hover) !important;
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px rgba(60,64,67,.15) !important;
  z-index: 1;
}
.messagelist tbody tr.selected,
table.messagelist tbody tr.selected {
  background: var(--gm-selected) !important;
}
.messagelist tbody tr.unread,
table.messagelist tbody tr.unread {
  background: var(--gm-surface) !important;
}
.messagelist tbody tr.unread .subject,
.messagelist tbody tr.unread .fromto,
.messagelist tbody tr.unread .date {
  font-weight: 700 !important;
  color: var(--gm-text) !important;
}
.messagelist tbody tr .subject { color: var(--gm-text-muted); }
.messagelist .flag .flagged,
.messagelist tbody tr.flagged .flag:before { color: #f9ab00 !important; }

/* ---- Visualizacao da mensagem ---- */
#messageheader, .messageheader {
  border-bottom: 1px solid var(--gm-border) !important;
}
#messageheader .subject, .message-subject {
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  color: var(--gm-text) !important;
}

/* ---- Botoes / inputs gerais ---- */
.formbuttons .button.mainaction,
button.btn-primary, .btn.btn-primary,
a.button.primary, .primary.button {
  background: var(--gm-blue) !important;
  border-color: var(--gm-blue) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.formbuttons .button.mainaction:hover,
button.btn-primary:hover, a.button.primary:hover {
  background: var(--gm-blue-hover) !important;
}

input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
  border-color: var(--gm-blue) !important;
  box-shadow: 0 0 0 1px var(--gm-blue) !important;
}

/* barra de busca arredondada */
#messagesearchtools, .searchbar, .ui-searchbar,
.search-input, #quicksearchbar {
  border-radius: 999px !important;
  background: #eaf1fb !important;
}

/* ---- Login ---- */
.login-form {
  border-radius: 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.10) !important;
}
#login-form .btn-primary { border-radius: 999px !important; background: var(--gm-blue) !important; }

/* ---- Dark mode (Elastic .dark-mode) ---- */
.dark-mode {
  --gm-surface: #1e1f22;
  --gm-bg: #131314;
  --gm-sidebar-bg: #131314;
  --gm-hover: #2a2b2e;
  --gm-selected: #004a77;
  --gm-selected-text: #c2e7ff;
  --gm-border: #3c4043;
  --gm-text: #e3e3e3;
  --gm-text-muted: #9aa0a6;
}
.dark-mode #layout-content,
.dark-mode #layout-list { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }
.dark-mode .messagelist tbody tr { border-bottom-color: #2a2b2e !important; }