/*
  JomGerak Admin: the sign-in pages (/login and /masuk with the staff second factor, /masuk/pautan), owner feedback
  2026-10-30. One pattern for the three web hosts (Komuniti, Admin, Fleet; each host keeps its own copy and only the portal
  tokens differ): a centred card on a dark or light field with a faint road network (img/signin/roads.svg: the logo's road,
  edges in the portal colour and gold centre dashes), the mark and the wordmark, a segmented E-mel | Telefon control, one
  form and one primary button at a time. Loaded only by Components/SignIn/SignInShell.razor (HeadContent), so nothing here
  reaches the operations pages. Self-hosted Fredoka, no inline style, WCAG 2.2 AA (contrast noted beside each colour), dark
  and light by prefers-color-scheme, reduced motion respected.
*/

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fredoka/fredoka-latin-600-normal.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens: Admin slate #4A5568, brand-blue actions */
.jg-auth {
  --auth-brand: #4A5568;                  /* the portal colour (Admin slate): the glow behind the card */
  --auth-fill: #1270D3;                   /* primary button in brand blue; white text 4.90:1 */
  --auth-fill-hover: #0F5FB5;             /* white text 6.32:1 */
  --auth-link: #0F63BD;                   /* links, active marks and the focus ring on white: 5.93:1 */
  --auth-ring: rgba(18, 112, 211, 0.28);  /* the soft halo around a focused field */

  --auth-field: #EDF0F4;
  --auth-card: #FFFFFF;
  --auth-input: #FFFFFF;
  --auth-track: #EEF1F5;
  --auth-chip: #FFFFFF;
  --auth-border: #8C94A3;                 /* field borders: 3.05:1 on white */
  --auth-line: #E1E5EB;                   /* dividers, decorative only */
  --auth-hairline: rgba(21, 26, 35, 0.08);
  --auth-ink: #151A23;
  --auth-muted: #4A505C;                  /* 8.10:1 */
  --auth-faint: #5F6673;                  /* 5.78:1 */
  --auth-error: #B42318;                  /* 6.57:1 */
  --auth-error-bg: #FEF3F2;
  --auth-info: var(--auth-link);
  --auth-info-bg: color-mix(in srgb, var(--auth-link) 7%, var(--auth-card));
  --auth-warning: #9A5B00;
  --auth-warning-bg: #FFF8EB;
  --auth-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 24px 48px -20px rgba(16, 24, 40, 0.22);
  --auth-roads: 0.55;
  --auth-glow: 16%;
  --auth-glow-at: 50% 38%;
  --auth-semibold: 600;                   /* labels, tabs and buttons */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  .jg-auth {
    --auth-link: #6EB5FF;                 /* 8.00:1 on the card */
    --auth-ring: rgba(110, 181, 255, 0.30);
    --auth-brand: #7D8BA3;                /* a lighter slate, so the glow reads on navy */
    --auth-field: #0E1218;
    --auth-card: #161B23;
    --auth-input: #0F1319;
    --auth-track: #0F1319;
    --auth-chip: #262D39;
    --auth-border: #5B6475;               /* 3.0:1 on the card */
    --auth-line: #2A303B;
    --auth-hairline: rgba(255, 255, 255, 0.08);
    --auth-ink: #FFFFFF;
    --auth-muted: #A7ACB8;                /* 7.60:1 */
    --auth-faint: #8A90A0;                /* 5.41:1 */
    --auth-error: #FF8A80;                /* 7.57:1 */
    --auth-error-bg: rgba(255, 138, 128, 0.10);
    --auth-warning: #F5B94A;
    --auth-warning-bg: rgba(245, 185, 74, 0.10);
    --auth-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 32px 64px -24px rgba(0, 0, 0, 0.7);
    --auth-roads: 0.7;
    --auth-glow: 22%;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ the field */
html:has(.jg-auth), html:has(.jg-auth) body { background: #EDF0F4; }

@media (prefers-color-scheme: dark) {
  html:has(.jg-auth), html:has(.jg-auth) body { background: #0E1218; }
}

/* The host's empty layout keeps its own padding for the other static pages; the sign-in field is full-bleed. */
.jg-empty:has(> .jg-auth) { padding: 0; display: block; }

.jg-auth {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vh, 72px) 16px;
  color: var(--auth-ink);
  line-height: 1.5;
  outline: none;
}

.jg-auth::before,
.jg-auth::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.jg-auth::before {
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at var(--auth-glow-at), color-mix(in srgb, var(--auth-brand) var(--auth-glow), transparent), transparent 70%),
    var(--auth-field);
}

.jg-auth::after {
  z-index: -1;
  background: url('../img/signin/roads.svg') center / cover no-repeat;
  opacity: var(--auth-roads);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 100%);
}

.jg-auth [hidden] { display: none !important; }

.jg-auth :focus-visible {
  outline: 2px solid var(--auth-link);
  outline-offset: 3px;
  box-shadow: none;
}

/* ------------------------------------------------------------------ the card */
.jg-auth .jg-auth-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 0;
  padding: 32px 32px 28px;
  background: var(--auth-card);
  color: var(--auth-ink);
  border: 1px solid var(--auth-hairline);
  border-radius: 20px;
  box-shadow: var(--auth-shadow);
}

