:root {
  --cq-sidebar: #0757b8;
  --cq-sidebar-2: #0a69d2;
  --cq-blue: #168df4;
  --cq-blue-dark: #0b6dd8;
  --cq-bg: #f3f6fa;
  --cq-panel: #ffffff;
  --cq-panel-soft: #f7f9fc;
  --cq-border: #dfe6ee;
  --cq-border-soft: #e8edf3;
  --cq-text: #162231;
  --cq-muted: #68798b;
  --cq-danger: #e9495d;
  --cq-shadow: 0 10px 30px rgba(23, 43, 77, .07);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  color: var(--cq-text);
  background: var(--cq-bg);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#layout { background: var(--cq-bg); }

#layout,
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
#messagelist-content,
#message-content {
  min-width: 0;
}

#layout-menu {
  color: #fff;
  background: linear-gradient(180deg, var(--cq-sidebar-2), var(--cq-sidebar));
  border-right: 0;
  box-shadow: 8px 0 26px rgba(3, 67, 139, .13);
  z-index: 3;
}

#layout-menu .popover-header {
  height: 76px;
  line-height: 76px;
  background: transparent !important;
}

#layout-menu .popover-header img {
  width: auto;
  max-width: 145px;
  max-height: 64px;
  padding: 7px 8px;
  filter: brightness(0) invert(1);
}

#taskmenu a {
  color: rgba(255, 255, 255, .93);
  border-radius: 9px;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

#taskmenu a:not(.disabled):hover,
#taskmenu a:not(.disabled):focus,
#taskmenu a.selected,
#taskmenu a.selected:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

#taskmenu .action-buttons a.compose {
  color: #fff;
  background: #1389ff;
  box-shadow: 0 8px 18px rgba(0, 56, 130, .22);
}

#taskmenu .action-buttons a.compose:hover { background: #2a98ff; }
#taskmenu a.logout { color: #ffd9df !important; }
#taskmenu .special-buttons { background: transparent !important; }

#layout-sidebar,
#layout-list,
#layout-content {
  color: var(--cq-text);
  background: var(--cq-panel);
  border-color: var(--cq-border);
}

#layout-content { background: var(--cq-bg); }

#layout > div > .header {
  height: 76px;
  min-height: 76px;
  line-height: 76px;
  color: var(--cq-text);
  background: #fff;
  border-color: var(--cq-border);
}

#layout > div > .footer {
  color: var(--cq-muted);
  background: #fff;
  border-color: var(--cq-border);
}

#layout > div > .header a.button,
#layout > div > .footer a.button { color: #263547; }

#layout-sidebar > .header {
  padding: 0 20px;
  justify-content: space-between;
}

#layout-sidebar > .header .username {
  margin: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

#folderlist-content { padding: 10px 12px; }

.folderlist li {
  margin: 3px 0;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
}

.folderlist li > a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  color: #263547;
  border-radius: 9px;
}

