/* Syrius Mail — interface interna (Elastic) */

:root {
  --syrius-navy: #121e48;
  --syrius-navy-2: #1a2a5e;
  --syrius-navy-3: #24366f;
  --syrius-cyan: #3ec4ff;
  --syrius-paper: #f4f7fb;
  --syrius-line: #d7e0ee;
  --syrius-text: #0f172a;
  --syrius-muted: #64748b;
  --menu-width: 148px;
}

html {
  --menu-width: 148px !important;
}

/* Menu esquerdo — força largura contra media queries do Elastic */
html body:not(.task-login) #layout-menu,
html.layout-normal body:not(.task-login) #layout-menu,
html.layout-large body:not(.task-login) #layout-menu,
html.layout-small body:not(.task-login) #layout-menu {
  background: linear-gradient(180deg, var(--syrius-navy) 0%, var(--syrius-navy-2) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  flex: 0 0 148px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

html body:not(.task-login) #layout {
  grid-template-columns: 148px auto !important;
}

body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #layout-menu .menu,
body:not(.task-login) #layout-menu .toolbar,
body:not(.task-login) #layout-menu #taskmenu {
  background: transparent !important;
}

/* Logo no menu */
body:not(.task-login) #layout-menu .popover-header {
  width: 100% !important;
  padding: 14px 6px 8px !important;
  box-sizing: border-box !important;
}

body:not(.task-login) #layout-menu #logo,
body:not(.task-login) #layout-menu .logo,
body:not(.task-login) #layout-menu img#logo {
  max-width: 136px !important;
  max-height: 64px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* #taskmenu é o container real dos botões */
html body:not(.task-login) #layout-menu #taskmenu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}

body:not(.task-login) #layout-menu #taskmenu .action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  Elastic usa position:absolute em .special-buttons (bottom/left/right),
  o que faz o rodapé escapar do menu e ocupar a largura da página.
  Forçamos fluxo flex no menu, largura 100% até as bordas.
*/
html body:not(.task-login) #layout-menu #taskmenu .special-buttons,
html body:not(.task-login) #taskmenu .special-buttons {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: auto 0 0 0 !important;
  padding: 8px 0 0 !important;
  box-sizing: border-box !important;
  gap: 0 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
}

body:not(.task-login) #layout-menu #taskmenu > a,
body:not(.task-login) #layout-menu #taskmenu .action-buttons > a,
body:not(.task-login) #layout-menu #taskmenu .special-buttons > a,
body:not(.task-login) #layout-menu #taskmenu > button,
body:not(.task-login) #layout-menu #taskmenu .action-buttons > button,
body:not(.task-login) #layout-menu #taskmenu .special-buttons > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

body:not(.task-login) #layout-menu #taskmenu .special-buttons > a,
body:not(.task-login) #layout-menu #taskmenu .special-buttons > button {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
}

body:not(.task-login) #layout-menu #taskmenu a:hover,
body:not(.task-login) #layout-menu #taskmenu a.selected,
body:not(.task-login) #layout-menu #taskmenu a.active {
  background: rgba(62, 196, 255, 0.2) !important;
  color: #fff !important;
  width: 100% !important;
  max-width: none !important;
}

/* Elastic em layout-small/touch esconde .inner — forçamos o texto */
html body:not(.task-login) #layout-menu #taskmenu a .inner,
html body:not(.task-login) #layout-menu #taskmenu button .inner,
html.layout-small body:not(.task-login) #layout-menu #taskmenu a .inner,
html.layout-small body:not(.task-login) #layout-menu #taskmenu button .inner,
html.touch body:not(.task-login) #layout-menu #taskmenu a .inner,
body:not(.task-login) #layout-menu #taskmenu .button-inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin-top: 2px !important;
}

/* layout-small do Elastic tenta menu estreito — mantém 148px */
html.layout-small body:not(.task-login) #layout-menu,
html.touch body:not(.task-login) #layout-menu {
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  flex: 0 0 148px !important;
}