.jg-auth p { margin: 0; }

.jg-auth a {
  color: var(--auth-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.jg-auth a:hover { text-decoration-thickness: 2px; }

/* header: mark + wordmark on the left, BM | EN on the right */
.jg-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 28px;
}

.jg-auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jg-auth-mark {
  display: block;
  flex: none;
  width: 30px;
  height: 42px;
}

.jg-auth-wordmark {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--auth-ink);
}

.jg-auth .jg-auth-lang {
  display: inline-flex;
  flex: none;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: var(--auth-track);
  border: 1px solid var(--auth-line);
  border-radius: 999px;
}

.jg-auth .jg-auth-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  font-weight: var(--auth-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 1;
  outline-offset: 2px;
}

.jg-auth .jg-auth-lang a:hover { color: var(--auth-ink); }

.jg-auth .jg-auth-lang a:not(:focus-visible) { outline: none; }

.jg-auth .jg-auth-lang .jg-lang-sep { display: none; }

.jg-auth-lockup picture { display: contents; }

.jg-auth .jg-auth-lang a[aria-current="true"] {
  background: var(--auth-chip);
  color: var(--auth-ink);
  box-shadow: 0 0 0 1px var(--auth-border);
}

/* the step's title and its one line */
.jg-auth .jg-auth-title {
  margin: 0 0 6px;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--auth-ink);
}

.jg-auth .jg-auth-title:focus { outline: none; }

/* a step without its one line (the link landing page) still breathes under the title */
.jg-auth .jg-auth-title + :not(.jg-auth-lead) { margin-top: 18px; }

.jg-auth .jg-auth-lead {
  margin: 0 0 24px;
  color: var(--auth-muted);
  font-size: 0.9375rem;
}

.jg-auth .jg-auth-lead strong { color: var(--auth-ink); font-weight: var(--auth-semibold); }

/* ------------------------------------------------------------------ messages */
.jg-auth .jg-alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid var(--auth-info);
  border-radius: 10px;
  background: var(--auth-info-bg);
  color: var(--auth-ink);
  font-size: 0.9375rem;
}

.jg-auth .jg-alert p { margin: 0; }
.jg-auth .jg-alert p + p { margin-top: 4px; }
.jg-auth .jg-auth-after { margin: 16px 0 0; }

.jg-auth .jg-alert-error { border-left-color: var(--auth-error); background: var(--auth-error-bg); }
.jg-auth .jg-alert-warning { border-left-color: var(--auth-warning); background: var(--auth-warning-bg); }
.jg-auth .jg-alert-info { border-left-color: var(--auth-info); background: var(--auth-info-bg); }

/* ------------------------------------------------------------------ E-mel | Telefon */
.jg-auth .jg-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  background: var(--auth-track);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
}

.jg-auth .jg-auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 9px;
  line-height: 1.25;
  color: var(--auth-muted);
  font-size: 0.9375rem;
  font-weight: var(--auth-semibold);
  text-decoration: none;
  text-align: center;
}

.jg-auth .jg-auth-tab:hover { color: var(--auth-ink); }

