/* 
 * Google Maps CSS Guidelines
 * Always set the map height explicitly to define the size of the element
 * that contains the map. Here, the gmp-map element itself is the container.
 */

body {
  margin: 0;
  padding: 0;
}

/* Weather condition icon: dark mode benefits from inversion, light mode does not. */
html[data-theme='dark'] main .weather-condition-icon {
  filter: invert(1);
}

html[data-theme='light'] main .weather-condition-icon {
  filter: none;
}

gmp-map {
  display: block;
  width: 100%;
  height: 500px; /* Explicit height so the map is visible */
}

#map-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.type-select {
  width: 200px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 10px;
  flex-grow: 1;
  padding: 0 10px;
  margin-left: 10px;
  margin-top: 10px;
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* Theme system (global): dark default + user-selectable light mode.         */
/* -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='light'] body {
  background-image: linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}

/* Keep navbar/header dark; only page content under <main> switches. */
html[data-theme='light'] main .bg-slate-900,
html[data-theme='light'] main .bg-slate-900\/80,
html[data-theme='light'] main .bg-slate-900\/70,
html[data-theme='light'] main .bg-slate-900\/60,
html[data-theme='light'] main .bg-slate-900\/50 {
  background-color: rgba(248, 250, 252, 0.95) !important;
}

html[data-theme='light'] main .bg-slate-900\/40,
html[data-theme='light'] main .bg-slate-900\/30,
html[data-theme='light'] main .bg-slate-950\/60,
html[data-theme='light'] main .bg-slate-950\/50,
html[data-theme='light'] main .bg-slate-950\/40,
html[data-theme='light'] main .bg-slate-950\/30 {
  background-color: rgba(226, 232, 240, 0.76) !important;
}

html[data-theme='light'] main .bg-slate-800,
html[data-theme='light'] main .bg-slate-800\/70,
html[data-theme='light'] main .bg-slate-800\/60,
html[data-theme='light'] main .bg-slate-800\/40 {
  background-color: rgba(226, 232, 240, 0.9) !important;
}

html[data-theme='light'] main .bg-slate-700,
html[data-theme='light'] main .bg-slate-700\/80,
html[data-theme='light'] main .bg-slate-700\/60,
html[data-theme='light'] main .bg-slate-700\/40,
html[data-theme='light'] main .bg-slate-700\/30 {
  background-color: rgba(203, 213, 225, 0.84) !important;
}

/* Gradient cards: convert dark slates to light card gradients. */
html[data-theme='light'] main .from-slate-800 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme='light'] main .via-slate-800 {
  --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html[data-theme='light'] main .to-slate-900 {
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position) !important;
}

html[data-theme='light'] main .to-slate-700 {
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position) !important;
}

html[data-theme='light'] main .border-slate-800\/60,
html[data-theme='light'] main .border-slate-700,
html[data-theme='light'] main .border-slate-700\/80,
html[data-theme='light'] main .border-slate-700\/70,
html[data-theme='light'] main .border-slate-700\/60,
html[data-theme='light'] main .border-slate-600,
html[data-theme='light'] main .border-slate-600\/70,
html[data-theme='light'] main .border-slate-600\/60,
html[data-theme='light'] main .border-slate-600\/50 {
  border-color: rgba(148, 163, 184, 0.55) !important;
}

html[data-theme='light'] main [class*='border-[#D8DEE9]/40'] {
  border-color: rgba(148, 163, 184, 0.6) !important;
}

html[data-theme='light'] main .divide-slate-700\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148, 163, 184, 0.45) !important;
}

/* Text remap: dark mode slate text -> readable light mode slate text. */
html[data-theme='light'] main .text-slate-100,
html[data-theme='light'] main .text-slate-200 {
  color: #0f172a !important;
}

html[data-theme='light'] main .text-slate-300 {
  color: #334155 !important;
}

html[data-theme='light'] main .text-slate-400 {
  color: #475569 !important;
}

html[data-theme='light'] main .text-slate-500 {
  color: #64748b !important;
}

/* Dashboard/client-side rendered tiles use gray-* classes. */
html[data-theme='light'] main .text-gray-100,
html[data-theme='light'] main .text-gray-200 {
  color: #0f172a !important;
}

html[data-theme='light'] main .text-gray-300 {
  color: #334155 !important;
}

html[data-theme='light'] main .text-gray-400 {
  color: #475569 !important;
}

html[data-theme='light'] main .text-gray-500 {
  color: #64748b !important;
}

