/*
 * WM Metal Chart — styles
 */

/* CSS custom properties — overridable via theme */
:root {
	--wm-chart-bg:              #fafafa;
	--wm-chart-border:          transparent;
	--wm-chart-text:            #333333;
	--wm-chart-btn-bg:          #ffffff;
	--wm-chart-btn-active:      #333333;
	--wm-chart-btn-text:        #555555;
	--wm-chart-btn-active-text: #ffffff;
	--wm-chart-radius:          6px;
	--wm-chart-wrapper-radius:  25px;
	--wm-chart-font:            inherit;
}

/* Dark scheme */
[data-wm-scheme="dark"],
.wm-metal-chart[data-scheme="dark"] {
	--wm-chart-bg:              #1a1a1a;
	--wm-chart-border:          #333333;
	--wm-chart-text:            #e0e0e0;
	--wm-chart-btn-bg:          #2a2a2a;
	--wm-chart-btn-active:      #e0e0e0;
	--wm-chart-btn-text:        #aaaaaa;
	--wm-chart-btn-active-text: #1a1a1a;
}

/* Auto: follow OS preference */
@media (prefers-color-scheme: dark) {
	.wm-metal-chart[data-scheme="auto"] {
		--wm-chart-bg:              #1a1a1a;
		--wm-chart-border:          #333333;
		--wm-chart-text:            #e0e0e0;
		--wm-chart-btn-bg:          #2a2a2a;
		--wm-chart-btn-active:      #e0e0e0;
		--wm-chart-btn-text:        #aaaaaa;
		--wm-chart-btn-active-text: #1a1a1a;
	}
}

/* Container */
.wm-metal-chart {
	background-color: var( --wm-chart-bg );
	border:           1px solid var( --wm-chart-border );
	border-radius:    var( --wm-chart-radius );
	color:            var( --wm-chart-text );
	font-family:      var( --wm-chart-font );
	padding:          20px;
	box-sizing:       border-box;
}

/* Controls bar */
.wm-chart-controls {
	display:       flex;
	flex-wrap:     wrap;
	gap:           16px;
	align-items:   flex-end;
	margin-bottom: 12px;
}

/* Custom dropdown — flex column so label sits above the trigger */
.wm-dropdown {
	display:        inline-flex;
	flex-direction: column;
	gap:            4px;
	position:       relative;
}

/* Label above the trigger button */
.wm-dropdown-label {
	color:       var( --wm-chart-text );
	font-size:   0.7rem;
	font-weight: 500;
	opacity:     0.6;
	line-height: 1;
}

.wm-dropdown-trigger {
	align-items:   center;
	background:    var( --wm-chart-btn-bg );
	border:        1px solid var( --wm-chart-border );
	border-radius: var( --wm-chart-radius );
	color:         var( --wm-chart-text );
	cursor:        pointer;
	display:       flex;
	gap:           8px;
	padding:       6px 32px 6px 12px;
	position:      relative;
	text-align:    left;
	white-space:   nowrap;
	transition:    border-color 0.15s;
}

.wm-dropdown-trigger:hover {
	border-color: var( --wm-chart-btn-active );
}

.wm-dropdown-value {
	font-size:   0.85rem;
	font-weight: 500;
	line-height: 1;
}

.wm-dropdown-arrow {
	border-left:  4px solid transparent;
	border-right: 4px solid transparent;
	border-top:   5px solid currentColor;
	height:       0;
	opacity:      0.5;
	position:     absolute;
	right:        12px;
	top:          50%;
	transform:    translateY( -50% );
	width:        0;
	transition:   transform 0.15s;
}

.wm-dropdown.open .wm-dropdown-arrow {
	transform: translateY( -50% ) rotate( 180deg );
}

.wm-dropdown-list {
	background:    var( --wm-chart-bg );
	border:        1px solid var( --wm-chart-border );
	border-radius: var( --wm-chart-radius );
	box-shadow:    0 4px 12px rgba( 0, 0, 0, 0.1 );
	display:       none;
	left:          0;
	margin:        4px 0 0;
	min-width:     100%;
	padding:       4px 0;
	position:      absolute;
	top:           100%;
	z-index:       9999;
}

.wm-dropdown.open .wm-dropdown-list {
	display: block;
}

.wm-dropdown-item {
	background:  transparent;
	border:      none;
	color:       var( --wm-chart-text );
	cursor:      pointer;
	display:     block;
	font-size:   0.85rem;
	margin:      0;
	padding:     7px 16px;
	text-align:  left;
	transition:  background 0.1s;
	width:       100%;
}

.wm-dropdown-item:hover {
	background: var( --wm-chart-btn-bg );
}

.wm-dropdown-item.active {
	background:  var( --wm-chart-btn-active );
	color:       var( --wm-chart-btn-active-text );
	font-weight: 500;
}

/* Chart wrapper */
.wm-chart-wrapper {
	border-radius: var( --wm-chart-wrapper-radius );
	overflow:      hidden;
	position:      relative;
	width:         100%;
}

.wm-chart-wrapper canvas {
	display: block;
	width:   100% !important;
	height:  100% !important;
}

/* Status and error messages */
.wm-chart-message {
	align-items:     center;
	background:      var( --wm-chart-bg );
	bottom:          0;
	color:           var( --wm-chart-text );
	display:         none;
	font-size:       0.9rem;
	justify-content: center;
	left:            0;
	opacity:         0.85;
	position:        absolute;
	right:           0;
	text-align:      center;
	top:             0;
}

/* Last updated timestamp */
.wm-updated-at {
	color:      var( --wm-chart-text );
	font-size:  0.75rem;
	margin:     8px 0 0;
	opacity:    0.6;
	text-align: right;
}

/* Responsive */
@media ( max-width: 480px ) {
	.wm-chart-controls {
		flex-direction: column;
		align-items:    flex-start;
	}
}