/*
 * Estilos das calculadoras. Usa os design tokens do tema (--ca-*) definidos em
 * calcula-agro/assets/css/design-tokens.css — este CSS não redefine cores/espaçamento cru.
 */
.ca-calc {
	background: var( --ca-color-bg );
	border: 1px solid var( --ca-color-border );
	border-radius: var( --ca-radius-xl );
	box-shadow: var( --ca-shadow-md );
	padding: var( --ca-space-6 );
	margin: var( --ca-space-8 ) 0;
}

.ca-calc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --ca-space-8 );
}

@media ( max-width: 760px ) {
	.ca-calc-grid {
		grid-template-columns: 1fr;
	}
}

.ca-calc-form {
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-5 );
}

.ca-calc-field label {
	display: block;
	font-weight: 600;
	font-size: var( --ca-text-sm );
	color: var( --ca-color-neutral-900 );
	margin-bottom: var( --ca-space-2 );
}

.ca-calc-field input {
	width: 100%;
	font-family: var( --ca-font-sans );
	font-size: var( --ca-text-base );
	padding: 12px 14px;
	border-radius: var( --ca-radius-md );
	border: 1px solid var( --ca-color-border );
	background: var( --ca-color-bg-subtle );
	transition: border-color var( --ca-transition ), box-shadow var( --ca-transition );
}

.ca-calc-field input:focus {
	outline: none;
	border-color: var( --ca-color-primary-400 );
	box-shadow: 0 0 0 4px var( --ca-color-primary-100 );
	background: var( --ca-color-bg );
}

.ca-calc-hint {
	display: block;
	font-size: var( --ca-text-xs );
	color: var( --ca-color-text-muted );
	margin-top: var( --ca-space-1 );
}

.ca-calc-results {
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-4 );
}

.ca-calc-result-card {
	background: var( --ca-color-bg-subtle );
	border: 1px solid var( --ca-color-border );
	border-radius: var( --ca-radius-lg );
	padding: var( --ca-space-4 ) var( --ca-space-5 );
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-1 );
}

.ca-calc-result-primary {
	background: var( --ca-color-primary-50 );
	border-color: var( --ca-color-primary-200 );
}

.ca-calc-result-primary .ca-calc-result-value {
	font-size: var( --ca-text-3xl );
	color: var( --ca-color-primary-700 );
}

.ca-calc-result-label {
	font-size: var( --ca-text-xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ca-color-text-muted );
}

.ca-calc-result-value {
	font-size: var( --ca-text-xl );
	font-weight: 800;
	color: var( --ca-color-neutral-900 );
}

.ca-calc-result-value.ca-calc-result-sm {
	font-size: var( --ca-text-lg );
}

.ca-calc-result-row {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --ca-space-3 );
}

@media ( max-width: 520px ) {
	.ca-calc-result-row {
		grid-template-columns: 1fr;
	}
}

.ca-calc-status {
	font-size: var( --ca-text-sm );
	font-weight: 600;
	color: var( --ca-color-primary-700 );
	min-height: 1.4em;
}

.ca-calc-disclaimer {
	font-size: var( --ca-text-xs );
	color: var( --ca-color-text-muted );
	margin: 0;
}

.ca-calc-missing {
	padding: var( --ca-space-6 );
	text-align: center;
	color: var( --ca-color-text-muted );
	background: var( --ca-color-bg-subtle );
	border-radius: var( --ca-radius-lg );
}

.ca-calc-financial {
	background: linear-gradient( 135deg, var( --ca-color-primary-50 ), var( --ca-color-bg ) );
	border: 1px solid var( --ca-color-primary-200 );
	border-radius: var( --ca-radius-lg );
	padding: var( --ca-space-4 ) var( --ca-space-5 );
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-1 );
}

.ca-calc-financial-title {
	font-size: var( --ca-text-xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ca-color-primary-700 );
}

.ca-calc-financial-value {
	font-size: var( --ca-text-2xl );
	font-weight: 800;
	color: var( --ca-color-primary-700 );
}

.ca-calc-financial-note {
	font-size: var( --ca-text-xs );
	color: var( --ca-color-text-muted );
	margin: 0;
}

.ca-calc-chart-wrap {
	background: var( --ca-color-bg-subtle );
	border: 1px solid var( --ca-color-border );
	border-radius: var( --ca-radius-lg );
	padding: var( --ca-space-4 );
}

