/*
 * Hexa — branded styling for the server-rendered Django/allauth pages (account flows, OAuth/credential
 * consent). These pages can't import the Hexa Hub's SCSS token modules (those compile inside the Vite
 * SPA build), so the token VALUES are mirrored here as CSS custom properties — kept faithful to
 * react/src/styles/_*.scss so the pages read as the same product. When a token changes there, mirror
 * it here. The look is Linear-inspired: a dark, dense UI with a warm amber accent on a centered card.
 */

:root {
  /* Colors — mirrored from react/src/styles/_colors.scss */
  --color-bg-app: #0c0d0f;
  --color-bg-surface: #141518;
  --color-bg-surface-raised: #1a1c1f;
  --color-bg-input: #1a1c1f;
  --color-border-subtle: #26282d;
  --color-border-strong: #34373d;
  --color-text-primary: #e7e8ea;
  --color-text-secondary: #9a9da4;
  --color-text-tertiary: #6b6e75;
  --color-text-inverse: #0c0d0f;
  --color-text-link: #7aa2f7;
  --color-accent: #e0a23c;
  --color-accent-hover: #e5ae54; /* _colors.scss: lightness +6% of accent */
  --color-accent-active: #d8932a; /* _colors.scss: lightness -6% of accent */
  --color-accent-subtle: rgb(224, 162, 60, 14%);
  --color-border-focus: #e0a23c;
  --color-success: #3fb950;
  --color-success-subtle: rgb(63, 185, 80, 16%);
  --color-warning: #d9a441;
  --color-warning-subtle: rgb(217, 164, 65, 16%);
  --color-danger: #f0556b;
  --color-danger-subtle: rgb(240, 85, 107, 16%);
  --color-info: #4c9aff;
  --color-info-subtle: rgb(76, 154, 255, 16%);

  /* Typography — mirrored from react/src/styles/_typography.scss */
  --font-family-base: "Inter", -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", menlo, consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Spacing — mirrored from react/src/styles/_spacing.scss (4px base step) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius — mirrored from react/src/styles/_radius.scss */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows — mirrored from react/src/styles/_shadows.scss */
  --shadow-md: 0 2px 8px rgb(0, 0, 0, 35%);
  --shadow-lg: 0 8px 24px rgb(0, 0, 0, 45%);
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-bg-app);

  /* A subtle amber glow behind the card, echoing the Hub's accent without a heavy gradient. */
  background-image: radial-gradient(circle at 50% 0%, rgb(224, 162, 60, 6%), transparent 55%);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* A single, consistent keyboard focus ring — mirrors global.scss :focus-visible. */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* The centered card chrome shared by every page. */
.hexa-auth {
  width: 100%;
  max-width: 27rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hexa-auth--wide {
  max-width: 34rem;
}

.hexa-auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* The Hexa hexagon mark — kept identical to the www marketing header so app.hexahq.ai and
 * www.hexahq.ai share one logo. The mark carries its own #hexg teal→blue gradient (see base.html),
 * so no `color`/stroke is set here — only the box size. */
.hexa-auth__mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
}

/* The "Hexa" wordmark uses Clash Display to match the www marketing logo (loaded in base.html); this
 * is the ONLY place the auth UI departs from Inter. Mirrors www's .brand: Clash Display, 600, -0.005em. */
.hexa-auth__wordmark {
  font-family: "Clash Display", var(--font-family-base);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
}

.hexa-auth__card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

.hexa-auth__footer {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Headings inside the card. allauth's h1 element renders a bare <h1>. */
.hexa-auth__card h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.hexa-auth__card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* allauth's p element and intro prose. */
.hexa-auth__card p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.hexa-auth__card p:last-child {
  margin-bottom: 0;
}

/* Forms — allauth's form element renders a bare <form>; fields render label + input inside <p>. */
.hexa-auth__card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

/* The field element wraps each label/input pair in a <p>; neutralize the prose paragraph styling
 * there and lay the pair out as a stacked group. */
.hexa-auth__card form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-primary);
}

