root = Card([topMetrics, positionsSection, exposureSection, gainersLosersSection, watchlistSection, ordersSection, headlinesSection, economicSection, strategySection, drawdownSection, riskLimitsSection, actionsSection], "card", "column", "l")

topMetrics = Card([portfolioValue, pnlToday, varMetric, marginMetric], "clear", "row", "l", "stretch", "between")
portfolioValue = Card([portfolioLabel, portfolioAmount], "sunk", "column", "s", "center")
portfolioLabel = TextContent("Portfolio Value", "small-heavy")
portfolioAmount = TextContent("$12,847,392.45", "large-heavy")
pnlToday = Card([pnlLabel, pnlAmount], "sunk", "column", "s", "center")
pnlLabel = TextContent("P&L Today", "small-heavy")
pnlAmount = TextContent("+$234,156.78", "large-heavy")
varMetric = Card([varLabel, varAmount], "sunk", "column", "s", "center")
varLabel = TextContent("Value at Risk (95%, 1D)", "small-heavy")
varAmount = TextContent("$412,300", "large-heavy")
marginMetric = Card([marginLabel, marginAmount, marginProgress], "sunk", "column", "s", "center")
marginLabel = TextContent("Margin In Use", "small-heavy")
marginAmount = TextContent("$3,211,848 / $5,000,000 (64%)", "default")
marginProgress = Progress(64, "64% utilized")

positionsSection = Card([positionsHeader, positionsTable], "card", "column", "m")
positionsHeader = CardHeader("Current Positions", "12 active positions")
positionsTable = Table([posTicker, posSize, posEntry, posCurrent, posUnrealized, posPnlPct])
posTicker = Col("Ticker", ["AAPL", "MSFT", "GOOGL", "AMZN", "NVDA", "TSLA", "META", "JPM", "V", "JNJ", "WMT", "PG"])
posSize = Col("Size", [12500, 8200, 3100, 4500, 2800, 6500, 5200, 9800, 4100, 3600, 7200, 8500])
posEntry = Col("Entry", [172.45, 338.20, 142.80, 178.90, 425.60, 248.30, 312.40, 156.70, 267.80, 162.30, 145.60, 154.20])
posCurrent = Col("Current", [189.25, 351.80, 156.40, 185.20, 467.90, 261.50, 328.70, 164.30, 274.50, 158.90, 151.20, 159.80])
posUnrealized = Col("Unrealized P&L", [210000, 111780, 42160, 28350, 118440, 85800, 84760, 74480, 27470, -12240, 40320, 47600])
posPnlPct = Col("P&L %", [9.74, 4.02, 9.52, 3.52, 9.94, 5.32, 5.22, 4.85, 2.50, -2.09, 3.85, 3.63])

exposureSection = Card([exposureHeader, exposureChart], "card", "column", "m")
exposureHeader = CardHeader("Exposure by Sector", "Percentage of portfolio value")
exposureChart = PieChart(exposureLabels, exposureValues, "donut", "circular")
exposureLabels = ["Technology", "Financial Services", "Healthcare", "Consumer Cyclical", "Consumer Defensive", "Communication Services", "Industrials", "Energy", "Real Estate", "Utilities"]
exposureValues = [34.2, 18.5, 12.8, 11.3, 8.7, 6.4, 4.2, 2.1, 1.3, 0.5]

gainersLosersSection = Card([gainersHeader, gainersTable, losersTable], "card", "column", "m")
gainersHeader = CardHeader("Today's Biggest Movers", "Top 5 gainers and losers by % change")
gainersTable = Table([gainTicker, gainChange, gainPrice])
gainTicker = Col("Ticker", ["NVDA", "AMD", "META", "AVGO", "CRM"])
gainChange = Col("Change %", [+9.84, +7.23, +5.67, +5.12, +4.89])
gainPrice = Col("Price", [467.90, 142.30, 328.70, 1185.40, 267.80])
losersTable = Table([loseTicker, loseChange, losePrice])
loseTicker = Col("Ticker", ["TSLA", "INTC", "BA", "F", "GE"])
loseChange = Col("Change %", [-4.32, -3.87, -3.45, -2.98, -2.67])
losePrice = Col("Price", [261.50, 38.20, 201.40, 12.80, 156.70])

