/* Ontech auth design system — the sign-in surfaces of Sentinel AND Connect.
   A byte-identical copy lives at ontech-connect/app/static/css/auth.css: the two apps
   deploy separately (Docker vs systemd) so they cannot share a file at runtime. Change
   both, or they drift.

   Scoped to the auth pages only — these do not extend the app chrome.
   Tokens live here rather than in theme.css because this page is standalone (it does not
   extend base.html) and must not drag the whole app's chrome in. Nothing here is hardcoded
   twice: every colour is a token. */

:root {
  --brand-50:   #e6f5ee;
  --brand-400:  #34c38f;
  --brand-600:  #0f9d6b;   /* primary button */
  --brand-700:  #0b7d55;   /* primary button — see note below */
  --brand-800:  #0a6b49;   /* primary hover */
  --brand-900:  #0a2e22;   /* brand panel */

  --surface:    #ffffff;
  --surface-2:  #f6f8f7;
  --border:     #dfe5e2;
  --text:       #0f1a16;
  --text-muted: #5f6b66;

  --danger-50:  #fdecec;
  --danger-600: #c62828;

  --radius:     10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md:  0 8px 24px rgba(10, 46, 34, .08);

  /* 4px spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:    #0f1614;
    --surface-2:  #161f1b;
    --border:     #263631;
    --text:       #e8ede9;
    --text-muted: #9aa8a2;
    --shadow-md:  0 8px 24px rgba(0, 0, 0, .40);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.login-page { display: grid; grid-template-columns: 45% 1fr; min-height: 100vh; }

/* ── brand panel ────────────────────────────────────────────────────────── */
.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-8);
  background-color: var(--brand-900);
  color: #fff;
  overflow: hidden;
}
/* diagonal grid at 6% — pure CSS, no image request */
.brand-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.brand-panel > * { position: relative; }

.brand-logo { width: 190px; height: auto; display: block; }

.brand-body { max-width: 420px; }
.brand-title {
  margin: 0 0 var(--s-3);
  font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.brand-title .accent { color: var(--brand-400); }
.brand-lede { margin: 0 0 var(--s-6); font-size: 16px; color: rgba(255,255,255,.82); }

.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.trust li { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; color: rgba(255,255,255,.78); }
.trust svg { flex: none; color: var(--brand-400); }

.brand-foot { font-size: 12px; color: rgba(255,255,255,.55); }

/* ── form panel ─────────────────────────────────────────────────────────── */
.form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-8) var(--s-6);
  background: var(--surface);
}
.form-wrap { width: 100%; max-width: 400px; }

.form-head { margin-bottom: var(--s-6); }
.form-head h1 { margin: 0 0 var(--s-1); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.form-head p  { margin: 0; color: var(--text-muted); }

.field { margin-bottom: var(--s-5); }
.field:last-of-type { margin-bottom: var(--s-3); }   /* last field → error slot: 12px */

/* label | link on one row, control beneath — the link sits AFTER the control in the DOM
   (tab order: password → show/hide → forgot), grid puts it back where it belongs. */
.field-password {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label link" "control control";
  align-items: baseline; column-gap: var(--s-2);
}
.field-password > label   { grid-area: label; }
.field-password > .control{ grid-area: control; }
.field-password > .forgot { grid-area: link; justify-self: end; }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1); }
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.label-row label { margin-bottom: 0; }
.link { color: var(--brand-700); font-size: 13px; text-decoration: none; }
.link:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .link { color: var(--brand-400); } }

.control { position: relative; display: flex; align-items: center; }
.control .icon-left {
  position: absolute; left: var(--s-3); color: var(--text-muted);
  pointer-events: none; display: flex;
}
.control input {
  width: 100%; height: 44px;
  padding: 0 var(--s-3) 0 var(--s-10);
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s linear, box-shadow .12s linear;
}
.control input::placeholder { color: var(--text-muted); opacity: .75; }
.control input:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 2px var(--brand-600);
}
.control input[aria-invalid="true"] { border-color: var(--danger-600); }
.control.has-toggle input { padding-right: 44px; }

.toggle {
  position: absolute; right: var(--s-1);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer;
}
.toggle:hover { color: var(--text); }
/* `hidden` is an HTML attribute: the UA stylesheet does not apply it to SVG elements,
   so the icon has to be hidden explicitly or both eyes render at once. */
.toggle svg[hidden], .btn [hidden] { display: none; }
.toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }

/* error slot — present for screen readers, zero height until it has content,
   so the layout never jumps when a sign-in fails */
.error-slot:empty { display: none; }
.error-slot {
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--danger-50); color: var(--danger-600);
  border-left: 3px solid var(--danger-600); border-radius: var(--radius);
  font-size: 14px;
  display: flex; align-items: flex-start; gap: var(--s-2);
}
.error-slot svg { flex: none; margin-top: 2px; }
@media (prefers-color-scheme: dark) {
  .error-slot { background: rgba(198, 40, 40, .14); color: #ff8a80; border-left-color: #ff8a80; }
}

.btn {
  width: 100%; height: 44px;
  text-decoration: none;                       /* the SSO control is an <a> */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-size: 15px; font-weight: 500;
  border-radius: var(--radius); cursor: pointer;
  transition: background-color .12s linear, border-color .12s linear;
}
.btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* The brief specified --brand-600 (#0f9d6b) for the primary button, but white on it is
   3.47:1 — below the 4.5:1 the same brief requires. brand-700 gives 5.15:1, brand-800
   6.54:1 on hover. Accessibility wins over the swatch; --brand-600 still drives the focus
   ring, where text contrast does not apply. */
.btn-primary { background: var(--brand-700); color: #fff; border: 1px solid var(--brand-700); }
.btn-primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn-primary[disabled] { opacity: .75; cursor: progress; }

.btn-secondary {
  margin-top: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }

.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.divider {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0; color: var(--text-muted); font-size: 13px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.badge-row { margin-top: var(--s-6); text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3);
  background: var(--brand-50); color: var(--brand-700);
  border-radius: 999px; font-size: 13px; font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .badge { background: rgba(52, 195, 143, .14); color: var(--brand-400); }
}
.badge-note { margin: var(--s-2) 0 0; font-size: 13px; color: var(--text-muted); }

.hint { display: block; margin-top: var(--s-1); font-size: 12px; color: var(--text-muted); }
.auth-alt { margin: var(--s-5) 0 0; text-align: center; font-size: 13px; }
.auth-alt .sep { margin: 0 6px; color: var(--text-muted); opacity: .6; }

.form-foot {
  margin-top: var(--s-8); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); text-align: center;
}
.form-foot a { color: var(--text-muted); text-decoration: none; }
.form-foot a:hover { text-decoration: underline; }
.form-foot .sep { margin: 0 6px; opacity: .6; }

/* ── mobile: brand panel becomes a strip ────────────────────────────────── */
@media (max-width: 767px) {
  .login-page { grid-template-columns: 1fr; }
  .brand-panel {
    flex-direction: row; align-items: center; gap: var(--s-3);
    justify-content: flex-start; padding: var(--s-4) var(--s-5);
  }
  .brand-logo { width: 120px; }
  .brand-body { max-width: none; }
  .brand-title { font-size: 28px; margin: 0; }
  .brand-lede, .trust, .brand-foot { display: none; }
  .form-panel { padding: var(--s-6) var(--s-5) var(--s-8); align-items: flex-start; }
  .form-wrap { margin-top: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .spinner { border-top-color: rgba(255,255,255,.45); }
}