/* Account pages served by PostfixAdmin (/users/: password reset, change password, mailbox login) - same "liquid glass" look as the webmail login.
   Injected by nginx on /users/ pages only. The domain's colours come from themes/pa-<domain>.css, its logo is swapped in by nginx. */

:root { --cb-a: #4452e0; --cb-a-rgb: 68 82 224; --cb-b: #7080ff; --cb-b-rgb: 112 128 255; --cb-g2: #5b57d6; }

html { min-height: 100%; }
body {
  --ink: #101828; --muted: #5b6577; --label: #232b3a; --line: rgb(16 24 40 / 14%);
  --glass: rgb(255 255 255 / 58%); --glass-edge: rgb(255 255 255 / 85%); --field: rgb(255 255 255 / 80%); --field-focus: #fff; --shadow: 16 24 40;
  margin: 0; min-height: 100vh; color: var(--ink); overflow-x: hidden; padding: 0 0 40px;
  font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 8% -10%, rgb(var(--cb-a-rgb) / 22%), transparent 60%),
    radial-gradient(900px 640px at 100% 108%, rgb(var(--cb-b-rgb) / 24%), transparent 60%),
    linear-gradient(160deg, #f6f8fd 0%, #eef1f9 100%) fixed;
}
@media (prefers-color-scheme: dark) {
  body {
    --ink: #f2f5fb; --muted: #aab4c8; --label: #dfe5f1; --line: rgb(255 255 255 / 16%);
    --glass: rgb(22 28 46 / 55%); --glass-edge: rgb(255 255 255 / 16%); --field: rgb(8 12 24 / 55%); --field-focus: rgb(8 12 24 / 85%); --shadow: 0 0 0;
    background:
      radial-gradient(1100px 700px at 8% -10%, rgb(var(--cb-a-rgb) / 34%), transparent 60%),
      radial-gradient(900px 640px at 100% 108%, rgb(var(--cb-b-rgb) / 30%), transparent 60%),
      linear-gradient(160deg, #080c18 0%, #0d1426 100%) fixed;
  }
}
/* colour orbs behind the glass */
body::before, body::after { content: ""; position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(8px); }
body::before { width: 360px; height: 360px; left: calc(50% - 420px); top: 12%; background: radial-gradient(circle at 35% 30%, rgb(var(--cb-a-rgb) / 65%), rgb(var(--cb-a-rgb) / 0%) 70%); }
body::after { width: 300px; height: 300px; right: calc(50% - 400px); bottom: 8%; background: radial-gradient(circle at 40% 35%, rgb(var(--cb-b-rgb) / 65%), rgb(var(--cb-b-rgb) / 0%) 70%); }

/* ---- the glass card (PostfixAdmin's own main container) */
body > .container[role="main"] {
  position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column;
  width: min(460px, calc(100% - 32px)) !important; min-width: 0 !important; margin: 7vh auto 0; padding: 34px 34px 28px;
  border: 1px solid var(--glass-edge); border-radius: 30px; background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(var(--shadow) / 10%), 0 24px 60px -24px rgb(var(--shadow) / 45%), 0 60px 120px -50px rgb(var(--cb-a-rgb) / 45%);
}
body > .container[role="main"]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(155deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 34%); }
@media (prefers-color-scheme: dark) { body > .container[role="main"]::after { background: linear-gradient(155deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 0%) 32%); } }
body > .container[role="main"] > br { display: none; }

/* logo on a white plate (same as the webmail login) */
body > .container[role="main"] > nav.navbar { order: 1; position: static; min-height: 0; margin: 0 0 18px; padding: 0; border: 0; background: transparent; box-shadow: none; }
nav.navbar > .container { width: auto; margin: 0; padding: 0; display: block; }
nav.navbar .navbar-header { float: none; display: flex; justify-content: center; }
nav.navbar .navbar-brand { float: none; height: auto; padding: 0; margin: 0; display: block; }
#login_header_logo {
  display: block; width: auto; height: auto; max-width: min(250px, 100%); max-height: 86px; margin: 0 auto; box-sizing: content-box; padding: 13px 20px; border-radius: 22px; background: #fff; object-fit: contain;
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 0 0 1px rgb(var(--shadow) / 6%), 0 18px 34px -16px rgb(var(--shadow) / 45%), 0 8px 24px -12px rgb(var(--cb-a-rgb) / 45%);
}

