/* ==========================================================================
   Kapit override — Staff / Agent login screen
   Loads AFTER scp/css/login.css. Skins the gateway with a Deep-palm backdrop
   and a clean white card. Requires kapit-tokens.css (loaded first).
   ========================================================================== */

body, #loginBody, input { font-family: var(--font-body); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); }

/* Deep-palm backdrop — replace the blurred-logo background with a solid stage */
#loginBody { background: var(--kapit-teal-900); }
#brickwall, #background {
  background-image: none !important;
  background: radial-gradient(1200px 600px at 50% -10%, var(--kapit-teal-800), var(--kapit-teal-900)) !important;
  filter: none !important;
}
#blur { display: none !important; }
#background-compat { background-color: var(--kapit-teal-900) !important; }

/* The login card */
#loginBox {
  background: #fff;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: 28px 26px;
}
#loginBox:after {
  background-color: #fff !important;   /* solid, not the translucent tint */
  border: 1px solid var(--sand-3) !important;
  border-radius: var(--radius-2) !important;
}
#logo a { height: auto; margin-bottom: 8px; }
#logo a img { max-height: 48px; max-width: 220px; }

/* Inputs → pill, teal focus */
#loginBox input[type=text], #loginBox input[type=email],
#loginBox input[type=password], #loginBox input[type=number] {
  border: 1.5px solid var(--sand-3);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  padding: 10px 16px;
}
#loginBox input:focus {
  outline: none;
  border-color: var(--kapit-teal-500);
  box-shadow: 0 0 0 3px var(--kapit-teal-100);
}

/* Buttons — primary submit = teal */
.button, .action-button, input[type=submit], button[type=submit] {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: none;
  border: 1.5px solid var(--sand-3);
  background: #fff;
  color: var(--ink-soft);
}
input[type=submit], button[type=submit], .primary.button {
  background-color: var(--kapit-teal-500) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
input[type=submit]:hover, button[type=submit]:hover, .primary.button:hover {
  background-color: var(--kapit-teal-600) !important;
}

/* Company block + external-auth buttons */
#company .content { color: var(--ink-soft); }
.external-auth-box {
  border: 1.5px solid var(--sand-3);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-soft);
}
.external-auth-box:hover { border-color: var(--kapit-teal-300); background: var(--kapit-teal-50); }

/* Keep the small "powered by" mark unobtrusive */
#poweredBy, #poweredBy a { color: var(--ink-muted); }