/* Keeprift auth styling — ported from the Keeprift design bundle (Poppins, terracotta accent, sharp corners). */

:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f5f2ec;
  --surface-3: #ece8df;
  --border: #eae6dd;
  --border-strong: #d6d1c4;
  --text: #1a1814;
  --text-2: #4a463e;
  --muted: #8a847a;
  --muted-2: #b3ada1;
  --accent: #d4683a;
  --accent-soft: #f5e4d8;
  --accent-text: #8c3d1a;
  --success: #4a8a4f;
  --success-soft: #e2eddf;
  --warning: #c8932b;
  --warning-soft: #f4ead0;
  --danger: #b54a3f;
  --danger-soft: #f3dcd6;
  --info: #4673a8;
  --info-soft: #dee8f3;

  --radius-sm: 0px;

  /* Vertical rhythm between stacked fields / blocks in every form. Change here = changes everywhere. */
  --field-gap: 16px;

  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Border-box everywhere: widths include padding/border. Without this, every `width:100%` + padding element
   (.app-page, .card-body, .modal-body, .wizard-content-body, …) overflows its parent by its padding — which on a
   phone pushes content past the viewport (slight horizontal scroll) and makes fixed-position modals sit off-centre. */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; border: none; background: none; padding: 0; }
input { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
/* The horizontal brand lockup (mark + "keeprift" wordmark). Transparent SVGs, so they blend on any surface; height is
   set per call site, width tracks the aspect ratio. Light/dark variants toggle with the theme so the wordmark stays
   legible on the light or dark topnav (the auth brand pane is always dark, so it uses the dark variant directly). */
.brand-lockup { display: block; flex-shrink: 0; width: auto; }
.brand-lockup-dark { display: none; }
[data-theme="dark"] .brand-lockup-light { display: none; }
[data-theme="dark"] .brand-lockup-dark { display: block; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; white-space: nowrap; }
.btn-primary { background: var(--text); color: var(--bg); }
/* Stay a shade of var(--text) so the var(--bg)-coloured label keeps its contrast in both themes (a hardcoded #000
   here turned black-on-black in dark mode, where the label is near-black). */
.btn-primary:hover { background: color-mix(in oklab, var(--text) 85%, var(--bg)); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-block { width: 100%; justify-content: center; height: 40px; }

/* Inputs */
.input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 13.5px; color: var(--text); outline: none; transition: border-color 0.12s, box-shadow 0.12s; box-sizing: border-box; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--muted-2); }
/* Neutralise the default Blazor valid/invalid outlines in favour of the design's treatment. */
.input.valid.modified { outline: none; }
.input.invalid { outline: none; border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.field-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.field-error, .validation-message { font-size: 12.5px; color: var(--danger); }

/* Unified form layout: every form stacks its fields/blocks with one shared rhythm (--field-gap). Put one of these
   classes on a <form>/<EditForm> and it spaces consistently — no per-form margins. (.auth-form below opts in too.) */
.kr-form, .dbms-form, .modal-form { display: flex; flex-direction: column; gap: var(--field-gap); }

/* Checkbox */
.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.12s, background 0.12s; }
.checkbox:hover { background: var(--surface-2); }
.checkbox.checked { border-color: var(--accent); background: var(--accent-soft); }
.checkbox-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; transition: border-color 0.12s, background 0.12s; }
.checkbox.checked .checkbox-box { border-color: var(--accent); background: var(--accent); }
.checkbox .checkbox-box svg { color: transparent; }
.checkbox.checked .checkbox-box svg { color: #fff; }

/* Strength meter */
.progress { width: 100%; height: 4px; background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; }
.progress-bar { height: 100%; transition: width 0.2s, background 0.2s; }

/* Banner (error / info) */
.banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info); font-size: 13px; border: 1px solid color-mix(in oklab, var(--info) 30%, transparent); }
.banner.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.banner.warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.banner-icon { flex-shrink: 0; margin-top: 1px; }
.banner-body { flex: 1; color: var(--text); text-align: left; }
.banner-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.banner-text { color: var(--text-2); font-size: 12.5px; }
.banner-text ul { margin: 4px 0 0; padding-left: 16px; }

/* Auth shell */
.auth-shell { display: grid; grid-template-columns: 1.05fr minmax(440px, 0.95fr); min-height: 100vh; background: var(--bg); }
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none !important; }
}

.auth-brand { background: #14130f; color: #f5f3ee; padding: 40px 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-brand .brand { color: #f5f3ee; gap: 10px; }
.auth-brand .brand-mark { background: #f5f3ee; color: #14130f; }
.auth-brand-headline { margin-top: auto; font-size: 34px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; margin-bottom: 16px; }
.auth-brand-sub { font-size: 14.5px; color: #a5a094; max-width: 38ch; line-height: 1.5; }
.auth-brand-footer { margin-top: 56px; display: flex; flex-direction: column; gap: 14px; font-size: 12px; color: #6e6a60; }
.auth-brand-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6e6a60; }
.auth-brand-grid { display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; }
.auth-brand-grid span { aspect-ratio: 1; background: #2d2a23; }
.auth-brand-grid span.ok { background: #4a8a4f; opacity: 0.8; }
.auth-brand-grid span.warn { background: #c8932b; opacity: 0.8; }
.auth-brand-grid span.fail { background: #b54a3f; opacity: 0.85; }
.auth-brand-meta { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11.5px; color: #8a847a; letter-spacing: 0.02em; margin-top: 6px; }
.auth-brand-meta span b { color: #f5f3ee; font-weight: 600; }

.auth-form-pane { display: flex; flex-direction: column; padding: 32px 40px; background: var(--bg); position: relative; }
.auth-toolbar { position: absolute; top: 16px; right: 16px; z-index: 2; }
.auth-card { margin: auto; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; padding: 24px 0; text-align: center; }
.auth-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.auth-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
/* The vertical auth logo (mark + wordmark) above each auth form. Theme-aware so the wordmark stays legible on the
   light or dark form pane; the transparent SVGs blend with the pane background. */
.auth-logo { display: block; width: 50%; height: auto; margin: 0 auto 30px; }
.auth-logo-dark { display: none; }
[data-theme="dark"] .auth-logo-light { display: none; }
[data-theme="dark"] .auth-logo-dark { display: block; }

.auth-form { display: flex; flex-direction: column; gap: var(--field-gap); text-align: left; }
.auth-card .checkbox, .auth-card .banner { text-align: left; }
.auth-foot { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
.auth-foot a { color: var(--text); font-weight: 500; border-bottom: 1px dashed var(--border-strong); }
.auth-foot a:hover { border-color: var(--accent); color: var(--accent-text); }
.auth-link { font-size: 13px; color: var(--text-2); font-weight: 500; }
.auth-link:hover { color: var(--text); }
.auth-footer-meta { margin-top: auto; font-size: 12px; color: var(--muted); text-align: center; padding-top: 24px; }