/* Dropp branding for every server-rendered page: the site chrome in base.html
 * (home, about, profile, error pages) and the allauth sign-in / 2FA cards.
 *
 * These pages are server-rendered by Django, so they can't consume the Next.js
 * build's Tailwind theme. The palette below is therefore a deliberate duplicate
 * of the `brand-*` / `ink-*` scales in DroppJs/app/globals.css — if you change
 * the brand colours there, change them here too.
 *
 * Loaded *after* Bootstrap: allauth's element templates emit Bootstrap classes
 * (btn, form-control, alert…), so we keep Bootstrap for layout and override the
 * visuals rather than restyling every allauth template by hand.
 */

:root {
  --brand-50: #f0faf0;
  --brand-100: #dcf4dd;
  --brand-200: #bbe8be;
  --brand-500: #2fa53b;
  --brand-600: #1e8a2c;
  --brand-700: #1a6d25;

  --ink-50: #f4f7fa;
  --ink-100: #e7edf4;
  --ink-200: #cbd8e6;
  --ink-300: #9fb5cd;
  --ink-500: #4a6e94;
  --ink-700: #2f4764;
  --ink-950: #0b1626;

  --radius: 0.875rem;
}

/* Two body variants share the `.dropp` control styles below:
   `.dropp-auth` is the centred single-card sign-in shell (allauth/dropp_shell.html);
   `.dropp-site` is the full page chrome with header + footer (base.html). */
body.dropp-auth,
body.dropp-site {
  color: var(--ink-950);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  min-height: 100dvh;
  margin: 0;
}

body.dropp-auth {
  background: var(--ink-50);
  /* Column so the shared footer sits at the bottom rather than immediately
     under the card. */
  display: flex;
  flex-direction: column;
}

body.dropp-site {
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Site chrome ------------------------------------------------------------- */

.dropp-header {
  border-bottom: 1px solid var(--ink-100);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.dropp-header__inner,
.dropp-main,
.dropp-footer__inner {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .dropp-header__inner,
  .dropp-main,
  .dropp-footer__inner {
    padding-inline: 1.5rem;
  }
}

.dropp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

/* `.dropp-brand` carries bottom margin for the auth card, where it sits above
   the form. In the header it's a flex item and needs none. */
.dropp-header .dropp-brand {
  margin-bottom: 0;
}

.dropp-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.875rem;
}

.dropp-nav a {
  color: var(--ink-700);
  font-weight: 500;
  text-decoration: none;
}

.dropp-nav a:hover {
  color: var(--brand-600);
}

.dropp-nav a.is-cta {
  color: var(--brand-600);
  font-weight: 600;
}

.dropp-main {
  flex: 1;
  padding-block: 2.5rem 3rem;
}

.dropp-footer {
  margin-top: auto;
  border-top: 1px solid var(--ink-100);
  font-size: 0.75rem;
  color: var(--ink-500);
}

.dropp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1.25rem;
}

/* Present for whoever is diagnosing something, not for the person signing in —
   so it sits quieter than the copyright it follows. */
.dropp-footer__build {
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.dropp-footer a {
  color: var(--ink-500);
  font-weight: 600;
  text-decoration: none;
}

.dropp-footer a:hover {
  color: var(--brand-600);
}

/* Page-level type on the site pages (the auth cards set their own sizes). */
.dropp-site h1 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
}

.dropp-site .lead {
  font-size: 1.0625rem;
  color: var(--ink-500);
  max-width: 42rem;
}

/* Simple stacked rows for the profile's detail list. */
.dropp-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dropp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--ink-100);
}

.dropp-row:last-child {
  border-bottom: 0;
}

.dropp-row__key {
  color: var(--ink-500);
  font-size: 0.875rem;
}

.dropp-row__val {
  font-weight: 600;
  color: var(--ink-950);
}

/* Status chips — 2FA on/off, email verified, role. */
.dropp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.dropp-chip--on {
  background: var(--brand-50);
  color: var(--brand-700);
  outline: 1px solid var(--brand-200);
}

.dropp-chip--off {
  background: var(--ink-50);
  color: var(--ink-500);
  outline: 1px solid var(--ink-200);
}

.dropp-chip--warn {
  background: #fffbeb;
  color: #92400e;
  outline: 1px solid #fde68a;
}

/* Horizontal button row (profile actions, form submit/cancel). */
.dropp-actions {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dropp-actions li {
  margin: 0;
}

/* Card grid on the home page. */
.dropp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .dropp-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.dropp-tile {
  display: block;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #fff;
  outline: 1px solid var(--ink-100);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dropp-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -12px rgb(11 22 38 / 20%);
  outline-color: var(--ink-200);
}

.dropp-tile strong {
  display: block;
  font-family: Sora, Inter, sans-serif;
  color: var(--ink-950);
  margin-bottom: 0.2rem;
}

.dropp-tile span {
  font-size: 0.875rem;
  color: var(--ink-500);
}

.dropp h1,
.dropp h2,
.dropp h3,
.dropp legend {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-950);
}

/* Auth-card page title ("Sign In", "Password Reset", the 2FA prompts).
   Matches the Next.js portal cards exactly: 18px / 600 / ink-500, the same as
   the <h1> in app/(auth)/staff/login/page.tsx (`text-lg font-semibold
   text-ink-500`).

   The rule above sets family, weight and colour but no size, so this inherited
   the user-agent default of 2em — 40px in this context, more than double the
   18px wordmark sitting directly above it. Sign-in starts on Django and
   finishes on Next.js, so the two halves are seen back to back and the jump
   read as a different product rather than a different page. */
.dropp-card h1 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0 0 0.75rem;
}

/* Layout ------------------------------------------------------------------ */