html.layout-small body:not(.task-login) #layout,
html.touch body:not(.task-login) #layout {
  grid-template-columns: 148px auto !important;
}

/* Colunas / fundo geral — só no modo claro */
html:not(.dark-mode) body:not(.task-login) #layout {
  background: var(--syrius-paper) !important;
}

html:not(.dark-mode) body:not(.task-login) #layout-list,
html:not(.dark-mode) body:not(.task-login) #layout-content,
html:not(.dark-mode) body:not(.task-login) #layout-sidebar {
  background: #fff !important;
  border-color: var(--syrius-line) !important;
}

html:not(.dark-mode) body:not(.task-login) #layout-list .header,
html:not(.dark-mode) body:not(.task-login) #layout-content .header,
html:not(.dark-mode) body:not(.task-login) #layout-sidebar .header,
html:not(.dark-mode) body:not(.task-login) .header {
  background: #fff !important;
  border-bottom: 1px solid var(--syrius-line) !important;
  color: var(--syrius-navy) !important;
}

html:not(.dark-mode) body:not(.task-login) #layout-list .selected,
html:not(.dark-mode) body:not(.task-login) .listing li.selected,
html:not(.dark-mode) body:not(.task-login) .listing tr.selected,
html:not(.dark-mode) body:not(.task-login) .listing .selected > a {
  background: rgba(18, 30, 72, 0.08) !important;
  color: var(--syrius-navy) !important;
  border-color: transparent !important;
}

html:not(.dark-mode) body:not(.task-login) .listing li:hover,
html:not(.dark-mode) body:not(.task-login) .listing tr:hover {
  background: rgba(62, 196, 255, 0.08) !important;
}

body:not(.task-login) .button.mainaction,
body:not(.task-login) .btn.btn-primary,
body:not(.task-login) a.button.mainaction {
  background: var(--syrius-navy) !important;
  border-color: var(--syrius-navy) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

body:not(.task-login) .button.mainaction:hover,
body:not(.task-login) .btn.btn-primary:hover {
  background: var(--syrius-navy-2) !important;
  border-color: var(--syrius-navy-2) !important;
}

html:not(.dark-mode) body:not(.task-login) a {
  color: var(--syrius-navy-2);
}

html:not(.dark-mode) body:not(.task-login) .listing .unread {
  color: var(--syrius-navy) !important;
  font-weight: 700;
}

body:not(.task-login) .toolbar a,
body:not(.task-login) .toolbar button {
  border-radius: 10px !important;
}

html:not(.dark-mode) body:not(.task-login) .toolbar a:hover,
html:not(.dark-mode) body:not(.task-login) .toolbar button:hover {
  background: rgba(18, 30, 72, 0.08) !important;
}

body:not(.task-login) #watermark {
  opacity: 0.25;
  filter: hue-rotate(200deg) saturate(0.7);
}

/* ========== MODO ESCURO (html.dark-mode) — tela inteira ========== */
html.dark-mode {
  color-scheme: dark;
  --syrius-paper: #0b1224;
  --syrius-line: #2a3558;
  --syrius-text: #e8eefc;
  --syrius-muted: #9aa8c7;
  --syrius-surface: #121a33;
  --syrius-surface-2: #182240;
  --syrius-input: #0f1730;
}

html.dark-mode body:not(.task-login) {
  color: var(--syrius-text) !important;
  background: var(--syrius-paper) !important;
}

html.dark-mode body:not(.task-login) #layout {
  background: var(--syrius-paper) !important;
}

html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout > div {
  background: var(--syrius-surface) !important;
  border-color: var(--syrius-line) !important;
  color: var(--syrius-text) !important;
}

html.dark-mode body:not(.task-login) #layout-list .header,
html.dark-mode body:not(.task-login) #layout-content .header,
html.dark-mode body:not(.task-login) #layout-sidebar .header,
html.dark-mode body:not(.task-login) #layout > div > .header,
html.dark-mode body:not(.task-login) #layout > div > .footer,
html.dark-mode body:not(.task-login) .header,
html.dark-mode body:not(.task-login) .footer {
  background: var(--syrius-surface-2) !important;
  border-color: var(--syrius-line) !important;
  color: var(--syrius-text) !important;
}

