/* settings-enhance.css — FIX-306 (2026-05-04)
 * Bumps input visibility on the Settings page. The base SettingsPage uses
 * inline styles (bg #151820, border #1e2433) that blend into the page
 * background. This overlay raises border contrast, slightly lifts the field
 * background, and adds a focus glow so the inputs read as actual fields.
 */

/* Inputs everywhere except login/auth pages. !important beats the inline
   style in SettingsPage.jsx (style="background:#151820;border:1px solid #1e2433"). */
html body input[type="text"]:not([data-login]),
html body input[type="password"]:not([data-login]),
html body input[type="number"],
html body input[type="email"],
html body input[type="search"],
html body textarea,
html body select {
  background: #1a1f2c !important;
  border: 1px solid rgba(99, 102, 241, 0.32) !important;
  color: #e2e8f0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  min-height: 34px !important;
  padding: 8px 11px !important;
  border-radius: 7px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

html body input[type="text"]:hover:not([data-login]),
html body input[type="password"]:hover:not([data-login]),
html body input[type="number"]:hover,
html body textarea:hover,
html body select:hover {
  background: #1f2433 !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

html body input[type="text"]:focus:not([data-login]),
html body input[type="password"]:focus:not([data-login]),
html body input[type="number"]:focus,
html body input[type="email"]:focus,
html body textarea:focus,
html body select:focus {
  outline: none !important;
  background: #1f2433 !important;
  border-color: rgba(99, 102, 241, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}

/* Hide the overlay on the login screen — that page has its own input look */
#eb-login-root input,
#eb-transition input {
  background: revert !important;
  border: revert !important;
  font-size: revert !important;
  min-height: revert !important;
}

/* Placeholders readable against the slightly raised bg */
html body input::placeholder,
html body textarea::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
  opacity: 1 !important;
}

/* Field labels — slight bump so each label-input pair reads as one unit */
html body label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ──────────────────────────────────────────────────────────────────
 * FIX-308 (2026-05-04) — Settings page layout fix.
 *
 * Problem: SettingsPage.jsx renders 7 cards in a 2-col grid with
 * source order [Auth, 2FA, Profile, IP whitelist, Hyperliquid API,
 * Platform security, Layout]. Hyperliquid API ends up as the 5th
 * card → user must scroll a full screen to find it. And HL API
 * is the most important action right now (re-saving keys to fix
 * the orphaned-credentials problem from FIX-305).
 *
 * Re-order cards by priority via CSS `order:` (works on grid
 * children) so the page reads top-to-bottom by importance:
 *   Row 1: Hyperliquid API (PRIMARY) | Two-Factor Auth
 *   Row 2: IP whitelist            | Profile & preferences
 *   Row 3: Authentication          | Platform security
 *   Row 4: Layout                  | (empty)
 *
 * Also widens the grid from max-w-4xl to ~1200px so cards have
 * more breathing room, and gives the HL API card a turquoise
 * accent so the user's eye lands on it first.
 * ────────────────────────────────────────────────────────────────── */

/* Widen the Settings grid */
html body [class*="grid-cols-2"][class*="max-w-4xl"] {
  max-width: min(1200px, calc(100vw - 64px)) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Reorder the 7 cards (1=Auth, 2=2FA, 3=Profile, 4=IP, 5=HL API, 6=Platform, 7=Layout) */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5) { order: 1; } /* Hyperliquid API → top left */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(2) { order: 2; } /* 2FA → top right */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(4) { order: 3; } /* IP whitelist */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(3) { order: 4; } /* Profile & prefs */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(1) { order: 5; } /* Authentication (info) */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(6) { order: 6; } /* Platform security (info) */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(7) { order: 7; } /* Layout */

/* Highlight the Hyperliquid API card — it's the primary action */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5) {
  position: relative;
  border: 1px solid rgba(0, 212, 170, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, 0.10),
    0 8px 28px -12px rgba(0, 212, 170, 0.22),
    inset 0 1px 0 rgba(0, 212, 170, 0.06) !important;
  background:
    radial-gradient(ellipse at top left, rgba(0, 212, 170, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20, 24, 36, 0.62) 0%, rgba(14, 18, 28, 0.58) 100%) !important;
}

/* Tiny "PRIMARY" tag in the top-right of the HL API card — pure CSS */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5)::before {
  content: 'CONNECT EXCHANGE';
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(0, 212, 170, 0.75);
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: 999px;
  padding: 3px 9px;
  pointer-events: none;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
}