.ca-calc-chart-title {
	font-size: var( --ca-text-xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ca-color-text-muted );
	margin: 0 0 var( --ca-space-3 );
}

.ca-calc-chart-wrap canvas {
	display: block;
	width: 100%;
}

.ca-calc-full {
	margin-top: var( --ca-space-6 );
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-4 );
}

.ca-calc-converters {
	display: flex;
	flex-direction: column;
	gap: var( --ca-space-5 );
}

.ca-calc-converter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --ca-space-5 );
	background: var( --ca-color-bg-subtle );
	border: 1px solid var( --ca-color-border );
	border-radius: var( --ca-radius-lg );
	padding: var( --ca-space-5 );
}

.ca-calc-converter-title {
	flex-basis: 100%;
	font-size: var( --ca-text-xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ca-color-text-muted );
	margin: 0;
}

.ca-calc-converter-input {
	min-width: 200px;
}

.ca-calc-converter-input label {
	display: block;
	font-weight: 600;
	font-size: var( --ca-text-sm );
	color: var( --ca-color-neutral-900 );
	margin-bottom: var( --ca-space-2 );
}

.ca-calc-converter-input input {
	width: 100%;
	font-family: var( --ca-font-sans );
	font-size: var( --ca-text-base );
	padding: 12px 14px;
	border-radius: var( --ca-radius-md );
	border: 1px solid var( --ca-color-border );
	background: var( --ca-color-bg );
}

.ca-calc-converter-input input:focus {
	outline: none;
	border-color: var( --ca-color-primary-400 );
	box-shadow: 0 0 0 4px var( --ca-color-primary-100 );
}

.ca-calc-converter-outputs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ca-space-3 );
	flex: 1;
}

.ca-calc-chip {
	background: var( --ca-color-bg );
	border: 1px solid var( --ca-color-primary-200 );
	border-radius: var( --ca-radius-full );
	padding: var( --ca-space-2 ) var( --ca-space-4 );
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.ca-calc-chip span {
	font-weight: 800;
	font-size: var( --ca-text-lg );
	color: var( --ca-color-primary-700 );
}

.ca-calc-chip small {
	font-size: var( --ca-text-xs );
	color: var( --ca-color-text-muted );
}

.ca-calc-species-selector {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ca-space-3 );
	margin-bottom: var( --ca-space-5 );
}

.ca-calc-species-btn {
	font-family: var( --ca-font-sans );
	font-size: var( --ca-text-sm );
	font-weight: 700;
	padding: 10px 18px;
	border-radius: var( --ca-radius-full );
	border: 1px solid var( --ca-color-border );
	background: var( --ca-color-bg-subtle );
	color: var( --ca-color-text );
	cursor: pointer;
	transition: all var( --ca-transition );
}

.ca-calc-species-btn:hover {
	border-color: var( --ca-color-primary-300 );
}

.ca-calc-species-btn.is-active {
	background: var( --ca-color-primary-600 );
	border-color: var( --ca-color-primary-600 );
	color: var( --ca-color-neutral-0 );
}

.ca-calc-edit-toggle {
	float: right;
	font-family: var( --ca-font-sans );
	font-size: var( --ca-text-xs );
	font-weight: 700;
	color: var( --ca-color-primary-700 );
	background: var( --ca-color-primary-50 );
	border: 1px solid var( --ca-color-primary-200 );
	border-radius: var( --ca-radius-full );
	padding: 4px 12px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

.ca-calc-edit-toggle:hover {
	background: var( --ca-color-primary-100 );
}

.ca-calc-params .ca-calc-chip input[type="number"] {
	border: none;
	background: transparent;
	padding: 0;
	width: 4.5ch;
	font-family: var( --ca-font-sans );
	font-weight: 800;
	font-size: var( --ca-text-lg );
	color: var( --ca-color-primary-700 );
}

.ca-calc-params .ca-calc-chip input[type="number"]:focus {
	outline: none;
}

.ca-calc-params.is-editing .ca-calc-chip {
	background: var( --ca-color-bg );
	border-color: var( --ca-color-primary-400 );
}

.ca-calc-params.is-editing .ca-calc-chip input[type="number"] {
	border-bottom: 1.5px dashed var( --ca-color-primary-400 );
}