.jg-auth .jg-auth-tab[aria-current="page"] {
  background: var(--auth-chip);
  color: var(--auth-ink);
  box-shadow: 0 0 0 1px var(--auth-border), 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* the step-up and staff methods: real radio buttons drawn as the same segmented control */
.jg-auth .jg-auth-choice {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.jg-auth .jg-auth-choice legend {
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: var(--auth-semibold);
  color: var(--auth-ink);
}

.jg-auth .jg-auth-choice .jg-auth-tabs { margin: 0; }

.jg-auth .jg-auth-choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.jg-auth .jg-auth-choice label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 9px;
  line-height: 1.25;
  color: var(--auth-muted);
  font-size: 0.9375rem;
  font-weight: var(--auth-semibold);
  text-align: center;
  cursor: pointer;
}

.jg-auth .jg-auth-choice label:hover { color: var(--auth-ink); }

.jg-auth .jg-auth-choice input:checked + label {
  background: var(--auth-chip);
  color: var(--auth-ink);
  box-shadow: 0 0 0 1px var(--auth-border), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.jg-auth .jg-auth-choice input:focus-visible + label {
  outline: 2px solid var(--auth-link);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ fields */
.jg-auth .jg-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.jg-auth .jg-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 20px;
}

.jg-auth .jg-auth-field > label {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--auth-semibold);
  color: var(--auth-ink);
}

.jg-auth .jg-auth-input {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--auth-ink);
  background: var(--auth-input);
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  box-shadow: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.jg-auth .jg-auth-input::placeholder { color: var(--auth-faint); opacity: 1; }

.jg-auth .jg-auth-input:hover { border-color: var(--auth-muted); }

.jg-auth .jg-auth-input:focus,
.jg-auth .jg-auth-input:focus-visible {
  border-color: var(--auth-link);
  box-shadow: 0 0 0 1px var(--auth-link), 0 0 0 5px var(--auth-ring);
  outline: none;
}

.jg-auth .jg-auth-input[aria-invalid="true"],
.jg-auth .jg-auth-input:user-invalid {
  border-color: var(--auth-error);
}

.jg-auth .jg-auth-input[aria-invalid="true"]:focus,
.jg-auth .jg-auth-input:user-invalid:focus {
  box-shadow: 0 0 0 1px var(--auth-error), 0 0 0 5px color-mix(in srgb, var(--auth-error) 22%, transparent);
}

/* the one-time code: one field, the digits spaced like boxes */
.jg-auth .jg-auth-code {
  min-height: 56px;
  padding-left: calc(14px + 0.5em);
  font-size: 1.5rem;
  font-weight: var(--auth-semibold);
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.jg-auth .jg-auth-code::placeholder { letter-spacing: 0.5em; }

.jg-auth .jg-auth-secret {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--auth-track);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  word-break: break-all;
}

.jg-auth .jg-auth-secret code,
.jg-auth .jg-auth-codes code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  color: var(--auth-ink);
}

.jg-auth .jg-auth-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: none;
  columns: auto;
}

.jg-auth .jg-auth-codes li {
  padding: 8px 10px;
  background: var(--auth-track);
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  text-align: center;
}

.jg-auth .jg-auth-hint {
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.jg-auth .jg-auth-block { margin: 0 0 16px; font-size: 0.875rem; }
.jg-auth .jg-auth-note { margin: 12px 0 0; }

/* Inline validation: shown only once the person has typed something the field cannot take (the browser's own message
   still speaks on submit; this line is the visible help, so it is aria-hidden). */
.jg-auth .jg-auth-invalid {
  display: none;
  margin: 0;
  color: var(--auth-error);
  font-size: 0.8125rem;
  font-weight: var(--auth-semibold);
}

.jg-auth .jg-auth-field:has(.jg-auth-input:user-invalid) .jg-auth-invalid { display: block; }
.jg-auth .jg-auth-field:has(.jg-auth-input:user-invalid) .jg-auth-hint { display: none; }

.jg-auth .jg-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 24px;
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--auth-ink);
  cursor: pointer;
}

.jg-auth .jg-auth-check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--auth-fill);
}

.jg-auth .jg-auth-check + .jg-auth-hint { margin: 0 0 20px 28px; }

.jg-auth .cf-turnstile { margin: 0 0 16px; min-height: 65px; }