.folderlist li > a:hover { background: #f3f7fc; }

.folderlist li.selected > a,
.folderlist li.selected > div > a,
.folderlist li.mailbox.selected > a {
  color: var(--cq-blue-dark) !important;
  background: linear-gradient(90deg, #e4f1ff, #d9ecff) !important;
  box-shadow: inset 3px 0 0 var(--cq-blue);
  font-weight: 700;
}

.folderlist li.mailbox .unreadcount {
  min-width: 28px;
  margin: 9px;
  padding: 3px 8px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(180deg, #168df4, #0b6dd8);
  border-radius: 8px;
}

#layout-sidebar > .footer.small {
  height: 64px;
  min-height: 64px;
  padding: 13px 20px;
  line-height: 1.4;
}

.quota-widget .bar { height: 4px; border-radius: 99px; }
.quota-widget .bar .value { background: var(--cq-blue); }

#messagelist-header .toolbar.menu {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#messagelist-header .toolbar.menu::-webkit-scrollbar,
#layout-content > .header .toolbar.menu::-webkit-scrollbar { display: none; }

#messagelist-header .toolbar.menu a,
#layout-content > .header .toolbar.menu a {
  height: 76px;
  min-width: 76px;
  padding: 11px 8px 8px;
  color: #263547;
}

#messagelist-header .toolbar.menu a:hover,
#layout-content > .header .toolbar.menu a:hover { background: #f5f8fb; }

#messagelist-header .toolbar.menu a:before,
#layout-content > .header .toolbar.menu a:before { height: 27px !important; font-size: 18px; }

#messagelist-header .toolbar.menu span.inner,
#layout-content > .header .toolbar.menu span.inner { font-size: 11px; }

.searchbar {
  margin: 12px 14px 9px;
  border: 1px solid var(--cq-border);
  border-radius: 10px;
  color: var(--cq-text);
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.searchbar input { color: var(--cq-text); background: transparent; }
.searchbar input::placeholder { color: #8493a3; }

#messagelist-content { padding: 0 10px 8px; }
.messagelist { color: var(--cq-text); }
.messagelist tr { border-radius: 8px; }
.messagelist td { padding-top: 12px; padding-bottom: 12px; border-color: var(--cq-border-soft); }
.messagelist td.subject span { line-height: 1.75em; }
.messagelist td.subject span.subject a { color: var(--cq-text); font-weight: 600; }
.messagelist td.subject span.date,
.messagelist td.subject span.fromto { color: var(--cq-muted); }
.messagelist tr:hover td { background: #f8fbff; }
.messagelist tr.selected td {
  color: var(--cq-text) !important;
  background: linear-gradient(90deg, #e4f1ff, #d9ecff) !important;
}
.messagelist tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--cq-blue); }
.messagelist tr.selected td.subject span.subject a { color: #0b579f !important; }
.messagelist td.subject span.msgicon.status.unread:before { color: var(--cq-blue); }

.menu.pagenav.pagenav-list,
.menu.pagenav.pagenav-list + .navlist {
  color: var(--cq-muted);
  background: #fff;
  border-color: var(--cq-border);
}

#layout-content > .header {
  justify-content: center;
  padding: 0 18px;
}

#layout-content .iframe-wrapper {
  margin: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cq-border);
  border-radius: 12px;
  box-shadow: var(--cq-shadow);
}

.popupmenu,
.popover,
.ui-dialog,
.formcontainer,
.listbox .scroller {
  border-color: var(--cq-border);
}

.popupmenu,
.popover,
.ui-dialog { border-radius: 10px; box-shadow: var(--cq-shadow); }
.ui-dialog,
.popover,
.popupmenu { max-width: calc(100vw - 24px); }
.formcontainer,
.propform,
.formcontent { min-width: 0; }
.form-control,
.custom-select,
input,
select,
textarea { max-width: 100%; }
.listing td,
.listing th,
.messagelist td,
.messagelist th { overflow-wrap: anywhere; }
.listing li.selected,
.listing li.selected > a,
.listing tr.selected td { color: var(--cq-blue-dark); background: #e8f3ff; }
.btn-primary,
.button.mainaction,
input.button.mainaction {
  color: #fff !important;
  border-color: var(--cq-blue-dark) !important;
  background: linear-gradient(180deg, var(--cq-blue), var(--cq-blue-dark)) !important;
}

.btn,
.form-control,
.custom-select,
input,
select,
textarea { border-radius: 8px; }

body.task-login {
  background:
    radial-gradient(circle at 18% 15%, rgba(22, 141, 244, .15), transparent 34%),
    linear-gradient(145deg, #eef5fc, #f7f9fc 70%, #e7f3ff) !important;
}

.task-login #layout-content { max-width: 460px; margin: 0 auto; background: transparent; }
.task-login #logo {
  width: min(380px, 82vw) !important;
  height: 170px !important;
  top: 7vh;
  object-fit: contain;
  opacity: 1;
}
.task-login #login-form {
  top: 10vh;
  max-width: 390px;
  padding: 30px !important;
  border: 1px solid var(--cq-border);
  border-top: 4px solid var(--cq-blue);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(23, 43, 77, .15);
}
.task-login #login-form .form-control { min-height: 44px; border-color: #d8e2ee; }
.task-login #rcmloginsubmit { min-height: 44px; font-weight: 700; }
.task-login #login-footer { color: var(--cq-muted); }

@media screen and (min-width: 1201px) {
  #layout-menu { width: 180px; min-width: 180px; }
  #layout-sidebar { flex: 0 0 255px; max-width: 255px; min-width: 230px; }
  #layout-list { flex: 0 0 470px; max-width: 34vw; min-width: 390px; }
  #layout-content { flex: 1 1 auto; }
  #taskmenu { height: calc(100% - 76px); padding: 12px 14px 18px; }
  #taskmenu a {
    width: 152px;
    max-width: 152px;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    margin: 4px 0;
    text-align: left;
  }
  #taskmenu a:before {
    width: 28px !important;
    margin: 0 10px 0 0 !important;
    float: none !important;
    font-size: 19px;
  }
  #taskmenu span.inner { display: block; padding: 0; font-size: 13px; font-weight: 600; }
  #taskmenu .action-buttons { display: block; margin: 14px 0 20px; }
  #taskmenu .action-buttons a.compose { justify-content: center; margin: 0; }
  #taskmenu .special-buttons { left: 14px; bottom: 14px; width: 152px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22); }
}

