/* Clever Water Trip Planner — palette aligned with Clever Pack Builder / Trail Fuel */

.cwtp-wrapper {
	--cwtp-bg-app: #1b233a;
	--cwtp-bg-panel: #253150;
	--cwtp-bg-inset: #121829;
	--cwtp-border: #36456e;
	--cwtp-border-header: #2d3a5e;
	--cwtp-text: #f8fafc;
	--cwtp-text-body: #ffffff;
	--cwtp-text-muted: #94a3b8;
	--cwtp-text-subtle: #64748b;
	--cwtp-text-soft: #e2e8f0;
	--cwtp-btn-bg: #2b3964;
	--cwtp-btn-border: #3b4d7a;
	--cwtp-btn-hover: #3c4f8a;
	--cwtp-btn-hover-border: #4a5f9a;
	--cwtp-accent-sky: #38bdf8;
	--cwtp-accent-blue: #93c5fd;
	--cwtp-accent-amber: #fbbf24;
	--cwtp-warn-bg: rgba(59, 53, 24, 0.6);
	--cwtp-warn-border: #854d0e;
	--cwtp-warn-text: #fde68a;
	--cwtp-overbuild-bg: rgba(78, 52, 12, 0.55);
	--cwtp-overbuild-border: #a16207;
	--cwtp-overbuild-text: #fbbf24;
	--cwtp-tip-bg: rgba(20, 83, 45, 0.45);
	--cwtp-tip-border: #4ade80;
	--cwtp-tip-text: #bbf7d0;
	--cwtp-radius-app: 16px;
	--cwtp-radius-panel: 12px;
	--cwtp-radius-control: 8px;
	--cwtp-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

	max-width: 700px;
	margin: 20px auto;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--cwtp-text);
	-webkit-font-smoothing: antialiased;
	color-scheme: dark;
}

.cwtp-card {
	background: var(--cwtp-bg-app);
	border: 1px solid var(--cwtp-border-header);
	border-radius: var(--cwtp-radius-app);
	padding: 24px;
	box-shadow: var(--cwtp-shadow);
	box-sizing: border-box;
}

.cwtp-card h2 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--cwtp-text-body);
}

.cwtp-subtitle {
	color: var(--cwtp-text-muted);
	font-size: 0.95rem;
	margin: 4px 0 20px;
	line-height: 1.5;
}

.cwtp-field-group {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.cwtp-field-group label {
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--cwtp-text-muted);
	margin-bottom: 6px;
}

.cwtp-field-group select,
.cwtp-field-group input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--cwtp-border);
	border-radius: var(--cwtp-radius-control);
	font-size: 0.875rem;
	font-family: inherit;
	background-color: var(--cwtp-bg-inset);
	color: var(--cwtp-text-body);
	transition: border-color 0.2s ease;
}

.cwtp-field-group select {
	cursor: pointer;
}

.cwtp-field-group select option,
.cwtp-field-group select optgroup {
	background-color: var(--cwtp-bg-inset);
	color: var(--cwtp-text-body);
}

.cwtp-field-group select:focus,
.cwtp-field-group input:focus {
	outline: none;
	border-color: var(--cwtp-btn-hover-border);
	box-shadow: 0 0 0 2px rgba(59, 77, 122, 0.45);
}

.cwtp-field-group input::placeholder {
	color: var(--cwtp-text-subtle);
}

.cwtp-field-group small {
	color: var(--cwtp-text-subtle);
	font-size: 0.75rem;
	margin-top: 6px;
	line-height: 1.4;
}

.cwtp-checkbox-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cwtp-text);
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.cwtp-field-group .cwtp-checkbox-label input[type="checkbox"] {
	display: inline-block;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
	accent-color: var(--cwtp-accent-sky);
	cursor: pointer;
}

.cwtp-divider {
	border: 0;
	border-top: 1px solid var(--cwtp-border-header);
	margin: 20px 0;
}

.cwtp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.cwtp-profile-grid {
	margin-bottom: 10px;
}

.cwtp-profile-grid .cwtp-field-group:last-child {
	grid-column: span 2;
}

.cwtp-profile-grid .cwtp-assumptions-details {
	grid-column: span 2;
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.cwtp-grid {
		grid-template-columns: 1fr;
	}
}

