/* ---------------------------------------------------
   Core Dark Theme Styles for GenAI Trader Dashboard
   (scoped to .genai-dark so theme CSS can't override)
   --------------------------------------------------- */

/* Wrapper baseline */
.genai-dark {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #0a0c10;
  color: #e6e6e6;
}

/* Panels */
.genai-dark .panel {
  background: #0f1115;
  border: 1px solid #1c2130;
  border-radius: 10px;
  overflow: hidden;
}

.genai-dark .panel h4 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #1c2130;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
}

.genai-dark .panel-body {
  padding: 12px;
}

/* Layout */
.genai-dark .shell {
  display: grid;
  grid-template-columns: 300px 1fr 360px;
  gap: 14px;
  padding: 12px;
}

.genai-dark .stack { display: flex; flex-direction: column; gap: 12px; }
.genai-dark .row   { display: flex; gap: 12px; }
.genai-dark .grow  { flex: 1 1 0; min-width: 0; }

/* Charts & scanner */
.genai-dark .tv-wrap,
.genai-dark .chart {
  background: #141821;
  border-radius: 10px;
  overflow: hidden;
}

.genai-dark .tv-wrap { height: 420px; }
.genai-dark .chart   { height: 320px; position: relative; }

.genai-dark .scanner-block {
  height: calc(420px + 332px + 24px);
  overflow: auto;
}

/* Tables */
.genai-dark table { width: 100%; border-collapse: collapse; }
.genai-dark th,
.genai-dark td {
  border-bottom: 1px solid #1c2130;
  padding: 6px 8px;
  font-size: 12px;
  text-align: left;
}

/* Toolbar */
.genai-dark .toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0 0 0;
}

.genai-dark .toolbar input,
.genai-dark .toolbar select {
  background: #0c0f14;
  color: #e6e6e6;
  border: 1px solid #1c2130;
  border-radius: 8px;
  padding: 6px 8px;
}

.genai-dark .toolbar button {
  background: #0e7bff;
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* Misc */
.genai-dark .muted { color: #9aa4b2; }

.genai-dark #aiSummary {
  white-space: pre-wrap;
  min-height: 220px;
  font-size: 13px;
  background: #0c0f14;
  border: 1px solid #1c2130;
  border-radius: 8px;
  padding: 10px;
}

.genai-dark #liveTrades {
  background: #0c0f14;
  border: 1px solid #1c2130;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #9dd59d;
}

/* --- Help Drawer --- */
.tk-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px;
  max-width: 95vw;
  background: #0d1117; color: #e5e7eb;
  transform: translateX(100%);
  transition: transform .28s ease-in-out;
  border-left: 1px solid #2c3444;
  z-index: 9999;
  display: flex; flex-direction: column;
}
.tk-drawer.is-open { transform: translateX(0); }

