/* =========================================================================
   auth.css — extracted login-page styles. Loaded only by index.html.
   Closes audit finding H7 — full app stylesheet was being shipped on the
   login page (51 KB Brotli). This file is ~5 KB Brotli.

   Contents (in order):
     - Base resets, body, :root design tokens (light)
     - .dark token overrides (dark theme)
     - .auth-* component block (everything index.html renders)
     - .hidden utility
   ========================================================================= */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Satoshi", -apple-system, "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root {
  /* Surfaces */
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #fafafb;
  --hover: #f2f3f5;
  --border: #e7e8ec;
  --border-strong: #d8dae0;

  /* Text */
  --fg: #0d0f14;
  --fg-muted: #5b5f6b;
  --fg-subtle: #8b8f9a;

  /* Legacy aliases — older rules in this file (mostly the ticket drawer +
     timeline) reference --text, --muted, and --fg-primary which were never
     defined as tokens. Without these aliases they fall back to their hardcoded
     fallbacks (e.g. #111) and break in dark mode. Map them to the real tokens
     in BOTH themes so any existing rule "just works". */
  --text: var(--fg);
  --muted: var(--fg-muted);
  --fg-primary: var(--fg);
  --bg-card: var(--panel);

  /* Surface scale — several rules use --surface-0/1/2 / --surface /
     --surface-sunken without inline fallbacks. Define them as aliases of
     the real tokens so form fields, modals, ticket drawer, MFA cards, and
     audit log render correctly in BOTH themes. Without these, var() falls
     through to transparent and selects/inputs lose their background —
     producing the light-text-on-light-bg bug. */
  --surface-0: var(--panel);
  --surface-1: var(--panel-2);
  --surface-2: var(--hover);
  --surface: var(--panel);
  --surface-sunken: var(--bg);

  /* Accent — indigo */
  --accent: #5b5bd6;
  --accent-hover: #4a4ac4;
  --accent-soft: #eef0ff;
  --accent-fg: #ffffff;

  /* Semantic */
  --green: #0f9d58;
  --green-bg: #e6f4ec;
  --amber: #b7791f;
  --amber-bg: #fdf1d8;
  --red: #d14343;
  --red-bg: #fbe8e8;
  --blue: #2563eb;
  --blue-bg: #e6ecfb;
  --violet: #7c3aed;
  --violet-bg: #f1ebfd;
  --slate: #6b7280;
  --slate-bg: #eef0f3;

  /* Layout */
  --sidebar-w: 240px;
  --header-h: 56px;
  --radius: 8px;
  --radius-sm: 6px;

  /* Numeric font stack for data */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,17,25,0.04);
  --shadow-md: 0 4px 14px rgba(15,17,25,0.08);
  --shadow-lg: 0 12px 32px rgba(15,17,25,0.14);
}

.dark {
  --bg: #0b0c10;
  --panel: #111318;
  --panel-2: #161820;
  --hover: #1b1e27;
  --border: #23262f;
  --border-strong: #2e323d;

  --fg: #ecedf1;
  --fg-muted: #9aa0ac;
  --fg-subtle: #6a707b;

  --accent: #7c7cf0;
  --accent-hover: #9898f5;
  --accent-soft: #1c1f3a;

  --green: #34c27a;
  --green-bg: #0f2a1c;
  --amber: #e0b25a;
  --amber-bg: #2a210f;
  --red: #ef6a6a;
  --red-bg: #2a1111;
  --blue: #7aa4ff;
  --blue-bg: #111a2e;
  --violet: #a085ff;
  --violet-bg: #1d1533;
  --slate: #a0a5b0;
  --slate-bg: #1c1f26;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.38);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}

/* =========================================================================
   Login page (TorchSec branded)
   Standalone layout — rendered by index.html (login page) with body class `.auth-body`.
   ========================================================================= */

body.auth-body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  min-height: 100vh;
}

