bitforum-frontend/app/component/crypto/trading-chart.scss

.trading-chart {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	height: 100%;

	&.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.chart-toolbar {
		display: flex;
		align-items: center;
		padding: 6px 12px;
		border-bottom: 1px solid var(--bg-subtle);
		overflow-x: auto;
		flex-wrap: nowrap;
		gap: 8px;
		flex-shrink: 0;

		&::-webkit-scrollbar {
			height: 0;
		}

		.interval-buttons {
			display: flex;
			gap: 2px;
			overflow-x: auto;
			cursor: grab;
			touch-action: pan-y;

			&::-webkit-scrollbar {
				height: 0;
			}
		}

		.interval-btn {
			padding: 4px 10px;
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--text-secondary);
			background: transparent;
			border: 1px solid transparent;
			border-radius: 3px;
			cursor: pointer;
			white-space: nowrap;
			transition: all 0.15s;

			&:hover {
				background: var(--bg-subtle);
				color: var(--text-primary);
			}

			&.active {
				background: var(--brand-orange);
				color: #fff;
				border-color: var(--brand-orange);
			}
		}

		.chart-toolbar-right {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-left: auto;
			flex-shrink: 0;
		}

		.ma-buttons {
			display: flex;
			gap: 4px;
			flex-shrink: 0;
		}

		.ma-btn {
			padding: 3px 8px;
			font-size: 0.7rem;
			font-weight: 600;
			color: var(--text-muted);
			background: transparent;
			border: 1px solid var(--border-default);
			border-radius: 3px;
			cursor: pointer;
			white-space: nowrap;
			transition: all 0.15s;

			&:hover {
				border-color: #bbb;
				color: var(--text-secondary);
			}

			&.active {
				color: var(--ma-color);
				border-color: var(--ma-color);
				background: rgba(0, 0, 0, 0.03);
			}
		}

		.fullscreen-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			border: 1px solid var(--border-default);
			border-radius: 3px;
			background: transparent;
			cursor: pointer;
			font-size: 1rem;
			color: var(--text-secondary);
			transition: all 0.15s;

			&:hover {
				border-color: #bbb;
				background: var(--bg-subtle);
				color: var(--text-primary);
			}
		}
	}

	.chart-container {
		position: relative;
		width: 100%;
		flex: 1;
		min-height: 0;

		.chart-loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: var(--text-muted);
			font-size: 0.875rem;
			z-index: 1;
		}
	}
}