/* ==========================================================================
   TradeFlux frontend — theme layer (dark mode + floating toggles)
   Loaded AFTER assets/css/style.css. Dark mode via :root[data-theme="dark"].
   Light mode keeps the original look; this only adds dark + the toggle UI.
   ========================================================================== */

/* ---- Floating language + theme toggle (auto-injected by frontend-ui.js) --- */
.tf-toolbar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tf-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.tf-toggle:hover { background: #fff; color: #111; text-decoration: none; }
.tf-toggle i { font-size: 15px; }

:root[data-theme="dark"] .tf-toggle {
  background: rgba(30, 36, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  color: #eaecef;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .tf-toggle:hover { background: #262b33; color: #fff; }

/* ==========================================================================
   DARK MODE
   ========================================================================== */
:root[data-theme="dark"] {
  --tf-bg: #0b0e11;
  --tf-bg-elev: #151a21;
  --tf-card: #1a2029;
  --tf-border: #262b33;
  --tf-text: #eaecef;
  --tf-muted: #848e9c;
  --tf-green: #0ecb81;
  --tf-red: #f6465d;
  --tf-accent: #9a55ff;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] html {
  background: var(--tf-bg) !important;
  color: var(--tf-text) !important;
}

/* generic surfaces */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] [class*="bg-white"] {
  background: var(--tf-bg-elev) !important;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .list-group-item {
  background: var(--tf-card) !important;
  color: var(--tf-text) !important;
  border-color: var(--tf-border) !important;
}

/* text */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] span,
:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] div,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th,
:root[data-theme="dark"] a:not(.btn):not(.tf-toggle) { color: var(--tf-text); }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small.text-muted { color: var(--tf-muted) !important; }

/* borders */
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end,
:root[data-theme="dark"] hr { border-color: var(--tf-border) !important; }

/* header / top navbar */
:root[data-theme="dark"] header,
:root[data-theme="dark"] header.light-bb,
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar-light {
  background: var(--tf-bg-elev) !important;
  border-color: var(--tf-border) !important;
}
:root[data-theme="dark"] .navbar-brand,
:root[data-theme="dark"] .navbar span { color: var(--tf-text) !important; }

/* bottom nav */
:root[data-theme="dark"] .crypo-bottom-nav.navbar {
  background: var(--tf-bg-elev) !important;
  border-top-color: var(--tf-border) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .crypo-bottom-nav .nav-link { color: var(--tf-muted) !important; }
:root[data-theme="dark"] .crypo-bottom-nav .nav-link:hover,
:root[data-theme="dark"] .crypo-bottom-nav .nav-link.active { color: var(--tf-accent) !important; }
:root[data-theme="dark"] .nav-circle { background: var(--tf-card) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* tables (markets / assets / transactions) */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .markets-pair-list,
:root[data-theme="dark"] .markets-pair-list .table { color: var(--tf-text) !important; background: transparent !important; }
:root[data-theme="dark"] .table thead th { color: var(--tf-muted) !important; border-color: var(--tf-border) !important; background: transparent !important; }
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th { border-color: var(--tf-border) !important; }
:root[data-theme="dark"] .table tbody tr { background: transparent !important; }
:root[data-theme="dark"] .table tbody tr:hover,
:root[data-theme="dark"] .table-hover tbody tr:hover { background: var(--tf-bg-elev) !important; }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
:root[data-theme="dark"] .coin-name { color: var(--tf-text) !important; }

/* price up / down — keep green/red in both themes */
:root[data-theme="dark"] .text-success,
:root[data-theme="dark"] .green,
:root[data-theme="dark"] .up,
:root[data-theme="dark"] [class*="positive"] { color: var(--tf-green) !important; }
:root[data-theme="dark"] .text-danger,
:root[data-theme="dark"] .red,
:root[data-theme="dark"] .down,
:root[data-theme="dark"] [class*="negative"] { color: var(--tf-red) !important; }

/* forms (login / signup / deposit / withdrawal / profile) */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  background: var(--tf-card) !important;
  color: var(--tf-text) !important;
  border-color: var(--tf-border) !important;
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] input::placeholder { color: var(--tf-muted) !important; }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] input:focus {
  background: var(--tf-card) !important;
  border-color: var(--tf-accent) !important;
  box-shadow: 0 0 0 3px rgba(154, 85, 255, 0.25) !important;
  color: var(--tf-text) !important;
}
:root[data-theme="dark"] .form-access {
  background: var(--tf-card) !important;
  border: 1px solid var(--tf-border) !important;
  border-radius: 14px;
}
:root[data-theme="dark"] .form-access span,
:root[data-theme="dark"] .form-access h2 { color: var(--tf-text) !important; }

/* buttons — keep primary readable; accent = brand purple */
:root[data-theme="dark"] .btn-primary {
  background: var(--tf-accent) !important;
  border-color: var(--tf-accent) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-outline-secondary {
  background: var(--tf-card) !important;
  border-color: var(--tf-border) !important;
  color: var(--tf-text) !important;
}
:root[data-theme="dark"] .btn-success { background: var(--tf-green) !important; border-color: var(--tf-green) !important; color: #042a1d !important; }
:root[data-theme="dark"] .btn-danger  { background: var(--tf-red) !important;  border-color: var(--tf-red) !important;  color: #2a0410 !important; }

/* alerts */
:root[data-theme="dark"] .alert-danger { background: rgba(246,70,93,0.12) !important; border-color: rgba(246,70,93,0.3) !important; color: var(--tf-red) !important; }
:root[data-theme="dark"] .alert-success { background: rgba(14,203,129,0.12) !important; border-color: rgba(14,203,129,0.3) !important; color: var(--tf-green) !important; }

/* scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b323c; border-radius: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tf-bg); }

/* images with white backgrounds (logos) — soften on dark */
:root[data-theme="dark"] .circle-logo { filter: none; }