.dropp-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Grows to fill whatever the footer doesn't use, keeping the card centred. */
  flex: 1;
  padding: 2rem 1rem;
}

.dropp-card {
  width: 100%;
  max-width: 26rem;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgb(11 22 38 / 6%);
  outline: 1px solid var(--ink-100);
  padding: 1.75rem;
}

/* The 2FA management screens hold more content than a sign-in form. */
.dropp-card--wide {
  max-width: 40rem;
}

.dropp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: Sora, Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  text-decoration: none;
}

/* The whole wordmark now, not the pin that used to sit between "Dr" and "pp",
   so it needs the height the letters used to occupy. `em` keeps
   `.dropp-brand`'s font-size as the one dial that scales the lockup. */
.dropp-brand__mark {
  height: 1.6em;
  width: auto;
}

.dropp-brand__suffix {
  font-weight: 600;
  color: var(--ink-500);
}

/* Controls ---------------------------------------------------------------- */

.dropp .form-control,
.dropp .form-select {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  /* 16px on mobile stops iOS zooming the page on focus. */
  font-size: 1rem;
  color: var(--ink-950);
}

.dropp .form-control:focus,
.dropp .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgb(47 165 59 / 20%);
}

.dropp .form-label,
.dropp label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 0.25rem;
}

.dropp .btn {
  border-radius: 9999px;
  padding: 0.625rem 1.5rem;
  /* 14px, matching the portal's pill button. Buttons inherited the 16px body
     size; the inputs above keep 16px deliberately, because anything smaller
     makes iOS zoom the page on focus — that reason does not apply here. */
  font-size: 0.875rem;
  font-weight: 600;
  border: 0;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.dropp .btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(30 138 44 / 25%);
}

.dropp .btn-primary:hover,
.dropp .btn-primary:focus {
  background: var(--brand-700);
  transform: translateY(-1px);
}

.dropp .btn-secondary {
  background: var(--ink-50);
  color: var(--ink-700);
  outline: 1px solid var(--ink-200);
  box-shadow: none;
}

.dropp .btn-secondary:hover {
  background: var(--ink-100);
  color: var(--ink-950);
}

.dropp .btn-danger {
  background: #dc2626;
  color: #fff;
}

/* Forms inside the allauth pages get a little breathing room. */
.dropp form > * + * {
  margin-top: 0.875rem;
}

/* Feedback ---------------------------------------------------------------- */

.dropp .alert {
  border: 0;
  border-radius: var(--radius);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}

.dropp .alert-success {
  background: var(--brand-50);
  color: var(--brand-700);
  outline: 1px solid var(--brand-200);
}

.dropp .alert-error,
.dropp .alert-danger {
  background: #fef2f2;
  color: #b91c1c;
  outline: 1px solid #fecaca;
}

.dropp .alert-info,
.dropp .alert-warning {
  background: var(--ink-50);
  color: var(--ink-700);
  outline: 1px solid var(--ink-200);
}

.dropp .invalid-feedback,
.dropp .errorlist {
  color: #b91c1c;
  font-size: 0.8125rem;
  list-style: none;
  padding: 0;
}

.dropp a {
  color: var(--brand-600);
}

.dropp a:hover {
  color: var(--brand-700);
}

.dropp p,
.dropp li {
  color: var(--ink-700);
  line-height: 1.6;
}

/* Recovery codes and the TOTP secret are read aloud / copied — keep them mono
   and roomy so characters can't be misread. */
.dropp pre,
.dropp code,
.dropp .font-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--ink-50);
  border-radius: 0.5rem;
  padding: 0.15rem 0.4rem;
  color: var(--ink-950);
  letter-spacing: 0.05em;
}

.dropp pre {
  padding: 0.875rem;
  overflow-x: auto;
}

/* The TOTP QR code. allauth emits it as a data-URI <img>, not an inline SVG —
   frame it and cap the size so it stays scannable without dominating the card. */
.dropp .dropp-qr,
.dropp svg[width][height] {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.75rem;
  outline: 1px solid var(--ink-100);
  margin-block: 0.5rem;
}

/* Closing aside on the password-reset page. A blockquote rather than another
   paragraph so it reads as a footnote instead of a second instruction. */
.dropp .dropp-note {
  margin: 1.25rem 0 0;
  padding: 0.65rem 0 0.65rem 0.9rem;
  border-left: 3px solid var(--brand-200);
  background: var(--brand-50);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-700);
}

/* Instruction copy under an auth heading ("Enter your email address below…").
   allauth emits it at full body size, which reads as content sitting under a
   31px heading. It's guidance — same treatment the Next.js login pages give it. */
.dropp-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* Field help text — the "Forgot your password?" link and, on the password
   forms, Django's four validator rules. This is guidance, not content: it
   should sit clearly below the label (14px) rather than competing with it. */
.dropp .form-text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-500);
  margin-top: 0.35rem;
}

/* Django renders password validator help as a <ul>. Two corrections:
   the `.dropp-card ul` button-row rule above would lay it out as a wrapped
   flex row, and `.dropp li` would colour it like body text. */
.dropp .form-text ul {
  display: block;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.dropp .form-text li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 0.15rem;
}

.dropp .form-text li:last-child {
  margin-bottom: 0;
}

/* allauth renders button groups as <ul><li>, which inherits list bullets.
   Strip them and lay the actions out in a row instead. */
.dropp-card ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dropp-card ul li {
  margin: 0;
}

/* The 2FA overview stacks an "Authenticator App" and "Recovery Codes" panel. */
.dropp .card,
.dropp fieldset {
  border: 1px solid var(--ink-100);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: #fff;
}

.dropp table {
  width: 100%;
  font-size: 0.875rem;
}

.dropp th {
  color: var(--ink-500);
  font-weight: 600;
  text-align: left;
}