/* ============================================================
   BitcoinPurple Explorer – explorer-specific component styles
   The base dark theme is in themes/purple/_bootswatch.scss.
   This file adds only what Bootstrap + bootswatch don't cover.
   ============================================================ */

/* ── CSS vars (available to JS and inline styles) ────────────── */
:root {
  --btcp-bg:        #06000f;
  --btcp-surface:   #110028;
  --btcp-card:      #1d0845;
  --btcp-header:    #3a158a;
  --btcp-border:    #7c3aed;
  --btcp-accent:    #9333ea;
  --btcp-bright:    #a855f7;
  --btcp-label:     #c084fc;
  --btcp-text:      #ece0ff;
  --btcp-text-dim:  #9d6ae8;
  --btcp-glow:    0 0 14px rgba(147,51,234,.5), 0 0 40px rgba(147,51,234,.18);
  --btcp-glow-sm: 0 0 8px  rgba(147,51,234,.4);
  --radius:      .55rem;
  --radius-pill: 50rem;
}

/* ── Search bar ──────────────────────────────────────────────── */
.search-box-custom, #index-search, #search-row { padding: .75rem 0; }

.search-for,
#index-search .form-group {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

/* Input field */
.search-for .form-control,
#index-search input.form-control {
  background: var(--btcp-surface) !important;
  border: 1.5px solid var(--btcp-border) !important;
  border-right: none !important;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
  color: #fff !important;
  padding: .6rem 1.25rem .6rem 2.6rem !important;
  font-size: .95rem;
  font-weight: 500;
  height: 44px;
  caret-color: var(--btcp-label);
  transition: border-color .2s, box-shadow .2s;
}
.search-for .form-control:focus,
#index-search input.form-control:focus {
  border-color: var(--btcp-accent) !important;
  box-shadow: 0 0 0 3px rgba(147,51,234,.28) !important;
  background: #16003a !important;
  color: #fff !important;
  outline: none;
}
.search-for .form-control::placeholder,
#index-search input.form-control::placeholder {
  color: rgba(192,132,252,.7);
}

/* Search icon */
.search-for::before {
  content: "⌕";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--btcp-label);
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 5;
}

/* btn-success → purple (used as search button) */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
  background: linear-gradient(135deg, var(--btcp-border), var(--btcp-accent)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: var(--btcp-glow-sm);
  transition: all .2s ease;
}
.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, var(--btcp-accent), var(--btcp-bright)) !important;
  box-shadow: var(--btcp-glow) !important;
  transform: translateY(-1px);
}
.btn-success:active { transform: translateY(0); }

.search-for .btn-success,
#index-search .btn-success {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
  padding: .6rem 1.5rem !important;
  height: 44px;
  font-size: .9rem;
}

/* ── Stat panels (header area) ───────────────────────────────── */
.panel-box,
.card.panel,
.stat-panel {
  border: 1px solid rgba(124,58,237,.55) !important;
  background: var(--btcp-card) !important;
  border-radius: var(--radius) !important;
  transition: transform .18s, box-shadow .18s;
}
.panel-box:hover,
.card.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--btcp-glow) !important;
}

/* Big numbers */
.panel-box .panel-value,
.card .display-4,
.card h3, .card .h3 {
  color: #fff !important;
  font-weight: 700;
}

/* Labels */
.panel-box .panel-label,
.card .card-title,
.card small {
  color: var(--btcp-label) !important;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}

/* ── Text helpers ────────────────────────────────────────────── */
body                     { color: var(--btcp-text) !important; }
.card-body, .panel-body  { color: var(--btcp-text) !important; }
p, li, span, div, td, th, label { color: inherit; }

.text-muted, small, .small {
  color: var(--btcp-text-dim) !important;
  opacity: 1 !important;
}

/* ── Hash / monospace links in tables ────────────────────────── */
.table td a {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: .8rem;
}

/* ── Status badges ───────────────────────────────────────────── */
.text-success { color: #4ade80 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }

/* ── Loading bar ─────────────────────────────────────────────── */
#loading-bar, .loading-bar, #nprogress .bar {
  background: linear-gradient(90deg, var(--btcp-border), var(--btcp-label)) !important;
  box-shadow: 0 0 8px var(--btcp-accent);
}

/* ── Chart canvas subtle glow ────────────────────────────────── */
canvas {
  filter: drop-shadow(0 0 4px rgba(147,51,234,.12));
}

/* ── Network chart card overrides ────────────────────────────── */
#nethashChartParent,
#difficultyChartParent {
  .card         { background: var(--btcp-card) !important; overflow: hidden; }
  .card-header  {
    background: var(--btcp-header) !important;
    border-bottom: 2px solid var(--btcp-border) !important;
    padding: .6rem 1rem !important;
    display: flex;
    align-items: center;
    gap: .5rem;

    &::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 14px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--btcp-label), var(--btcp-accent));
      flex-shrink: 0;
    }

    strong {
      color: #fff !important;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
    }
  }
  .card-body { padding: .75rem !important; }
  canvas     { display: block; border-radius: .3rem; }
}

/* ── Scrollbar ───────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--btcp-border) var(--btcp-bg); }
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--btcp-bg); }
::-webkit-scrollbar-thumb   { background: var(--btcp-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--btcp-accent); }

/* ── Tooltip ─────────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--btcp-card) !important;
  border: 1px solid var(--btcp-border);
  color: var(--btcp-text);
  font-size: .8rem;
}