html[data-theme='light'] main .text-gray-600 {
  color: #475569 !important;
}

html[data-theme='light'] main .text-gray-700 {
  color: #334155 !important;
}

html[data-theme='light'] main .border-gray-700,
html[data-theme='light'] main .border-gray-700\/60 {
  border-color: rgba(148, 163, 184, 0.55) !important;
}

html[data-theme='light'] main .border-gray-700\/40 {
  border-color: rgba(148, 163, 184, 0.45) !important;
}

html[data-theme='light'] main .bg-gray-700\/30,
html[data-theme='light'] main .bg-gray-700\/40,
html[data-theme='light'] main .bg-gray-700\/50 {
  background-color: rgba(203, 213, 225, 0.65) !important;
}

html[data-theme='light'] main .bg-gray-900,
html[data-theme='light'] main .bg-gray-900\/60,
html[data-theme='light'] main .bg-gray-900\/50,
html[data-theme='light'] main .bg-gray-900\/40 {
  background-color: rgba(241, 245, 249, 0.9) !important;
}

html[data-theme='light'] main .to-gray-900\/60 {
  --tw-gradient-to: rgb(226 232 240 / 0.88) var(--tw-gradient-to-position) !important;
}

html[data-theme='light'] main .from-indigo-900\/40 {
  --tw-gradient-from: rgb(224 231 255 / 0.92) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme='light'] main .from-amber-900\/30 {
  --tw-gradient-from: rgb(254 243 199 / 0.9) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-theme='light'] main .border-indigo-700\/40 {
  border-color: rgba(99, 102, 241, 0.4) !important;
}

html[data-theme='light'] main .border-amber-700\/40 {
  border-color: rgba(217, 119, 6, 0.4) !important;
}

html[data-theme='light'] main .hover\:bg-slate-800:hover,
html[data-theme='light'] main .hover\:bg-slate-700:hover,
html[data-theme='light'] main .hover\:bg-slate-700\/80:hover,
html[data-theme='light'] main .hover\:bg-slate-700\/60:hover,
html[data-theme='light'] main .hover\:bg-slate-600:hover {
  background-color: rgba(191, 219, 254, 0.55) !important;
}

html[data-theme='light'] main .hover\:text-blue-300:hover {
  color: #1d4ed8 !important;
}

html[data-theme='light'] main .hover\:text-slate-200:hover,
html[data-theme='light'] main .hover\:text-white:hover {
  color: #0f172a !important;
}

/* Light-mode alert/instruction palettes (used heavily in auth + events pages). */
html[data-theme='light'] main .bg-amber-500\/5 {
  background-color: rgba(254, 243, 199, 0.78) !important;
}

html[data-theme='light'] main .bg-amber-500\/10 {
  background-color: rgba(254, 243, 199, 0.92) !important;
}

html[data-theme='light'] main .bg-amber-500\/15,
html[data-theme='light'] main .bg-amber-500\/20 {
  background-color: rgba(254, 243, 199, 0.98) !important;
}

html[data-theme='light'] main .bg-rose-500\/10 {
  background-color: rgba(255, 228, 230, 0.92) !important;
}

html[data-theme='light'] main .bg-rose-500\/15,
html[data-theme='light'] main .bg-rose-500\/20 {
  background-color: rgba(255, 228, 230, 0.98) !important;
}

html[data-theme='light'] main .bg-emerald-500\/10 {
  background-color: rgba(220, 252, 231, 0.92) !important;
}

html[data-theme='light'] main .bg-emerald-500\/5 {
  background-color: rgba(220, 252, 231, 0.78) !important;
}

html[data-theme='light'] main .bg-blue-500\/10,
html[data-theme='light'] main .bg-indigo-500\/10,
html[data-theme='light'] main .bg-cyan-500\/10 {
  background-color: rgba(219, 234, 254, 0.9) !important;
}

html[data-theme='light'] main .bg-indigo-500\/15,
html[data-theme='light'] main .bg-indigo-500\/20,
html[data-theme='light'] main .bg-cyan-500\/15,
html[data-theme='light'] main .bg-sky-500\/10,
html[data-theme='light'] main .bg-sky-500\/15,
html[data-theme='light'] main .bg-sky-500\/20 {
  background-color: rgba(224, 242, 254, 0.92) !important;
}

html[data-theme='light'] main .bg-fuchsia-500\/10,
html[data-theme='light'] main .bg-fuchsia-500\/15,
html[data-theme='light'] main .bg-fuchsia-500\/20,
html[data-theme='light'] main .bg-violet-500\/10,
html[data-theme='light'] main .bg-violet-500\/15,
html[data-theme='light'] main .bg-violet-500\/20 {
  background-color: rgba(245, 243, 255, 0.94) !important;
}