html.dark-mode body:not(.task-login) #layout > div > .header a.button,
html.dark-mode body:not(.task-login) #layout > div > .footer a.button,
html.dark-mode body:not(.task-login) .toolbar a,
html.dark-mode body:not(.task-login) .toolbar button,
html.dark-mode body:not(.task-login) .header a,
html.dark-mode body:not(.task-login) .header button {
  color: var(--syrius-text) !important;
}

html.dark-mode body:not(.task-login) .toolbar a:hover,
html.dark-mode body:not(.task-login) .toolbar button:hover,
html.dark-mode body:not(.task-login) .header a:hover,
html.dark-mode body:not(.task-login) .header button:hover {
  background: rgba(62, 196, 255, 0.12) !important;
  color: #fff !important;
}

html.dark-mode body:not(.task-login) a {
  color: #8fd6ff;
}

html.dark-mode body:not(.task-login) .listing li,
html.dark-mode body:not(.task-login) .listing tr,
html.dark-mode body:not(.task-login) .listing td,
html.dark-mode body:not(.task-login) .listing span,
html.dark-mode body:not(.task-login) .folderlist li,
html.dark-mode body:not(.task-login) .folderlist a {
  color: var(--syrius-text) !important;
  border-color: var(--syrius-line) !important;
}

html.dark-mode body:not(.task-login) #layout-list .selected,
html.dark-mode body:not(.task-login) .listing li.selected,
html.dark-mode body:not(.task-login) .listing tr.selected,
html.dark-mode body:not(.task-login) .listing .selected > a,
html.dark-mode body:not(.task-login) .folderlist li.selected,
html.dark-mode body:not(.task-login) .folderlist li.selected > a {
  background: rgba(62, 196, 255, 0.16) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html.dark-mode body:not(.task-login) .listing li:hover,
html.dark-mode body:not(.task-login) .listing tr:hover,
html.dark-mode body:not(.task-login) .folderlist li:hover {
  background: rgba(62, 196, 255, 0.08) !important;
}

html.dark-mode body:not(.task-login) .listing .unread {
  color: #fff !important;
  font-weight: 700;
}

/* Formulários / composição */
html.dark-mode body:not(.task-login) input,
html.dark-mode body:not(.task-login) select,
html.dark-mode body:not(.task-login) textarea,
html.dark-mode body:not(.task-login) .formcontainer input,
html.dark-mode body:not(.task-login) .formcontainer select,
html.dark-mode body:not(.task-login) .formcontainer textarea,
html.dark-mode body:not(.task-login) .formlinks,
html.dark-mode body:not(.task-login) .formcontent,
html.dark-mode body:not(.task-login) .content,
html.dark-mode body:not(.task-login) .listbox,
html.dark-mode body:not(.task-login) .popupmenu,
html.dark-mode body:not(.task-login) .popover,
html.dark-mode body:not(.task-login) .ui-dialog,
html.dark-mode body:not(.task-login) .ui-widget-content,
html.dark-mode body:not(.task-login) .ui-dialog-content,
html.dark-mode body:not(.task-login) .googie_list {
  background-color: var(--syrius-input) !important;
  color: var(--syrius-text) !important;
  border-color: var(--syrius-line) !important;
}

html.dark-mode body:not(.task-login) input::placeholder,
html.dark-mode body:not(.task-login) textarea::placeholder {
  color: var(--syrius-muted) !important;
}

html.dark-mode body:not(.task-login) .form-control,
html.dark-mode body:not(.task-login) .custom-select,
html.dark-mode body:not(.task-login) .input-group-text,
html.dark-mode body:not(.task-login) .recipient-input,
html.dark-mode body:not(.task-login) .compose-headers,
html.dark-mode body:not(.task-login) .compose-headers table,
html.dark-mode body:not(.task-login) .compose-headers td,
html.dark-mode body:not(.task-login) .compose-headers th,
html.dark-mode body:not(.task-login) #composebodycontainer,
html.dark-mode body:not(.task-login) #compose-content,
html.dark-mode body:not(.task-login) .message-part,
html.dark-mode body:not(.task-login) .message-htmlpart,
html.dark-mode body:not(.task-login) .message-partheaders,
html.dark-mode body:not(.task-login) .attachmentslist,
html.dark-mode body:not(.task-login) .attachmentslist li,
html.dark-mode body:not(.task-login) .filedrop,
html.dark-mode body:not(.task-login) .dropzone,
html.dark-mode body:not(.task-login) fieldset,
html.dark-mode body:not(.task-login) legend,
html.dark-mode body:not(.task-login) .propform,
html.dark-mode body:not(.task-login) .propform td,
html.dark-mode body:not(.task-login) .propform th,
html.dark-mode body:not(.task-login) .propform label,
html.dark-mode body:not(.task-login) .form-check-label,
html.dark-mode body:not(.task-login) .options,
html.dark-mode body:not(.task-login) .table-responsive,
html.dark-mode body:not(.task-login) table,
html.dark-mode body:not(.task-login) .navlist,
html.dark-mode body:not(.task-login) .scroller {
  background-color: transparent !important;
  color: var(--syrius-text) !important;
  border-color: var(--syrius-line) !important;
}

html.dark-mode body:not(.task-login) .filedrop,
html.dark-mode body:not(.task-login) .dropzone,
html.dark-mode body:not(.task-login) .attachmentslist {
  background: var(--syrius-input) !important;
  border-color: var(--syrius-line) !important;
}

html.dark-mode body:not(.task-login) label,
html.dark-mode body:not(.task-login) .label,
html.dark-mode body:not(.task-login) .hint,
html.dark-mode body:not(.task-login) .secondary-label,
html.dark-mode body:not(.task-login) .disabled,
html.dark-mode body:not(.task-login) .toolbar a.disabled,
html.dark-mode body:not(.task-login) .toolbar button:disabled {
  color: var(--syrius-muted) !important;
}

html.dark-mode body:not(.task-login) .searchbar,
html.dark-mode body:not(.task-login) .searchbar input,
html.dark-mode body:not(.task-login) #quicksearchbar,
html.dark-mode body:not(.task-login) #searchmenulink {
  background: var(--syrius-input) !important;
  color: var(--syrius-text) !important;
  border-color: var(--syrius-line) !important;
}

