/* MaxCloud Mail — light branding over Elastic (Outlook-ish accents, not a full skin) */

:root {
  --acm-plex: #2563eb;
  --acm-plex-soft: #3b82f6;
  --acm-bg: #f3f6fb;
  --acm-surface: #ffffff;
  --acm-ink: #1e293b;
  --acm-muted: #64748b;
}

/* Login */
#layout-content.login,
body.task-login #layout {
  background:
    radial-gradient(900px 420px at 12% -10%, rgb(59 130 246 / 0.18), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgb(99 102 241 / 0.12), transparent 50%),
    linear-gradient(180deg, #eef3fb 0%, #f8fafc 100%) !important;
}

body.task-login #logo {
  max-height: 56px;
  max-width: 260px;
}

body.task-login .formcontainer,
body.task-login #login-form {
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 12px 32px -12px rgb(37 99 235 / 0.22) !important;
  border: 1px solid rgb(15 23 42 / 0.06) !important;
  background: rgb(255 255 255 / 0.92) !important;
}

body.task-login .button.mainaction,
body.task-login input.button.mainaction {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: #1d4ed8 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px -4px rgb(37 99 235 / 0.45);
}

body.task-login .button.mainaction:hover,
body.task-login input.button.mainaction:hover {
  background: #1d4ed8 !important;
}

/* Header logo sizing */
#logo {
  max-height: 36px;
  width: auto;
}

/* Soft app chrome */
#layout-menu {
  background: #0f172a !important;
}

#layout-menu .special-buttons a.selected,
#layout-menu a.selected,
#layout-menu .selected > a {
  background: rgb(37 99 235 / 0.22) !important;
  color: #fff !important;
}

/* Primary actions */
.button.mainaction,
a.button.mainaction,
input.button.mainaction {
  background-color: var(--acm-plex) !important;
  border-color: #1d4ed8 !important;
}

.button.mainaction:hover,
a.button.mainaction:hover {
  background-color: #1d4ed8 !important;
}

/* Selected list rows / folders */
#mailboxlist li.selected > a,
#messagelist tr.selected td {
  background-color: rgb(37 99 235 / 0.1) !important;
}

/* Focus rings a bit more Plex */
input:focus,
select:focus,
textarea:focus {
  border-color: rgb(37 99 235 / 0.55) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.14) !important;
}