/**
 * UberClone - Main Stylesheet
 * Modular, mobile-first, optimized CSS
 * @version 2.0.0
 */

/* Import Design System */
@import url('design-system.css');

/* Import Base Styles */
@import url('base.css');

/* Import Components */
@import url('components.css');

/* Import App-Specific Components */
@import url('app-components.css');

/* Import Dark Mode */
@import url('dark-mode.css');

/* Import Animations */
@import url('animations.css');

/* Import Responsive (Mobile-First Expert) */
@import url('responsive.css');

/* ===== LAYOUT ===== */
.main-content {
  min-height: calc(100vh - var(--navbar-height));
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .main-content {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .main-content {
    padding: var(--space-8);
  }
}

.page-header {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .page-header {
    margin-bottom: var(--space-8);
  }
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .page-title {
    font-size: var(--text-4xl);
  }
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-600);
}

@media (min-width: 768px) {
  .page-subtitle {
    font-size: var(--text-lg);
  }
}

/* ===== TWO-COLUMN LAYOUT ===== */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .two-column-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.main-column {
  order: 2;
}

.side-column {
  order: 1;
}

@media (min-width: 1024px) {
  .main-column {
    order: 1;
  }

  .side-column {
    order: 2;
  }
}

/* ===== LEAFLET MAP OVERRIDES ===== */
.leaflet-container {
  font-family: var(--font-primary);
  border-radius: var(--radius-xl);
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.leaflet-popup-tip {
  display: none;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: var(--text-lg) !important;
  border: none !important;
  transition: background-color var(--transition-fast) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--color-gray-100) !important;
}

/* ===== CUSTOM SCROLLBAR ===== */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-400) var(--color-gray-100);
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* ===== SAFE AREA (iOS notch support) ===== */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .navbar-container {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }

  .fab {
    bottom: max(var(--space-6), env(safe-area-inset-bottom));
    right: max(var(--space-6), env(safe-area-inset-right));
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  border-radius: var(--radius-base);
  z-index: var(--z-modal);
}

.skip-to-content:focus {
  top: var(--space-2);
  left: var(--space-2);
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  .fab,
  .map-controls,
  .btn,
  button {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .card {
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== COMPATIBILITY (Legacy) ===== */
/* Keep old variable names for backward compatibility */
:root {
  --primary-color: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --secondary-color: var(--color-secondary);
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --danger-color: var(--color-error);
  --info-color: var(--color-info);
  --light-gray: var(--color-gray-50);
  --medium-gray: var(--color-gray-300);
  --dark-gray: var(--color-gray-600);
  --text-dark: var(--color-gray-900);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
}