html[data-theme='light'] main .bg-rose-950\/20 {
  background-color: rgba(255, 241, 242, 0.94) !important;
}

html[data-theme='light'] main .border-amber-400\/30,
html[data-theme='light'] main .border-amber-400\/40,
html[data-theme='light'] main .border-amber-400\/50,
html[data-theme='light'] main .border-amber-400\/20 {
  border-color: rgba(217, 119, 6, 0.45) !important;
}

html[data-theme='light'] main .border-rose-400\/30,
html[data-theme='light'] main .border-rose-400\/40 {
  border-color: rgba(225, 29, 72, 0.4) !important;
}

html[data-theme='light'] main .border-emerald-400\/30,
html[data-theme='light'] main .border-emerald-400\/40 {
  border-color: rgba(5, 150, 105, 0.4) !important;
}

html[data-theme='light'] main .border-blue-400\/40,
html[data-theme='light'] main .border-indigo-400\/40,
html[data-theme='light'] main .border-cyan-400\/40,
html[data-theme='light'] main .border-indigo-400\/60 {
  border-color: rgba(37, 99, 235, 0.4) !important;
}

html[data-theme='light'] main .border-sky-400\/30,
html[data-theme='light'] main .border-sky-400\/40 {
  border-color: rgba(2, 132, 199, 0.4) !important;
}

html[data-theme='light'] main .border-fuchsia-400\/30,
html[data-theme='light'] main .border-fuchsia-400\/40,
html[data-theme='light'] main .border-violet-400\/30,
html[data-theme='light'] main .border-violet-400\/40 {
  border-color: rgba(147, 51, 234, 0.38) !important;
}

html[data-theme='light'] main .border-rose-500\/30,
html[data-theme='light'] main .border-rose-500\/40 {
  border-color: rgba(225, 29, 72, 0.45) !important;
}

html[data-theme='light'] main .border-emerald-500\/40,
html[data-theme='light'] main .border-emerald-500\/60 {
  border-color: rgba(5, 150, 105, 0.45) !important;
}

/* Make flash/banner text readable on light surfaces. */
html[data-theme='light'] main .text-amber-50,
html[data-theme='light'] main .text-amber-100,
html[data-theme='light'] main .text-amber-200,
html[data-theme='light'] main .text-amber-300,
html[data-theme='light'] main .text-amber-200\/80 {
  color: #78350f !important;
}

html[data-theme='light'] main .text-rose-100,
html[data-theme='light'] main .text-rose-200,
html[data-theme='light'] main .text-rose-300,
html[data-theme='light'] main .text-rose-200\/80,
html[data-theme='light'] main .text-rose-200\/60 {
  color: #9f1239 !important;
}

html[data-theme='light'] main .text-emerald-100,
html[data-theme='light'] main .text-emerald-200,
html[data-theme='light'] main .text-emerald-300 {
  color: #065f46 !important;
}

html[data-theme='light'] main .text-emerald-300\/60 {
  color: #047857 !important;
}

html[data-theme='light'] main .text-blue-100,
html[data-theme='light'] main .text-blue-200,
html[data-theme='light'] main .text-blue-300,
html[data-theme='light'] main .text-blue-400 {
  color: #1e40af !important;
}

html[data-theme='light'] main .text-indigo-100,
html[data-theme='light'] main .text-indigo-200,
html[data-theme='light'] main .text-indigo-300 {
  color: #3730a3 !important;
}

html[data-theme='light'] main .text-cyan-100,
html[data-theme='light'] main .text-cyan-200,
html[data-theme='light'] main .text-cyan-300 {
  color: #155e75 !important;
}

html[data-theme='light'] main .text-orange-200 {
  color: #9a3412 !important;
}

html[data-theme='light'] main .text-sky-100,
html[data-theme='light'] main .text-sky-200,
html[data-theme='light'] main .text-sky-300 {
  color: #0c4a6e !important;
}

html[data-theme='light'] main .text-fuchsia-100,
html[data-theme='light'] main .text-fuchsia-200,
html[data-theme='light'] main .text-fuchsia-300,
html[data-theme='light'] main .text-violet-100,
html[data-theme='light'] main .text-violet-200,
html[data-theme='light'] main .text-violet-300 {
  color: #6b21a8 !important;
}