/* messages (e.g. "We processed your request") - PostfixAdmin prints them above the logo, so reorder */
body > .container[role="main"] > .alert { order: 2; margin: 0 0 18px; padding: 13px 16px; border: 1px solid rgb(var(--cb-a-rgb) / 28%); border-radius: 16px; background: rgb(var(--cb-a-rgb) / 12%); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
body > .container[role="main"] > .alert ul { margin: 0; padding: 0; list-style: none; }
.alert-danger { border-color: rgb(220 38 38 / 35%) !important; background: rgb(220 38 38 / 11%) !important; }
.alert-warning { border-color: rgb(217 119 6 / 38%) !important; background: rgb(245 158 11 / 13%) !important; }
.alert-success { border-color: rgb(22 163 74 / 35%) !important; background: rgb(22 163 74 / 11%) !important; }

/* headings and forms */
body > .container[role="main"] > :is(h1, h2, h3) { order: 3; margin: 4px 0 20px; text-align: center; font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
body > .container[role="main"] > form { order: 4; margin: 0; }
#login { order: 3; width: auto; padding: 0; margin: 0; }
#login > h2 { margin: 4px 0 20px; text-align: center; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
#login .well, .well { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.form-group { margin: 0 0 16px; }
label { display: block; margin: 0 0 7px 3px; font-size: 13px; font-weight: 650; color: var(--label); }
.form-control {
  display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); background-color: var(--field); color: var(--ink); font-size: 16px; box-shadow: inset 0 1px 2px rgb(var(--shadow) / 6%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:focus { outline: 0; border-color: var(--cb-a); background-color: var(--field-focus); box-shadow: 0 0 0 4px rgb(var(--cb-a-rgb) / 20%); }
.form-control:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--field-focus) inset !important; }
.btn { border-radius: 16px; font-weight: 650; }
.btn-primary {
  display: block; width: 100%; height: 54px; margin-top: 22px; border: 0; color: #fff; font-size: 16.5px; letter-spacing: .01em;
  background: linear-gradient(105deg, var(--cb-a) 0%, var(--cb-g2, var(--cb-a)) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 35%) inset, 0 -1px 0 rgb(0 0 0 / 12%) inset, 0 16px 28px -14px rgb(var(--cb-a-rgb) / 85%); transition: transform .15s, filter .15s;
}
.btn-primary:hover, .btn-primary:focus { color: #fff; background: linear-gradient(105deg, var(--cb-a) 0%, var(--cb-g2, var(--cb-a)) 100%); filter: saturate(1.1) brightness(1.04); transform: translateY(-1px); }
.btn-default { height: 46px; line-height: 32px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.btn-default:hover { background: var(--field-focus); color: var(--ink); }
.reset-button { margin-top: 6px; }
a { color: var(--cb-a); }
@media (prefers-color-scheme: dark) { a { color: color-mix(in srgb, var(--cb-a) 45%, #fff); } }

/* PostfixAdmin's footer shows its version, an update check and a link to one fixed website - replaced by a simple back link (cb-account.js) */
footer.footer { position: static; z-index: 1; background: transparent; border: 0; height: auto; margin: 16px 0 0; padding: 0; text-align: center; color: var(--muted); }
footer.footer .container { width: auto; padding: 0; font-size: 0; line-height: 0; }
footer.footer .container > div { font-size: 13px; line-height: 1.6; }
footer.footer a[href*="github"], footer.footer #update-check, footer.footer .container > a, footer.footer .container > span:not(.cb-secure):not(#update-check) { display: none !important; }
.cb-back { display: block; margin-top: 4px; font-weight: 600; text-decoration: none; }
.cb-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.cb-secure { display: block; margin-bottom: 6px; font-weight: 600; letter-spacing: .02em; color: #2f7d4f; }
@media (prefers-color-scheme: dark) { .cb-secure { color: #7bd69b; } }
@media (max-width: 480px) { body > .container[role="main"] { padding: 28px 20px 22px; border-radius: 26px; margin-top: 4vh; } body::before { width: 220px; height: 220px; left: -60px; } body::after { width: 200px; height: 200px; right: -60px; } }
@media (prefers-reduced-motion: reduce) { .btn-primary, .form-control { transition: none; } }
@supports not (backdrop-filter: blur(1px)) { body > .container[role="main"] { background: rgb(255 255 255 / 90%); } }

/* ---- "choose a new password" page: what is already known is shown as text, not asked again */
.cb-for { margin: -8px 0 18px; text-align: center; font-size: 14.5px; color: var(--muted); word-break: break-all; }
.cb-for strong { color: var(--ink); font-weight: 650; }
.cb-ok { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: rgb(22 163 74 / 12%); border: 1px solid rgb(22 163 74 / 32%); color: var(--ink); font-size: 14px; font-weight: 600; }

/* PostfixAdmin's own menu page (only reached by people who open the user portal directly): readable on the glass card */
.table, .table > tbody > tr > td, .table > thead > tr > th { background: transparent !important; color: var(--ink); border-color: var(--line) !important; }
.table .btn-primary { margin-top: 0; }