/* ========================================================================
 *  KX-PAY V2 dashboard  ·  02-login.css
 * -----------------------------------------------------------------------
 *  Login screen and maintenance notice
 *
 *  Lifted verbatim from V1 dashboard.html lines 196-259.
 *  Load order matters — see the numeric prefix.
 * =======================================================================
 */

  /* ----------------------------------------------------------------- LOGIN */
  #login-screen {
    position: fixed; inset: 0; background: #0f172a;
    display: flex; align-items: center; justify-content: center; z-index: 1000;
  }
  /* The enrolment screen is a full-page overlay, exactly like the login
     screen. It had no positioning of its own, so it rendered in normal flow
     and ended up tucked under the sidebar -- a modal that is not centred does
     not read as a modal at all. */
  #totp-enrol {
    position: fixed; inset: 0; background: #0f172a;
    display: flex; align-items: center; justify-content: center; z-index: 1000;
    overflow-y: auto; padding: 24px 0;
  }
  #totp-enrol.hidden { display: none !important; }

  .login-box {
    background: white; border-radius: 12px; padding: 40px;
    width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  }
  .login-box h1 {
    font-size: 28px; font-weight: 600; margin-bottom: 4px; color: #0f172a;
  }
  .login-box .subtitle { color: #64748b; margin-bottom: 24px; font-size: 13px; }
  .login-box label {
    display: block; font-size: 12px; color: #475569;
    margin-bottom: 4px; font-weight: 500;
  }
  .login-box input {
    width: 100%; padding: 10px 12px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    margin-bottom: 16px; outline: none;
  }
  .login-box input:focus { border-color: #f59e0b; }
  .login-box button {
    width: 100%; padding: 10px; background: #0f172a; color: white;
    border: none; border-radius: 6px; font-weight: 500; font-size: 14px;
  }
  .login-box button:hover { background: #1e293b; }
  .login-box button:disabled { opacity: 0.6; cursor: not-allowed; }
  .login-error {
    color: #dc2626; font-size: 13px; margin-top: 12px;
    background: #fee2e2; padding: 8px 12px; border-radius: 6px;
  }

  /* ---------------------------------------------------------- MAINTENANCE */
  #maintenance-screen {
    position: fixed; inset: 0; background: #0f172a;
    display: flex; align-items: center; justify-content: center; z-index: 1000;
  }
  .maint-box {
    background: white; border-radius: 12px; padding: 44px 40px;
    width: 420px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  }
  .maint-icon { font-size: 44px; margin-bottom: 12px; }
  .maint-box h1 {
    font-size: 24px; font-weight: 600; margin-bottom: 10px; color: #0f172a;
  }
  .maint-msg {
    color: #475569; font-size: 14px; line-height: 1.6;
    margin-bottom: 24px; white-space: pre-wrap;
  }
  .maint-admin-link {
    background: transparent; border: none; color: #94a3b8;
    font-size: 12px; cursor: pointer; text-decoration: underline;
    font-family: inherit;
  }
  .maint-admin-link:hover { color: #475569; }
  /* In-app reminder banner shown to super_admin while maintenance is ON */
  #maint-banner {
    background: #fef3c7; color: #78350f; text-align: center;
    font-size: 13px; font-weight: 600; padding: 8px 16px;
    border-bottom: 1px solid #fde68a;
  }