/* =============================================================================
   Operator sign-in — matches the vendor sign-in form
   =============================================================================
   Deliberately the same card as the vendor portal: same teal wash, same 430px
   card, same logo block, same 48px controls, same #176b87 gradient button, same
   480px breakpoint. Two people sign in to this system and both should recognise
   it as the same product.

   It is a SEPARATE stylesheet from app.css, not a section of it. The console
   chrome and this page share nothing — no topbar, no queue pills, no tables —
   and the sign-in page is the one screen an unauthenticated request can reach,
   so keeping it a standalone file means it carries none of the console's rules.

   Why the styles are here and not in a <style> block like the vendor form: the
   console sends Content-Security-Policy with style-src 'self', which blocks
   inline stylesheets. The vendor form is served by n8n with no CSP, so it can
   inline them; this one cannot, and weakening the policy to 'unsafe-inline' for
   cosmetics would be the wrong trade.

   Light only, like the vendor form. The console itself follows the operating
   system's dark mode, but this page is the one both audiences see and matching
   the vendor form matters more than matching the console.
   ============================================================================= */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

/* Same commitment as app.css: this surface does not follow the desktop theme,
   and color-scheme says so to the browser as well as to the page -- otherwise
   the card stays light while the email and password controls inside it render
   dark. */
:root { color-scheme: light; }

body {
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
               Helvetica, sans-serif;
  /* No @font-face: Inter is used when the operator already has it and the
     system stack takes over otherwise. The container has no egress, so a
     downloaded web font is not an option in any case. */
  background:
    radial-gradient(circle at 10% 10%, rgba(29, 119, 140, 0.10), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(23, 107, 135, 0.08), transparent 35%),
    #f5f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
}

/* --- card ------------------------------------------------------------------ */
.login-card {
  width: 430px;
  max-width: 100%;
  background: #ffffff;
  padding: 44px 42px 36px;
  border-radius: 20px;
  border: 1px solid rgba(15, 59, 74, 0.08);
  box-shadow: 0 25px 60px rgba(15, 59, 74, 0.12),
              0 4px 12px rgba(15, 59, 74, 0.04);
}

/* --- logo ------------------------------------------------------------------ */
.logo { text-align: center; margin-bottom: 30px; }

.logo img {
  display: block;
  width: 170px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 22px;
}

/* Shown by signin.js if the image fails. The vendor form does this with an
   inline onerror attribute, which this page's CSP (script-src 'self') blocks —
   so the same behaviour lives in the served script instead. It matters on the
   direct container port, which has no /assets route in front of it. */
.logo-fallback {
  display: none;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: #176b87;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}
.logo-fallback.on { display: flex; }

.portal-title {
  margin: 0;
  color: #123b4a;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.portal-subtitle {
  margin: 9px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

/* --- form ------------------------------------------------------------------ */
.form-group { margin-bottom: 20px; }

label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.input-wrapper { position: relative; }

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
}

input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1px solid #d5dee5;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder { color: #a0acb8; }
input:hover { border-color: #b7c6d0; }
input:focus {
  border-color: #176b87;
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.10);
}

button {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #176b87 0%, #145d76 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(23, 107, 135, 0.20);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
button:hover {
  background: linear-gradient(135deg, #155f79 0%, #104f65 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(23, 107, 135, 0.25);
}
button:active { transform: translateY(0); }
button:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* --- message --------------------------------------------------------------- */
/* Server-rendered, not populated by script: this form is a plain POST that
   redirects, so there is no fetch to report on. The vendor form's .error / .info
   colours are kept so the two look the same when something goes wrong. */
#message {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
#message.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
#message.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
#message.info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* --- footer ---------------------------------------------------------------- */
.security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #edf1f3;
  color: #8796a3;
  font-size: 12px;
  line-height: 1.5;
}
.security-icon { font-size: 13px; }

.footer {
  margin-top: 16px;
  text-align: center;
  color: #b0bac3;
  font-size: 11px;
}

/* --- mobile ---------------------------------------------------------------- */
@media (max-width: 480px) {
  body { min-height: 100dvh; padding: 16px; align-items: center; }
  .login-card { width: 100%; padding: 32px 22px 26px; border-radius: 16px; }
  .logo { margin-bottom: 24px; }
  .logo img { width: 145px; max-width: 70%; margin-bottom: 18px; }
  .portal-title { font-size: 22px; line-height: 1.3; }
  .portal-subtitle { font-size: 13px; line-height: 1.5; }
  /* 16px on the inputs, not 14px: iOS Safari zooms the page on focus for
     anything smaller, which the vendor form also guards against. */
  input { height: 50px; font-size: 16px; }
  button { height: 50px; }
}