/* Macrolyx — Trade ideas card. */

.mlx-trades { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }

.mlx-trades-stale {
	flex: 0 0 auto;
	padding: 6px 10px;
	border: 1px solid rgba(var(--mlx-short-rgb, 184, 74, 74), .4);
	border-radius: 8px;
	background: rgba(var(--mlx-short-rgb, 184, 74, 74), .1);
	color: var(--mlx-short, #b84a4a);
	font-size: 11.5px;
}

.mlx-trades-empty { color: var(--mlx-muted); font-size: 13px; margin: auto; text-align: center; }

.mlx-trades-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

/* A group is one symbol. Its own tickets sit beneath it rather than as
   repeated rows of the same pair. */
.mlx-trade-group {
	border: 1px solid var(--mlx-border);
	border-radius: 11px;
	background: rgba(255, 255, 255, .03);
	overflow: hidden;
}
.mlx-trade-group.is-buy { border-inline-start: 2px solid var(--mlx-long, #2e9e5b); }
.mlx-trade-group.is-sell { border-inline-start: 2px solid var(--mlx-short, #b84a4a); }
.mlx-trade-group.is-mixed { border-inline-start: 2px solid var(--mlx-accent); }

.mlx-trade-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 11px;
	background: rgba(255, 255, 255, .03);
	border-bottom: 1px solid var(--mlx-border);
}
.mlx-trade-flags { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; flex: 0 0 auto; }
.mlx-trade-flag.is-commodity { font-size: 13px; }
.mlx-trade-symbol { color: var(--mlx-text); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }

.mlx-trade-dir { font-size: 11px; font-weight: 700; }
.mlx-trade-dir.is-buy { color: var(--mlx-long, #2e9e5b); }
.mlx-trade-dir.is-sell { color: var(--mlx-short, #b84a4a); }
.mlx-trade-dir.is-mixed { color: var(--mlx-accent); }

.mlx-trade-count {
	background: rgba(255, 255, 255, .1);
	border-radius: 999px;
	padding: 0 7px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	color: var(--mlx-text);
}
.mlx-trade-lots { margin-inline-start: auto; color: var(--mlx-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.mlx-trade-rows { display: flex; flex-direction: column; }
.mlx-trade-row {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	padding: 7px 11px;
	font-size: 11.5px;
	border-top: 1px solid rgba(255, 255, 255, .04);
}
.mlx-trade-row:first-child { border-top: 0; }
.mlx-trade-row.is-pending { opacity: .78; }

.mlx-trade-badge {
	border-radius: 5px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 16px;
}
.mlx-trade-badge.is-buy { background: rgba(var(--mlx-long-rgb, 46, 158, 91), .18); color: var(--mlx-long, #2e9e5b); }
.mlx-trade-badge.is-sell { background: rgba(var(--mlx-short-rgb, 184, 74, 74), .18); color: var(--mlx-short, #b84a4a); }

.mlx-trade-kind {
	border: 1px dashed var(--mlx-border);
	border-radius: 5px;
	padding: 0 6px;
	font-size: 9.5px;
	color: var(--mlx-muted);
	letter-spacing: .04em;
	line-height: 16px;
}

.mlx-trade-prices { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.mlx-trade-prices i { font-style: normal; color: var(--mlx-muted); font-size: 9.5px; }
.mlx-trade-prices b { color: var(--mlx-text); font-weight: 600; }

.mlx-trade-levels { display: inline-flex; gap: 8px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mlx-trade-levels .is-sl { color: var(--mlx-short, #b84a4a); }
.mlx-trade-levels .is-tp { color: var(--mlx-long, #2e9e5b); }

.mlx-trade-pl { font-weight: 700; font-variant-numeric: tabular-nums; }
.mlx-trade-pl.is-up { color: var(--mlx-long, #2e9e5b); }
.mlx-trade-pl.is-down { color: var(--mlx-short, #b84a4a); }

.mlx-trade-comment {
	color: var(--mlx-muted);
	font-size: 10.5px;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mlx-trade-expiry { color: var(--mlx-accent); font-size: 10px; }
.mlx-trade-time { margin-inline-start: auto; color: var(--mlx-muted); font-size: 10px; white-space: nowrap; }

.mlx-trades-closed { flex: 0 0 auto; border-top: 1px solid var(--mlx-border); padding-top: 7px; }
.mlx-trades-closed summary { color: var(--mlx-muted); font-size: 11.5px; cursor: pointer; }
.mlx-trades-closed summary:hover { color: var(--mlx-text); }
.mlx-trades-closed-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; max-height: 150px; overflow-y: auto; }
.mlx-trade-closed-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--mlx-muted);
	opacity: .8;
}
.mlx-trade-closed-row .mlx-trade-symbol { font-size: 11.5px; }
.mlx-trade-closed-row time { margin-inline-start: auto; font-size: 10px; }

@media (max-width: 560px) {
	.mlx-trade-comment, .mlx-trade-time { display: none; }
}

/* ---------- History card ---------- */

.mlx-hist { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 9px; }

.mlx-hist-summary {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.mlx-hist-stat {
	flex: 1 1 auto;
	min-width: 66px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 9px;
	border: 1px solid var(--mlx-border);
	border-radius: 9px;
	background: rgba(255, 255, 255, .03);
}
.mlx-hist-k { color: var(--mlx-muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.mlx-hist-v { color: var(--mlx-text); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mlx-hist-v.is-up { color: var(--mlx-long, #2e9e5b); }
.mlx-hist-v.is-down { color: var(--mlx-short, #b84a4a); }

/* In the card header beside the title, so they must stay compact: the header
   is a single row shared with the title and the action icons. */
.mlx-w-headextra { display: flex; align-items: center; min-width: 0; }
.mlx-hist-tabs { display: flex; gap: 3px; flex-wrap: nowrap; }
.mlx-hist-tab {
	border: 1px solid var(--mlx-border);
	border-radius: 999px;
	background: transparent;
	color: var(--mlx-muted);
	font: inherit;
	font-size: 9.5px;
	line-height: 1.5;
	padding: 1px 7px;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.mlx-hist-tab:hover { color: var(--mlx-text); }
.mlx-hist-tab.is-on {
	border-color: rgba(var(--mlx-accent-rgb), .55);
	background: rgba(var(--mlx-accent-rgb), .12);
	color: var(--mlx-accent);
	font-weight: 600;
}

.mlx-hist-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mlx-hist-pane[hidden] { display: none; }
.mlx-hist-chart { flex: 1 1 auto; min-height: 190px; width: 100%; }

.mlx-hist-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mlx-hist-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 6px 2px;
	font-size: 11.5px;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.mlx-hist-row:last-child { border-bottom: 0; }
.mlx-hist-dates { margin-inline-start: auto; color: var(--mlx-muted); font-size: 10px; white-space: nowrap; }

.mlx-trade-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.mlx-trade-pct.is-up { color: var(--mlx-long, #2e9e5b); }
.mlx-trade-pct.is-down { color: var(--mlx-short, #b84a4a); }
.mlx-trade-pips { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.mlx-trade-pips.is-up { color: var(--mlx-long, #2e9e5b); }
.mlx-trade-pips.is-down { color: var(--mlx-short, #b84a4a); }
.mlx-trade-pl i, .mlx-trade-pips i { font-style: normal; font-weight: 400; font-size: 9px; opacity: .7; }

@media (max-width: 560px) {
	.mlx-hist-dates { display: none; }
	.mlx-hist-stat { min-width: 56px; padding: 5px 7px; }
}

/* Flags: the flag font must come first, or Windows draws the letter pair. */
.mlx-trade-flag,
.mlx-feat-flag {
	font-family: "Twemoji Country Flags", var(--mlx-font, inherit), sans-serif;
	font-variant-emoji: emoji;
}