/* ===================================================
   Web3 — Vibrant Dark Theme v2
   Premium crypto trading platform aesthetic
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core palette */
  --bg-primary: #080a12;
  --bg-secondary: #0c0f1a;
  --bg-card: #0f1220;
  --bg-card-hover: #141830;
  --bg-card-glass: rgba(15, 18, 32, 0.85);
  --border-color: rgba(99, 102, 241, 0.12);
  --border-glow: rgba(99, 102, 241, 0.25);

  /* Text */
  --text-primary: #e8eaf6;
  --text-muted: #7c83a1;
  --text-dim: #505678;

  /* Accents — vibrant neon */
  --accent-green: #00e676;
  --accent-green-dim: rgba(0, 230, 118, 0.15);
  --accent-red: #ff5252;
  --accent-red-dim: rgba(255, 82, 82, 0.15);
  --accent-blue: #536dfe;
  --accent-blue-bright: #7c4dff;
  --accent-cyan: #18ffff;
  --accent-yellow: #ffab00;
  --accent-orange: #ff6d00;
  --accent-pink: #f50057;
  --accent-purple: #7c4dff;

  /* Gradients */
  --grad-main: linear-gradient(135deg, #536dfe, #7c4dff, #f50057);
  --grad-green: linear-gradient(135deg, #00e676, #00bfa5);
  --grad-red: linear-gradient(135deg, #ff5252, #ff1744);
  --grad-blue: linear-gradient(135deg, #536dfe, #304ffe);
  --grad-purple: linear-gradient(135deg, #7c4dff, #651fff);
  --grad-orange: linear-gradient(135deg, #ff6d00, #ffab00);
  --grad-cyan: linear-gradient(135deg, #18ffff, #00e5ff);
  --grad-glass: linear-gradient(135deg, rgba(83,109,254,0.08), rgba(124,77,255,0.05));

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow-blue: 0 0 20px rgba(83,109,254,0.2);
  --shadow-glow-green: 0 0 15px rgba(0,230,118,0.15);
  --shadow-glow-red: 0 0 15px rgba(255,82,82,0.15);
}

/* ── Base ──────────────────────────────────────────── */
body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(83,109,254,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(124,77,255,0.04) 0%, transparent 60%);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: rgba(83,109,254,0.3);
  color: #fff;
}

/* ── Cards — glassmorphism ─────────────────────────── */
.card {
  background: var(--bg-card-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color) !important;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.card:hover {
  border-color: var(--border-glow) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow-blue);
  transform: translateY(-1px);
}

.card-header {
  background: transparent;
  border-color: var(--border-color) !important;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Stat cards — gradient accent ──────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}

.stat-card-blue::before  { background: var(--grad-blue); }
.stat-card-green::before { background: var(--grad-green); }
.stat-card-red::before   { background: var(--grad-red); }
.stat-card-purple::before { background: var(--grad-purple); }
.stat-card-orange::before { background: var(--grad-orange); }
.stat-card-cyan::before   { background: var(--grad-cyan); }

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stat-icon-blue   { background: rgba(83,109,254,0.15); color: var(--accent-blue); }
.stat-icon-green  { background: rgba(0,230,118,0.15); color: var(--accent-green); }
.stat-icon-red    { background: rgba(255,82,82,0.15); color: var(--accent-red); }
.stat-icon-purple { background: rgba(124,77,255,0.15); color: var(--accent-purple); }
.stat-icon-orange { background: rgba(255,109,0,0.15); color: var(--accent-orange); }
.stat-icon-cyan   { background: rgba(24,255,255,0.15); color: var(--accent-cyan); }

/* ── Tables ────────────────────────────────────────── */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(83,109,254,0.04);
  --bs-table-striped-bg: rgba(255,255,255,0.015);
}

.table td, .table th {
  border-color: rgba(99,102,241,0.08) !important;
  vertical-align: middle;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
}

.table-secondary th {
  background: rgba(83,109,254,0.06) !important;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Navbar — frosted glass ────────────────────────── */
.navbar {
  background: rgba(8,10,18,0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,0.3);
}

.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.brand-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  animation: spin-logo 12s linear infinite;
  transform-origin: center center;
}

@keyframes spin-logo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-link {
  color: var(--text-muted) !important;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--text-primary) !important;
  background: rgba(83,109,254,0.08);
}

.nav-link.active {
  color: #fff !important;
  background: rgba(83,109,254,0.18);
  box-shadow: inset 0 0 0 1px rgba(83,109,254,0.25);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-blue);
}

/* ── Buttons ───────────────────────────────────────── */
.btn-xs {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 6px;
}

.btn-primary {
  background: var(--grad-blue);
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(83,109,254,0.3);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(83,109,254,0.5);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--grad-green);
  border: none;
  box-shadow: 0 2px 12px rgba(0,230,118,0.2);
}

.btn-danger {
  background: var(--grad-red);
  border: none;
}

.btn-outline-primary {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-outline-primary:hover {
  background: rgba(83,109,254,0.15);
  border-color: var(--accent-blue);
  color: #fff;
}

.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-muted);
}

