/*
 * Technician Portal Styles
 * CSS variables and styles for the technician mobile-first interface
 */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Body base styles using CSS variables */
body.tech-portal {
  background-color: var(--tech-bg-primary);
  color: var(--tech-text-primary);
}

/* Header background */
.tech-header {
  background-color: var(--tech-bg-primary);
}

/* Secondary background elements */
.tech-bg-secondary {
  background-color: var(--tech-bg-secondary);
}

/* Card background */
.tech-bg-card {
  background-color: var(--tech-bg-card);
  border: 1px solid var(--tech-border);
}

/* Text colors */
.tech-text-primary {
  color: var(--tech-text-primary);
}

.tech-text-secondary {
  color: var(--tech-text-secondary);
}

.tech-text-muted {
  color: var(--tech-text-muted);
}

/* Bottom navigation bar */
.tech-nav-bar {
  background-color: color-mix(in srgb, var(--tech-bg-primary) 95%, transparent);
  border-top: 1px solid var(--tech-border);
}

/* ===== DEFAULT/FALLBACK (dark theme) ===== */
:root {
  --tech-bg-primary: #18181b;
  --tech-bg-secondary: #27272a;
  --tech-bg-tertiary: #3f3f46;
  --tech-bg-card: rgba(39, 39, 42, 0.5);
  --tech-border: rgba(63, 63, 70, 0.5);
  --tech-text-primary: #ffffff;
  --tech-text-secondary: #a1a1aa;
  --tech-text-muted: #71717a;
  --tech-scrollbar-track: #27272a;
  --tech-scrollbar-thumb: #52525b;
}

/* ===== DARK THEME (explicit) ===== */
html.dark {
  --tech-bg-primary: #18181b;
  --tech-bg-secondary: #27272a;
  --tech-bg-tertiary: #3f3f46;
  --tech-bg-card: rgba(39, 39, 42, 0.5);
  --tech-border: rgba(63, 63, 70, 0.5);
  --tech-text-primary: #ffffff;
  --tech-text-secondary: #a1a1aa;
  --tech-text-muted: #71717a;
  --tech-scrollbar-track: #27272a;
  --tech-scrollbar-thumb: #52525b;
}

/* ===== LIGHT THEME ===== */
html.light {
  --tech-bg-primary: #f4f4f5;
  --tech-bg-secondary: #ffffff;
  --tech-bg-tertiary: #e4e4e7;
  --tech-bg-card: rgba(255, 255, 255, 0.8);
  --tech-border: rgba(228, 228, 231, 0.8);
  --tech-text-primary: #18181b;
  --tech-text-secondary: #52525b;
  --tech-text-muted: #71717a;
  --tech-scrollbar-track: #e4e4e7;
  --tech-scrollbar-thumb: #a1a1aa;
}

/* Safe areas for mobile devices */
.safe-top {
  height: env(safe-area-inset-top, 0);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Scrollbar styling for technician portal */
.tech-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.tech-scrollbar::-webkit-scrollbar-track {
  background: var(--tech-scrollbar-track);
  border-radius: 3px;
}

.tech-scrollbar::-webkit-scrollbar-thumb {
  background: var(--tech-scrollbar-thumb);
  border-radius: 3px;
}

.tech-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--tech-text-muted);
}

/* Touch feedback for list items */
.touch-list-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
}

/* Touch feedback effect */
.touch-feedback {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.touch-feedback:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Active nav item styles */
.nav-item-active {
  color: #f97316;
}

/* Better mobile scroll behavior */
@supports (-webkit-overflow-scrolling: touch) {
  main {
    -webkit-overflow-scrolling: touch;
  }
}

/* Custom scrollbar for main content */
main::-webkit-scrollbar {
  width: 4px;
}

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

main::-webkit-scrollbar-thumb {
  background: var(--tech-scrollbar-thumb);
  border-radius: 2px;
}

main::-webkit-scrollbar-thumb:hover {
  background: var(--tech-text-muted);
}

/* Firefox scrollbar */
main {
  scrollbar-width: thin;
  scrollbar-color: var(--tech-scrollbar-thumb) transparent;
}

/* Hide scrollbar for schedule horizontal scroll */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Mapbox/Leaflet styling overrides */
.mapboxgl-popup-content,
.leaflet-popup-content-wrapper {
  background: var(--tech-bg-secondary) !important;
  color: var(--tech-text-primary) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.mapboxgl-popup-tip,
.leaflet-popup-tip {
  border-top-color: var(--tech-bg-secondary) !important;
}

.mapboxgl-popup-close-button,
.leaflet-popup-close-button {
  color: var(--tech-text-secondary) !important;
  font-size: 20px !important;
  padding: 8px !important;
}

.mapboxgl-popup-close-button:hover,
.leaflet-popup-close-button:hover {
  color: var(--tech-text-primary) !important;
  background: transparent;
  border: none;
}

/* Leaflet attribution styling for dark mode */
html.dark .leaflet-control-attribution {
  background-color: rgba(24, 24, 27, 0.8) !important;
  color: var(--tech-text-muted) !important;
}

html.dark .leaflet-control-attribution a {
  color: var(--tech-text-secondary) !important;
}

/* Leaflet zoom controls for dark mode */
html.dark .leaflet-control-zoom a {
  background-color: var(--tech-bg-secondary) !important;
  color: var(--tech-text-primary) !important;
  border-color: var(--tech-border) !important;
}

html.dark .leaflet-control-zoom a:hover {
  background-color: var(--tech-bg-tertiary) !important;
}

/* Leaflet attribution styling for light mode */
html.light .leaflet-control-attribution {
  background-color: rgba(244, 244, 245, 0.9) !important;
  color: var(--tech-text-muted) !important;
}

html.light .leaflet-control-attribution a {
  color: var(--tech-text-secondary) !important;
}

/* Leaflet zoom controls for light mode */
html.light .leaflet-control-zoom a {
  background-color: var(--tech-bg-secondary) !important;
  color: var(--tech-text-primary) !important;
  border-color: var(--tech-border) !important;
}

html.light .leaflet-control-zoom a:hover {
  background-color: var(--tech-bg-tertiary) !important;
}

/* PWA Install Banner - ensure readability in both themes */
.pwa-install-banner {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: white;
}

.pwa-install-banner .install-text-primary {
  color: white;
  font-weight: 600;
}

.pwa-install-banner .install-text-secondary {
  color: rgba(255, 255, 255, 0.9);
}