/* Mantem o menu do tema claro intacto e corrige apenas os botoes no modo escuro. */
@media screen and (min-width: 1025px) {
  html.dark-mode #layout-menu {
    width: 180px;
    min-width: 180px;
  }

  html.dark-mode #taskmenu {
    height: calc(100% - 76px);
    padding: 12px 14px 18px;
  }

  html.dark-mode #taskmenu a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    margin: 4px 0;
    overflow: visible;
    text-align: left;
  }

  html.dark-mode #taskmenu a:before {
    width: 28px !important;
    min-width: 28px;
    margin: 0 10px 0 0 !important;
    float: none !important;
    font-size: 19px;
  }

  html.dark-mode #taskmenu span.inner {
    display: block;
    min-width: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-overflow: clip;
  }

  html.dark-mode #taskmenu .action-buttons {
    display: block;
    margin: 14px 0 20px;
  }

  html.dark-mode #taskmenu .action-buttons a.compose {
    width: 100% !important;
    justify-content: center;
    margin: 0;
  }

  html.dark-mode #taskmenu .special-buttons {
    left: 14px;
    bottom: 14px;
    width: 152px;
    max-width: 152px;
    padding-top: 10px;
  }

  html.dark-mode #taskmenu .special-buttons a {
    width: 152px !important;
    max-width: 152px !important;
  }
}

html.dark-mode {
  --cq-bg: #06121e;
  --cq-panel: #071725;
  --cq-panel-soft: #0a1d2e;
  --cq-border: #1a3042;
  --cq-border-soft: #132838;
  --cq-text: #f4f7fb;
  --cq-muted: #9aabba;
  --cq-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  scrollbar-color: #149cf4 #132838;
}

html.dark-mode body,
html.dark-mode #layout {
  color: var(--cq-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(16, 120, 220, .08), transparent 26%),
    linear-gradient(180deg, #06111d, #06131f 58%, #071521);
}

html.dark-mode #layout-menu {
  color: var(--cq-text);
  background: linear-gradient(180deg, rgba(5, 17, 28, .99), rgba(6, 19, 31, .98));
  border-right: 1px solid var(--cq-border);
  box-shadow: none;
}