/* Tighten card internal padding so HL API content doesn't spill */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > * > div:first-child {
  padding: 14px 16px;
}

/* Push platform-security info card visually back (de-emphasize) */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(6),
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(1) {
  opacity: 0.92;
}

/* Pin the Settings header in view */
html body main h1 {
  margin-bottom: 4px;
}

/* On narrow screens (<1024px) restore single-column flow with the same priority order */
@media (max-width: 1023px){
  html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(n) {
    order: revert;
  }
  html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5) { order: -1; }
}

/* Buttons in Settings — slightly stronger contrast */
html body main button[class*="rounded"][class*="text-xs"] {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10.5px !important;
}

/* "Bot activation" footer dock — pin to bottom of viewport with cleaner backdrop */
html body div[class*="fixed"][class*="bottom"] {
  border-top: 1px solid rgba(99, 102, 241, 0.18);
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.85) 0%, rgba(8, 10, 16, 0.96) 60%) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ──────────────────────────────────────────────────────────────────
 * FIX-313 (2026-05-04) — Re-enable scroll on Settings page.
 *
 * The dashboard shell uses overflow:hidden globally so the workspace
 * grids stay viewport-fit. Settings has 7 cards + activation pill +
 * footer dock = ~1400px tall content → with the parent overflow
 * hidden the bottom cards (Layout, Platform security, Bot activation
 * dock) get cut off and the user can't scroll to them.
 *
 * We re-enable vertical scroll on the Settings page main container.
 * Detection: when SettingsPage is mounted, <main> contains an
 * <h1>Settings</h1>. Scoped via :has() so other workspaces stay
 * viewport-fit.
 * ────────────────────────────────────────────────────────────────── */

/* Allow main to scroll on Settings page */
html body main:has(> div > div > h1),
html body main:has(h1) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: calc(100vh - 60px) !important;
  padding-bottom: 32px;
}

/* The wrapper around the Settings grid (the .space-y-6 div) — make
   sure its height grows with content rather than being clipped. */
html body main > div:has(> div > h1),
html body main > div:has(h1) {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Bot activation card injected at top of grid — extra bottom margin
   so it doesn't kiss the next row */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > #eb-activation-card {
  margin-bottom: 4px;
}

/* ──────────────────────────────────────────────────────────────────
 * FIX-319 (2026-05-05) — Phase 1 Settings cleanup.
 *
 * 1. Hide Hyperliquid API section (5th grid child) when an agent
 *    already exists — the Bot Activation card replaces it.
 * 2. Hide Authentication / Platform security / Layout (1st, 6th, 7th)
 *    by default — they're admin-info, not user-facing settings.
 *    Reveal via the "Show advanced settings" button injected by
 *    security-enhance.js.
 * ────────────────────────────────────────────────────────────────── */

/* FIX-322 (2026-05-05): hide-first, reveal-on-flag.
 * Previously the sidecar set body.eb-has-agent AFTER the bridge call
 * resolved (~1.2s post-mount). For that window the user saw the full
 * 7-card "raw" Settings — flash of unstyled-ish content. Now we hide
 * by default and the sidecar OPTS IN to revealing only when needed. */

/* Hyperliquid API card (5th) — hidden by default; revealed only if the
 * user has NO agent yet (the manual save path becomes the only option). */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5) {
  display: none !important;
}
html body.eb-no-agent [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(5) {
  display: block !important;
}

/* Admin-info cards (Auth · Platform security · Layout) — hidden by
 * default, revealed only when "Show advanced" is toggled. */
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(1),
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(6),
html body [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(7) {
  display: none !important;
}
html body.eb-show-advanced [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(1),
html body.eb-show-advanced [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(6),
html body.eb-show-advanced [class*="grid-cols-2"][class*="max-w-4xl"] > :nth-child(7) {
  display: block !important;
}

/* The toggle button itself */
html body button#eb-advanced-toggle.eb-adv-toggle {
  display: block;
  width: fit-content;
  margin: 24px auto 32px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #94a3b8;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
}
html body button#eb-advanced-toggle.eb-adv-toggle:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.18);
  color: #cbd5e0;
}
html body.eb-show-advanced button#eb-advanced-toggle.eb-adv-toggle {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
}