/* ═══════════════════════════════════════════
   NEXUS DESIGN SYSTEM — Apple-Inspired
   ═══════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Background & Surface ── */
  --bg: #f5f5f7;
  --bg-secondary: #ffffff;
  --card: #ffffff;
  --card-hover: #fafafa;
  --surface-elevated: rgba(255, 255, 255, 0.72);

  /* ── Typography ── */
  --text: #1d1d1f;
  --text-secondary: #424245;
  --muted: #86868b;
  --text-tertiary: #aeaeb2;

  /* ── Borders ── */
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --separator: rgba(0, 0, 0, 0.04);

  /* ── Accent Colors (Apple Palette) ── */
  --primary: #007AFF;
  --primary-light: rgba(0, 122, 255, 0.08);
  --primary-medium: rgba(0, 122, 255, 0.15);
  --danger: #FF3B30;
  --success: #34C759;
  --warning: #FF9500;
  --purple: #AF52DE;
  --pink: #FF2D55;
  --teal: #5AC8FA;
  --indigo: #5856D6;

  /* ── Shadows (Apple Multi-Layer) ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);

  /* ── Legacy compat ── */
  --ring: rgba(0, 122, 255, 0.25);

  /* ── Border Radius (Apple) ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* ── Typography ── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  /* ── Spacing Scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Transitions ── */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Nexus compat aliases ── */
  --nexus-bg: var(--bg);
  --nexus-card: var(--card);
  --nexus-text: var(--text);
  --nexus-muted: var(--muted);
  --nexus-border: var(--border);
  --nexus-accent: var(--primary);
  --nexus-shadow: var(--shadow);
}

/* ═══════════════════════════════════════════
   NEXUS GLOBAL STYLES — Apple-Inspired
   ═══════════════════════════════════════════ */

:root {
  color-scheme: light;
}

*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text);
}

/* ── Scrollbar (Minimal Apple Style) ── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100px;
}

/* ── Focus Ring (Apple Style) ── */

*:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Smooth Transitions on Interactive Elements ── */

button, a, input, select, textarea {
  transition: all var(--duration-fast) var(--ease-apple);
}

/* ── Selection ── */

::selection {
  background: var(--primary-medium);
  color: var(--text);
}

/* ── Input Styles (Apple) ── */

/* Only style inputs that are NOT inside compact utility classes or Leaflet */

input[type="text"]:not(.w-12):not(.leaflet-container *),
input[type="email"]:not(.w-12):not(.leaflet-container *),
input[type="password"]:not(.w-12):not(.leaflet-container *),
input[type="search"]:not(.w-12):not(.leaflet-container *),
input[type="number"]:not(.w-12):not(.leaflet-container *),
input[type="tel"]:not(.w-12):not(.leaflet-container *),
input[type="url"]:not(.w-12):not(.leaflet-container *),
select:not(.leaflet-container *),
textarea:not(.leaflet-container *) {
  font-family: var(--font-sans);
  font-size: 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  padding: 10px 14px;
  transition: border-color var(--duration-fast) var(--ease-apple),
              box-shadow var(--duration-fast) var(--ease-apple);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

input::placeholder {
  color: var(--text-tertiary);
}

/* ── No Scrollbar Utility ── */

.no-scrollbar::-webkit-scrollbar { display: none; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Animations ── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-apple) both;
}

.animate-slide-up {
  animation: slideUp var(--duration-slow) var(--ease-apple) both;
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-apple) both;
}

/* Staggered children animation */

.stagger-children > * {
  animation: fadeIn var(--duration-normal) var(--ease-apple) both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }

.stagger-children > *:nth-child(2) { animation-delay: 50ms; }

.stagger-children > *:nth-child(3) { animation-delay: 100ms; }

.stagger-children > *:nth-child(4) { animation-delay: 150ms; }

.stagger-children > *:nth-child(5) { animation-delay: 200ms; }

.stagger-children > *:nth-child(6) { animation-delay: 250ms; }

.stagger-children > *:nth-child(7) { animation-delay: 300ms; }

.stagger-children > *:nth-child(8) { animation-delay: 350ms; }

/* ── Apple Card Component ── */

.apple-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--ease-apple),
              transform var(--duration-normal) var(--ease-apple);
}

.apple-card:hover {
  box-shadow: var(--shadow-md);
}

.apple-card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Apple Button Styles ── */

.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-apple);
  cursor: pointer;
  border: none;
}

.apple-btn-primary {
  background: var(--primary);
  color: #fff;
}

.apple-btn-primary:hover {
  background: #0066d6;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.apple-btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.apple-btn-secondary:hover {
  background: var(--card-hover);
  border-color: rgba(0, 0, 0, 0.18);
}

/* ── Glass Effect ── */

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
}

/* ── Tabular Numbers ── */

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════
   NEXUS LIGHT THEME — Minimal Overrides
   Core components already use CSS vars.
   Only override accent colors to match
   the Apple palette.
   ══════════════════════════════════════ */

/* Map Apple accent colors to Tailwind blue */

.bg-blue-600,
.bg-blue-600\/90,
.bg-blue-700 {
  background-color: var(--primary) !important;
}

.bg-red-600,
.bg-red-700 {
  background-color: var(--danger) !important;
}

/* Utility class for on-accent white text */

.text-on-accent {
  color: #fff !important;
}

/* ── Print Styles ── */

@media print {
  @page { margin: 0; size: auto; }
  body {
    background-color: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .print\:hidden, button, input, select, nav, header, .sidebar,
  .leaflet-control-zoom, .leaflet-control-attribution {
    display: none !important;
  }
  .print\:block { display: block !important; }
  .print\:shadow-none { box-shadow: none !important; }
  #root { width: 100%; margin: 0; padding: 20px; }
}