/* psychoSocial — Bitcoin Stats ESSENTIAL+ CSS (v2.0 Patch)
   
   Includes:
   - Price + Change cards
   - Timeframe toggle buttons
   - Sparkline chart
   - Sats Converter
   - Halving Countdown
   - Fear & Greed gauge
   
   Supports light/dark theme.
*/

/* ===========================
   BASE STRUCTURE
=========================== */

.dashStatsLoading {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.dashStatsNotice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 120, 0.24);
  background: rgba(255, 200, 120, 0.08);
}

html[data-theme="light"] .dashStatsNotice {
  border-color: rgba(170, 120, 50, 0.24);
  background: rgba(255, 200, 120, 0.16);
}

.dashStatsSection {
  margin-top: 14px;
}

.dashStatsSection:first-child {
  margin-top: 0;
}

.dashStatsRow {
  display: grid;
  gap: 12px;
}

/* ===========================
   PRICE ROW
=========================== */

.dashStatsPriceRow {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  .dashStatsPriceRow {
    grid-template-columns: 1fr;
  }
}

.dashMarketPrice {
  text-align: center;
}

.dashMarketPrice .dashBig {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dashPriceSecondary {
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}

/* ===========================
   CHANGE CARD + TIMEFRAME
=========================== */

.dashMarketChange {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dashMarketChange .dashBig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 26px;
}

.dashChangeIcon {
  font-size: 16px;
}

.dashMarketChange.positive {
  border-color: rgba(60, 255, 140, 0.25);
  background: rgba(60, 255, 140, 0.08);
}

.dashMarketChange.positive .dashBig {
  color: var(--accentGreenReadable);
}

html[data-theme="dark"] .dashMarketChange.positive .dashBig {
  color: var(--accentGreen);
}

.dashMarketChange.negative {
  border-color: rgba(255, 90, 90, 0.25);
  background: rgba(255, 90, 90, 0.08);
}

.dashMarketChange.negative .dashBig {
  color: var(--accent);
}

/* Timeframe Buttons */
.dashTimeframeBtns {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dashTfBtn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dashTfBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
}

.dashTfBtn.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--fg);
}

html[data-theme="light"] .dashTfBtn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .dashTfBtn:hover {
  background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .dashTfBtn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}

/* ===========================
   SPARKLINE CHART
=========================== */

.dashSparklineSection {
  margin-top: 14px;
}

.dashSparklinePanel {
  padding: 14px;
}

.dashSparklineHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dashSparklineRange {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dashSparklineLow {
  color: var(--accent);
}

.dashSparklineHigh {
  color: var(--accentGreen);
}

html[data-theme="light"] .dashSparklineHigh {
  color: var(--accentGreenReadable);
}

.dashSparklineChart {
  width: 100%;
  height: 70px;
  position: relative;
}

.dashSparklineSvg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===========================
   STATS ROW
=========================== */

.dashStatsStats {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 480px) {
  .dashStatsStats {
    grid-template-columns: 1fr 1fr;
  }
  .dashStatsStats .dashMarketStat:last-child {
    grid-column: 1 / -1;
  }
}

.dashMarketStat {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  text-align: center;
}

html[data-theme="light"] .dashMarketStat {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.dashMarketStat kbd {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dashMarketStat b {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

/* ===========================
   SATS CONVERTER
=========================== */

.dashSatsSection {
  margin-top: 14px;
}

.dashSatsPanel {
  padding: 14px;
}

.dashSatsPanel .dashPanelTitle {
  text-align: center;
  margin-bottom: 12px;
}

.dashSatsConverter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashSatsInputWrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

html[data-theme="light"] .dashSatsInputWrap {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

.dashSatsCurrency {
  padding: 10px 8px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dashSatsCurrency:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}
html[data-theme="light"] .dashSatsCurrency:focus-visible{
  outline-color: rgba(0,0,0,.45);
}

.dashSatsInput {
  width: 120px;
  padding: 10px 12px 10px 4px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dashSatsInput::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.dashSatsInput:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}
html[data-theme="light"] .dashSatsInput:focus-visible{
  outline-color: rgba(0,0,0,.45);
}

/* Remove number input spinners */
.dashSatsInput::-webkit-outer-spin-button,
.dashSatsInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dashSatsInput[type=number] {
  -moz-appearance: textfield;
}

.dashSatsEquals {
  font-size: 18px;
  color: var(--muted);
  font-weight: 300;
}

.dashSatsResult {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255, 200, 120, 0.1);
  border: 1px solid rgba(255, 200, 120, 0.25);
  border-radius: 12px;
  min-width: 140px;
  justify-content: center;
}

html[data-theme="light"] .dashSatsResult {
  background: rgba(255, 180, 60, 0.12);
  border-color: rgba(200, 140, 40, 0.3);
}

.dashSatsValue {
  font-size: 18px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--fg);
}

.dashSatsLabel {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================
   HALVING COUNTDOWN
=========================== */

.dashHalvingSection {
  margin-top: 14px;
}

.dashHalvingPanel {
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 200, 120, 0.08), rgba(255, 150, 80, 0.05));
  border-color: rgba(255, 180, 100, 0.2);
}

html[data-theme="light"] .dashHalvingPanel {
  background: linear-gradient(135deg, rgba(255, 180, 80, 0.12), rgba(255, 150, 60, 0.06));
  border-color: rgba(200, 140, 60, 0.25);
}

.dashHalvingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.dashHalvingReward {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dashHalvingProgress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dashHalvingBar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

html[data-theme="light"] .dashHalvingBar {
  background: rgba(0, 0, 0, 0.08);
}

.dashHalvingFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 180, 80, 0.9), rgba(255, 140, 60, 0.9));
  border-radius: 999px;
  transition: width 0.5s ease;
}