html.dark-mode #layout-menu .popover-header img { filter: none; opacity: 1; }
html.dark-mode #taskmenu a { color: #e5eef7; }
html.dark-mode #taskmenu a:not(.disabled):hover,
html.dark-mode #taskmenu a:not(.disabled):focus { color: #fff; background: rgba(16, 76, 116, .3); }
html.dark-mode #taskmenu a.selected { color: #24a5ff; background: linear-gradient(90deg, rgba(0, 91, 170, .35), rgba(6, 61, 103, .45)); box-shadow: inset 2px 0 0 var(--cq-blue); }
html.dark-mode #taskmenu .special-buttons { border-color: var(--cq-border); }

html.dark-mode #layout-sidebar { color: var(--cq-text); background: linear-gradient(180deg, #071521, #071827); border-color: var(--cq-border); }
html.dark-mode #layout-list { color: var(--cq-text); background: #071725; border-color: var(--cq-border); }
html.dark-mode #layout-content { color: var(--cq-text); background: linear-gradient(180deg, #07131f, #071727); }
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  color: var(--cq-text);
  background: transparent;
  border-color: var(--cq-border);
}
html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .footer a.button,
html.dark-mode #messagelist-header .toolbar.menu a,
html.dark-mode #layout-content > .header .toolbar.menu a { color: #e3ebf2; }
html.dark-mode #messagelist-header .toolbar.menu a:hover,
html.dark-mode #layout-content > .header .toolbar.menu a:hover { background: rgba(15, 73, 109, .25); }

