/* Syspanel Webmail — estética Sysprovider (login + bandeja) */
:root {
  --sg-sidebar: #0f172a;
  --sg-accent: #0ea5e9;
  --sg-accent-dark: #0284c7;
  --sg-accent-light: #38bdf8;
  --sg-bg: #f1f5f9;
  --sg-card: #ffffff;
  --sg-text: #0f172a;
  --sg-muted: #64748b;
  --sg-border: #e2e8f0;
}

/* Login */
body.task-login {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0ea5e9 100%) !important;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
}
body.task-login #layout {
  background: transparent !important;
}
body.task-login #layout-content {
  background: transparent !important;
}
body.task-login #layout-content .header,
body.task-login h1.voice + #layout-content .header,
body.task-login #logo {
  color: #fff !important;
}
body.task-login #login-form,
body.task-login form#login-form,
body.task-login #rcmloginform,
body.task-login .formcontainer {
  background: var(--sg-card) !important;
  border-radius: 1rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35) !important;
  padding: 1.75rem 1.5rem 1.5rem !important;
  border: 0 !important;
}
body.task-login #login-form::before,
body.task-login .formcontainer::before {
  content: "SYSPANEL";
  display: block;
  text-align: center;
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--sg-muted);
  font-weight: 700;
  margin-bottom: .35rem;
}
body.task-login input[type="text"],
body.task-login input[type="password"],
body.task-login input.form-control {
  border: 1px solid var(--sg-border) !important;
  border-radius: .5rem !important;
}
body.task-login input:focus {
  border-color: var(--sg-accent) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15) !important;
}
#login-form .button.mainaction,
body.task-login button.btn-primary,
body.task-login input.button.mainaction {
  background: var(--sg-accent) !important;
  border-color: var(--sg-accent-dark) !important;
  border-radius: .5rem !important;
  font-weight: 600 !important;
}
#login-form .button.mainaction:hover,
body.task-login button.btn-primary:hover {
  background: var(--sg-accent-dark) !important;
}
.task-login #login-footer,
body.task-login #login-footer {
  color: #e2e8f0 !important;
  text-align: center;
}
.task-login #login-footer a {
  color: var(--sg-accent-light) !important;
}
body.task-login #login-footer::after {
  content: " · Syspanel · Sysprovider";
}

/* App chrome */
#layout-menu,
#taskmenu,
body.task-mail #layout-menu {
  background: var(--sg-sidebar) !important;
}
#taskmenu a,
#taskmenu .button,
#layout-menu a {
  color: #94a3b8 !important;
}
#taskmenu a.selected,
#taskmenu a:hover {
  color: #fff !important;
  border-left-color: var(--sg-accent) !important;
}
#layout-sidebar {
  background: #f8fafc !important;
  border-right: 1px solid var(--sg-border) !important;
}
#layout-content header,
#layout-list header,
.header.toolbar {
  border-bottom: 1px solid var(--sg-border);
}
.button.mainaction,
.btn.btn-primary,
a.button.mainaction {
  background: var(--sg-accent) !important;
  border-color: var(--sg-accent-dark) !important;
}
.button.mainaction:hover,
.btn.btn-primary:hover {
  background: var(--sg-accent-dark) !important;
}
#message-header,
.message-partheaders {
  border-color: var(--sg-border) !important;
}

/* Logo login */
body.task-login #logo img,
body.task-login .logo img,
body.task-login img#logo {
  max-height: 48px !important;
  max-width: 220px !important;
  width: auto !important;
  height: 48px !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  body.task-login #login-form,
  body.task-login .formcontainer {
    margin: 1rem !important;
    width: auto !important;
  }
}