/* Aixly MES — sign-in page layout + demo-credentials panel.
 * Served as an external stylesheet (the deployed CSP blocks inline <style>).
 * Two-column on demo hosts: the form is the hero (left), demo logins to the side. */

/* Widen the centered auth card only when the credentials panel is present. */
.auth-card:has(.login-split.has-creds) { max-width: 960px; width: 100%; }

.login-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 768px) {
  .login-split.has-creds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.login-main .login-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .15rem; }
.login-main .login-sub { color: #6b7280; font-size: .9rem; margin: 0 0 1.1rem; }

.login-creds { background: var(--panel); border: 1px solid var(--border-subtle); border-radius: 2px; padding: 1rem 1rem .85rem; }
.login-creds-head { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.login-creds-head i { color: var(--color-accent); }
.login-creds-note { color: #6b7280; font-size: .8rem; line-height: 1.45; margin: .1rem 0 .8rem; }
.login-creds-note code { background: #eef1f5; border: 1px solid #e2e6ec; border-radius: 2px; padding: .02rem .3rem; font-size: .78rem; font-family: var(--font-mono); }

.login-grp { margin-bottom: .7rem; }
.login-grp:last-of-type { margin-bottom: 0; }
.login-grp-h { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a93a2; margin: 0 0 .3rem; }
.login-grp.is-live { background: #f0fbf4; border: 1px solid #cdeed8; border-radius: 2px; padding: .55rem .6rem; margin: -.1rem -.15rem .8rem; }
.login-grp.is-live .login-grp-h { color: #15803d; }
.login-tag { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .08rem .4rem; border-radius: 2px; background: #e7ebf1; color: #5b6675; }
.login-grp.is-live .login-tag { background: #16a34a; color: #fff; }

.login-row { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.login-role { flex: 0 0 auto; min-width: 84px; font-size: .72rem; font-weight: 600; color: #475067; background: #eef1f5; border: 1px solid #e2e6ec; border-radius: 2px; padding: .12rem .45rem; text-align: center; }
.login-grp.is-live .login-role { background: #dcf3e4; border-color: #bce6c9; color: #15803d; }

.demo-creds-copy { flex: 1 1 auto; display: flex; align-items: center; gap: .4rem; justify-content: space-between; background: #fff; border: 1px solid #e2e6ec; border-radius: 2px; padding: .3rem .55rem; cursor: pointer; font: inherit; color: #1f2937; transition: border-color .12s, background .12s; }
.demo-creds-copy:hover { border-color: var(--color-accent); background: #f5f8ff; }
.demo-creds-value { font-family: var(--font-mono); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-creds-copy i { color: #9aa3b2; font-size: .95rem; flex: 0 0 auto; }
.demo-creds-feedback { display: none; color: #16a34a; font-size: .72rem; font-weight: 700; flex: 0 0 auto; }
.demo-creds-copy.is-copied .demo-creds-feedback { display: inline; }
.demo-creds-copy.is-copied i { display: none; }

.login-creds-foot { color: #9aa3b2; font-size: .72rem; margin: .7rem 0 0; display: flex; align-items: center; gap: .35rem; }