html.dark-mode .folderlist li > a { color: #e6eef6; }
html.dark-mode .folderlist li > a:hover { background: rgba(14, 61, 94, .28); }
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li.selected > div > a,
html.dark-mode .folderlist li.mailbox.selected > a { color: #24a5ff !important; background: linear-gradient(90deg, #083761, #0a2947) !important; }
html.dark-mode .folderlist li.mailbox .unreadcount { color: #fff; background: linear-gradient(180deg, #167ff2, #0b64d5); }

html.dark-mode .searchbar { color: #eef6ff; background: #061521; border-color: var(--cq-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02); }
html.dark-mode .searchbar input { color: #eef6ff; }
html.dark-mode .searchbar input::placeholder { color: #7f91a1; }
html.dark-mode .messagelist { color: var(--cq-text); }
html.dark-mode .messagelist td { color: var(--cq-text); border-color: var(--cq-border-soft); }
html.dark-mode .messagelist td.subject span.subject a { color: #edf4fa; }
html.dark-mode .messagelist td.subject span.date,
html.dark-mode .messagelist td.subject span.fromto { color: #91a6b8; }
html.dark-mode .messagelist tr:hover td { background: #092034; }
html.dark-mode .messagelist tr.selected td { color: #fff !important; background: linear-gradient(180deg, #0a5ca4, #09518f) !important; }
html.dark-mode .messagelist tr.selected td.subject span.subject a,
html.dark-mode .messagelist tr.selected td.subject span.date,
html.dark-mode .messagelist tr.selected td.subject span.fromto { color: #fff !important; }
html.dark-mode .messagelist td.subject span.msgicon.status.unread:before { color: #11a9f4; }

html.dark-mode .menu.pagenav.pagenav-list,
html.dark-mode .menu.pagenav.pagenav-list + .navlist { color: #a7b7c4; background: #071725; border-color: var(--cq-border); }
html.dark-mode #layout-content .iframe-wrapper { background: #071725; border-color: var(--cq-border); }

html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .formcontainer { color: var(--cq-text); background: #0a1d2e; border-color: var(--cq-border); }
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea { color: var(--cq-text); background: #071725; border-color: #28465c; }

html.dark-mode body.task-login {
  background:
    radial-gradient(circle at 18% 15%, rgba(20, 156, 244, .17), transparent 34%),
    linear-gradient(145deg, #06111d, #0a2034 70%, #071827) !important;
}
html.dark-mode .task-login #login-form { color: var(--cq-text); background: rgba(7, 23, 37, .98); border-color: #1a3042; border-top-color: var(--cq-blue); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
html.dark-mode .task-login #login-footer { color: var(--cq-muted); }

@media screen and (max-width: 1200px) {
  #layout-menu .popover-header { height: 58px; line-height: 58px; }
  #layout-menu .popover-header img { max-width: 58px; max-height: 52px; }
  #layout > div > .header { height: 64px; min-height: 64px; line-height: 64px; }
  #messagelist-header .toolbar.menu a,
  #layout-content > .header .toolbar.menu a { height: 64px; min-width: 60px; padding-top: 8px; }

  #layout-sidebar,
  #layout-list,
  #layout-content { min-width: 0; }
}

@media screen and (max-width: 768px) {
  html,
  body,
  #layout { width: 100%; max-width: 100%; }

  #layout-menu,
  #layout-sidebar,
  #layout-list,
  #layout-content {
    min-width: 0 !important;
    max-width: none !important;
  }

  #layout > div > .header {
    height: 58px;
    min-height: 58px;
    line-height: 58px;
  }

  #layout-menu .popover-header {
    height: 58px;
    line-height: 58px;
  }

  html.layout-phone #layout-menu .popover-header img {
    width: auto;
    max-width: min(210px, 62vw);
    max-height: 52px;
    padding: 5px;
  }

  #messagelist-header .toolbar.menu,
  #layout-content > .header .toolbar.menu {
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #messagelist-header .toolbar.menu a,
  #layout-content > .header .toolbar.menu a {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: 58px;
    padding: 6px 2px 3px;
  }

  #layout-content .iframe-wrapper { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  #folderlist-content { padding: 8px; }
  #messagelist-content { padding: 0 4px 6px; }
  .searchbar { margin: 9px 10px 7px; }

  .popupmenu,
  .popover,
  .ui-dialog {
    width: auto;
    max-width: calc(100vw - 16px);
  }

  .ui-dialog .ui-dialog-content,
  .popover-body,
  .formcontainer {
    max-width: 100%;
    overflow-x: auto;
  }

  .contact-header { min-width: 0; }
  .contact-header .contact-photo { min-width: 72px; }
  .contact-header .contact-head { min-width: 0; }

  body.task-login { overflow-y: auto; }
  .task-login #layout { min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
  .task-login #layout-content {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 14px;
    overflow-y: auto;
  }
  .task-login #logo {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    width: min(350px, 86vw) !important;
    height: clamp(96px, 20vh, 140px) !important;
    margin: 0 auto 18px !important;
  }
  .task-login #login-form {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    width: min(100%, 390px);
    max-width: 390px;
    margin: 0 auto;
    padding: 24px !important;
  }
  .task-login #login-form table,
  .task-login #login-form tbody,
  .task-login #login-form tr,
  .task-login #login-form td { max-width: 100%; }
}

@media screen and (max-width: 480px) {
  #layout-sidebar,
  #layout-list,
  #layout-content { width: 100% !important; }

  #layout-sidebar > .header { padding: 0 10px; }
  #folderlist-content { padding: 5px; }
  .folderlist li > a { min-height: 44px; }
  #messagelist-content { padding: 0; }
  .messagelist td { padding-top: 10px; padding-bottom: 10px; }
  .searchbar { margin: 7px 8px 6px; }

  .task-login #layout-content { padding: 16px 12px; }
  .task-login #logo {
    width: min(320px, 88vw) !important;
    height: clamp(86px, 18vh, 118px) !important;
    margin-bottom: 12px !important;
  }
  .task-login #login-form {
    width: 100%;
    padding: 20px 16px !important;
    border-radius: 12px;
  }
  .task-login #login-form .form-control,
  .task-login #rcmloginsubmit {
    min-height: 48px;
    font-size: 16px;
  }
  .task-login #login-footer { overflow-wrap: anywhere; }
}

@media screen and (max-height: 620px) and (max-width: 768px) {
  .task-login #layout-content { justify-content: flex-start; }
  .task-login #logo {
    height: 82px !important;
    margin-bottom: 8px !important;
  }
  .task-login #login-form { padding-top: 16px !important; padding-bottom: 16px !important; }
}