/**
 * Kel Tech Webmail — identidade do Gestor (dark-first)
 * Fundo NUNCA branco. Paleta: #07162d / #050d1c / #0f1f38
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,650&display=swap');

:root {
  --kel-deep: #07162d;
  --kel-mid: #0a1628;
  --kel-panel: #050d1c;
  --kel-card: #0f1f38;
  --kel-elevated: #0c1829;
  --kel-line: rgba(255, 255, 255, 0.12);
  --kel-line-strong: rgba(255, 255, 255, 0.22);
  --kel-text: #e8eef8;
  --kel-muted: #9aa8c0;
  --kel-accent: #ffffff;
  --kel-glow: rgba(255, 255, 255, 0.035);
  --kel-radius: 8px;
  --kel-radius-sm: 6px;
  color-scheme: dark;
}

html,
html.dark-mode,
body,
body.elastic,
#layout,
#layout-content,
#layout-sidebar,
#layout-list,
#layout-menu,
#messagestack,
.iframebox,
.iframebox iframe {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  background-color: var(--kel-deep) !important;
  color: var(--kel-text) !important;
  border-color: var(--kel-line) !important;
}

html {
  background-color: var(--kel-deep) !important;
  background-image:
    linear-gradient(var(--kel-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--kel-glow) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* Remove qualquer superfície branca do Elastic */
#layout-sidebar,
#layout-list,
#layout-content,
#mailview-top,
#mailview-bottom,
#mailpreviewframe,
#messagecontframe,
#preferences-frame,
#contactframe,
.content,
.scrollable,
.scroller,
.listing,
.listing tbody td,
.listing thead th,
.messagelist,
.messagelist tbody td,
.messagelist thead th,
.headerbar,
.toolbar,
.footer,
.searchbar,
.menu.toolbar,
.popover,
.popupmenu,
.ui.dialog,
.ui-dialog,
.formcontent,
.propform,
.boxlisting,
.folderlist,
#folderlist-content,
#mailboxlist,
#mailboxlist li,
#mailboxlist li a,
.watermark {
  background: var(--kel-card) !important;
  background-color: var(--kel-card) !important;
  color: var(--kel-text) !important;
  border-color: var(--kel-line) !important;
}

#layout-menu {
  background: var(--kel-panel) !important;
  border-right: 1px solid var(--kel-line) !important;
}

#layout-sidebar {
  background: var(--kel-mid) !important;
}

#layout-list {
  background: var(--kel-elevated) !important;
}

#layout-content {
  background: var(--kel-deep) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li a:hover,
.listing tbody tr.selected > td,
.messagelist tbody tr.selected > td,
.listing tbody tr:hover > td,
.messagelist tbody tr:hover > td {
  background: var(--kel-card) !important;
  color: var(--kel-accent) !important;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.35) !important;
}

#taskmenu a,
#layout-menu a,
#layout-menu span {
  color: rgba(255, 255, 255, 0.78) !important;
}

#taskmenu a:hover,
#taskmenu a.selected,
#layout-menu a.selected {
  background: var(--kel-card) !important;
  color: #fff !important;
}

/* Esconde toggle claro/escuro — aparência fixa */
#taskmenu a.theme,
a.theme,
.theme.special,
button.theme {
  display: none !important;
}

/* ========== Login — estilo Painel de Gestão (.portao) ========== */
body.task-login.kel-portao,
body.task-login,
body.task-login #layout,
body.task-login #layout-content {
  background: #030407 !important;
  background-image: none !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.task-login #layout {
  display: grid !important;
  place-items: center !important;
  padding: 28px 20px !important;
  position: relative !important;
}

/* Halo suave atrás do cartão */
body.task-login #layout::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(
    48% 42% at 50% 48%,
    rgba(3, 4, 7, 0.88) 0%,
    rgba(3, 4, 7, 0.55) 55%,
    transparent 100%
  ) !important;
}

body.task-login #layout-content {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#login-form {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 36px 34px 28px !important;
  text-align: center !important;
  background: #131b2e !important;
  border: 1px solid #253253 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.28) !important;
  color: #f4f6fb !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

/* Anula offset do Elastic em QUALQUER #logo na tela de login */
body.task-login #logo {
  top: auto !important;
  position: static !important;
}

