/* Ultra-violet trading UI — electric purple vibe */

/* Accent palette (Gen‑Z ultraviolet) */
:root {
	--accent: #8b5cf6; /* violet-500 */
	--accent-2: #a78bfa; /* violet-400 */
	--accent-3: #c084fc; /* fuchsia/violet blend */
	--accent-rgb: 139, 92, 246;
	--glow: 0 0 24px rgba(var(--accent-rgb), .35), 0 0 48px rgba(var(--accent-rgb), .15);
	/* Brand icon filter to shift green bull.png to violet */
	--brand-filter: hue-rotate(120deg) saturate(175%) brightness(1.08);
}

[data-bs-theme="light"] {
	--bs-body-bg: #ffffff; /* crisp white */
	--bs-body-color: #0b0b0d; /* near-black */
	--bs-secondary-color: #3f3f46; /* zinc-600 */
	--bs-card-bg: #ffffff;
	--bs-border-color: #e5e7eb; /* gray-200 */
	--bs-primary: var(--accent);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #6d28d9; /* deeper violet */
}

[data-bs-theme="dark"] {
	--bs-body-bg: #0a0a0b; /* charcoal / near-black */
	--bs-body-color: #f5f5ff; /* cool white */
	--bs-secondary-color: #a1a1aa; /* zinc-400 */
	--bs-card-bg: #0f0f12; /* deep charcoal */
	--bs-border-color: #1f1f26; /* subtle border */
	--bs-primary: var(--accent);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #c084fc;
	--brand-filter: hue-rotate(120deg) saturate(190%) brightness(1.25) contrast(1.05);
}

body {
		background:
			radial-gradient(1200px 600px at 85% 65%, rgba(var(--accent-rgb), .10), transparent 60%),
			radial-gradient(900px 500px at 10% 10%, rgba(199, 120, 255, .10), transparent 55%),
			var(--bs-body-bg);
}

[data-bs-theme="dark"] .navbar {
	background: linear-gradient(180deg, rgba(10,10,11,.98), rgba(10,10,11,.92));
	border-bottom: 1px solid rgba(255,255,255,0.06);
	box-shadow: var(--glow);
}
[data-bs-theme="light"] .navbar {
	background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar .navbar-brand { letter-spacing: .3px; display: inline-flex; align-items: center; gap: .5rem; }
.navbar .navbar-brand .brand-logo { width: 24px; height: 24px; filter: var(--brand-filter); image-rendering: -webkit-optimize-contrast; }
.brand-mark { width: 28px; height: 28px; border-radius: 50%; background:
	radial-gradient(circle at 50% 50%, rgba(192,132,252, 0.95) 0 6px, transparent 6px),
	radial-gradient(circle at 50% 50%, rgba(167,139,250, 0.85) 0 12px, transparent 12px),
	radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.75) 0 50%, transparent 50%);
	box-shadow: var(--glow);
}

.card { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); }
.card .card-title { color: inherit; }

.btn-primary { background-color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-outline-primary { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); }
.btn-outline-primary:hover { background-color: rgba(var(--accent-rgb), .12); border-color: var(--accent); }

/* Make buttons accessible and consistent across themes */
.btn:focus, .btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .28);
}

