/* The sign-in page. Same split screen as LogisticaHQ's login: white form on the left, brand on a soft gradient on the right.
   Colours come from the VisualHQ logo (blue #0a5fad, orange #fbad48). System fonts only, so the page works offline. */
:root { --blue: #0a5fad; --blue-dark: #084c8b; --text: #4a5568; --muted: #718096; --line: #e2e8f0; --field: #edf2f7; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--text); background: #fff; }

.split { display: flex; min-height: 100vh; }
.left, .right { flex: 1 1 50%; }

/* ---- left: the form ---- */
.left { display: flex; align-items: center; justify-content: center; background: #fff; }
.form { width: 100%; max-width: 400px; padding: 40px; }
h2 { margin: 0 0 6px; font-size: 30px; font-weight: 600; color: var(--blue); }
.subtitle { margin: 0 0 32px; font-size: 14px; color: var(--muted); }

label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--text); }
input {
  display: block; width: 100%; margin: 0 0 20px; padding: 10px 14px; font: inherit; font-size: 14px; color: #1a202c;
  background: var(--field); border: 1px solid var(--line); border-radius: 4px; outline: none;
}
input:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 95, 173, .12); }

button {
  width: 100%; height: 44px; font: inherit; font-size: 16px; font-weight: 500; color: #fff; cursor: pointer;
  background: var(--blue); border: 0; border-radius: 10px;
}
button:hover { background: var(--blue-dark); }
button:active { background: #063b6e; }
button:disabled { opacity: .65; cursor: default; }

.alert { margin: 16px 0 0; padding: 10px 14px; font-size: 14px; border-radius: 6px; }
.alert[hidden] { display: none; }
.alert.info { margin: 0 0 20px; color: #385585; background: #e1edff; }
.alert.error { color: #7a231c; background: #fbd9d7; }

footer { margin-top: 40px; font-size: 13px; color: var(--muted); }

/* ---- right: the brand ---- */
.right {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, #f8f9fb 0%, #e9edf3 55%, #f3f5f8 100%);
}
.circle { position: absolute; border-radius: 50%; }
.circle.big { width: 600px; height: 600px; top: -200px; right: -200px; background: rgba(10, 95, 173, .06); }
.circle.small { width: 400px; height: 400px; bottom: -100px; left: -100px; background: rgba(10, 95, 173, .04); }
.brand { position: relative; text-align: center; padding: 24px; }
.brand img { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; }
.tagline { margin-top: 8px; font-size: 18px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: var(--text); }
.console { margin-top: 18px; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #c53030; }
.console[hidden] { display: none; }

/* ---- language selector, top right ---- */
.lang { position: fixed; top: 16px; right: 16px; z-index: 5; }
.lang select {
  padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Narrow screens: the two halves stack, the form first. */
@media (max-width: 991px) {
  .split { flex-direction: column; }
  .right { min-height: 260px; }
  .brand img { max-width: 320px; }
}