/* Jhome Auth — one stylesheet for two page kinds.
 *
 * Auth screens are a narrow centred card. The admin console is a wide data
 * surface. They previously shared the narrow card, which is why a four-column
 * table was being squeezed into 430px. The `.wide` body class switches shells.
 */

:root {
  --bg:        #0a0c14;
  --surface:   #0d0f18;
  --raised:    #141720;
  --border:    #1e2535;
  --text:      #e2e8f0;
  --muted:     #a0aec0;
  --dim:       #718096;
  --accent:    #38b2ac;
  --on-accent: #ffffff;
  --accent-lt: #4fd1c5;
  --ok:        #48bb78;
  --warn:      #d69e2e;
  --bad:       #f56565;
  --danger-bg: #742a2a;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Sticky footer without 100vh on the content itself, so the brand footer
   * is never pushed off-screen. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
}

main { width: 100%; margin-bottom: auto; }
/* Auth screens centre vertically; the wide console starts at the top, where a
 * table belongs. */
body:not(.wide) main { margin-top: auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}
.card--wide { max-width: 1100px; padding: 1.5rem 1.75rem 2rem; }

h1 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 1rem; text-wrap: balance; }
h2 { font-size: 1.1rem; line-height: 1.25; }
p  { max-width: 68ch; }

label { display: block; margin: .9rem 0 .3rem; color: var(--muted); }

