/*
 * Sign-in pages: login.php, mfa_verify.php (enter the code) and
 * mfa_setup.php (first-time authenticator setup).
 *
 * A plain, soft light background and one centred white card in the
 * system's navy and gold. No background picture, so the pages are light to
 * load and look the same on every screen. Loaded after AdminLTE.
 */
:root {
  --dilp-navy:  #0b2f63;
  --dilp-blue:  #1d5fb8;
  --dilp-gold:  #e9a92a;
  --dilp-red:   #a4161a;
  --dilp-ink:   #1d2b3f;
  --dilp-muted: #6b7a90;
  --dilp-field: #f3f6fb;
  --dilp-line:  #dde4ef;
  --dilp-page:  #eef2f8;
}

html, body { height: 100%; }
body.dilp-login {
  margin: 0;
  background: var(--dilp-page);
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--dilp-ink);
}

.login-stage {
  min-height: calc(100vh - 44px);   /* leave room for the copyright line */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* ---- The card ---- */
.login-slot {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--dilp-navy);
  box-shadow: 0 10px 30px rgba(11, 47, 99, .10), 0 1px 3px rgba(11, 47, 99, .08);
  padding: 28px 28px 24px;
  font-size: 15px;
}
.login-slot.is-wide { max-width: 760px; }   /* authenticator setup */

.login-panel { display: flex; flex-direction: column; gap: 1.1em; }

.login-brand { text-align: center; }
.login-brand img { height: 64px; width: auto; }
.login-brand-name {
  margin: .5em 0 0;
  font-size: .78em; font-weight: 700; letter-spacing: .12em;
  color: var(--dilp-muted); text-transform: uppercase;
}

.login-intro { text-align: center; }
.login-kicker {
  display: inline-block;
  font-size: .7em; font-weight: 700; letter-spacing: .14em;
  color: var(--dilp-gold); text-transform: uppercase;
  margin: 0 0 .35em;
}
.login-heading {
  font-size: 1.55em; font-weight: 700; line-height: 1.1;
  color: var(--dilp-navy); margin: 0 0 .3em;
}
.login-sub { font-size: .9em; color: var(--dilp-muted); margin: 0; line-height: 1.4; }
.login-sub strong { color: var(--dilp-ink); }
.login-badge {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: .8em; padding: .35em .75em;
  font-size: .74em; font-weight: 600; color: var(--dilp-navy);
  background: #eaf1fb; border: 1px solid #cfdcf0; border-radius: 999px;
}
.login-badge i { color: var(--dilp-blue); }