/* Solid danger for Stop button to keep consistent contrast */
.btn-danger { background-color: #ef4444; border-color: #ef4444; }
.btn-danger:hover { filter: brightness(1.07); }
.btn-danger:focus, .btn-danger:focus-visible {
	box-shadow: 0 0 0 .2rem rgba(239, 68, 68, .35);
}

/* Keep outline-danger subtle; avoid heavy fill on hover in toolbar context */
.btn-outline-danger { color: #ef4444; border-color: rgba(239, 68, 68, .55); }
.btn-outline-danger:hover, .btn-outline-danger.active { background-color: rgba(239, 68, 68, .12); border-color: #ef4444; }

/* Links */
a, .nav-link { color: var(--bs-link-color); }
.nav-link.active, .nav-link:hover { color: var(--bs-link-hover-color); }

.hero {
		background:
				radial-gradient(900px 400px at 70% 80%, rgba(var(--accent-rgb), .22), transparent 60%),
				radial-gradient(700px 300px at 0% 20%, rgba(167,139,250,.22), transparent 60%),
				linear-gradient(180deg, #0a0a0b, #111114 40%, #0a0a0b);
		color: #ececff;
		border-radius: .75rem;
		box-shadow: var(--glow);
}
.hero .display-5 { letter-spacing: .3px; }
[data-bs-theme="dark"] .hero .lead { color: #bdbde6; }
[data-bs-theme="light"] .hero {
		background:
			linear-gradient(180deg, #ffffff, #f7f7fb);
		color: #0b0b0d;
}
.hero .lead { color: #5b5b66; }
.hero .display-5 { letter-spacing: .3px; }

.instrument-card [data-field="change"].pos { color: #22c55e; }
.instrument-card [data-field="change"].neg { color: #ef4444; }

/* Watchlist card close (unwatch) */
.instrument-card {
	position: relative;
}
.instrument-card .card-close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	padding: .15rem .45rem; /* compact like other btn-sm */
	line-height: 1;
	z-index: 2;
}

/* Avoid cross overlapping the price area */
.instrument-card .card-body {
	padding-right: 3rem; /* extra space for the close button */
}

/* Add a little vertical breathing room for the price block */
.instrument-card [data-field="price"] {
	margin-top: .15rem;
}

.order-form .btn-outline-success.active,
.order-form .btn-outline-danger.active { color: #fff; }

/* Buy/Sell buttons contrast */
.btn-outline-success { color: #22c55e; border-color: rgba(34, 197, 94, .55); }
.btn-outline-success:hover, .btn-outline-success.active { background-color: rgba(34, 197, 94, .15); border-color: #22c55e; }
.btn-outline-danger { color: #ef4444; border-color: rgba(239, 68, 68, .55); }
.btn-outline-danger:hover, .btn-outline-danger.active { background-color: rgba(239, 68, 68, .15); border-color: #ef4444; }

.toast-container { z-index: 1080; }

/* Inputs, tables, focus rings */
.form-control, .form-select {
	background-color: var(--bs-card-bg);
	border-color: var(--bs-border-color);
	color: inherit;
}
.form-control:focus, .form-select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25);
}

.form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}

.table { --bs-table-color: inherit; }
.table thead th { border-color: var(--bs-border-color); }
.table tbody td { border-color: var(--bs-border-color); }

/* Toast variants tune-up */
.text-bg-primary { background-color: var(--accent) !important; }

/* Button group tweaks so adjacent outline buttons don't show double heavy borders */
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn-outline-primary { border-color: rgba(var(--accent-rgb), .45); }
.btn-group .btn-outline-primary:hover { border-color: var(--accent); }

/* Toolbar background adapts subtly to theme */
[data-bs-theme="dark"] .bg-body-tertiary { background-color: #121218 !important; border: 1px solid #1f1f26; }
[data-bs-theme="light"] .bg-body-tertiary { background-color: #f7f7fb !important; border: 1px solid #e5e7eb; }

/* --- Realtime price change animations --- */
@keyframes flash-up {
	0% { background-color: rgba(34, 197, 94, 0.20); }
	100% { background-color: transparent; }
}
@keyframes flash-down {
	0% { background-color: rgba(239, 68, 68, 0.20); }
	100% { background-color: transparent; }
}
/* Apply on the numeric fields when a change occurs */
.price-flash-up, .price-flash-down {
	animation-duration: 600ms;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	border-radius: .25rem;
}
.price-flash-up { animation-name: flash-up; }
.price-flash-down { animation-name: flash-down; }

/* Slight transition on color changes for the change% label */
.instrument-card [data-field="change"] {
	transition: color 200ms ease-out;
}

/* Trade ticket */
.trade-ticket .modal-content { background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--glow); }
.trade-ticket .nav-pills .nav-link.active { background-color: var(--accent); }
.trade-ticket .modal-header .brand-mark { width: 18px; height: 18px; }
.trade-ticket .modal-footer { justify-content: space-between; }

/* Compact inputs for ticket fields */
.trade-ticket .narrow-input {
	max-width: 100%;
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Make the ticket dialog narrower to avoid empty right space */
.trade-ticket .modal-dialog {
	/* Compact width to remove empty right space */
	--bs-modal-width: 440px;
}

/* No additional alignment rules needed for top-right action */

.trade-ticket .modal-footer {
	justify-content: center;
}

.trade-ticket .ticket-btn-wide { display: block; width: 100%; }

/* Center all content within the ticket body */
.trade-ticket .modal-body {
	display: flex;
	flex-direction: column;
}
.trade-ticket .tt-align { width: auto; text-align: center; }
.trade-ticket .tt-align-inner { display: inline-block; text-align: left; }
.trade-ticket #ttTypeTabs { display: inline-flex; }
.trade-ticket .tt-align .order-form, .trade-ticket .tt-align .ticket-btn-wide { width: 100%; }
.trade-ticket .order-form .vstack.align-items-center > * { width: 100%; }

/* Center the Side button group within its block */
.trade-ticket .order-form .btn-group {
	width: 100%;
	justify-content: center;
}

/* Left-align field labels while the column is centered */
.trade-ticket .order-form .form-label { text-align: left; width: 100%; display: block; }
.trade-ticket .nav.nav-pills.justify-content-center {
	margin-left: auto;
	margin-right: auto;
}

/* --- Blockly (Blocks editor) --- */
/* Keep Blockly readable in light/dark mode using Bootstrap theme variables. */

/* Workspace container frames (Strategies page uses #blocklyArea/#blocklyDiv) */
#blocklyArea {
	border: 1px solid var(--bs-border-color);
	border-radius: .375rem;
	background: var(--bs-body-bg);
	overflow: hidden;
}

#blocklyDiv {
	border-radius: 0 0 .375rem .375rem;
}

/* Tutorial page hosts Blockly inside #tutorialBlocklyDiv */
#tutorialBlocklyDiv {
	overflow: hidden;
}

/* Ensure toolbox/flyout layering (some Blockly builds rely on this) */
#tutorialBlocklyDiv .blocklyFlyout {
	z-index: 20;
}

#tutorialBlocklyDiv .blocklyToolboxDiv {
	z-index: 10;
}

/* Workspace + canvas */
.blocklySvg {
	background: var(--bs-body-bg) !important;
}

.blocklyMainBackground {
	fill: var(--bs-body-bg) !important;
}

/* Toolbox */
.blocklyToolboxDiv {
	background: var(--bs-card-bg, var(--bs-body-bg)) !important;
	background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
	border-right: 1px solid var(--bs-border-color) !important;
}

/* Blockly sets background on inner toolbox elements in some builds */
.blocklyToolboxDiv .blocklyTreeRoot,
.blocklyToolboxDiv .blocklyToolboxContents,
.blocklyToolboxDiv .blocklyTreeScrollbox {
	background: var(--bs-card-bg, var(--bs-body-bg)) !important;
	background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
}

/* Dark theme: hard-force toolbox surfaces to avoid Blockly default light gray */
[data-bs-theme='dark'] .blocklyToolboxDiv,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeRoot,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyToolboxContents,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeScrollbox {
	background: var(--bs-card-bg) !important;
	background-color: var(--bs-card-bg) !important;
}

.blocklyToolboxDiv .blocklyTreeLabel,
.blocklyToolboxDiv .blocklyTreeRow {
	color: var(--bs-body-color) !important;
	opacity: 1 !important;
	font-weight: 500;
}

.blocklyToolboxDiv .blocklyTreeIcon {
	filter: brightness(1.15);
}

/* Dark theme: expand/collapse arrows can render black; force to light */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon {
	filter: invert(1) brightness(1.35) !important;
}

[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon svg {
	fill: var(--bs-body-color) !important;
	color: var(--bs-body-color) !important;
}

[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon svg * {
	fill: var(--bs-body-color) !important;
	stroke: var(--bs-body-color) !important;
}

/* Some Blockly builds render the expand/collapse arrows via background sprites.
   In dark mode, invert those icon sprites so arrows become light. */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosed,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpen,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosedLtr,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosedRtl,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpenLtr,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpenRtl {
	filter: invert(1) brightness(1.25) !important;
}

/* If the icon is an <img>/<image>, invert it too */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon img,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon image {
	filter: invert(1) brightness(1.25) !important;
}

.blocklyTreeRow {
	color: var(--bs-body-color) !important;
	background: transparent !important;
}

.blocklyTreeRow:hover {
	background-color: rgba(var(--accent-rgb), .12) !important;
}

/* Selected category (class name varies slightly across Blockly versions) */
.blocklyTreeSelected,
.blocklyTreeRow.blocklyTreeSelected {
	background-color: rgba(var(--accent-rgb), .18) !important;
}

/* Flyout panel */
.blocklyFlyoutBackground {
	fill: var(--bs-body-bg) !important;
}

.blocklyFlyoutLabelBackground {
	fill: var(--bs-card-bg) !important;
}

/* Do NOT force .blocklyText fill globally; it harms contrast on brightly-colored blocks.
	Instead, rely on Blockly defaults for block text and only style UI chrome.
*/

/* Scrollbars */
.blocklyScrollbarBackground {
	fill: var(--bs-border-color) !important;
}

.blocklyScrollbarHandle {
	fill: var(--bs-secondary-color) !important;
}

.blocklyScrollbarHandle:hover {
	fill: var(--bs-primary) !important;
}

/* Zoom controls */
.blocklyZoom {
	fill: var(--bs-body-color) !important;
}

.blocklyZoom:hover {
	fill: var(--bs-primary) !important;
}

/* Input fields (rename variable, etc.) */
.blocklyFieldTextInput {
	background-color: var(--bs-card-bg) !important;
	color: var(--bs-body-color) !important;
	border: 1px solid var(--bs-border-color) !important;
	border-radius: .25rem;
}

.blocklyFieldTextInput:hover {
	background-color: var(--bs-body-bg) !important;
}

/* --- Symbol bubble selector --- */
#simSymbolsContainer {
	min-height: 60px;
	max-height: 400px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.symbol-bubble {
	font-size: 0.875rem;
	padding: 0.35rem 0.75rem;
	white-space: nowrap;
	transition: all 150ms ease-out;
	border-radius: 1.5rem;
	user-select: none;
	cursor: pointer;
}

.symbol-bubble:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
}

.symbol-bubble.active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: var(--glow);
}

.symbol-bubble.active:hover {
	filter: brightness(1.1);
}

/* ========================================
   Pricing Page Styles
   ======================================== */

.pricing-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 1rem;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.15);
}

.pricing-card-featured {
	border-width: 2px;
	box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.2);
}

.pricing-card-featured:hover {
	box-shadow: 0 16px 50px rgba(var(--accent-rgb), 0.25);
}

.pricing-price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--accent);
}

.pricing-card .card-header {
	border-radius: 1rem 1rem 0 0;
}

/* Upgrade modal */
#upgradeModal .modal-header {
	background: linear-gradient(135deg, var(--accent), #6d28d9);
}

/* Tier badges in nav */
.tier-badge {
	font-size: 0.65rem;
	padding: 0.15rem 0.4rem;
	border-radius: 0.75rem;
	vertical-align: middle;
	margin-left: 0.25rem;
}

.tier-badge-pro {
	background: linear-gradient(135deg, var(--accent), #6d28d9);
	color: white;
}

.tier-badge-free {
	background: #6b7280;
	color: white;
}

/* Feature lock icon */
.feature-locked {
	position: relative;
	opacity: 0.6;
	cursor: not-allowed;
}

.feature-locked::after {
	content: "🔒";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
}

/* Pro badge on locked features */
.pro-badge {
	font-size: 0.6rem;
	padding: 0.1rem 0.35rem;
	background: linear-gradient(135deg, var(--accent), #6d28d9);
	color: white;
	border-radius: 0.5rem;
	vertical-align: super;
	margin-left: 0.25rem;
}

/* Hide simulator controls on Arena page (arena has its own simulation controls) */
body.page-arenas #simControls {
	display: none !important;
}

/* Simulator controls bar: responsive + mobile-friendly */
#simControls .sim-controls-bar {
	max-width: 1100px;
	backdrop-filter: blur(6px);
}

#simControls .sim-controls-tick {
	width: 320px;
}

#simControls .sim-controls-progress {
	min-width: 240px;
}

#simControls .sim-controls-progress .form-range {
	width: 240px;
}

@media (max-width: 576px) {
	#simControls .sim-controls-tick {
		width: 100%;
	}

	#simControls .sim-controls-progress {
		width: 100%;
		min-width: 0;
	}

	#simControls .sim-controls-progress .form-range {
		width: 100%;
	}

	#simControls .btn {
		padding: 0.35rem 0.6rem;
		font-size: 0.95rem;
	}

	#simControls .badge {
		padding: 0.45rem 0.65rem;
		font-size: 0.85rem;
	}
}

/* Language dropdown styling */
#langDropdown {
	min-width: 2.5rem;
	padding: 0.25rem 0.5rem;
	font-size: 1.1rem;
}

#langDropdown .dropdown-toggle::after {
	display: none;
}

/* Ensure dropdowns appear above simulator controls */
.dropdown-menu {
	z-index: 1050 !important;
}

/* App confirm/alert modal: respect newlines in message text */
#appConfirmBody {
	white-space: pre-line;
}

.dropdown-menu [data-lang].active {
	background-color: var(--accent);
	color: white;
}

.dropdown-menu [data-lang]:hover:not(.active) {
	background-color: rgba(var(--accent-rgb), 0.1);
}