.btn-outline-secondary:hover {
  background: rgba(99,102,241,0.1);
  border-color: var(--border-glow);
  color: var(--text-primary);
}

/* ── Badges — vibrant ──────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

.badge-glow-green { background: var(--accent-green-dim); color: var(--accent-green); border: 1px solid rgba(0,230,118,0.2); }
.badge-glow-red   { background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid rgba(255,82,82,0.2); }
.badge-glow-blue  { background: rgba(83,109,254,0.15); color: var(--accent-blue); border: 1px solid rgba(83,109,254,0.2); }

.bg-success { background: var(--accent-green) !important; }
.bg-danger  { background: var(--accent-red) !important; }
.bg-info    { background: var(--accent-blue) !important; }
.bg-warning { background: var(--accent-yellow) !important; }

/* ── Forms ─────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(15,18,32,0.8) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(83,109,254,0.12) !important;
}

.form-control::placeholder {
  color: var(--text-dim);
  opacity: 0.8;
}

.form-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ── Modals ────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(83,109,254,0.1);
}

.modal-header, .modal-footer {
  border-color: var(--border-color) !important;
}

.modal-backdrop.show { opacity: 0.7; }

/* ── Monospace ─────────────────────────────────────── */
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82em;
}

/* ── Profit / Loss ─────────────────────────────────── */
.text-profit, .text-success { color: var(--accent-green) !important; }
.text-loss, .text-danger    { color: var(--accent-red) !important; }

/* ── P&L calendar heatmap ──────────────────────────── */
.pnl-calendar { overflow-x: auto; padding-bottom: 4px; }
.pnl-cal-months {
  display: flex;
  gap: 3px;
  margin-left: 2px;
  margin-bottom: 4px;
}
.pnl-cal-months span {
  width: 11px;
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: visible;
}
.pnl-cal-grid { display: flex; gap: 3px; width: max-content; }
.pnl-cal-col { display: flex; flex-direction: column; gap: 3px; }
.pnl-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}
.pnl-cell-empty { background: transparent; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(83,109,254,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(83,109,254,0.35); }

/* ── Flash toasts ──────────────────────────────────── */
#flash-container .toast {
  min-width: 280px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

/* ── Animations ────────────────────────────────────── */
@keyframes pulse-green {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--accent-green); }
  50% { opacity: 0.5; box-shadow: 0 0 12px var(--accent-green); }
}
.pulse-green { animation: pulse-green 2s infinite; }

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse-red { animation: pulse-red 1.5s infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease-out; }

@keyframes glow-ring {
  0%, 100% { box-shadow: 0 0 5px rgba(83,109,254,0.3); }
  50% { box-shadow: 0 0 20px rgba(83,109,254,0.4); }
}