/* Status message: a slim strip above the form. */
.login-status {
  display: flex; align-items: center; gap: .55em;
  font-size: .82em; font-weight: 600;
  padding: .55em .8em; border-radius: 8px; border-left: 4px solid;
}
.login-status.is-danger  { background: #fdecec; color: #8c1d1d; border-color: var(--dilp-red); }
.login-status.is-warning { background: #fff6e3; color: #7a5300; border-color: var(--dilp-gold); }
.login-status.is-success { background: #e9f7ef; color: #1e6b3d; border-color: #2e9e5b; }

/* Fields: icon inside on the left, soft fill, navy focus ring. */
.login-form { display: flex; flex-direction: column; gap: .85em; margin: 0; }
.field-label {
  display: block; margin: 0 0 .3em;
  font-size: .7em; font-weight: 700; letter-spacing: .08em;
  color: var(--dilp-muted); text-transform: uppercase;
}
.field {
  position: relative; display: flex; align-items: center;
  background: var(--dilp-field);
  border: 1.5px solid var(--dilp-line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field:focus-within {
  background: #fff;
  border-color: var(--dilp-blue);
  box-shadow: 0 0 0 3px rgba(29, 95, 184, .16);
}
.field > .field-icon {
  width: 2.6em; text-align: center; color: #8a99ae; font-size: .95em; flex: none;
}
.field:focus-within > .field-icon { color: var(--dilp-blue); }
.field input {
  flex: 1; min-width: 0;
  height: 2.75em; padding: 0 .4em 0 0;
  font-size: 1em; color: var(--dilp-ink);
  background: transparent; border: 0; outline: 0;
}
.field input::placeholder { color: #9aa7b8; }
.field .field-toggle {
  width: 2.8em; height: 2.75em; flex: none;
  border: 0; background: transparent; color: #8a99ae; cursor: pointer;
  border-radius: 0 10px 10px 0;
}
.field .field-toggle:hover, .field .field-toggle:focus { color: var(--dilp-blue); outline: 0; }

.caps-hint {
  display: none; margin-top: .35em;
  font-size: .74em; font-weight: 600; color: #8a5a00;
}
.caps-hint.is-on { display: block; }

.login-submit {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%; height: 2.9em; margin-top: .15em;
  font-size: 1em; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: var(--dilp-navy);
  border: 0; border-radius: 10px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.login-submit:hover  { background: var(--dilp-blue); color: #fff; }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus  { outline: 0; box-shadow: 0 0 0 3px rgba(233, 169, 42, .55); }
.login-submit:disabled { opacity: .8; cursor: wait; }

.login-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  height: 2.6em; padding: 0 1em;
  font-size: .9em; font-weight: 600; color: var(--dilp-navy);
  background: #fff; border: 1.5px solid var(--dilp-line); border-radius: 10px; cursor: pointer;
}
.login-secondary:hover { border-color: var(--dilp-blue); color: var(--dilp-blue); }

.login-link { font-size: .82em; text-align: center; }
.login-link a { color: var(--dilp-blue); }

.login-copyright {
  text-align: center; color: var(--dilp-muted); font-size: 11.5px;
  margin: 0; padding: 0 16px 16px;
}

/* ---- Authenticator code entry ---- */
.otp-input {
  width: 100%; height: 2.4em;
  font-size: 1.9em; letter-spacing: .45em; text-align: center; padding-left: .45em;
  font-family: 'Courier New', monospace; font-weight: 700; color: var(--dilp-navy);
  background: var(--dilp-field); border: 1.5px solid var(--dilp-line); border-radius: 10px;
  outline: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.otp-input:focus { background: #fff; border-color: var(--dilp-blue); box-shadow: 0 0 0 3px rgba(29, 95, 184, .16); }

.login-divider { border: 0; border-top: 1px solid var(--dilp-line); margin: .2em 0; }

.login-recovery { font-size: .85em; }
.login-recovery summary { cursor: pointer; color: var(--dilp-blue); font-weight: 600; }
.login-recovery p { color: var(--dilp-muted); margin: .6em 0; }
.login-recovery .recovery-row { display: flex; gap: .5em; }
.login-recovery .recovery-row input {
  flex: 1; min-width: 0; height: 2.6em; padding: 0 .8em;
  font-family: 'Courier New', monospace; font-size: 1em; text-transform: uppercase;
  background: var(--dilp-field); border: 1.5px solid var(--dilp-line); border-radius: 10px; outline: 0;
}
.login-recovery .recovery-row input:focus { background: #fff; border-color: var(--dilp-blue); }

/* ---- Authenticator setup ---- */
.setup-step { display: flex; gap: .8em; align-items: flex-start; margin-bottom: .9em; }
.setup-step .step-number {
  flex: none; width: 1.7em; height: 1.7em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dilp-navy); color: #fff; font-size: .85em; font-weight: 700;
}
.qr-frame { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--dilp-line); border-radius: 10px; }
.qr-frame svg { display: block; width: 200px; max-width: 100%; height: auto; }   /* easy to scan, keeps the card compact */
.secret-text {
  font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700;
  letter-spacing: 2px; word-break: break-all;
  background: var(--dilp-field); padding: 10px; border-radius: 8px; border: 1px dashed #b8c4d6;
}
.recovery-code {
  font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700;
  padding: 6px 10px; background: #fff; border: 1px solid #ced4da;
  border-radius: 6px; display: inline-block; margin: 3px;
}

/* Pop-up messages: navy button to match. */
.swal2-styled.swal2-confirm { background-color: var(--dilp-navy); border-radius: 8px !important; }

@media (max-width: 767.98px) {
  .login-slot.is-wide .border-right { border-right: 0 !important; margin-bottom: 1em; }
}
@media (max-width: 420px) {
  .login-slot { padding: 22px 18px 18px; }
  .otp-input { font-size: 1.6em; letter-spacing: .35em; }
}