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

/* Import Leaflet CSS */
@import "~leaflet/dist/leaflet.css";

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: auto;
  height: 100%;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* * google map info window */
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after,
.gm-style-iw-tc::after {
  background: #f2f5f3 !important;
}

.gm-ui-hover-effect {
  margin: 10px !important;
}

/* * marker bounce loader */
.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin: 20px auto;
  box-sizing: border-box;
  position: relative;
}
.loader::after {
  content: "";
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  left: 0;
  bottom: 0;
  position: absolute;
  border-radius: 50% 50% 0;
  border: 15px solid #fff;
  transform: rotate(45deg) translate(0, 0);
  box-sizing: border-box;
  animation: animMarker 0.4s ease-in-out infinite alternate;
}
.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150%;
  width: 24px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  animation: animShadow 0.4s ease-in-out infinite alternate;
}

@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

/* * circle ring loader */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  margin: 2px;
  border: 2px solid #478c83;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #478c83 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* error custom style */
.ant-form-item-explain-error {
  font-size: 12px !important;
  margin-left: 3px;
  margin-top: 1px;
}

.custom-select .ant-select-selector {
  opacity: 0;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.custom-label {
  transform: translate(0px, 30px);
  background-color: white;
  padding: 6px;
  border-radius: 6px;
}

.marker-label {
  background-color: green;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 6px 10px; /* Optional: adds space around the text for better appearance */
  border-radius: 6px;
}

/* Non Active Vehicles Modal Styles */
.non-active-vehicles-modal .ant-modal-content {
  border-radius: 12px;
}

.non-active-vehicles-modal .ant-modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 24px 16px;
}

.non-active-vehicles-modal .ant-modal-body {
  padding: 0 24px 24px;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-tab {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-right: 8px;
  padding: 8px 16px;
  color: #6c757d;
  font-weight: 500;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-tab-active {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-tab:hover {
  color: #10b981;
  border-color: #10b981;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-tab-active:hover {
  color: white;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-content-holder {
  padding-top: 16px;
}

.non-active-vehicles-modal .custom-tabs .ant-tabs-ink-bar {
  display: none;
}

.non-active-vehicles-modal .custom-table .ant-table-thead > tr > th {
  background: #f8f9fa;
  color: #495057;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
  padding: 12px 16px;
}

.non-active-vehicles-modal .custom-table .ant-table-tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.non-active-vehicles-modal .custom-table .ant-table-tbody > tr:hover > td {
  background: #f8f9fa;
}

.non-active-vehicles-modal .custom-table .ant-pagination {
  margin-top: 16px;
  text-align: center;
}

/* Leaflet Map Styles */
.leaflet-container {
  font-family: inherit;
}

.vehicle-marker {
  background: transparent !important;
  border: none !important;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 0;
  line-height: 1.4;
}

.leaflet-popup-tip {
  box-shadow: none;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-control-zoom a {
  background-color: white !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  font-weight: bold !important;
}

.leaflet-control-zoom a:hover {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
}