/* CTA/link accents that were too faint against light cards. */
html[data-theme='light'] main a.text-blue-400,
html[data-theme='light'] main .text-blue-400 {
  color: #1d4ed8 !important;
}

html[data-theme='light'] main a.text-indigo-300,
html[data-theme='light'] main .text-indigo-300 {
  color: #4338ca !important;
}

html[data-theme='light'] main a.text-indigo-400,
html[data-theme='light'] main .text-indigo-400 {
  color: #3730a3 !important;
}

html[data-theme='light'] main a.text-fuchsia-300,
html[data-theme='light'] main .text-fuchsia-300 {
  color: #7e22ce !important;
}

html[data-theme='light'] main .text-pink-300 {
  color: #be185d !important;
}

html[data-theme='light'] main .text-teal-300 {
  color: #0f766e !important;
}

html[data-theme='light'] main .text-purple-300 {
  color: #7e22ce !important;
}

html[data-theme='light'] main a.text-sky-300,
html[data-theme='light'] main .text-sky-300 {
  color: #0369a1 !important;
}

html[data-theme='light'] main a.text-amber-300,
html[data-theme='light'] main .text-amber-300 {
  color: #92400e !important;
}

/* Keep the dark CTA pills readable if they appear on light cards. */
html[data-theme='light'] main .hover\:bg-slate-700\/50:hover {
  background-color: rgba(148, 163, 184, 0.4) !important;
}

html[data-theme='light'] main .hover\:text-indigo-200:hover {
  color: #312e81 !important;
}

html[data-theme='light'] main .hover\:text-fuchsia-200:hover {
  color: #6b21a8 !important;
}

html[data-theme='light'] main .hover\:text-sky-200:hover {
  color: #075985 !important;
}

html[data-theme='light'] main .hover\:text-emerald-200:hover {
  color: #065f46 !important;
}

html[data-theme='light'] main .hover\:text-rose-200:hover {
  color: #9f1239 !important;
}

/* Dashboard table headers: force stronger contrast in light mode. */
html[data-theme='light'] main .dashboard-table thead,
html[data-theme='light'] main .dashboard-table thead tr,
html[data-theme='light'] main .dashboard-table thead th {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme='light'] main .dashboard-table thead {
  background-color: rgba(203, 213, 225, 0.92) !important;
}

/* Flights details table header: keep strong contrast in light mode. */
html[data-theme='light'] main .flights-details-head {
  background-color: rgba(203, 213, 225, 0.96) !important;
}