input[type=text], input[type=email], input[type=password], textarea {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 16px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
input::placeholder { color: var(--dim); }

button, .btn {
  display: inline-block;
  margin-top: 1.2rem;
  width: 100%;
  padding: .8rem;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  /* Paired with the background below rather than hardcoded: a directory can
     override --accent with any hex, and app/branding.py derives --on-accent
     from that colour's luminance so the pair always clears 4.5:1. A fixed
     #fff here gave white-on-pale-yellow at 1.07:1 on every base-layout page
     (forgot, reset, change-password, MFA) -- the derivation existed and the
     stylesheet simply never consumed it. */
  color: var(--on-accent, #fff);
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease-out;
}
button:hover, .btn:hover { background: var(--accent-lt); }
/* Link-buttons and everything inside the console size to their content --
 * a full-width slab is only right under a login form. */
.btn { width: auto; margin-top: 0; padding: .6rem 1.1rem; }
.card--wide button { width: auto; margin-top: 0; padding: .55rem 1rem; }

a { color: var(--accent-lt); }

:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.error {
  background: #742a2a33;
  border: 1px solid var(--danger-bg);
  color: #feb2b2;
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
}

.muted { color: var(--dim); font-size: 14px; }
/* Secondary prose, as opposed to .muted, which is fine print. A full
 * sentence someone is meant to read stays at the body floor and only
 * steps down in colour. */
.note { color: var(--muted); font-size: 16px; }
/* A hint that belongs to the field ABOVE it. The inputs carry no bottom margin,
   so a negative margin-top here lands the text on top of the field. */
.hint { margin-top: .4rem; margin-bottom: 1rem; }

/* ---- admin console ---- */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.admin-brand { font-weight: 700; letter-spacing: -0.01em; }
.admin-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-lt);
  background: #38b2ac1f;
  border: 1px solid #38b2ac40;
  border-radius: 999px;
  padding: .15rem .5rem;
  margin-left: .4rem;
  vertical-align: middle;
}
.admin-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-nav a {
  font-size: 15px;
  text-decoration: none;
  color: var(--muted);
  padding: .35rem .7rem;
  border-radius: var(--r-sm);
  transition: color 160ms ease-out, background 160ms ease-out;
}
.admin-nav a:hover { color: var(--text); background: var(--raised); }
.admin-nav a[aria-current="page"] { color: var(--accent-lt); background: #38b2ac1a; }
.admin-nav .signout { color: var(--dim); }

/* Console pager (audit log, admin user list). Disabled ends stay in place
   rather than collapsing, so the controls don't shift under the cursor
   between the first and second page. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 16px;
}
.pager a {
  color: var(--accent-lt);
  text-decoration: none;
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: color 160ms ease-out, background 160ms ease-out;
}
.pager a:hover { color: var(--text); background: var(--raised); }
.pager-off { color: var(--dim); padding: .35rem .7rem; }
.pager-at { color: var(--muted); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.toolbar form { flex: 1 1 260px; max-width: 380px; }
.toolbar input { margin: 0; }

/* Tables scroll inside their own container so the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem 1rem; text-align: left; font-size: 16px; }
th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  background: #11141d;
  white-space: nowrap;
}
tbody tr { border-top: 1px solid var(--border); }
tbody tr:hover { background: #ffffff06; }
td .muted { display: block; font-size: 13px; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.pill--ok   { color: var(--ok);   background: #48bb781f; border-color: #48bb7840; }
.pill--warn { color: var(--warn); background: #d69e2e1f; border-color: #d69e2e40; }
.pill--bad  { color: var(--bad);  background: #f565651f; border-color: #f5656540; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
.actions form { margin: 0; }
.btn--danger { background: var(--danger-bg); }
.btn--danger:hover { background: #8f3636; }
.btn--quiet { background: #2d3748; }
.btn--quiet:hover { background: #3b475c; }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--dim);
  font-size: 16px;
}

.powered { padding: 1.6rem 0 calc(1.2rem + env(safe-area-inset-bottom)); }
.powered a { color: #4a5568; font-size: 14px; text-decoration: none; opacity: .8; }
.powered a:hover { opacity: 1; }

/* ---- two-step verification ---- */

/* Prose inside the auth cards. The card's own 16px is the floor; explanatory
   copy the user has to actually read sits a step above it. */
.lede { font-size: 17px; line-height: 1.6; color: var(--muted); margin-bottom: 1.25rem; }

/* A QR has to carry its own white quiet zone to scan reliably against this
   dark ground, so the panel is light on purpose rather than by oversight. */
.mfa-qr {
  background: #ffffff;
  padding: 14px;
  border-radius: var(--r-md);
  width: max-content;
  margin: 0 auto 1.25rem;
  line-height: 0;
}
.mfa-qr svg { width: 190px; height: 190px; display: block; }

/* The typed-by-hand fallback for the QR, and the recovery codes. Monospace and
   loosely tracked because these are transcribed character by character. */
/* Also applied to a readonly <input>, so it must win over the shared input
   rule above rather than sit next to it. */
textarea.keybox, input.keybox { width: 100%; color: var(--text); }
textarea.keybox {
  /* The whole key must be visible. Wrapping is the entire point of using a
     textarea here, so do not "tidy" these three lines away. */
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.7;
}
.keybox {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: .12em;
  word-break: break-all;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .7rem .9rem;
  margin-bottom: 1.25rem;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 1rem 0 1.25rem;
}
.codes li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: .08em;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  list-style: none;
}
.codes li.used { color: var(--dim); text-decoration: line-through; }

.checkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin-top: .9rem;
}
.checkrow input { width: auto; margin: 0; }

.notice {
  background: #d69e2e1a;
  border: 1px solid #d69e2e66;
  color: #f6e05e;
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  font-size: 16px;
  margin-bottom: 1rem;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}
.panel h2 { margin-bottom: .5rem; }

/* Status word next to a section heading. Uppercase micro-copy, so exempt from
   the prose floor. */
.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: .5rem;
}
.pill--on  { background: #48bb7826; color: #9ae6b4; border: 1px solid #48bb7859; }
.pill--off { background: #71809626; color: var(--muted); border: 1px solid var(--border); }

@media (max-width: 1024px) {
  body { padding: 1rem; }
  .card--wide { padding: 1.25rem; }
  .admin-bar { margin-bottom: 1.25rem; }
  .codes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}