.cwtp-results-box {
	margin-top: 24px;
	background: var(--cwtp-bg-panel);
	border: 1px solid var(--cwtp-border);
	border-radius: var(--cwtp-radius-panel);
	padding: 16px 20px;
	box-sizing: border-box;
}

.cwtp-results-box h3 {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cwtp-text-muted);
}

.cwtp-result-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	text-align: center;
}

@media (max-width: 600px) {
	.cwtp-result-grid {
		grid-template-columns: 1fr;
	}
}

.cwtp-stat {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cwtp-label {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--cwtp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cwtp-value {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--cwtp-text-body);
	margin-top: 4px;
}

.cwtp-value.highlight {
	color: var(--cwtp-accent-sky);
}

.cwtp-capacity-meter-box {
	margin-top: 14px;
	padding: 10px 12px;
	background-color: var(--cwtp-bg-inset);
	border: 1px solid var(--cwtp-border);
	border-radius: 6px;
	font-size: 0.85rem;
}

.cwtp-meter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	color: var(--cwtp-text);
}

.cwtp-meter-bar-bg {
	width: 100%;
	height: 10px;
	background-color: var(--cwtp-border-header);
	border-radius: 5px;
	overflow: hidden;
}

.cwtp-meter-fill {
	height: 100%;
	width: 0%;
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Meter Status States */
.cwtp-capacity-meter-box.status-shortfall .cwtp-meter-fill {
	background-color: #e53e3e; /* Red - Shortfall */
}

.cwtp-capacity-meter-box.status-shortfall {
	border-color: #9b2c2c;
	background-color: rgba(229, 62, 62, 0.12);
}

.cwtp-capacity-meter-box.status-good .cwtp-meter-fill {
	background-color: #38a169; /* Green - Optimal */
}

.cwtp-capacity-meter-box.status-good {
	border-color: #276749;
	background-color: rgba(56, 161, 105, 0.12);
}

.cwtp-capacity-meter-box.status-overbuilt .cwtp-meter-fill {
	background-color: #d69e2e; /* Amber - Substantial overbuild */
}

.cwtp-capacity-meter-box.status-overbuilt {
	border-color: #975a16;
	background-color: rgba(214, 158, 46, 0.12);
}

.cwtp-container-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--cwtp-border-header);
	display: flex;
	flex-direction: column;
}

.cwtp-container-section label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cwtp-text-soft);
	margin-bottom: 8px;
}

.cwtp-checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 600px) {
	.cwtp-checkbox-grid {
		grid-template-columns: 1fr;
	}
}

.cwtp-checkbox-grid label {
	font-weight: normal;
	font-size: 0.9rem;
	color: var(--cwtp-text-soft);
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0;
}

.cwtp-checkbox-grid input[type="checkbox"] {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--cwtp-accent-sky);
	cursor: pointer;
}

.cwtp-dry-wt {
	font-size: 0.8rem;
	color: var(--cwtp-text-muted);
	margin-left: 4px;
}

.cwtp-custom-container-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.cwtp-custom-container-row input[type="text"] {
	flex: 2 1 10rem;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var(--cwtp-border);
	border-radius: 6px;
	font-size: 0.9rem;
	font-family: inherit;
	background-color: var(--cwtp-bg-inset);
	color: var(--cwtp-text-body);
}

.cwtp-custom-container-row input[type="number"] {
	flex: 1 1 5rem;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var(--cwtp-border);
	border-radius: 6px;
	font-size: 0.9rem;
	font-family: inherit;
	background-color: var(--cwtp-bg-inset);
	color: var(--cwtp-text-body);
}

.cwtp-custom-container-row input:focus {
	outline: none;
	border-color: var(--cwtp-btn-hover-border);
	box-shadow: 0 0 0 2px rgba(59, 77, 122, 0.45);
}

.cwtp-custom-container-row input::placeholder {
	color: var(--cwtp-text-subtle);
}

.cwtp-custom-container-row button {
	flex: 0 0 auto;
	padding: 8px 14px;
	background-color: #2b6cb0;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.9rem;
	font-family: inherit;
}

.cwtp-custom-container-row button:hover {
	background-color: #2c5282;
}

