/*
* Balanced
* Widget CSS
* Version 4.0
* Last updated 9/4/25
*/

/* ==========================================================================
	Widget foundations
========================================================================== */

/* required file for gridstack to work */
@import "./gridstack.css";

.sidebar {
  background: rgb(215, 243, 215);
  padding: 25px 0;
  height: 100px;
  text-align: center;
}
.sidebar > .grid-stack-item,
.sidebar-item {
  width: 100px;
  height: 50px;
  border: 2px dashed green;
  text-align: center;
  line-height: 35px;
  background: rgb(192, 231, 192);
  cursor: default;
  display: inline-block;
}

.grid-stack {
	margin: 0 -10px;
}
.grid-stack.grid-stack-static {
  background: #eee;
}

.sidebar > .grid-stack-item,
.grid-stack-item-content {
	padding: 25px;
	border-radius: 25px;
	background-color: #0c2a4d;
	background-image: linear-gradient(171deg, rgba(44,169,183,0.37) 0%, rgba(44,169,183,0) 50%);
	background-size: 150%;
}
.card-header {
	margin: 0;
	cursor: grab;
	min-height: 25px;
	background-color: #16af91;
}
.card-header:hover {
	background-color: #149b80;
}
.grid-stack-dragging {
	cursor: grabbing;
}
.ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
	background-color: #777;
}
.grid-stack.show-dimensions .grid-stack-item:after {
   content: '1x1';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2px;
   color: black;
   background-color: white;
   pointer-events: none; /* to not interfere with dragging the item */
}

.grid-stack.show-dimensions .grid-stack-item[gs-h]::after {
   content: '1x' attr(gs-h);
}

.grid-stack.show-dimensions .grid-stack-item[gs-w]::after {
   content: attr(gs-w) 'x1';
}

.grid-stack.show-dimensions .grid-stack-item[gs-h][gs-w]::after {
   content: attr(gs-w) 'x' attr(gs-h);
}

/* ==========================================================================
	Widget catalogue
========================================================================== */

/* --- Bottom sheet --- */
.wc { position: fixed; inset: 0; display: none; z-index: 5000; }
.wc[aria-hidden="false"] { display: block; }
.wc__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }

.wc__panel {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(100%);
  bottom: 0; width: min(1280px, 94vw); height: min(86vh, 900px);
  background: #0c2a4d; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.wc[aria-hidden="false"] .wc__panel {
	transform: translateX(-50%) translateY(0);
	margin-bottom: 0;
}

