/* Mobile-First Weather Dashboard Styles */

:root {
	/* Structure */
	--mobile-header-height: 60px;
	--mobile-bottom-nav-height: 70px;
	--mobile-padding: 16px;
	--mobile-border-radius: 16px;
	--mobile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--touch-target-size: 44px;

	/* Dark Theme (Default) */
	--mobile-text-primary: #ffffff;
	--mobile-text-secondary: #b3b3b3;
	--mobile-bg-primary: #1a1a1a;
	--mobile-bg-secondary: #2d2d2d;
	--mobile-bg-tertiary: #333333; /* For gradients and other slight variations */
	--mobile-bg-interactive: rgba(255, 255, 255, 0.1);
	--mobile-bg-interactive-hover: rgba(255, 255, 255, 0.2);
	--mobile-border-color: rgba(255, 255, 255, 0.1);
	--mobile-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	--mobile-header-bg: rgba(45, 45, 45, 0.85);

	/* Accents & Status */
	--mobile-accent: #007bff;
	--mobile-accent-hover: #0056b3;
	--mobile-success: #28a745;
	--mobile-warning: #ffc107;
	--mobile-danger: #dc3545;
}

body.light-theme {
	/* Light Theme Overrides */
	--mobile-text-primary: #000000;
	--mobile-text-secondary: #6e6e73;
	--mobile-bg-primary: #f2f2f7;
	--mobile-bg-secondary: #ffffff;
	--mobile-bg-tertiary: #f8f8f8;
	--mobile-bg-interactive: rgba(0, 0, 0, 0.05);
	--mobile-bg-interactive-hover: rgba(0, 0, 0, 0.1);
	--mobile-border-color: #d1d1d6;
	--mobile-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	--mobile-header-bg: rgba(242, 242, 247, 0.85);
}


/* Base Mobile Styles */
.mobile-optimized {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: var(--mobile-bg-primary);
	color: var(--mobile-text-primary);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	touch-action: manipulation;
	transition: background-color 0.3s ease, color 0.3s ease;
}


/* Mobile Header */
.mobile-header {
	position: sticky; /* CHANGED from fixed */
	top: 0;
	left: 0;
	right: 0;
	background: var(--mobile-header-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--mobile-border-color);
	z-index: 1000;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.banner-container {
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #000;
}
.banner-container img {
	max-width: 100%;
	height: auto;
}
.banner-desktop { display: none; }
.banner-mobile { display: block; }

.mobile-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--mobile-header-height);
	padding: 0 var(--mobile-padding);
}

.header-title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.header-icon {
	width: 24px;
	height: 24px;
	color: var(--mobile-accent);
}
.header-text {
	font-size: 18px;
	font-weight: 600;
	color: var(--mobile-text-primary);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px; /* Gap between buttons */
}

.refresh-btn,
.theme-toggle-btn {
	width: var(--touch-target-size);
	height: var(--touch-target-size);
	border: none;
	border-radius: 12px;
	background: var(--mobile-bg-interactive);
	color: var(--mobile-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--mobile-transition);
	cursor: pointer;
}

.refresh-btn:hover, .refresh-btn:active,
.theme-toggle-btn:hover, .theme-toggle-btn:active {
	background: var(--mobile-bg-interactive-hover);
	transform: scale(0.95);
}

.refresh-icon,
.theme-toggle-btn .theme-icon svg {
	width: 22px;
	height: 22px;
}

/* Theme Icon Visibility */
.theme-toggle-btn .sun { display: none; }
.theme-toggle-btn .moon { display: block; }
body.light-theme .theme-toggle-btn .sun { display: block; }
body.light-theme .theme-toggle-btn .moon { display: none; }

/* Pull-to-Refresh */
.pull-refresh-indicator {
	position: fixed;
	top: var(--mobile-header-height);
	left: 0;
	right: 0;
	height: 60px;
	background: var(--mobile-bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
	z-index: 999;
}
.pull-refresh-indicator.show {
	transform: translateY(0);
}
.pull-refresh-content {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mobile-text-secondary);
}
.pull-icon {
	width: 20px;
	height: 20px;
	animation: bounce 1s infinite;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-5px); }
	60% { transform: translateY(-3px); }
}

/* Main Content Area */
.mobile-main {
	/* margin-top is removed because header is sticky */
	padding: var(--mobile-padding); /* Padding on all sides */
	padding-bottom: var(--mobile-bottom-nav-height); /* Ensure space for bottom nav */
	min-height: calc(100vh - var(--mobile-header-height));
}

