/* Dark "terminal / targeting reticle" theme, used only by the auth screens
   (login, forgot password, reset password) -- the rest of the Portal keeps
   its normal light theme (app.css). Kept as its own file rather than mixed
   into app.css so the two visual languages never fight over the same
   selectors. */

:root {
  /* FleetLease brand colors (see app.css: --navy / --gold), reused here
     instead of a generic accent so the dark auth screens still read as
     FleetLease rather than a stock terminal theme. */
  --term-bg: #0a1220;
  --term-fg: #f2f2f0;
  --term-muted: #8a97ac;
  --term-border: #d8d8d2;
  --term-accent: #c9a227;
  --term-accent-2: #3a5ba0;
  --term-danger: #ff6b6b;
  --term-success: #4ee6a4;
  --term-font: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

body.terminal-auth {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Page background is plain white; the terminal look lives inside
     .term-frame (dark box, gold dashed border) so it reads as a card
     sitting on a white page rather than a full-page dark theme. */
  background: #ffffff;
  color: var(--term-fg);
  font-family: var(--term-font);
  padding: 24px;
}

.term-frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--term-bg);
  border: 1px dashed var(--term-border);
  padding: 28px 30px 30px;
}

/* Four corner brackets, applied to any bracketed box (the outer frame, each
   field, and the button) -- an L-shaped tick in the accent color, drawn as
   two abutting border sides on a small absolutely-positioned span so it
   reads as a "targeting reticle" corner overlapping the dashed edge. */
.term-corner { position: absolute; width: 12px; height: 12px; pointer-events: none; }
.term-corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--term-accent); border-left: 2px solid var(--term-accent); }
.term-corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--term-accent); border-right: 2px solid var(--term-accent); }
.term-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--term-accent); border-left: 2px solid var(--term-accent); }
.term-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--term-accent); border-right: 2px solid var(--term-accent); }

.term-title {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 30px;
  text-transform: uppercase;
}

.term-field { position: relative; margin-bottom: 22px; }
.term-field label {
  display: block;
  font-size: 12px;
  color: var(--term-fg);
  margin-bottom: 8px;
}
.term-input-box {
  position: relative;
  border: 1px dashed var(--term-border);
  padding: 2px;
}
.term-input-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--term-fg);
  font-family: var(--term-font);
  font-size: 14px;
  padding: 10px 12px;
  letter-spacing: 0.04em;
}
.term-input-box input::placeholder { color: var(--term-muted); }
.term-input-box input:-webkit-autofill {
  -webkit-text-fill-color: var(--term-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--term-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.term-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 22px;
  font-size: 12.5px;
  color: var(--term-fg);
  user-select: none;
}
.term-checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: transparent;
  border: 1px dashed var(--term-border);
  position: relative;
  cursor: pointer;
}
.term-checkbox-row input[type="checkbox"]:checked { border-color: var(--term-accent); }
.term-checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--term-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.term-checkbox-row label { cursor: pointer; }

.term-link-row { text-align: center; margin: 4px 0 24px; }
.term-link-row a {
  color: var(--term-fg);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px dashed var(--term-muted);
}
.term-link-row a:hover { color: var(--term-accent); border-bottom-color: var(--term-accent); }

.term-button-box {
  position: relative;
  border: 1px dashed var(--term-border);
  margin-top: 6px;
}
.term-button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--term-fg);
  font-family: var(--term-font);
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.term-button:hover { color: var(--term-accent); }

.term-message {
  border: 1px dashed var(--term-border);
  padding: 10px 12px;
  margin-bottom: 20px;
  font-size: 12.5px;
  line-height: 1.5;
}
.term-message.term-error { border-color: var(--term-danger); color: var(--term-danger); }
.term-message.term-success { border-color: var(--term-success); color: var(--term-success); }

.term-hint {
  color: var(--term-muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 20px;
  text-align: center;
}

/* Show/Hide password: eye button attached to the right edge of the input box,
   separated from the field by a divider (like a Bootstrap input group). */
.term-input-box.term-has-toggle { display: flex; align-items: stretch; }
.term-input-box.term-has-toggle input { flex: 1; min-width: 0; }
.term-toggle {
  flex: none;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-left: 1px dashed var(--term-border);
  color: var(--term-fg);
  cursor: pointer;
  padding: 0;
}
.term-toggle svg[hidden] { display: none; }
.term-toggle:hover, .term-toggle:focus-visible { color: var(--term-accent); background: rgba(201, 162, 39, 0.10); outline: none; }