.wc__header { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.wc__search { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; }
.wc__close { background: transparent; color: #fff; border: 0; font-size: 22px; line-height: 1; cursor: pointer; }

.wc__body { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: 100%; min-height: 0; }
.wc__rail { border-right: 1px solid rgba(255,255,255,.06); overflow: auto; padding: 12px 0; }
.wc__rail .wc__cats { list-style: none; margin: 0; padding: 0; }
.wc__cats li { padding: 10px 16px; cursor: pointer; color: #cfd2ff; }
.wc__cats li.is-active { background: rgba(255,255,255,.06); color: #fff; }

.wc__grid { padding: 18px; overflow: auto; display: grid; gap: 18px; 
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

.wc-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.wc-card__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.wc-card__title { margin: 0; font-size: 14px; color: #fff; }
.wc-card__add { appearance: none; background: #2ca9b7; color: #fff; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.wc-card__body { padding: 12px; }

/* Previews use the same widget shell. Limit size & make it responsive */
.wc-card .bal-widget { width: 100%; }
.wc-card .widget-header .widget-remove { display: none; } /* hide remove in preview */


/* ==========================================================================
	Widget defaults
========================================================================== */

.grid-stack-item > .grid-stack-item-content {
	container-type: inline-size;
}
.widget-header {
	margin-bottom: 15px;
}
.widget-header > .grid > .grid-cell:last-of-type {
	max-width: 50px;
}
.widget-content {
	margin-bottom: 0;
}

/* ==========================================================================
  Market interest widget styles
========================================================================== */

/* Make the widget fill its gridstack cell */
.bal-widget.widget-market-interest {
  /* gridstack gives the cell a concrete height (via abs positioning);
     this makes the widget fill that space so .widget-content has a % basis */
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Let the content area expand; header stays auto-height */
.bal-widget.widget-market-interest .widget-header { flex: 0 0 auto; }
.bal-widget.widget-market-interest .widget-content { flex: 1 1 auto; min-height: 0; }
/* Layout: chart row grows; empty state sits below.
   Use minmax() so it still works when the container height is “indefinite”. */
.widget-market-interest .widget-content {
  display: grid;
  grid-template-rows: minmax(50px, 1fr) auto;  /* resilient track sizing */
  gap: 12px;
  height: 100%;
  min-height: 0;
}
/* Side-by-side row inside the card */
.widget-market-interest .chart-market-interest-container > .grid {
  display: flex;          /* your global .grid already does this; scoped here for safety */
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
/* Flex children may shrink; the chart column must host a full-height canvas */
.widget-market-interest .chart-market-interest-container .grid > .grid-cell {
  min-width: 0;
  min-height: 0;
}
/* The chart element itself stretches to fill the first column */
.widget-market-interest .lwc-chart {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent !important;
}

/* Empty state */
.widget-market-interest .empty-msg {
  color: #9aa4bf;
  margin: 6px 0 0;
  display: none;
}

/*
*
* Layout
*
*/

.widget-market-interest {
	--bars: 12;
}
.widget-market-interest .chart-market-interest-container {
	position: relative;
	border-radius: 12px;
	padding: 20px;
	min-height: 180px;
	height: 100%;
	overflow: hidden;
	min-width: 0;
}
.widget-market-interest .chart-market-interest-container::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 20px;
	background-image: linear-gradient(135deg, rgb(32,121,143) 0%, rgb(23,86,120) 100%);
	opacity: 0.75;
	transition: opacity 0.3s ease;
	background-size: 100%;
}
.widget-market-interest .chart-market-interest-container::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 20px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.35;
}
.widget-market-interest .metadata-group {
	flex-direction: column;
}

/*
*
* Chart
*
*/

/*
*
* Metadata
*
*/

/* Metdata container */

.widget-market-interest .widget-content .chart-market-interest-container .grid > .grid-cell:last-of-type {
	max-width: 200px;
	text-align: center;
}
.widget-market-interest .market-interest-dollar {
	font-size: 30px;
}

/* Metadata box */

.widget-market-interest .asset-box {
	background-color: rgba(12, 42, 77, 0.5);
	border-radius: 10px;
	padding: 10px;
	margin-top: 15px;
}

/* Metadata content */

.widget-market-interest .market-interest-dollar {

}
.widget-market-interest .market-amount-dollar {
	font-size: 16px;
	margin-bottom: 15px;
}

/* Market assets */

.widget-market-interest .market-assets {
	padding-left: 0;
	margin-bottom: 0;
	margin-top: 0;
}
.widget-market-interest .market-assets li {
	display: inline-block;
	height: 25px;
	width: 25px;
	background-image: url(../img/logo/default-asset.png);
	background-size: contain;
}
.widget-market-interest .market-assets li + li {
	margin-left: 5px;
}

/* ==========================================================================
   Asset Interest widget styles
   ========================================================================== */

.widget-asset-interest .widget-content {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  height: 100%;
}

/* Controls row */
.widget-asset-interest .widget-asset-interest__controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.widget-asset-interest .asset-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.widget-asset-interest .side-toggle {
  display: inline-flex;
  gap: 6px;
}
.widget-asset-interest .side-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #cfd2ff;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.widget-asset-interest .side-btn.active {
  color: #fff;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}

/* KPI row (reuse your metric styles) */
.widget-asset-interest .metric__label { color: #9aa4bf; font-size: 12px; line-height: 1.2; }
.widget-asset-interest .metric__value { color: #fff; font-size: 18px; font-weight: 600; }

/* Chart card */
.widget-asset-interest .chart-asset-interest-container {
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 12px;
  min-height: 160px;
  height: 100%;
  overflow: hidden;
}

/* The chart element stretches to fill the card */
.widget-asset-interest .lwc-chart {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

/* Make the chart shrink properly inside grid/flex (one-liner + guard) */
.widget-asset-interest .widget-content,
.widget-asset-interest .chart-asset-interest-container,
.widget-asset-interest .chart-asset-interest-container .lwc-chart {
  min-width: 0;
  min-height: 0;
}

.widget-asset-interest .widget-content { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
.widget-asset-interest .chart-asset-interest-container { min-height: 160px; }
.widget-asset-interest .lwc-chart { width: 100%; height: 100%; background: transparent !important; }
/* allow shrink inside grid/flex */
.widget-asset-interest .widget-content,
.widget-asset-interest .chart-asset-interest-container,
.widget-asset-interest .chart-asset-interest-container .lwc-chart {
  min-width: 0; min-height: 0;
  height: 150px;
}

/* ==========================================================================
   Recent activity widget
========================================================================== */

.bal-widget.widget-recent-activity {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.widget-recent-activity .widget-header { flex: 0 0 auto; }
.widget-recent-activity .widget-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.widget-recent-activity .widget-activity-list {
  height: 100%;
  overflow: auto;            /* scrollable list */
  min-height: 0;
}

.widget-recent-activity .activity-onboarding-widget.hide {
	display: none;
}

/* Optional: make the first column show the same pre-icon styles your global CSS expects */
.widget-recent-activity .list.activity .list-item > .grid-cell:first-of-type p:first-of-type {
	position: relative;
}
.widget-recent-activity .list.activity .list-item > .grid-cell:first-of-type p:first-of-type::before {
	content: "";
	position: absolute;
	left: 0; top: 0.1em;
	width: 20px; height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: .9;
	display: none;
}
.widget-recent-activity .list .list-item:not(.parent):not(.secondary) .grid-cell:nth-of-type(1)::before {
	margin-top: 18px;
}

/* ==========================================================================
   Wallet allocation (donut) widget
========================================================================== */

.bal-widget.widget-wallet-pie {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.widget-wallet-pie .widget-header {
  flex: 0 0 auto;
}

.widget-wallet-pie .widget-content {
  flex: 1 1 auto;
  min-height: 0; /* allow the content area to shrink inside grid/flex */
}

/* Layout wrapper: chart area + optional empty-state line */
.wallet-pie__wrap {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
}

/* Chart host fills available height */
.wallet-pie__canvas {
  position: relative;
  height: 100%;
  min-height: 0;
}

/* Critical: ensure the canvas always follows its container size */
.wallet-pie__canvas canvas {
  width: 100% !important;
  height: 100% !important;  /* ← fixes the “stays large until refresh” issue */
  display: block;           /* remove inline baseline gap */
  max-width: none;
  max-height: none;
}

/* Empty state line */
.wallet-pie__empty {
  color: #9aa4bf;
  margin: 4px 0 0;
}
.wallet-pie__empty.hide {
  display: none;
}

/* ==========================================================================
	Wallet list widget styles
========================================================================== */

.widget-wallet-list {

}
.widget-wallet-list .list.wallet .list-header {
	position: relative;
	margin-top: 0;
	background-color: transparent;
}
.widget-wallet-list .list.wallet {
	overflow: hidden !important;
}
.widget-wallet-list .widget-content .search {
	display: none;
}

/* ==========================================================================
	Widget Responsive styles
========================================================================== */

@container (max-width: 700px) {
	.widget-wallet-list .widget-content {

	}
}

@container (max-width: 300px) {
	.widget-wallet-list .widget-content {

	}

	/* ==========================================================================
	  Supply interest widget styles
	========================================================================== */

	.widget-market-interest {
		--bars: 8;
	}
	.widget-market-interest .chart-market-interest-container > .grid {
		flex-direction: column-reverse;
	}
	.widget-market-interest .metadata-group {
		flex-direction: initial;
		align-items: center;
	}
	.widget-market-interest .widget-content .chart-market-interest-container .grid > .grid-cell:last-of-type {
		max-width: initial;
	}
	.widget-market-interest .asset-box {
		margin-top: 0;
	}
	.widget-market-interest .market-amount-dollar {
		display: none;
	}
	.widget-market-interest .asset-box {
		padding: 5px;
	}
	.widget-market-interest .market-assets {
		margin-top: 5px;
	}
}

/* ==========================================================================
	Page Responsive styles
========================================================================== */

/* 450px and below */

@media (max-width: 450px) {



}