/* --- Brand panel (left) --- */
.auth-brand {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(91, 91, 214, 0.18), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(249, 115, 22, 0.16), transparent 60%),
    linear-gradient(180deg, #0b0c10 0%, #13131d 100%);
  color: #ecedf1;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 40% 40%, black 40%, transparent 75%);
  pointer-events: none;
}
.auth-brand-inner {
  position: relative;
  max-width: 460px;
  width: 100%;
}

.auth-wordmark {
  margin-bottom: 56px;
}
.auth-logo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(220, 38, 38, 0.18));
}

.auth-heading {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #ffffff;
  text-wrap: balance;
}
.auth-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(236, 237, 241, 0.72);
  margin: 0 0 28px;
  max-width: 420px;
}

.auth-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(236, 237, 241, 0.82);
}
.auth-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F97316, #5B5BD6);
  flex: 0 0 6px;
}

.auth-brand-foot {
  font-size: 12px;
  color: rgba(236, 237, 241, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-brand-foot-sep { opacity: 0.5; }
.auth-brand-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(236, 237, 241, 0.2);
}
.auth-brand-link:hover { color: #ffffff; border-color: rgba(236, 237, 241, 0.5); }

/* --- Form column (right) --- */
.auth-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--bg);
}

.auth-panel {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.auth-panel.hidden { display: none; }

.auth-panel-head { margin-bottom: 22px; }
.auth-panel-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--fg);
}
.auth-panel-head p {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}

/* Tiles */
.auth-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.auth-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  font: inherit;
  color: inherit;
}
.auth-tile:hover {
  border-color: var(--accent);
  background: var(--panel);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.auth-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-tile-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-tile-icon svg { width: 22px; height: 22px; }
.auth-tile-icon.msp {
  background: var(--accent-soft);
  color: var(--accent);
}
.auth-tile-icon.client {
  background: color-mix(in srgb, #F97316 16%, transparent);
  color: #F97316;
}
.auth-tile-meta { flex: 1 1 auto; min-width: 0; }
.auth-tile-meta h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.auth-tile-meta p {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}
.auth-tile-chev {
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
}
.auth-tile-chev svg { width: 16px; height: 16px; }
.auth-tile:hover .auth-tile-chev { color: var(--accent); }

.auth-footnote {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
  text-align: center;
}
.auth-footnote a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-footnote a:hover { text-decoration: underline; }

/* Form fields */
.auth-back {
  background: transparent;
  border: 0;
  padding: 6px 10px 6px 6px;
  margin: 0 0 14px -6px;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.auth-back:hover { background: var(--hover); color: var(--fg); }
.auth-back svg { width: 14px; height: 14px; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.auth-field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.auth-field input {
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.auth-field input:hover {
  border-color: var(--border-strong);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.auth-error {
  padding: 10px 12px;
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

.auth-submit {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  margin-top: 4px;
}

/* Shake animation on invalid login */
.auth-panel.shake {
  animation: authShake 360ms ease-in-out;
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Help note under the sign-in form */
.auth-help-note {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--fg-subtle);
  line-height: 1.5;
  text-align: center;
}
.auth-help-note a {
  color: var(--accent);
  text-decoration: none;
}
.auth-help-note a:hover { text-decoration: underline; }

/* Disabled submit button during login request */
.auth-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Mobile */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    min-height: auto;
    padding: 32px 28px;
    align-items: flex-start;
  }
  .auth-brand-inner { max-width: none; }
  .auth-wordmark { margin-bottom: 28px; }
  .auth-logo { max-width: 240px; }
  .auth-heading { font-size: 26px; }
  .auth-tagline { font-size: 14px; margin-bottom: 20px; }
  .auth-bullets { margin-bottom: 24px; }
  .auth-form-col { padding: 28px 18px; }
  .auth-panel { padding: 24px; }
}

/* Utility for login page only — keeps app.html untouched */
.hidden { display: none !important; }