panel/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--background: #ffffff;
	--foreground: #171717;

	/* Surface colors */
	--surface-primary: #ffffff;
	--surface-secondary: #f9fafb;
	--surface-tertiary: #f3f4f6;
	--surface-modal: #ffffff;
	--surface-card: #ffffff;
	--surface-hover: #f9fafb;
	--surface-active: #f3f4f6;

	/* Text colors */
	--text-primary: #111827;
	--text-secondary: #6b7280;
	--text-tertiary: #9ca3af;
	--text-inverse: #ffffff;
	--text-muted: #6b7280;

	/* Border colors */
	--border-default: #d1d5db;
	--border-hover: #9ca3af;
	--border-focus: #3b82f6;
	--border-divider: #e5e7eb;

	/* Interactive colors */
	--interactive-primary: #3b82f6;
	--interactive-primary-hover: #2563eb;
	--interactive-secondary: #6b7280;
	--interactive-secondary-hover: #4b5563;
	--interactive-danger: #ef4444;
	--interactive-danger-hover: #dc2626;

	/* Status colors */
	--status-success: #10b981;
	--status-warning: #f59e0b;
	--status-error: #ef4444;
	--status-info: #3b82f6;

	/* Shadow colors */
	--shadow-default: rgba(0, 0, 0, 0.1);
	--shadow-hover: rgba(0, 0, 0, 0.15);
}

.dark {
	--background: #0a0a0a;
	--foreground: #ededed;

	/* Surface colors */
	--surface-primary: #1f2937;
	--surface-secondary: #374151;
	--surface-tertiary: #4b5563;
	--surface-modal: #1f2937;
	--surface-card: #374151;
	--surface-hover: #4b5563;
	--surface-active: #6b7280;

	/* Text colors */
	--text-primary: #f9fafb;
	--text-secondary: #d1d5db;
	--text-tertiary: #9ca3af;
	--text-inverse: #111827;
	--text-muted: #9ca3af;

	/* Border colors */
	--border-default: #4b5563;
	--border-hover: #6b7280;
	--border-focus: #60a5fa;
	--border-divider: #374151;

	/* Interactive colors */
	--interactive-primary: #3b82f6;
	--interactive-primary-hover: #60a5fa;
	--interactive-secondary: #6b7280;
	--interactive-secondary-hover: #9ca3af;
	--interactive-danger: #ef4444;
	--interactive-danger-hover: #f87171;

	/* Status colors */
	--status-success: #10b981;
	--status-warning: #f59e0b;
	--status-error: #ef4444;
	--status-info: #3b82f6;

	/* Shadow colors */
	--shadow-default: rgba(0, 0, 0, 0.3);
	--shadow-hover: rgba(0, 0, 0, 0.4);
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
	color: var(--foreground);
	background: var(--background);
	font-family: Helvetica, Arial, sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-track:window-inactive {
	background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
	background: #374151;
}

.dark ::-webkit-scrollbar-track:window-inactive {
	background: #374151;
}

::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

.dark ::-webkit-scrollbar-thumb {
	background: #6b7280;
}

.dark ::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Focus styles */
.focus-ring {
	@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Animation utilities */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	animation: fadeIn 0.3s ease-out;
}

/* Full-screen map styles */
.map-fullscreen-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 50;
}

/* Ensure map takes full container */
.leaflet-container {
	height: 100% !important;
	width: 100% !important;
}

/* Override any margin/padding that might cause scrollbars */
.map-page {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Ensure floating panels are above map controls */
.map-floating-panel {
	z-index: 1000 !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Map controls positioning */
.leaflet-control-container .leaflet-top.leaflet-right {
	top: 10px !important; /* Position closer to top for project page */
	right: 10px !important;
}

/* Style the layer control to make it prettier */
.leaflet-control-layers {
	border-radius: 6px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	min-width: 180px !important;
	max-width: 220px !important;
}

.leaflet-control-layers-toggle {
	background-color: #3b82f6 !important;
	color: white !important;
	border-radius: 4px !important;
	width: 30px !important;
	height: 30px !important;
	border: none !important;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
	transition: all 0.2s ease !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

.leaflet-control-layers-toggle:hover {
	background-color: #2563eb !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
	transform: scale(1.05) !important;
}

.leaflet-control-layers-list {
	border-radius: 4px !important;
	padding: 6px !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
	padding: 4px 8px !important;
	border-radius: 3px !important;
	margin: 1px 0 !important;
	transition: background-color 0.2s ease !important;
	cursor: pointer !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
}

.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover {
	background-color: rgba(59, 130, 246, 0.08) !important;
}

.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
	margin-right: 6px !important;
	transform: scale(0.9) !important;
}