/* widget_overrides.v1.css — vTypo5
   - Normalize typography across dashboard cards/panels
   - Mobile fix for Bridge "Unique Wallets" wrap
   - Make charts responsive & clip overflow
*/

/* ===== Typography normalization (tiles/panels) ===== */
:root{
  --font-ui: "Object Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-color: #e7f6f1;
  --muted: rgba(255,255,255,0.78);
}

.card, .panel, .vscan-widget {
  font-family: var(--font-ui);
  color: var(--text-color);
}

/* Titles */
.card .card-title,
.panel .card-title,
.card h2, .panel h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--text-color);
  margin: 0 0 8px 0;
}

/* Body text */
.card p, .panel p,
.card .row, .panel .row,
.card .k, .panel .k,
.card .v, .panel .v,
.vscan-widget .row {
  font-family: var(--font-ui);
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
}

/* De-emphasized keys */
.card .k, .panel .k { opacity: 0.85; color: var(--muted); }

/* Trim heavy bolds */
.card b, .panel b, .card strong, .panel strong { font-weight: 600; }

/* Links in tiles: no underline */
.card a, .panel a, .vscan-widget a { text-decoration: none; }

/* ===== Bridge: Unique Wallets mobile wrap ===== */
#bridge-activity-section .uw-wrap {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  #bridge-activity-section .uw-wrap {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  #bridge-activity-section .uw-wrap > div {
    width: 30%;
    min-width: 80px;
  }
  #bridge-activity-section .uw-wrap div div:last-child {
    font-size: 1.05rem;
  }
}

/* ===== Bridge: charts responsive & clip overflow ===== */
#bridge-activity-section .chart-card {
  overflow: hidden;       /* prevent canvas line from spilling outside rounded card */
  border-radius: 12px;
}
#bridge-activity-section canvas {
  display: block;         /* remove inline baseline gap */
  width: 100% !important; /* scale to container width */
  height: 110px;          /* visual height; JS will sync pixel size */
}

/* ===== Existing widget chrome (unchanged) ===== */

/* Unified widget chrome for all mini-widgets */
.vscan-widget,
#vscan-swap-panel,
#vscan-wh-panel,
.vscan-live-widget {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 12px;
  box-shadow: 0 0 12px rgba(0,255,195,0.08) inset;
}

/* Slightly tighter interior on the two left widgets to shrink height */
#vscan-swap-panel,
#vscan-wh-panel { padding: 8px 10px; }

#vscan-swap-panel .row,
#vscan-wh-panel  .row {
  margin: 4px 0;
  font-size: 13px;
}

/* Standard rows */
.vscan-widget .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin: 6px 0;
}

.vscan-widget .k { opacity: 0.85; }

.vscan-widget .v {
  font-weight: 700;
  color: #00ffc3;
  background: rgba(0,255,195,0.08);
  padding: 2px 10px;
  border-radius: 999px;
  text-shadow: 0 0 10px rgba(0,255,195,.25), 0 0 30px rgba(0,255,195,.16);
}

/* Center the vGovern button; widget follows below */
.vscan-live-widget + a,
a:has(+ .vscan-live-widget) {
  display: inline-flex;
  margin: 10px auto 8px auto !important;
}

/* Help cards allow content to push toward bottom cleanly */
.card .card-body, .panel .panel-body, .tile, .container {
  display: flex;
  flex-direction: column;
}