/* FOO.XYZ admin sign-in. Scoped to the standalone authentication layout. */
body:has(#root > .App > .min-h-screen form) { background:#161b22!important; color:#eef2f7!important; color-scheme:dark!important; }
#root > .App > .min-h-screen:has(form) { font-family:Arial,Helvetica,sans-serif; }
#root > .App > .min-h-screen:has(form) img[alt="Invoice Ninja Logo"] { content:url('/foo-branding/logo.svg'); height:auto; width:240px; max-width:75vw; }
#root > .App > .min-h-screen:has(form) .max-w-md { background:transparent!important; border:0!important; box-shadow:none!important; }
#root > .App > .min-h-screen:has(form) h2 { color:#eef2f7!important; font-size:1.35rem; font-weight:600; }
#root > .App > .min-h-screen:has(form) label { color:#b6bfcc!important; }
#root > .App > .min-h-screen:has(form) input { background:#0c1117!important; color:#eef2f7!important; border:1px solid #3b4558!important; border-radius:8px; min-height:44px; }
#root > .App > .min-h-screen:has(form) input:focus { border-color:#8da3ef!important; box-shadow:0 0 0 3px #3454d140!important; }
#root > .App > .min-h-screen:has(form) button[type=submit] { background:#3454d1!important; border-color:#3454d1!important; color:white!important; min-height:46px; border-radius:8px; }
#root > .App > .min-h-screen:has(form) button[type=submit]:hover { background:#2943aa!important; }
#root > .App > .min-h-screen:has(form) a { color:#8da3ef!important; }
#root > .App > .min-h-screen:has(form) p.text-xs { color:#b6bfcc; }

/* Compact, top-aligned authentication layout. */
#root > .App > .min-h-screen:has(form) {
  justify-content:flex-start;
  padding:clamp(48px,10vh,112px) 24px 40px;
}
#root > .App > .min-h-screen:has(form) > .flex.justify-center {
  padding:0 0 28px;
}
#root > .App > .min-h-screen:has(form) .max-w-md {
  width:100%; max-width:440px; margin:0; padding:0;
}
#root > .App > .min-h-screen:has(form) h2 { text-align:center; font-size:1.5rem; }
#root > .App > .min-h-screen:has(form input[type=email]) h2::after {
  content:"Start with your email address.";
  display:block; margin-top:10px; color:#b6bfcc;
  font-size:14px; font-weight:400; line-height:1.5;
}
#root > .App > .min-h-screen:has(form) form { margin:28px 0 0; }
#root > .App > .min-h-screen:has(form) p.text-xs { margin-top:28px; }
#root > .App > .min-h-screen:has(form) form > .border { border-color:#3b4558!important; }
#root > .App > .min-h-screen:has(form) form > .border span { color:#eef2f7!important; }
#root > .App > .min-h-screen:has(form) form > .border .cursor-pointer { color:#8da3ef!important; }

/* Credential-step controls share the same dark palette. */
#root > .App > .min-h-screen:has(form) form button[type=button] {
  background:#1e2633!important; color:#dce5ff!important;
  border:1px solid #45516a!important; border-radius:8px; min-height:44px;
}
#root > .App > .min-h-screen:has(form) form button[type=button]:hover {
  background:#29354a!important; border-color:#8da3ef!important;
}
#root > .App > .min-h-screen:has(form) form .relative > button {
  background:transparent!important; border:0!important; min-height:0;
  color:#b6bfcc!important;
}
#root > .App > .min-h-screen:has(form) form .h-px { background:#364052!important; }
#root > .App > .min-h-screen:has(form) form .uppercase { color:#aeb9c9!important; }
#root > .App > .min-h-screen:has(form) form > .border { border-radius:8px; padding:12px; background:#1b222d; }
#root > .App > .min-h-screen:has(form) form > .space-y-2 { margin-bottom: -8px; }
#root > .App > .min-h-screen:has(form) img[alt="Invoice Ninja Logo"] { width:220px; }
#root > .App > .min-h-screen:has(form) > .flex.justify-center { padding-bottom:22px; }

/* Keep the wordmark and Login heading together as one centered header. */
#root > .App > .min-h-screen:has(form) > .flex.justify-center {
  width:100%; padding:0 0 16px; margin:0;
}
#root > .App > .min-h-screen:has(form) > .flex.justify-center a {
  display:block; line-height:0;
}
#root > .App > .min-h-screen:has(form) img[alt="Invoice Ninja Logo"] {
  display:block; margin:0 auto;
}
#root > .App > .min-h-screen:has(form) h2 {
  margin:0; text-align:center; font-size:22px; line-height:1.3;
}

/* Minimal sign-in header: compact wordmark followed directly by the form. */
#root > .App > .min-h-screen:has(form) h2 { display:none; }
#root > .App > .min-h-screen:has(form) h2::after { content:none; }
#root > .App > .min-h-screen:has(form) img[alt="Invoice Ninja Logo"] {
  content:url('/foo-branding/login-wordmark.svg'); width:220px;
}
#root > .App > .min-h-screen:has(form) > .flex.justify-center { padding-bottom:0; }