/* ========================================================
   Strategy Page
   ======================================================== */

/* ── Section headers ────────────────────────────────────── */
.st-section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #212529;
	margin-bottom: 1.25rem;
}

.st-section-title i {
	color: var(--a);
	font-size: 0.85rem;
}

/* ── Main strategy card ─────────────────────────────────── */
.st-card {
	background: #fff;
	border-radius: 8px;
	box-shadow:
		0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03),
		0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03),
		0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05),
		0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
	overflow: hidden;
	margin-bottom: 1rem;
}

.st-card-body {
	padding: 1.5rem;
}

/* ── Automation mode toggle ─────────────────────────────── */
.st-mode-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.st-mode-option {
	position: relative;
}

.st-mode-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.st-mode-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.1rem 1rem;
	border-radius: 8px;
	border: 2px solid #e9ecef;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.st-mode-label:hover {
	border-color: #ced4da;
	background: #f8f9fa;
}

.st-mode-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: all 0.2s ease;
}

.st-mode-label .st-mode-name {
	font-weight: 600;
	font-size: 0.88rem;
	color: #495057;
	transition: color 0.2s ease;
}

.st-mode-label .st-mode-desc {
	font-size: 0.72rem;
	color: #6c757d;
	line-height: 1.3;
}

/* Manual mode icon */
.st-mode-icon--manual {
	background: #f0f0f0;
	color: #6c757d;
}

/* Autopilot mode icon */
.st-mode-icon--autopilot {
	background: #ecfdf5;
	color: #10b981;
}

/* Checked states */
.st-mode-option input[type="radio"]:checked + .st-mode-label--manual {
	border-color: #6c757d;
	background: #f8f9fa;
}

.st-mode-option input[type="radio"]:checked + .st-mode-label--manual .st-mode-icon {
	background: #495057;
	color: #fff;
}

.st-mode-option input[type="radio"]:checked + .st-mode-label--manual .st-mode-name {
	color: #212529;
}

.st-mode-option input[type="radio"]:checked + .st-mode-label--autopilot {
	border-color: #10b981;
	background: #ecfdf5;
}

.st-mode-option input[type="radio"]:checked + .st-mode-label--autopilot .st-mode-icon {
	background: #10b981;
	color: #fff;
}

.st-mode-option input[type="radio"]:checked + .st-mode-label--autopilot .st-mode-name {
	color: #065f46;
}

.st-mode-hint {
	font-size: 0.75rem;
	color: #6c757d;
	margin-top: 0.25rem;
}

/* ── Strategy style cards ───────────────────────────────── */
.st-style-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
	margin-bottom: 0.5rem;
}

.st-style-option {
	position: relative;
}

.st-style-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.st-style-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	padding: 0.9rem 0.5rem;
	border-radius: 8px;
	border: 2px solid #e9ecef;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.st-style-label:hover {
	border-color: #ced4da;
	background: #fafafa;
}

.st-style-emoji {
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: 0.15rem;
}

.st-style-name {
	font-weight: 600;
	font-size: 0.8rem;
	color: #495057;
	transition: color 0.2s ease;
}

.st-style-score {
	font-size: 0.68rem;
	color: #6c757d;
	line-height: 1.2;
}

/* Checked states per style */
.st-style-option input[type="radio"]:checked + .st-style-label--veilig {
	border-color: #3b82f6;
	background: #eff6ff;
}
.st-style-option input[type="radio"]:checked + .st-style-label--veilig .st-style-name {
	color: #1d4ed8;
}

.st-style-option input[type="radio"]:checked + .st-style-label--gebalanceerd {
	border-color: var(--a);
	background: #fff7ed;
}
.st-style-option input[type="radio"]:checked + .st-style-label--gebalanceerd .st-style-name {
	color: #c2410c;
}

.st-style-option input[type="radio"]:checked + .st-style-label--agressief {
	border-color: #10b981;
	background: #ecfdf5;
}
.st-style-option input[type="radio"]:checked + .st-style-label--agressief .st-style-name {
	color: #065f46;
}

/* Hidden select keeps JS compatibility */
#strategy_style {
	display: none;
}