#login-form::before,
#login-form::after {
  display: none !important;
  content: none !important;
}

/* Logo — dentro do cartão, sem o offset 16vh do Elastic */
body.task-login #layout-content > #logo {
  display: none !important;
}

body.task-login #login-form > #logo,
body.task-login #login-form img#logo,
#login-form > #logo,
#login-form img#logo,
#login-form img.portao-marca {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
  margin: 0 auto 0 !important;
  padding: 0 !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  z-index: 2 !important;
  vertical-align: top !important;
}

body.task-login #login-form #logo img,
#login-form #logo img {
  display: block !important;
  position: static !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

#kel-login-brand {
  display: block !important;
  position: static !important;
  text-align: center !important;
  margin: 20px 0 0 !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  z-index: 2 !important;
}
#kel-login-brand h1 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: #f4f6fb !important;
  line-height: 1.25 !important;
}
#kel-login-brand p {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #98a6c3 !important;
  line-height: 1.45 !important;
}

/* Formulário alinhado à esquerda como no Painel */
#login-form .formcontainer,
#login-form form,
#login-form table {
  text-align: left !important;
  margin-top: 24px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  align-self: stretch !important;
}

#login-form .formbuttons {
  display: grid !important;
  gap: 8px !important;
  margin-top: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  align-self: stretch !important;
}

#kel-login-footer.portao-rodape {
  display: block !important;
  width: 100% !important;
  align-self: stretch !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #253253 !important;
  color: #98a6c3 !important;
  font-size: 12px !important;
  text-align: center !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#login-form table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
}

#login-form table td,
#login-form label {
  color: #98a6c3 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
}

/* Esconde ícones laterais do Elastic — campos limpos */
#login-form .input-group-text,
#login-form .input-group-prepend,
#login-form .input-group-append {
  display: none !important;
}

#login-form .input-group {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

#login-form .form-control,
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #253253 !important;
  background: #0f1628 !important;
  color: #f4f6fb !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#login-form input:focus,
#login-form .form-control:focus {
  border-color: #37456b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(109, 91, 208, 0.12) !important;
}

#login-form .formbuttons {
  display: grid !important;
  gap: 8px !important;
  margin-top: 24px !important;
  padding: 0 !important;
  border: 0 !important;
}

#login-form .formbuttons .button,
#login-form input.button,
#login-form button.button,
#login-form .btn.btn-primary {
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: #2c4174 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

#login-form .formbuttons .button:hover,
#login-form input.button:hover,
#login-form .btn.btn-primary:hover {
  background: #375088 !important;
}

#kel-login-footer.portao-rodape {
  display: block !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #253253 !important;
  color: #98a6c3 !important;
  font-size: 12px !important;
  text-align: center !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Remove "Obter suporte" e rodapés Roundcube */
#login-footer,
.login-footer,
#login-form .support-link,
#supportlink,
#login-form a[href*="support"],
#login-form a.support,
body.task-login a[href*="github.com/jeboehm"],
body.task-login .bottombar,
body.task-login #bottomline,
body.task-login .product-info {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Preferências — esconde skin */
.section.skin,
fieldset.skin,
select[name="_skin"],
select#rcmfd_skin {
  display: none !important;
}

.badge.unread,
span.unreadcount {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

input, select, textarea, .form-control {
  background: var(--kel-elevated) !important;
  color: var(--kel-text) !important;
  border: 1px solid var(--kel-line-strong) !important;
}

/* Tabelas / listas de mensagem */
.messagelist thead th,
.listing thead th {
  background: var(--kel-mid) !important;
  color: var(--kel-muted) !important;
}

.messagelist tbody tr > td,
.listing tbody tr > td {
  background: transparent !important;
  color: var(--kel-text) !important;
  border-color: var(--kel-line) !important;
}

/* Preview vazio / watermark */
.watermark,
#message-htmlpart1,
.message-part,
#mailpreviewframe,
#messagecontframe,
iframe.watermark {
  background: var(--kel-deep) !important;
  color: var(--kel-muted) !important;
  border: 0 !important;
}

/* Esconde "Sobre" (About Roundcube) — branding externo */
#taskmenu a.about,
#layout-menu a.about,
a.about {
  display: none !important;
}

#taskmenu .special-buttons {
  background: var(--kel-panel) !important;
  border-top: 1px solid var(--kel-line) !important;
}


