/* Cortex360 Webmail — identidade visual oficial
   Paleta: #0F172A / #22D3EE / #F8FAFC / #0891B2 */
:root {
  --cortex-bg: #0F172A;
  --cortex-surface: #111827;
  --cortex-surface-2: #1E293B;
  --cortex-text: #F8FAFC;
  --cortex-muted: #94A3B8;
  --cortex-accent: #22D3EE;
  --cortex-accent-strong: #0891B2;
  --cortex-border: rgba(148, 163, 184, .16);
  --cortex-glow: rgba(34, 211, 238, .22);
}

/* Login */
html,
body.task-login {
  margin: 0 !important;
  min-height: 100% !important;
  background: var(--cortex-bg) !important;
}

body.task-login #layout {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(34,211,238,.14), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(8,145,178,.10), transparent 34%),
    linear-gradient(rgba(34,211,238,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.045) 1px, transparent 1px),
    var(--cortex-bg) !important;
  background-size: auto, auto, 50px 50px, 50px 50px, auto !important;
}

body.task-login #layout-content.cortex-login {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 42px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.task-login .cortex-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2px;
}

body.task-login #logo {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  margin: 0 auto 10px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 22px var(--cortex-glow));
}

body.task-login .cortex-brand-name {
  color: var(--cortex-text);
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}

body.task-login .cortex-brand-name span {
  color: var(--cortex-accent);
}

body.task-login .cortex-brand-subtitle {
  margin-top: 7px;
  color: var(--cortex-muted);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body.task-login #login-form.cortex-login-card {
  width: min(390px, calc(100vw - 40px)) !important;
  margin: 0 !important;
  padding: 28px !important;
  border: 1px solid rgba(34, 211, 238, .20) !important;
  border-radius: 24px !important;
  background: rgba(15, 23, 42, .82) !important;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .46), 0 0 34px rgba(34, 211, 238, .05) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.task-login #login-form .input-group {
  margin-bottom: 12px;
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(30, 41, 59, .74) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.task-login #login-form .input-group:focus-within {
  border-color: var(--cortex-accent) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12) !important;
}

body.task-login #login-form .input-group-text,
body.task-login #login-form .form-control {
  border: 0 !important;
  background: transparent !important;
  color: var(--cortex-text) !important;
  box-shadow: none !important;
}

body.task-login #login-form .input-group-text {
  color: var(--cortex-muted) !important;
}

body.task-login #login-form .form-control::placeholder {
  color: #64748B !important;
  opacity: 1;
}

body.task-login #login-form .btn-primary,
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
  min-height: 46px !important;
  margin-top: 5px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--cortex-accent) !important;
  color: #082F49 !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  box-shadow: 0 12px 30px rgba(34, 211, 238, .16) !important;
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form input[type="submit"]:hover {
  background: #67E8F9 !important;
  color: #0F172A !important;
}

body.task-login #login-footer {
  margin-top: 17px !important;
  color: var(--cortex-muted) !important;
  font-size: .75rem !important;
}

body.task-login #login-footer a {
  color: var(--cortex-accent) !important;
}

/* Navegação principal */
#layout-menu {
  background: var(--cortex-bg) !important;
  border-color: rgba(34, 211, 238, .10) !important;
}

#layout-menu .popover-header {
  background: var(--cortex-bg) !important;
  border-color: var(--cortex-border) !important;
}

#layout-menu .popover-header #logo {
  max-width: 52px !important;
  max-height: 52px !important;
  filter: drop-shadow(0 0 10px rgba(34,211,238,.16));
}

#taskmenu a,
#taskmenu .button {
  color: #CBD5E1 !important;
}

#taskmenu a:hover,
#taskmenu .button:hover {
  color: var(--cortex-accent) !important;
  background: rgba(34, 211, 238, .08) !important;
}

#taskmenu a.selected,
#taskmenu .button.selected {
  color: var(--cortex-accent) !important;
  background: rgba(34, 211, 238, .12) !important;
}

#taskmenu .compose {
  color: #082F49 !important;
  background: var(--cortex-accent) !important;
}

#taskmenu .compose:hover,
#taskmenu .compose.selected {
  color: #0F172A !important;
  background: #67E8F9 !important;
}

/* Acentos do conteúdo */
a,
.listing li.selected > a,
.listing li.selected .subject {
  --link-color: var(--cortex-accent-strong);
}

.btn-primary,
.btn.btn-primary {
  border-color: var(--cortex-accent-strong) !important;
  background-color: var(--cortex-accent-strong) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--cortex-accent-strong) !important;
  box-shadow: 0 0 0 .2rem rgba(8, 145, 178, .12) !important;
}

html.dark-mode .btn-primary,
html.dark-mode .btn.btn-primary {
  border-color: var(--cortex-accent) !important;
  background-color: var(--cortex-accent) !important;
  color: #082F49 !important;
}

html.dark-mode a {
  color: var(--cortex-accent) !important;
}

@media screen and (max-width: 480px) {
  body.task-login #layout-content.cortex-login {
    padding: 28px 16px !important;
  }

  body.task-login #logo {
    width: 94px !important;
    height: 94px !important;
  }

  body.task-login .cortex-brand-name {
    font-size: 1.75rem;
  }

  body.task-login #login-form.cortex-login-card {
    width: calc(100vw - 32px) !important;
    padding: 22px !important;
  }
}

/* Ajuste Cortex360: neutraliza o posicionamento absoluto do logo do Elastic. */
body.task-login .cortex-brand #logo {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  margin: 0 auto 16px !important;
}