.cwtp-inline-error {
	margin-top: 8px;
	padding: 8px 10px;
	background: rgba(127, 29, 29, 0.35);
	border: 1px solid #991b1b;
	border-radius: var(--cwtp-radius-control);
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 500;
	color: #fecaca;
}

@media (max-width: 600px) {
	.cwtp-custom-container-row input[type="text"] {
		flex: 1 1 100%;
	}

	.cwtp-custom-container-row input[type="number"] {
		flex: 1 1 calc(50% - 4px);
	}

	.cwtp-custom-container-row button {
		flex: 1 1 100%;
	}
}

.cwtp-warning-msg {
	margin-top: 12px;
	padding: 10px 12px;
	background: rgba(127, 29, 29, 0.45);
	border: 1px solid #b91c1c;
	border-radius: var(--cwtp-radius-control);
	color: #fecaca;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.45;
}

.cwtp-overbuild-msg {
	margin-top: 10px;
	padding: 10px;
	background: var(--cwtp-overbuild-bg);
	border: 1px solid var(--cwtp-overbuild-border);
	border-radius: 4px;
	color: var(--cwtp-overbuild-text);
	font-size: 0.85rem;
	font-weight: 500;
}

.cwtp-tip-msg:empty {
	display: none;
}

.cwtp-tip-msg:not(:empty) {
	margin-top: 14px;
	padding: 10px;
	background: var(--cwtp-tip-bg);
	border: 1px solid var(--cwtp-tip-border);
	border-radius: 4px;
	color: var(--cwtp-tip-text);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.45;
}

.cwtp-assumptions-details {
	margin-top: 14px;
	padding: 8px 12px;
	background-color: var(--cwtp-bg-inset);
	border: 1px solid var(--cwtp-border);
	border-radius: 6px;
	font-size: 0.85rem;
	color: var(--cwtp-text-muted);
}

.cwtp-assumptions-details summary {
	font-weight: 600;
	cursor: pointer;
	color: var(--cwtp-accent-sky);
	outline: none;
}

.cwtp-assumptions-details summary:hover {
	color: var(--cwtp-accent-blue);
}

.cwtp-assumptions-content {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--cwtp-border-header);
	line-height: 1.4;
}

.cwtp-assumptions-content p {
	margin: 4px 0;
}

.cwtp-assumptions-content ul {
	margin: 4px 0 8px 16px;
	padding: 0;
}

.cwtp-assumptions-content li {
	margin-bottom: 2px;
}

.cwtp-share-row {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.cwtp-share-row button {
	padding: 8px 14px;
	background-color: #2b6cb0;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.85rem;
}

.cwtp-share-row button:hover {
	background-color: #2c5282;
}

.cwtp-share-row button#cwtp-print-btn {
	background-color: #4a5568;
}

.cwtp-share-row button#cwtp-print-btn:hover {
	background-color: #2d3748;
}

#cwtp-share-feedback {
	font-size: 0.85rem;
	color: #22c55e;
	font-weight: 600;
}

.cwtp-print-header {
	display: none;
}

@media print {
	body * {
		visibility: hidden;
	}
	.cwtp-card, .cwtp-card * {
		visibility: visible;
	}
	.cwtp-card {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background: #ffffff !important;
		color: #000000 !important;
		border: none !important;
		box-shadow: none !important;
	}
	.cwtp-field-group, 
	.cwtp-container-section, 
	.cwtp-share-row,
	.cwtp-assumptions-details,
	hr.cwtp-divider,
	.cwtp-profile-grid,
	.cwtp-capacity-meter-box,
	.cwtp-overbuild-msg {
		display: none !important;
	}
	#cwtp-print-identity,
	.cwtp-print-header {
		display: block !important;
		color: #000000 !important;
	}
	.cwtp-print-header h3 {
		margin: 0 0 6px 0;
		font-size: 1.1rem;
		color: #000000 !important;
	}
	.cwtp-print-header p {
		margin: 4px 0;
		font-size: 0.9rem;
		color: #000000 !important;
	}
	.cwtp-results-box {
		background: #ffffff !important;
		border: 1px solid #000000 !important;
		color: #000000 !important;
	}
	.cwtp-value, .cwtp-value.highlight, .cwtp-results-box h3, .cwtp-label {
		color: #000000 !important;
	}
}