watchlistSection = Card([watchlistHeader, watchlistTable], "card", "column", "m")
watchlistHeader = CardHeader("Watchlist", "8 instruments being monitored")
watchlistTable = Table([watchTicker, watchPrice, watchChange, watchReason])
watchTicker = Col("Ticker", ["SPY", "QQQ", "IWM", "DIA", "VIX", "GLD", "TLT", "USO"])
watchPrice = Col("Price", [458.20, 389.40, 198.60, 356.80, 14.25, 189.30, 94.50, 72.40])
watchChange = Col("Change", [+0.84, +1.12, -0.45, +0.32, -5.67, +0.78, -1.23, +2.15])
watchReason = Col("Reason", ["Earnings week", "Tech momentum", "Small cap rotation", "Dividend play", "Vol spike watch", "Inflation hedge", "Yield curve", "Oil inventory"])

ordersSection = Card([ordersHeader, ordersTable], "card", "column", "m")
ordersHeader = CardHeader("Working Orders", "6 open orders awaiting fill")
ordersTable = Table([orderTicker, orderSide, orderType, orderQty, orderPrice, orderStatus, orderTime])
orderTicker = Col("Ticker", ["AAPL", "MSFT", "GOOGL", "NVDA", "TSLA", "SPY"])
orderSide = Col("Side", ["Buy", "Sell", "Buy", "Sell", "Buy", "Sell"])
orderType = Col("Type", ["Limit", "Stop", "Limit", "Stop Limit", "Limit", "Limit"])
orderQty = Col("Qty", [2500, 1500, 800, 500, 3000, 10000])
orderPrice = Col("Price", [185.00, 355.00, 152.00, 475.00, 255.00, 460.00])
orderStatus = Col("Status", ["Pending", "Pending", "Partial", "Pending", "Pending", "Pending"])
orderTime = Col("Time", ["09:31:12", "09:32:45", "09:33:18", "09:34:02", "09:35:27", "09:36:11"])

headlinesSection = Card([headlinesHeader, headlinesList], "card", "column", "m")
headlinesHeader = CardHeader("Market Headlines", "Latest news with sentiment")
headlinesList = ListBlock(headlineItems, "number")
headlineItems = [hl1, hl2, hl3, hl4, hl5]
hl1 = ListItem("Fed holds rates steady, signals one more hike this year", "Reuters · 06:42 EST · Sentiment: Negative for equities", null, "Read")
hl2 = ListItem("Tech earnings beat estimates across the board", "Bloomberg · 06:15 EST · Sentiment: Positive", null, "Read")
hl3 = ListItem("Oil jumps 3% on inventory draw, Middle East tensions", "WSJ · 05:58 EST · Sentiment: Mixed", null, "Read")
hl4 = ListItem("China stimulus package exceeds expectations", "FT · 04:30 EST · Sentiment: Positive for EM", null, "Read")
hl5 = ListItem("Yield curve inversion deepens, recession fears mount", "CNBC · 03:45 EST · Sentiment: Negative", null, "Read")

economicSection = Card([economicHeader, economicTable], "card", "column", "m")
economicHeader = CardHeader("Economic Releases This Week", "High-impact events")
economicTable = Table([ecoDate, ecoTime, ecoEvent, ecoActual, ecoForecast, ecoPrevious, ecoImpact])
ecoDate = Col("Date", ["Mon", "Tue", "Wed", "Thu", "Fri", "Fri"])
ecoTime = Col("Time", ["10:00", "08:30", "10:00", "08:30", "08:30", "10:00"])
ecoEvent = Col("Event", ["ISM Manufacturing", "CPI MoM", "FOMC Minutes", "Initial Jobless Claims", "Nonfarm Payrolls", "Unemployment Rate"])
ecoActual = Col("Actual", ["—", "—", "—", "—", "—", "—"])
ecoForecast = Col("Forecast", [47.5, 0.3, "—", 215, 180, 3.8])
ecoPrevious = Col("Previous", [47.2, 0.2, "—", 212, 187, 3.7])
ecoImpact = Col("Impact", ["High", "High", "High", "Medium", "High", "High"])