/* ── Divider ────────────────────────────────────────────── */
.st-divider {
	border: none;
	border-top: 1px solid #f1f1f1;
	margin: 1.25rem 0;
}

/* ── Slider blocks ──────────────────────────────────────── */
.st-slider-block {
	margin-bottom: 1.5rem;
}

.st-slider-block:last-child {
	margin-bottom: 0;
}

.st-slider-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.st-slider-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: #495057;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.st-slider-label i {
	color: #adb5bd;
	font-size: 0.75rem;
}

.st-slider-value {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--a);
	background: #fff7ed;
	padding: 0.15rem 0.55rem;
	border-radius: 4px;
}

.st-slider-track {
	margin-bottom: 0.35rem;
}

.st-slider-track .form-range {
	width: 100%;
}

.st-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.68rem;
	color: #adb5bd;
	padding: 0 2px;
}

/* ── Action footer ──────────────────────────────────────── */
.st-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: flex-end;
	padding-top: 0.25rem;
}

.st-btn-save {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.5rem;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	background: var(--a);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: all 0.15s ease;
}

.st-btn-save:hover {
	background: var(--btn-hover);
}

.st-btn-preview {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.25rem;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 500;
	background: #fff;
	color: #495057;
	border: 1px solid #dee2e6;
	cursor: pointer;
	transition: all 0.15s ease;
}

.st-btn-preview:hover {
	background: #f8f9fa;
	border-color: #ced4da;
	color: #212529;
}

/* ── Sidebar cards ──────────────────────────────────────── */
.st-sidebar-card {
	background: #fff;
	border-radius: 8px;
	box-shadow:
		0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03),
		0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03),
		0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05),
		0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
	margin-bottom: 1rem;
	overflow: hidden;
}

.st-sidebar-card-body {
	padding: 1.25rem;
}

.st-sidebar-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: #212529;
	margin-bottom: 1rem;
}

.st-sidebar-title i {
	color: var(--a);
	font-size: 0.8rem;
}

/* ── Quick action buttons ───────────────────────────────── */
.st-quick-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.st-quick-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 500;
	border: 1px solid #e9ecef;
	background: #fff;
	color: #495057;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
}

.st-quick-btn:hover {
	background: #f8f9fa;
	border-color: #ced4da;
	color: #212529;
}

.st-quick-btn i {
	width: 18px;
	text-align: center;
	color: var(--a);
	font-size: 0.78rem;
}

.st-quick-btn--toggle {
	border-color: var(--a);
	color: var(--a);
}

.st-quick-btn--toggle:hover {
	background: #fff7ed;
}

.st-quick-btn--toggle:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Status indicator ───────────────────────────────────── */
.st-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.78rem;
	font-weight: 500;
}

.st-status--active {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.st-status--paused {
	background: #f8f9fa;
	color: #6c757d;
	border: 1px solid #e9ecef;
}

.st-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.st-status--active .st-status-dot {
	background: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.st-status--paused .st-status-dot {
	background: #9ca3af;
}

/* ── Info card ──────────────────────────────────────────── */
.st-info-card {
	background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
	border: 1px solid #e9ecef;
}

.st-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.st-info-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.5rem 0;
	font-size: 0.78rem;
	color: #495057;
	line-height: 1.45;
}

.st-info-list li:not(:last-child) {
	border-bottom: 1px solid #f1f1f1;
}

.st-info-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	border-radius: 5px;
	font-size: 0.65rem;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}

.st-info-pill--blue {
	background: #dbeafe;
	color: #1d4ed8;
}

.st-info-pill--orange {
	background: #ffedd5;
	color: #c2410c;
}

.st-info-pill--green {
	background: #d1fae5;
	color: #065f46;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.st-style-group {
		grid-template-columns: 1fr;
	}

	.st-mode-group {
		grid-template-columns: 1fr;
	}

	.st-actions {
		flex-direction: column-reverse;
	}

	.st-actions button {
		width: 100%;
	}

	.st-card-body {
		padding: 1.15rem;
	}
}

@media (max-width: 575.98px) {
	.st-slider-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}