/* Location Selector */
.location-selector {
	margin-bottom: 12px;
	background: var(--mobile-bg-secondary);
	border-radius: var(--mobile-border-radius);
	padding: 8px 12px;
	box-shadow: var(--mobile-card-shadow);
	transition: background-color 0.3s ease;
}
.location-tabs {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 8px;
	padding-bottom: 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.location-tabs::-webkit-scrollbar { display: none; }
.location-tab {
	flex: 0 0 auto;
	padding: 6px 12px;
	background: var(--mobile-bg-interactive);
	border: none;
	border-radius: 16px;
	color: var(--mobile-text-secondary);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: var(--mobile-transition);
	min-width: 60px;
	cursor: pointer;
}
.location-tab.active {
	background: var(--mobile-accent);
	color: white;
}
.location-tab:hover:not(.active) {
	background: var(--mobile-bg-interactive-hover);
}
.location-indicator { display: none; }

/* Prediction Section */
.prediction-section {
	margin-bottom: 12px;
	/* No padding needed, card has padding */
}

.prediction-card {
	background: linear-gradient(135deg, var(--mobile-bg-secondary), var(--mobile-bg-tertiary));
	border-radius: var(--mobile-border-radius);
	padding: 32px 24px;
	box-shadow: var(--mobile-card-shadow);
	min-height: 200px;
	position: relative;
	overflow: hidden;
	transition: background 0.3s ease;
}
.prediction-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mobile-accent), var(--mobile-success));
}
.prediction-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 160px;
	justify-content: center;
}

/* Loading State */
.loading-state { gap: 20px; }
.skeleton-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.skeleton-icon, .skeleton-text-large, .skeleton-text-small {
	background: linear-gradient(90deg, var(--mobile-bg-interactive) 25%, var(--mobile-bg-interactive-hover) 50%, var(--mobile-bg-interactive) 75%);
	animation: skeleton-loading 1.5s infinite;
}
.skeleton-icon { width: 64px; height: 64px; border-radius: 50%; }
.skeleton-text-large { width: 200px; height: 24px; border-radius: 12px; }
.skeleton-text-small { width: 120px; height: 16px; border-radius: 8px; }

@keyframes skeleton-loading {
	0% { background-position: -200px 0; }
	100% { background-position: calc(200px + 100%) 0; }
}
.loading-pulse { display: flex; align-items: center; gap: 8px; }
.pulse-text { font-size: 16px; color: var(--mobile-text-secondary); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Result State */
.weather-icon-container { margin-bottom: 20px; }
.weather-icon {
	width: 80px;
	height: 80px;
	color: var(--mobile-accent);
	filter: drop-shadow(0 4px 8px rgba(0, 123, 255, 0.3));
}
.prediction-text {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 12px;
	color: var(--mobile-text-primary);
}
.prediction-details {
	font-size: 16px;
	color: var(--mobile-text-secondary);
	margin-bottom: 16px;
}
.prediction-meta {
	padding-top: 16px;
	border-top: 1px solid var(--mobile-border-color);
}
.last-updated {
	font-size: 12px;
	color: var(--mobile-text-secondary);
}

/* Error State */
.error-state { gap: 16px; }
.error-icon-container { margin-bottom: 8px; }
.error-icon { width: 48px; height: 48px; color: var(--mobile-warning); }
.error-title { font-size: 20px; font-weight: 600; color: var(--mobile-text-primary); margin-bottom: 8px; }
.error-message { font-size: 14px; color: var(--mobile-text-secondary); margin-bottom: 20px; }
.retry-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--mobile-accent);
	color: white;
	border: none;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--mobile-transition);
	min-height: var(--touch-target-size);
}
.retry-btn:hover, .retry-btn:active {
	background: var(--mobile-accent-hover);
	transform: scale(0.95);
}
.retry-icon { width: 16px; height: 16px; }

/* Forecast Section */
.forecast-section { margin-bottom: 24px; }
.forecast-card {
	background: var(--mobile-bg-secondary);
	border-radius: var(--mobile-border-radius);
	box-shadow: var(--mobile-card-shadow);
	overflow: hidden;
	transition: background-color 0.3s ease;
}
.forecast-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mobile-border-color);
}
.forecast-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var(--mobile-text-primary);
}
.chart-container {
	padding: 20px;
	height: 200px;
	position: relative;
}
.forecast-canvas { max-width: 100%; height: 100%; }

/* Map Section */
.map-section { margin-bottom: 24px; }
.map-card {
	background: var(--mobile-bg-secondary);
	border-radius: var(--mobile-border-radius);
	box-shadow: var(--mobile-card-shadow);
	overflow: hidden;
	transition: background-color 0.3s ease;
}
.map-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mobile-border-color);
}
.map-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var(--mobile-text-primary);
}
.map-container { position: relative; height: 300px; }
.map-section.primary-feature .map-container { height: 60vh; min-height: 400px; }

/* Weather info grid */
.weather-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 20px 0;
	padding: 16px;
	background: var(--mobile-bg-interactive);
	border-radius: 12px;
	border: 1px solid var(--mobile-border-color);
}
.weather-info-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.info-label {
	font-size: 11px;
	color: var(--mobile-text-secondary);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.info-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--mobile-text-primary);
}

/* Info Section */
.info-section { padding: 16px; }
.info-card {
	background: var(--mobile-bg-secondary);
	border-radius: 16px;
	padding: 20px;
	border: 1px solid var(--mobile-border-color);
	transition: background-color 0.3s ease;
}
.info-header { margin-bottom: 20px; }
.info-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--mobile-text-primary);
	margin: 0;
}
.info-content { display: flex; flex-direction: column; gap: 20px; }
.info-item h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--mobile-text-primary);
	margin: 0 0 8px 0;
}
.info-item p {
	font-size: 14px;
	color: var(--mobile-text-secondary);
	line-height: 1.5;
	margin: 0;
}