/* Elastic CSS variables — forçar paleta Gestor */
html, html.dark-mode, :root {
  /* texto / accent */
  --color-main: #e8eef8 !important;
  --color-main-dark: #9aa8c0 !important;
  --color-font: #e8eef8 !important;
  --color-black: #050d1c !important;
  --color-link: #c9d6ef !important;
  --color-link-hover: #e8eef8 !important;
  --color-border: rgba(255, 255, 255, 0.12) !important;

  /* superfícies (mapeamento Elastic layout → paleta Gestor) */
  --color-main-bg: #07162d !important;
  --color-content-bg: #07162d !important;
  --color-list-bg: #0a1628 !important;
  --color-sidebar-bg: #050d1c !important;
  --color-toolbar-bg: #0c1829 !important;
  --color-header-bg: #0c1829 !important;
  --color-footer-bg: #050d1c !important;
  --color-menu-bg: #050d1c !important;
  --color-searchbar-bg: #0c1829 !important;
  --color-popover-bg: #0f1f38 !important;
  --color-dialog-bg: #0f1f38 !important;
  --color-input-bg: #0c1829 !important;
  --color-card-bg: #0f1f38 !important;
  --color-elevated-bg: #0c1829 !important;
  --color-mid-bg: #0a1628 !important;
  --color-panel-bg: #050d1c !important;

  /* dark-mode aliases (colors.less @color-dark-*) */
  --color-dark-background: #07162d !important;
  --color-dark-font: #e8eef8 !important;
  --color-dark-border: rgba(255, 255, 255, 0.12) !important;
  --color-dark-hint: #9aa8c0 !important;
  --color-dark-list-selected-background: #0f1f38 !important;
  --color-dark-list-border: rgba(255, 255, 255, 0.12) !important;
  --color-dark-input: #e8eef8 !important;
  --color-dark-input-background: #0c1829 !important;
  --color-dark-input-border: rgba(255, 255, 255, 0.22) !important;
  --color-dark-input-focus: #e8eef8 !important;
  --color-dark-input-background-focus: #0f1f38 !important;
  --color-dark-popover-background: #0f1f38 !important;
  --color-dark-popover-border: rgba(255, 255, 255, 0.12) !important;
  --color-dark-scrollbar-track: #050d1c !important;
  --color-dark-scrollbar-thumb: #9aa8c0 !important;
  --color-dark-btn: #e8eef8 !important;
  --color-dark-btn-secondary-background: #0f1f38 !important;

  /* layout aliases usados por skins/plugins */
  --color-layout-sidebar-background: #050d1c !important;
  --color-layout-list-background: #0a1628 !important;
  --color-layout-content-background: #07162d !important;
  --color-layout-header-background: #0c1829 !important;
  --color-layout-footer-background: #050d1c !important;
  --color-layout-border: rgba(255, 255, 255, 0.12) !important;
  --color-taskmenu-background: #050d1c !important;
  --color-taskmenu-button: #e8eef8 !important;
  --color-toolbar-button: #e8eef8 !important;
  --color-list: #e8eef8 !important;
  --color-list-secondary: #9aa8c0 !important;
  --color-menu-hover: #e8eef8 !important;
  --color-menu-hover-background: #0f1f38 !important;
}

/* ========== Trilha Urbana (landingpage_loops) — só quando .brand-trilha ========== */

html.brand-trilha,
html.brand-trilha.dark-mode,
body.brand-trilha,
body.brand-trilha.elastic {
  --kel-deep: #190933;
  --kel-mid: #2E0E5F;
  --kel-panel: #190933;
  --kel-card: #231046;
  --kel-elevated: #2E0E5F;
  --kel-line: rgba(211, 179, 227, 0.18);
  --kel-line-strong: rgba(254, 109, 2, 0.35);
  --kel-text: #F4F4F4;
  --kel-muted: #D3B3E3;
  --kel-accent: #FE6D02;
  --kel-glow: rgba(254, 109, 2, 0.06);
  font-family: "Roboto Condensed", Inter, ui-sans-serif, system-ui, sans-serif !important;
}