.dashHalvingPercent {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 45px;
  text-align: right;
}

.dashHalvingStats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.dashHalvingStat {
  text-align: center;
}

.dashHalvingNumber {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--fg);
}

.dashHalvingLabel {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.dashHalvingDivider {
  font-size: 18px;
  color: var(--muted);
  opacity: 0.5;
}

/* ===========================
   FEAR & GREED GAUGE
=========================== */

.dashStatsFng {
  margin-top: 14px;
}

.dashMarketFngPanel {
  padding: 16px;
}

.dashMarketFngPanel .dashPanelTitle {
  text-align: center;
  margin-bottom: 12px;
}

.dashFngGauge {
  position: relative;
  padding: 0 4px;
}

.dashFngBar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, 
    rgba(255, 90, 90, 0.8) 0%,
    rgba(255, 90, 90, 0.6) 20%,
    rgba(255, 200, 120, 0.6) 40%,
    rgba(180, 180, 180, 0.5) 50%,
    rgba(120, 255, 180, 0.6) 60%,
    rgba(60, 255, 140, 0.6) 80%,
    rgba(60, 255, 140, 0.8) 100%
  );
  position: relative;
  overflow: visible;
}

.dashFngMarker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: left 0.4s ease;
}

html[data-theme="light"] .dashFngMarker {
  background: var(--bg);
  border-color: var(--fg);
}

.dashFngLabels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dashFngValue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.dashFngNumber {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.dashFngLabel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Fear & Greed color states */
.dashMarketFngPanel.extreme-fear .dashFngNumber { color: var(--accent); }
.dashMarketFngPanel.fear .dashFngNumber { color: rgba(255, 150, 100, 0.9); }
.dashMarketFngPanel.neutral .dashFngNumber { color: var(--muted); }
.dashMarketFngPanel.greed .dashFngNumber { color: rgba(150, 255, 180, 0.9); }
.dashMarketFngPanel.extreme-greed .dashFngNumber { color: var(--accentGreen); }

html[data-theme="light"] .dashMarketFngPanel.extreme-fear .dashFngNumber { color: rgb(200, 60, 60); }
html[data-theme="light"] .dashMarketFngPanel.fear .dashFngNumber { color: rgb(200, 100, 60); }
html[data-theme="light"] .dashMarketFngPanel.greed .dashFngNumber { color: rgb(60, 160, 100); }
html[data-theme="light"] .dashMarketFngPanel.extreme-greed .dashFngNumber { color: var(--accentGreenReadable); }

/* ===========================
   ATTRIBUTION
=========================== */

.dashStatsAttr {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
}

.dashStatsAttr a {
  color: var(--muted);
  text-decoration: none;
}

.dashStatsAttr a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* ===========================
   PANEL HEADER ACCENT
=========================== */

.dashPanelHead[data-dash-panel="stats"] .dashPanelMark {
  color: #f7931a; /* Bitcoin orange */
}


/* ===========================
   DESKTOP LAYOUT POLISH
   (Uses existing .dashGrid 2-col layout; we control spans per section)
=========================== */

@media (min-width: 780px){
  /* Make KPI row and converter breathe across full width */
  #dashStatsMount .dashStatsKpisSection{ grid-column: 1 / -1; }
  #dashStatsMount .dashSatsSection{ grid-column: 1 / -1; }
  #dashStatsMount .dashStatsAttr{ grid-column: 1 / -1; }

  /* Slightly larger spacing + softer density */
  #dashStatsMount{ gap: 14px; }
  #dashStatsMount .dashPanel{ padding: 16px; }
  #dashStatsMount .dashSparklinePanel{ padding: 16px; }

  /* KPI cards: more room + slightly larger type */
  #dashStatsMount .dashMarketStat{ padding: 12px 14px; }
  #dashStatsMount .dashMarketStat b{ font-size: 14px; }

  /* Converter: reduce wrapping on desktop */
  #dashStatsMount .dashSatsConverter{ flex-wrap: nowrap; gap: 14px; }
  #dashStatsMount .dashSatsInput{ width: 160px; }
  #dashStatsMount .dashSatsResult{ min-width: 170px; }
}

@media (min-width: 1100px){
  /* Large desktop: slightly bigger hero numbers */
  #dashStatsMount .dashMarketPrice .dashBig{ font-size: 28px; }
  #dashStatsMount .dashMarketChange .dashBig{ font-size: 28px; }
  #dashStatsMount .dashSparklineChart{ height: 84px; }
}


/* ===========================
   ANIMATIONS (respect reduced motion)
=========================== */

@media (prefers-reduced-motion: no-preference) {
  .dashHalvingFill {
    animation: halvingPulse 3s ease-in-out infinite;
  }
  
  @keyframes halvingPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
  }
  
  .dashFngMarker {
    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}