html[data-theme='light'] main .flights-details-head,
html[data-theme='light'] main .flights-details-head tr,
html[data-theme='light'] main .flights-details-head th {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Business reports: selected window chip and active API-key name contrast. */
html[data-theme='light'] main .reports-window-chip {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

html[data-theme='light'] main .reports-key-name {
  color: #0f172a !important;
}

html[data-theme='light'] main .reports-key-row-active .reports-key-name {
  color: #065f46 !important;
  font-weight: 700 !important;
}

/* Landing page "Five rails..." cards: give each card a light-theme tint. */
html[data-theme='light'] main .rail-card {
  border-color: rgba(148, 163, 184, 0.5) !important;
}

html[data-theme='light'] main .rail-card-indigo {
  background-image: linear-gradient(145deg, rgba(224, 231, 255, 0.92), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(99, 102, 241, 0.38) !important;
}

html[data-theme='light'] main .rail-card-pink {
  background-image: linear-gradient(145deg, rgba(252, 231, 243, 0.9), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
}

html[data-theme='light'] main .rail-card-teal {
  background-image: linear-gradient(145deg, rgba(204, 251, 241, 0.9), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(13, 148, 136, 0.34) !important;
}

html[data-theme='light'] main .rail-card-amber {
  background-image: linear-gradient(145deg, rgba(254, 243, 199, 0.92), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}

html[data-theme='light'] main .rail-card-purple {
  background-image: linear-gradient(145deg, rgba(243, 232, 255, 0.9), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(147, 51, 234, 0.34) !important;
}

html[data-theme='light'] main .rail-card-blue {
  background-image: linear-gradient(145deg, rgba(219, 234, 254, 0.9), rgba(248, 250, 252, 0.96)) !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
}

/* Landing rails cards: keep title/copy strong in both themes. */
main .rail-card .rail-card-title {
  letter-spacing: 0.01em;
}

main .rail-card .rail-card-copy {
  color: #cbd5e1;
}

main .rail-card .rail-card-title-indigo {
  color: #a5b4fc;
}

main .rail-card .rail-card-title-pink {
  color: #f9a8d4;
}

main .rail-card .rail-card-title-teal {
  color: #5eead4;
}

main .rail-card .rail-card-title-amber {
  color: #fcd34d;
}

main .rail-card .rail-card-title-purple {
  color: #d8b4fe;
}

main .rail-card .rail-card-title-blue {
  color: #93c5fd;
}

html[data-theme='light'] main .rail-card .rail-card-copy {
  color: #334155;
}

html[data-theme='light'] main .rail-card .rail-card-title-indigo {
  color: #3730a3;
}

html[data-theme='light'] main .rail-card .rail-card-title-pink {
  color: #be185d;
}

html[data-theme='light'] main .rail-card .rail-card-title-teal {
  color: #0f766e;
}

html[data-theme='light'] main .rail-card .rail-card-title-amber {
  color: #92400e;
}

html[data-theme='light'] main .rail-card .rail-card-title-purple {
  color: #7e22ce;
}

html[data-theme='light'] main .rail-card .rail-card-title-blue {
  color: #1d4ed8;
}

/* Keep CTA/button text-white untouched; only content typography is remapped. */
html[data-theme='light'] main h1.text-white,
html[data-theme='light'] main h2.text-white,
html[data-theme='light'] main h3.text-white,
html[data-theme='light'] main h4.text-white,
html[data-theme='light'] main p.text-white,
html[data-theme='light'] main span.text-white,
html[data-theme='light'] main label.text-white,
html[data-theme='light'] main th.text-white,
html[data-theme='light'] main td.text-white {
  color: #0f172a !important;
}

/* Inputs/selects using text-white in dark mode should switch in light mode. */
html[data-theme='light'] main input.text-white,
html[data-theme='light'] main select.text-white,
html[data-theme='light'] main textarea.text-white {
  color: #0f172a !important;
}

/* Slate pill buttons in settings/business should not keep white text on light slate backgrounds. */
html[data-theme='light'] main a.bg-slate-700.text-white,
html[data-theme='light'] main a.bg-slate-700\/80.text-white,
html[data-theme='light'] main a.bg-slate-800.text-white,
html[data-theme='light'] main a.bg-slate-800\/70.text-white,
html[data-theme='light'] main button.bg-slate-700.text-white,
html[data-theme='light'] main button.bg-slate-700\/80.text-white,
html[data-theme='light'] main button.bg-slate-800.text-white,
html[data-theme='light'] main button.bg-slate-800\/70.text-white {
  color: #0f172a !important;
}

/* Card shadows: softer on light surfaces. */
html[data-theme='light'] main .shadow-black\/30,
html[data-theme='light'] main .shadow-black\/20 {
  --tw-shadow-color: rgba(15, 23, 42, 0.12) !important;
}

/* Theme toggle stays dark to match dark navbar in both modes. */
html[data-theme='light'] .theme-toggle-btn {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.65) !important;
  color: #e2e8f0 !important;
}

/* Platform banner sits above <main>; add dedicated light-theme contrast fixes. */
html[data-theme='light'] .platform-alert-banner {
  backdrop-filter: saturate(120%);
}

html[data-theme='light'] .platform-alert-banner.text-sky-100 {
  color: #0c4a6e !important;
  background-color: rgba(224, 242, 254, 0.94) !important;
  border-color: rgba(2, 132, 199, 0.42) !important;
}

html[data-theme='light'] .platform-alert-banner.text-amber-100 {
  color: #78350f !important;
  background-color: rgba(254, 243, 199, 0.94) !important;
  border-color: rgba(217, 119, 6, 0.42) !important;
}

html[data-theme='light'] .platform-alert-banner.text-rose-100 {
  color: #9f1239 !important;
  background-color: rgba(255, 228, 230, 0.95) !important;
  border-color: rgba(225, 29, 72, 0.42) !important;
}

html[data-theme='light'] .platform-alert-banner.text-sky-100 .platform-alert-banner-icon {
  color: #0c4a6e !important;
  background-color: rgba(14, 165, 233, 0.22) !important;
}

html[data-theme='light'] .platform-alert-banner.text-amber-100 .platform-alert-banner-icon {
  color: #78350f !important;
  background-color: rgba(245, 158, 11, 0.24) !important;
}

html[data-theme='light'] .platform-alert-banner.text-rose-100 .platform-alert-banner-icon {
  color: #9f1239 !important;
  background-color: rgba(244, 63, 94, 0.22) !important;
}