html.brand-trilha,
html.brand-trilha body,
html.brand-trilha #layout,
html.brand-trilha #layout-content,
html.brand-trilha #layout-sidebar,
html.brand-trilha #layout-list,
html.brand-trilha #layout-menu {
  background-color: #190933 !important;
  color: #F4F4F4 !important;
  background-image: none !important;
}

html.brand-trilha #layout-menu {
  background: #190933 !important;
  border-right: 1px solid rgba(84, 23, 148, 0.55) !important;
}

html.brand-trilha #layout-sidebar { background: #231046 !important; }
html.brand-trilha #layout-list { background: #2E0E5F !important; }
html.brand-trilha #layout-content { background: #190933 !important; }

html.brand-trilha #taskmenu a:hover,
html.brand-trilha #taskmenu a.selected,
html.brand-trilha #layout-menu a.selected,
html.brand-trilha #mailboxlist li.selected > a {
  box-shadow: inset 3px 0 0 #FE6D02 !important;
  background: #2E0E5F !important;
}

html.brand-trilha .badge.unread,
html.brand-trilha span.unreadcount {
  background: #FE6D02 !important;
  color: #fff !important;
}

body.brand-trilha.task-login,
body.brand-trilha.task-login #layout,
body.brand-trilha.task-login #layout-content {
  background: #190933 !important;
  background-image: none !important;
}

body.brand-trilha.task-login #layout::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.brand-trilha #login-form {
  background: #231046 !important;
  border: 1px solid #541794 !important;
  box-shadow: none !important;
  filter: none !important;
  color: #F4F4F4 !important;
}

body.brand-trilha #kel-login-brand h1 {
  font-family: Fraunces, Georgia, serif !important;
  color: #FFFFFF !important;
}
body.brand-trilha #kel-login-brand p { color: #D3B3E3 !important; }
body.brand-trilha #login-form table td,
body.brand-trilha #login-form label { color: #D3B3E3 !important; }

body.brand-trilha #login-form .form-control,
body.brand-trilha #login-form input[type="text"],
body.brand-trilha #login-form input[type="email"],
body.brand-trilha #login-form input[type="password"] {
  background: #2E0E5F !important;
  border: 1px solid #541794 !important;
  color: #F4F4F4 !important;
}

body.brand-trilha #login-form input:focus,
body.brand-trilha #login-form .form-control:focus {
  border-color: #FE6D02 !important;
  box-shadow: 0 0 0 3px rgba(254, 109, 2, 0.2) !important;
}

body.brand-trilha #login-form .formbuttons .button,
body.brand-trilha #login-form input.button,
body.brand-trilha #login-form .btn.btn-primary {
  background: linear-gradient(180deg, #FE6D02 0%, #E65C00 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
body.brand-trilha #login-form .formbuttons .button:hover,
body.brand-trilha #login-form input.button:hover { background: #E65C00 !important; }

body.brand-trilha #kel-login-footer.portao-rodape {
  border-top-color: #541794 !important;
  color: #D3B3E3 !important;
}

html.brand-trilha,
html.brand-trilha.dark-mode {
  --color-main-bg: #190933 !important;
  --color-content-bg: #190933 !important;
  --color-list-bg: #2E0E5F !important;
  --color-sidebar-bg: #190933 !important;
  --color-toolbar-bg: #231046 !important;
  --color-menu-bg: #190933 !important;
  --color-dark-background: #190933 !important;
  --color-link: #FE6D02 !important;
  --color-link-hover: #E65C00 !important;
  --color-taskmenu-background: #190933 !important;
  --color-layout-content-background: #190933 !important;
  --color-layout-sidebar-background: #231046 !important;
  --color-layout-list-background: #2E0E5F !important;
}

/* Campo usuário Trilha: nome + @domínio */
body.brand-trilha .trilha-user-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #541794 !important;
  background: #2E0E5F !important;
}
body.brand-trilha .trilha-user-row input {
  flex: 1 1 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  background: transparent !important;
}
body.brand-trilha .trilha-user-row input:focus {
  box-shadow: none !important;
}
body.brand-trilha .trilha-domain-suffix {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px 0 4px !important;
  background: transparent !important;
  color: rgba(211, 179, 227, 0.55) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-left: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}
body.brand-trilha .trilha-user-row:focus-within {
  border-color: #FE6D02 !important;
  box-shadow: 0 0 0 3px rgba(254, 109, 2, 0.2) !important;
}