/* ------------------------------------------------------------------ buttons */
.jg-auth .jg-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 4px 0 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--auth-fill);
  color: #FFFFFF;
  font: inherit;
  font-size: 1rem;
  font-weight: var(--auth-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px -10px var(--auth-fill);
  transition: background-color 120ms ease, transform 60ms ease;
}

.jg-auth .jg-auth-submit:hover { background: var(--auth-fill-hover); text-decoration: none; }
.jg-auth .jg-auth-submit:active { transform: translateY(1px); }
.jg-auth .jg-auth-submit:focus-visible { outline: 2px solid var(--auth-link); outline-offset: 3px; }

.jg-auth .jg-auth-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
}

/* the quiet second actions under a form: change the address, send again, back */
.jg-auth .jg-auth-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 20px 0 0;
  font-size: 0.9375rem;
}

.jg-auth .jg-auth-alt form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }

.jg-auth .jg-auth-textbtn {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-link);
  font: inherit;
  font-weight: var(--auth-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.jg-auth .jg-auth-textbtn:disabled {
  color: var(--auth-faint);
  text-decoration: none;
  cursor: default;
}

.jg-auth .jg-auth-alt .jg-auth-hint { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ footer */
.jg-auth .jg-auth-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--auth-line);
  color: var(--auth-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.jg-auth .jg-auth-foot > p { margin: 0; font-size: inherit; }

.jg-auth .jg-auth-foot a { color: var(--auth-link); }

.jg-auth .jg-dev-hint {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--auth-border);
  border-radius: 10px;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  font-style: normal;
}

.jg-auth .jg-dev-codes { display: block; margin-top: 4px; }

/* ------------------------------------------------------------------ state pages (owner request 2026-10-30, "perlukan kekemasan")
   Not an editor, access refused, page not found, errors: the same card with the account that was used, the ways forward as
   short steps with small icons, one primary action, an optional outlined second one and an aligned text link. */
.jg-auth .jg-auth-account {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 12px;
  background: var(--auth-track);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  color: var(--auth-muted);
  font-size: 0.875rem;
}

.jg-auth .jg-auth-account strong { color: var(--auth-ink); font-weight: var(--auth-semibold); overflow-wrap: anywhere; }
.jg-auth .jg-auth-account-icon { display: inline-flex; flex: none; color: var(--auth-link); }

.jg-auth .jg-auth-subtitle {
  margin: 0 0 12px;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--auth-ink);
}

.jg-auth .jg-auth-routes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.jg-auth .jg-auth-route {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  background: var(--auth-card);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
}

.jg-auth .jg-auth-route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--auth-info-bg);
  color: var(--auth-link);
}

.jg-auth .jg-auth-route-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.jg-auth .jg-auth-route-text strong {
  color: var(--auth-ink);
  font-size: 0.9375rem;
  font-weight: var(--auth-semibold);
  line-height: 1.35;
}

.jg-auth a.jg-auth-submit { color: #FFFFFF; text-decoration: none; }

.jg-auth .jg-auth-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 12px 20px;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  color: var(--auth-ink);
  font-weight: var(--auth-semibold);
  text-decoration: none;
}

.jg-auth .jg-auth-secondary:hover { border-color: var(--auth-link); text-decoration: none; }

.jg-auth .jg-auth-foot code { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ small screens, preferences */
@media (max-width: 480px) {
  .jg-auth { --auth-glow-at: 50% 4%; padding: 16px; justify-content: flex-start; }
  .jg-auth .jg-auth-card { padding: 24px 20px 20px; border-radius: 16px; }
  .jg-auth-head { margin-bottom: 24px; }
  .jg-auth .jg-auth-title { font-size: 1.5rem; }
}

@media (max-width: 360px) {
  .jg-auth-wordmark { font-size: 1.0625rem; }
  .jg-auth-mark { width: 26px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .jg-auth .jg-auth-input,
  .jg-auth .jg-auth-submit { transition: none; }
}

@media (forced-colors: active) {
  .jg-auth .jg-auth-tab[aria-current="page"],
  .jg-auth .jg-auth-choice input:checked + label,
  .jg-auth .jg-auth-lang a[aria-current="true"] { outline: 2px solid CanvasText; }
  .jg-auth::after { display: none; }
}