html.dark-mode body:not(.task-login) .button.mainaction,
html.dark-mode body:not(.task-login) .btn.btn-primary,
html.dark-mode body:not(.task-login) a.button.mainaction {
  background: var(--syrius-navy-3) !important;
  border-color: var(--syrius-navy-3) !important;
  color: #fff !important;
}

html.dark-mode body:not(.task-login) .button,
html.dark-mode body:not(.task-login) .btn,
html.dark-mode body:not(.task-login) .formbuttons .button {
  color: var(--syrius-text) !important;
}

html.dark-mode body:not(.task-login) .formbuttons,
html.dark-mode body:not(.task-login) .buttonsbar,
html.dark-mode body:not(.task-login) .status-message,
html.dark-mode body:not(.task-login) #messagestack div {
  background: var(--syrius-surface-2) !important;
  color: var(--syrius-text) !important;
  border-color: var(--syrius-line) !important;
}

/* Menu lateral permanece navy Syrius também no escuro */
html.dark-mode body:not(.task-login) #layout-menu {
  background: linear-gradient(180deg, var(--syrius-navy) 0%, #0d1636 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode body:not(.task-login) #layout-menu .popover-header,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu .special-buttons {
  background: rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode body:not(.task-login) #watermark {
  opacity: 0.2;
  filter: brightness(0.7) hue-rotate(200deg);
}