.hexa-auth__card label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.hexa-auth__card input[type="text"],
.hexa-auth__card input[type="email"],
.hexa-auth__card input[type="password"],
.hexa-auth__card input[type="url"],
.hexa-auth__card input[type="number"],
.hexa-auth__card input:not([type]),
.hexa-auth__card textarea {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.hexa-auth__card input::placeholder,
.hexa-auth__card textarea::placeholder {
  color: var(--color-text-tertiary);
}

.hexa-auth__card input:focus,
.hexa-auth__card textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* Inline checkboxes (e.g. "Remember Me") shouldn't stretch full-width. */
.hexa-auth__card input[type="checkbox"],
.hexa-auth__card input[type="radio"] {
  width: auto;
  margin-right: var(--space-2);
  accent-color: var(--color-accent);
}

.hexa-auth__card form p:has(input[type="checkbox"]),
.hexa-auth__card form p:has(input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Helper text under a field. */
.hexa-auth__card form p span {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Buttons — allauth's button element renders a bare <button> or <a>. The default is the primary
 * amber CTA; secondary/cancel variants are toned down. */
.hexa-auth__card button,
.hexa-auth__card a.button,
.hexa-auth__actions button,
.hexa-auth__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.hexa-auth__card button:hover,
.hexa-auth__card a.button:hover {
  background-color: var(--color-accent-hover);
  text-decoration: none;
}

.hexa-auth__card button:active,
.hexa-auth__card a.button:active {
  background-color: var(--color-accent-active);
}

/* Secondary / cancel buttons — the second action in a button row, or allauth's link/cancel tags. */
.hexa-auth__card form button[form="logout-from-stage"],
.hexa-auth__card a:not(.button) {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.hexa-auth__card form button[form="logout-from-stage"]:hover {
  background-color: var(--color-bg-surface-raised);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* allauth wraps the action slot's contents; lay multiple actions out in a row. */
.hexa-auth__card form > button,
.hexa-auth__card form > a {
  align-self: stretch;
}

/* The "Forgot Password?" / secondary link beside an action stays inline and link-styled. */
.hexa-auth__card form > a:not(.button) {
  align-self: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-link);
}

.hexa-auth__card form > a:not(.button):hover {
  text-decoration: underline;
}

/* Field validation errors — Django renders these as <ul class="errorlist">. */
.hexa-auth__card .errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hexa-auth__card .errorlist li {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-danger-subtle);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* An input whose <p> wrapper contains an errorlist gets a danger border. */
.hexa-auth__card form p:has(.errorlist) input,
.hexa-auth__card form p:has(.errorlist) textarea {
  border-color: var(--color-danger);
}

/* Flash messages (the messages block) and standalone notices. */
.hexa-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-surface-raised);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.hexa-notice + .hexa-notice {
  margin-top: var(--space-2);
}

.hexa-notice--success {
  background-color: var(--color-success-subtle);
  border-color: var(--color-success);
}

.hexa-notice--error,
.hexa-notice--danger {
  background-color: var(--color-danger-subtle);
  border-color: var(--color-danger);
}

.hexa-notice--warning {
  background-color: var(--color-warning-subtle);
  border-color: var(--color-warning);
}

.hexa-notice--info {
  background-color: var(--color-info-subtle);
  border-color: var(--color-info);
}

.hexa-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The footer nav allauth's base layout renders (Sign In / Sign Up / management links). */
.hexa-auth__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hexa-auth__nav a {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.hexa-auth__nav a:hover {
  color: var(--color-text-secondary);
}

/* A divider (allauth's hr element). */
.hexa-auth__card hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-2) 0;
}

/* ---- Bespoke elements used by the standalone (non-allauth) templates ---- */

/* The OAuth-connect warning banner on the consent page. */
.hexa-banner {
  border: 1px solid var(--color-warning);
  background-color: var(--color-warning-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.hexa-banner strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

/* Monospace inline code (a node hostname, a scope). */
.hexa-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-surface-raised);
  border: 1px solid var(--color-border-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

/* Block code (e.g. a long redirect URI) — wrap inside the card instead of overflowing it. */
pre.hexa-code {
  display: block;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* The "Create your <provider> app" numbered walkthrough on the BYO setup page. */
.hexa-steps {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.hexa-steps li {
  margin-bottom: var(--space-2);
}

/* Per-field help text under a BYO setup field. */
.hexa-field-help {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Secondary "copy" button (the redirect URI on the BYO setup page). */
.hexa-auth__card button.hexa-copy {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.hexa-auth__card button.hexa-copy:hover {
  background-color: var(--color-bg-surface-raised);
  color: var(--color-text-primary);
}

/* A disabled submit — e.g. Save before the provider-side steps are confirmed done. */
.hexa-auth__card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A step heading in the numbered BYO setup workflow (Step 1 / Step 2 / Step 3). */
.hexa-step-title {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* The confirmation gate: a titled group of checkboxes that must be ticked before Save enables. */
.hexa-confirm-group {
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

.hexa-confirm-group legend {
  padding: 0;
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

/* A confirmation checkbox row gating Save until the provider-side steps are done. */
.hexa-confirm {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  cursor: pointer;
}

.hexa-confirm:last-child {
  margin-bottom: 0;
}

.hexa-confirm input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

/* A scope/permission list. */
.hexa-scopes {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.hexa-scopes li {
  margin-bottom: var(--space-1);
}

/* A two-button action row (Cancel + Authorize / Continue). */
.hexa-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hexa-actions button,
.hexa-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

/* Default action is secondary; the .primary one is the amber CTA. */
.hexa-actions button {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}

.hexa-actions button:hover {
  background-color: var(--color-bg-surface-raised);
  color: var(--color-text-primary);
}

.hexa-actions button.primary,
.hexa-actions .primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.hexa-actions button.primary:hover {
  background-color: var(--color-accent-hover);
}

/* A full-width primary submit for the single-action standalone forms (credential entry). */
.hexa-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.hexa-submit:hover {
  background-color: var(--color-accent-hover);
}

.hexa-error {
  color: var(--color-danger);
}

/* ---- Run detail debug table (run_detail.html) ---- */
.hexa-run {
  width: 100%;
  max-width: 64rem;
}

.hexa-run__meta {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-relaxed);
}

.hexa-run__meta strong {
  color: var(--color-text-primary);
}

.hexa-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-sm);
}

.hexa-table th,
.hexa-table td {
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.hexa-table th {
  background-color: var(--color-bg-surface-raised);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.hexa-table pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.status-failed,
.status-denied {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.status-completed,
.status-executed {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.status-pending_approval,
.status-pending {
  color: var(--color-warning);
  font-weight: var(--font-weight-semibold);
}