/* Enhanced Visual Forecast Styles */
.forecast-summary {
	font-size: 12px;
	color: var(--mobile-text-secondary);
}
.rain-status {
	padding: 4px 8px;
	background: var(--mobile-bg-interactive);
	border-radius: 8px;
	font-weight: 500;
}

/* Weather Overview Grid */
.weather-overview {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin: 12px 0;
	padding: 12px;
	background: var(--mobile-bg-interactive);
	border-radius: 12px;
	border: 1px solid var(--mobile-border-color);
}
.overview-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.overview-icon { font-size: 20px; margin-bottom: 4px; }
.overview-label {
	font-size: 10px;
	color: var(--mobile-text-secondary);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.overview-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--mobile-text-primary);
}

/* Hourly Timeline */
.hourly-timeline {
	display: flex;
	overflow-x: auto;
	gap: 8px;
	padding: 12px 0;
	margin: 12px 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hourly-timeline::-webkit-scrollbar { display: none; }
.hourly-item {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 8px;
	background: var(--mobile-bg-interactive);
	border-radius: 12px;
	border: 1px solid var(--mobile-border-color);
	min-width: 60px;
	text-align: center;
}
.hourly-time {
	font-size: 10px;
	color: var(--mobile-text-secondary);
	margin-bottom: 8px;
	font-weight: 500;
}
.hourly-weather { font-size: 18px; margin-bottom: 8px; }
.hourly-rain { height: 20px; width: 4px; border-radius: 2px; margin: 4px auto; }
.hourly-temp { font-size: 11px; color: var(--mobile-text-primary); font-weight: 600; }
.rain-none { background: var(--mobile-bg-interactive); }
.rain-light { background: linear-gradient(to top, var(--mobile-success) 0%, transparent 30%); }
.rain-moderate { background: linear-gradient(to top, var(--mobile-warning) 0%, transparent 60%); }
.rain-heavy { background: linear-gradient(to top, var(--mobile-danger) 0%, transparent 90%); }

/* Chart Container - Always Visible */
body.light-theme .chart-container { background: var(--mobile-bg-interactive); }
.chart-container {
	height: 300px;
	margin-top: 12px;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 12px;
	padding: 12px;
	border: 1px solid var(--mobile-border-color);
}

/* Rain Summary Block */
.rain-summary-section { padding: 0 16px 12px; }
.rain-summary-card {
	background: linear-gradient(135deg, var(--mobile-bg-secondary), #2a2a2a);
	border-radius: 12px;
	padding: 10px 16px;
	border: 1px solid var(--mobile-border-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: background 0.3s ease;
}
.summary-content { display: flex; align-items: center; justify-content: center; text-align: center; }
.summary-text { font-size: 14px; font-weight: 500; color: var(--mobile-text-primary); line-height: 1.4; }
.summary-text.no-rain { color: var(--mobile-success); }
.summary-text.light-rain { color: var(--mobile-warning); } /* Changed from #ffc107 to use the variable */
.summary-text.heavy-rain { color: var(--mobile-warning); }

/* Bottom Navigation */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--mobile-bottom-nav-height);
	background: var(--mobile-header-bg); /* Use same blurred bg as header */
	border-top: 1px solid var(--mobile-border-color);
	display: flex;
	z-index: 1000;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: none;
	background: none;
	color: var(--mobile-text-secondary);
	cursor: pointer;
	transition: var(--mobile-transition);
	padding: 8px;
	min-height: var(--touch-target-size);
}
.nav-item.active { color: var(--mobile-accent); }
.nav-item:hover:not(.active) { color: var(--mobile-text-primary); }
.nav-icon { width: 24px; height: 24px; }
.nav-label { font-size: 10px; font-weight: 500; }

/* Loading spinner, specific to map, but can be generic */
.loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--mobile-border-color);
	border-top: 3px solid var(--mobile-accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Leaflet Overrides */
.leaflet-control-timeline {
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.light-theme .leaflet-control-timeline {
	background: rgba(255, 255, 255, 0.8);
	color: black;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.leaflet-control-timeline .timeline-display { margin-bottom: 6px; text-align: center; }
.leaflet-control-timeline .intensity-bar { display: flex; justify-content: space-between; gap: 6px; }
.intensity-color { width: 20px; height: 10px; border-radius: 2px; }


/* Responsive & Accessibility */
@media (max-width: 320px) {
	.prediction-text { font-size: 20px; }
	.mobile-main { padding: 12px; }
	.header-text { font-size: 16px; }
}
@media (min-width: 768px) {
	.banner-desktop { display: block; }
	.banner-mobile { display: none; }
	.mobile-main { max-width: 480px; margin-left: auto; margin-right: auto; }
}
@media (prefers-contrast: high) {
	.prediction-card { border: 2px solid var(--mobile-border-color); }
	.location-tab.active { border: 2px solid var(--mobile-text-primary); }
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}