/* ── Bot type badges ───────────────────────────────── */
.bot-type-dca        { background: rgba(83,109,254,0.15); color: #82b1ff; }
.bot-type-grid       { background: rgba(0,230,118,0.15); color: var(--accent-green); }
.bot-type-signal_dca { background: rgba(124,77,255,0.15); color: #b388ff; }
.bot-type-trailing   { background: rgba(255,171,0,0.15); color: var(--accent-yellow); }
.bot-type-hodl       { background: rgba(24,255,255,0.15); color: var(--accent-cyan); }
.bot-type-bb_band    { background: rgba(245,0,87,0.15); color: #ff80ab; }
.bot-type-scalping   { background: rgba(255,109,0,0.15); color: var(--accent-orange); }
.bot-type-momentum   { background: rgba(100,255,218,0.15); color: #64ffda; }

/* ── Status badges ─────────────────────────────────── */
.status-active  { background: var(--accent-green-dim); color: var(--accent-green); border: 1px solid rgba(0,230,118,0.25); animation: glow-ring 3s infinite; }
.status-paused  { background: rgba(255,171,0,0.12); color: var(--accent-yellow); border: 1px solid rgba(255,171,0,0.2); }
.status-stopped { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.status-error   { background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid rgba(255,82,82,0.25); animation: pulse-red 1.5s infinite; }

/* ── Nav tabs dark ─────────────────────────────────── */
.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  border-color: transparent;
  font-size: 0.85rem;
  border-radius: 8px 8px 0 0;
}
.nav-tabs .nav-link.active {
  background: rgba(83,109,254,0.1) !important;
  border-color: var(--border-color) !important;
  border-bottom-color: transparent !important;
  color: var(--text-primary) !important;
}
.nav-tabs { border-color: var(--border-color) !important; }

/* ── Alerts ────────────────────────────────────────── */
.alert {
  font-size: 0.85rem;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.alert-info {
  background: rgba(83,109,254,0.1);
  border-color: rgba(83,109,254,0.2);
  color: #b0bec5;
}

/* ── Chart container ───────────────────────────────── */
.chart-container {
  position: relative;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(15,18,32,0.5);
}

/* ── Gradient text ─────────────────────────────────── */
.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Footer ────────────────────────────────────────── */
footer {
  background: rgba(8,10,18,0.6);
  backdrop-filter: blur(10px);
}

/* ── Misc ──────────────────────────────────────────── */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
  border: none;
}

.hover-lift { transition: transform 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); }

/* Bot card gradient border */
.bot-card {
  position: relative;
  border: 1px solid transparent !important;
  background-clip: padding-box;
}

.bot-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(83,109,254,0.2), rgba(124,77,255,0.1), rgba(245,0,87,0.1));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bot-card:hover::before { opacity: 1; }

/* Sort column styling */
.sort-col { cursor: pointer; white-space: nowrap; transition: color 0.15s ease; }
.sort-col:hover { color: var(--accent-blue) !important; }

/* Scanner column groups — mild tinted backgrounds */
.col-grp-price { background: rgba(83,109,254,0.05) !important; }
.col-grp-mom   { background: rgba(0,230,118,0.04) !important; }
.col-grp-vol   { background: rgba(255,171,0,0.04) !important; }

/* Group start/end borders — creates the "box" effect */
.grp-start { border-left: 2.5px solid rgba(83,109,254,0.35) !important; }
.grp-end   { border-right: 2.5px solid rgba(83,109,254,0.35) !important; }
.grp-start.col-grp-mom, .grp-start.grp-header-mom  { border-left-color: rgba(0,230,118,0.4) !important; }
.grp-end.col-grp-mom,   .grp-end.grp-header-mom    { border-right-color: rgba(0,230,118,0.4) !important; }
.grp-start.col-grp-vol, .grp-start.grp-header-vol  { border-left-color: rgba(255,171,0,0.4) !important; }
.grp-end.col-grp-vol,   .grp-end.grp-header-vol    { border-right-color: rgba(255,171,0,0.4) !important; }

/* Group header row — the label bar above each box */
.grp-header {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem !important;
  text-align: center !important;
  border-bottom: none !important;
}

.grp-header-price {
  color: var(--accent-blue) !important;
  border-left: 2.5px solid rgba(83,109,254,0.35);
  border-right: 2.5px solid rgba(83,109,254,0.35);
  border-top: 2.5px solid rgba(83,109,254,0.35);
}

.grp-header-mom {
  color: var(--accent-green) !important;
  border-left: 2.5px solid rgba(0,230,118,0.4);
  border-right: 2.5px solid rgba(0,230,118,0.4);
  border-top: 2.5px solid rgba(0,230,118,0.4);
}

.grp-header-vol {
  color: var(--accent-yellow) !important;
  border-left: 2.5px solid rgba(255,171,0,0.4);
  border-right: 2.5px solid rgba(255,171,0,0.4);
  border-top: 2.5px solid rgba(255,171,0,0.4);
}

/* Dot indicator in group headers */
.grp-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.grp-dot-blue   { background: var(--accent-blue); box-shadow: 0 0 6px var(--accent-blue); }
.grp-dot-green  { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.grp-dot-yellow { background: var(--accent-yellow); box-shadow: 0 0 6px var(--accent-yellow); }

/* Bottom border on last data row's group cells — visual close */
#markets-table tbody tr:last-child .col-grp-price { border-bottom: 2.5px solid rgba(83,109,254,0.25) !important; }
#markets-table tbody tr:last-child .col-grp-mom   { border-bottom: 2.5px solid rgba(0,230,118,0.25) !important; }
#markets-table tbody tr:last-child .col-grp-vol   { border-bottom: 2.5px solid rgba(255,171,0,0.25) !important; }

/* Hover row highlights per group */
#markets-table tbody tr:hover .col-grp-price { background: rgba(83,109,254,0.10) !important; }
#markets-table tbody tr:hover .col-grp-mom   { background: rgba(0,230,118,0.08) !important; }
#markets-table tbody tr:hover .col-grp-vol   { background: rgba(255,171,0,0.08) !important; }

/* Scanner scroll */
.scanner-scroll { overflow-y: auto; overflow-x: auto; }

/* Force separate borders — fixes sticky header bleed in all browsers */
#markets-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ── Sticky header — FULLY OPAQUE so scrolling data never bleeds through ── */
#markets-table thead th {
  position: sticky;
  background: #0f1220 !important;
  /* Shadow below to cover any sub-pixel gaps */
  box-shadow: 0 -2px 0 0 #0f1220;
}

/* Row 1: group header labels */
#markets-table thead tr:first-child th {
  top: 0;
  z-index: 5 !important;
  background: #0f1220 !important;
  /* Shadow above to block any content peeking above the header */
  box-shadow: 0 -4px 0 0 #0f1220, 0 -8px 0 0 #0f1220;
}

/* Row 2: column names */
#markets-table thead tr:nth-child(2) th {
  top: 28px;
  z-index: 4 !important;
  background: #0f1220 !important;
}