.tk-drawer__header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #11141a;
  border-bottom: 1px solid #2c3444;
}
.tk-drawer__title { font-weight: 700; font-size: 15px; }
.tk-drawer__dontshow { margin-left: auto; font-size: 12px; }
.tk-drawer__close {
  margin-left: 8px; border: 1px solid #2c3444;
  background: transparent; color: #e5e7eb;
  width: 30px; height: 30px; border-radius: 6px;
}
.tk-drawer__close:hover { border-color: #f2ae2c; color: #f2ae2c; }

.tk-drawer__body { padding: 12px; overflow-y: auto; }
.tk-video { background: #11141a; border:1px solid #2c3444; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.tk-video__title { font-weight: 600; margin-bottom: 6px; }
.tk-video__frame iframe, .tk-video__frame video { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; }

.tk-fab {
  position: fixed; right: 16px; bottom: 16px;
  z-index: 9998;
  width: 42px; height: 42px;
  border-radius: 10px; border: 1px solid #2c3444;
  background: #11141a; color: #f2ae2c;
  font-weight: 900; font-size: 18px;
  cursor: pointer;
}

/* ---------------------------------------------------
   FORMS (global) — ensures legible fields in dark UI,
   including Ava demo/signup and any injected modals.
   --------------------------------------------------- */

/* Base fields */
.genai-dark input,
.genai-dark select,
.genai-dark textarea,
.genai-modal input,
.genai-modal select,
.genai-modal textarea {
  color: #fff !important;
  background-color: #0f1218 !important;
  border: 1px solid #2b3245 !important;
  border-radius: 8px;
}

/* Placeholder text */
.genai-dark input::placeholder,
.genai-dark textarea::placeholder,
.genai-modal input::placeholder,
.genai-modal textarea::placeholder {
  color: #a6adbb !important;
  opacity: 1;
}

/* Labels & helper text inside dark containers */
.genai-dark label,
.genai-dark .form-label,
.genai-dark .help,
.genai-modal label,
.genai-modal .form-label,
.genai-modal .help {
  color: #e6e6e6 !important;
}

/* Focus ring */
.genai-dark input:focus,
.genai-dark select:focus,
.genai-dark textarea:focus,
.genai-modal input:focus,
.genai-modal select:focus,
.genai-modal textarea:focus {
  outline: none;
  border-color: #4b89ff !important;
  box-shadow: 0 0 0 2px rgba(75, 137, 255, 0.35);
}

/* Disabled state */
.genai-dark input[disabled],
.genai-dark select[disabled],
.genai-dark textarea[disabled],
.genai-modal input[disabled],
.genai-modal select[disabled],
.genai-modal textarea[disabled] {
  color: #9aa4b2 !important;
  background-color: #0d1117 !important;
  border-color: #222836 !important;
  opacity: 1;
}

/* Radios / checkboxes (text color nearby) */
.genai-dark .form-check,
.genai-modal .form-check,
.genai-dark .checkbox,
.genai-modal .checkbox {
  color: #e6e6e6 !important;
}

/* Select dropdown text (best-effort across browsers) */
.genai-dark select option,
.genai-modal select option {
  color: #fff;
  background: #0f1218;
}

/* Autofill (Chrome/WebKit) */
.genai-dark input:-webkit-autofill,
.genai-modal input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0px 1000px #0f1218 inset !important;
  caret-color: #fff;
}

/* Buttons inside dark modals/forms */
.genai-dark .btn,
.genai-modal .btn,
.genai-dark button,
.genai-modal button {
  color: #111 !important;
  background: #f5c242 !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
}
.genai-dark .btn.secondary,
.genai-modal .btn.secondary {
  color: #e6e6e6 !important;
  background: #1a2030 !important;
  border-color: #2b3245 !important;
}

/* Make sure any deep, embedded modal from vendors inherits readable text */
.genai-dark .modal, .genai-dark [role="dialog"] {
  color: #e6e6e6;
}

/* ===== FINAL: Ava modal readability hard overrides ===== */

/* Make the whole modal and everything inside fully opaque & readable */
.genai-modal,
.genai-dark .genai-modal,
.genai-modal *:not(svg):not(path) {
  color: #e6e6e6 !important;
  opacity: 1 !important;         /* kills low-opacity labels */
  filter: none !important;        /* in case a parent uses filter/opacity */
}

/* Section headings & title */
.genai-modal header h3,
.genai-modal .section-title {
  color: #e6e6e6 !important;
  font-weight: 600 !important;
}

/* Labels & helper text */
.genai-modal label,
.genai-modal .form-label,
.genai-modal .help,
.genai-modal .hint,
.genai-modal .subtext,
.genai-modal .muted,
.genai-modal .field-label,
.genai-modal .desc,
.genai-modal p {
  color: #e6e6e6 !important;
  opacity: 1 !important;
}

/* Inputs / selects / textareas */
.genai-modal input,
.genai-modal select,
.genai-modal textarea {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background-color: #0f1218 !important;
  border: 1px solid #2b3245 !important;
  border-radius: 8px !important;
}

/* Placeholders */
.genai-modal input::placeholder,
.genai-modal textarea::placeholder {
  color: #a6adbb !important;
  opacity: 1 !important;
}

/* Dropdown options */
.genai-modal select option {
  color: #ffffff !important;
  background: #0f1218 !important;
}

/* Focus feedback */
.genai-modal input:focus,
.genai-modal select:focus,
.genai-modal textarea:focus {
  outline: none !important;
  border-color: #4b89ff !important;
  box-shadow: 0 0 0 2px rgba(75,137,255,.35) !important;
}

/* Buttons */
.genai-modal .btn,
.genai-modal button {
  color: #111 !important;
  background: #f5c242 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}
.genai-modal .btn.secondary,
.genai-modal button.secondary {
  color: #e6e6e6 !important;
  background: #1a2030 !important;
  border-color: #2b3245 !important;
}

/* ===== Universal dialog contrast hardening (Ava + others) ===== */

/* Catch many modal patterns, even if classes differ */
.genai-modal,
.genai-modal *,
.genai-modal-overlay,
.genai-modal-overlay *,
.genai-dark .modal,
.genai-dark .modal *,
.genai-dark [role="dialog"],
.genai-dark [role="dialog"] * {
  color: #e6e6e6 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Inputs */
.genai-dark .modal input,
.genai-dark .modal select,
.genai-dark .modal textarea,
.genai-dark [role="dialog"] input,
.genai-dark [role="dialog"] select,
.genai-dark [role="dialog"] textarea {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background-color: #0f1218 !important;
  border: 1px solid #2b3245 !important;
  border-radius: 8px !important;
}

.genai-dark .modal input::placeholder,
.genai-dark .modal textarea::placeholder,
.genai-dark [role="dialog"] input::placeholder,
.genai-dark [role="dialog"] textarea::placeholder {
  color: #a6adbb !important;
  opacity: 1 !important;
}

.genai-dark .modal select option,
.genai-dark [role="dialog"] select option {
  color: #ffffff !important;
  background: #0f1218 !important;
}

.genai-dark .modal input:focus,
.genai-dark .modal select:focus,
.genai-dark .modal textarea:focus,
.genai-dark [role="dialog"] input:focus,
.genai-dark [role="dialog"] select:focus,
.genai-dark [role="dialog"] textarea:focus {
  outline: none !important;
  border-color: #4b89ff !important;
  box-shadow: 0 0 0 2px rgba(75,137,255,.35) !important;
}

/* Buttons in modals */
.genai-dark .modal .btn,
.genai-dark .modal button,
.genai-dark [role="dialog"] .btn,
.genai-dark [role="dialog"] button {
  color: #111 !important;
  background: #f5c242 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}
.genai-dark .modal .btn.secondary,
.genai-dark [role="dialog"] .btn.secondary {
  color: #e6e6e6 !important;
  background: #1a2030 !important;
  border-color: #2b3245 !important;
}