strategySection = Card([strategyHeader, strategyChart], "card", "column", "m")
strategyHeader = CardHeader("Strategy Returns YTD", "Year-to-date performance by strategy")
strategyChart = BarChart(stratLabels, [stratSeries], "grouped", "Strategy", "Return %")
stratLabels = ["Long/Short Equity", "Global Macro", "Event Driven", "Fixed Income Arb", "Quantitative", "Multi-Strategy"]
stratSeries = Series("YTD Return %", [14.2, 8.7, 11.3, 5.4, 18.9, 12.6])

drawdownSection = Card([drawdownHeader, drawdownChart], "card", "column", "m")
drawdownHeader = CardHeader("Portfolio Drawdown (Past Year)", "Peak-to-trough decline")
drawdownChart = AreaChart(ddLabels, [ddSeries], "natural", "Month", "Drawdown %")
ddLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
ddSeries = Series("Drawdown %", [0, -2.1, -5.4, -3.2, -7.8, -6.1, -4.3, -8.9, -5.7, -3.1, -1.8, 0])

riskLimitsSection = Card([riskHeader, riskAlerts], "card", "column", "m")
riskHeader = CardHeader("Risk Limits Near Breach", "Limits within 10% of threshold")
riskAlerts = [riskAlert1, riskAlert2, riskAlert3]
riskAlert1 = Callout("warning", "Sector Concentration — Technology", "At 34.2% vs 35% limit (97.7% utilized). Next large tech buy will breach.")
riskAlert2 = Callout("warning", "Single Name — NVDA", "Position at 4.8% of portfolio vs 5% limit (96% utilized).")
riskAlert3 = Callout("info", "Gross Leverage", "Current 2.34x vs 2.5x limit (93.6% utilized). Monitor intraday.")

actionsSection = Card([rebalanceBtn, orderForm, timeframeSelector], "card", "column", "l")
rebalanceBtn = Buttons([rebalanceButton], "row")
rebalanceButton = Button("Rebalance Portfolio", null, "primary", "normal", "large")
orderForm = Form("place-order", orderButtons, [tickerField, sideField, qtyField])
tickerField = FormControl("Ticker", tickerInput, "Symbol (e.g., AAPL)")
tickerInput = Input("ticker", "AAPL", "text")
sideField = FormControl("Side", sideSelect)
sideSelect = Select("side", [sideBuy, sideSell], "Buy or Sell")
sideBuy = SelectItem("buy", "Buy")
sideSell = SelectItem("sell", "Sell")
qtyField = FormControl("Quantity", qtyInput, "Number of shares")
qtyInput = Input("quantity", "100", "number")
orderButtons = Buttons([submitOrder, cancelOrder], "row")
submitOrder = Button("Place Order", null, "primary")
cancelOrder = Button("Cancel", null, "tertiary")
timeframeSelector = Card([tfLabel, tfSelect], "clear", "row", "m", "center", "start")
tfLabel = TextContent("Chart Timeframe:", "small-heavy")
tfSelect = Select("timeframe", [tf1, tf5, tf15, tf1h, tf4h, tf1d, tf1w], "1D", null, null, "small")
tf1 = SelectItem("1m", "1 Minute")
tf5 = SelectItem("5m", "5 Minutes")
tf15 = SelectItem("15m", "15 Minutes")
tf1h = SelectItem("1h", "1 Hour")
tf4h = SelectItem("4h", "4 Hours")
tf1d = SelectItem("1d", "1 Day")
tf1w = SelectItem("1w", "1 Week")