/* Opaque tinted backgrounds for group header cells (row 1) */
#markets-table thead tr:first-child th.grp-header-price { background: #101630 !important; box-shadow: 0 -4px 0 0 #0f1220, 0 -8px 0 0 #0f1220; }
#markets-table thead tr:first-child th.grp-header-mom   { background: #0e1816 !important; box-shadow: 0 -4px 0 0 #0f1220, 0 -8px 0 0 #0f1220; }
#markets-table thead tr:first-child th.grp-header-vol   { background: #191510 !important; box-shadow: 0 -4px 0 0 #0f1220, 0 -8px 0 0 #0f1220; }

/* Opaque tinted backgrounds for column header cells (row 2) */
#markets-table thead tr:nth-child(2) th.col-grp-price { background: #0e1328 !important; }
#markets-table thead tr:nth-child(2) th.col-grp-mom   { background: #0e1614 !important; }
#markets-table thead tr:nth-child(2) th.col-grp-vol   { background: #17140e !important; }

/* S.No column */
.sno-col { width: 38px; text-align: center; color: var(--text-dim); font-size: 0.75rem; }

/* Scroll-shadow hint on horizontally-scrollable tables — a wide table
   inside a narrow mobile card gives no visual sign there's more to the
   right until you swipe it. CSS-only: two gradients pinned to the
   scroll content fade the edges when there's overflow in that
   direction, two pinned to the viewport paint over them once you've
   scrolled past, so the shadow disappears exactly at each edge. */
.table-responsive {
  background:
    linear-gradient(to right, var(--bg-card) 30%, rgba(15, 18, 32, 0)),
    linear-gradient(to left, var(--bg-card) 30%, rgba(15, 18, 32, 0)) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) 0 0 / 24px 100%,
    linear-gradient(to left, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) 100% 0 / 24px 100%;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 24px 100%, 24px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Nav group dropdowns open on hover for mouse users (desktop); touch
   devices have no hover state, so Bootstrap's click-to-toggle JS still
   handles them unchanged. */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}