@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* /// theme-ui */

  --color-background: var(--background);
  --color-primary-button: var(--primaryButtonColor);
  --color-primary-button-dark: var(--primaryButtonColorDark);
  --color-secondary-button: var(--secondaryButtonColor);
  --color-border: var(--borderColor);
  --color-primary-text: var(--primaryTextColor);
  --color-secondary-text: var(--secondaryTextColor);
  --color-highlight-text: var(--highlightTextColor);
  --color-offset-text: var(--offsetTextColor);
  --color-primary-border: var(--border);
  --color-expertise-box-bg: var(--expertise-box-bg);
  --color-log-nav-bg: var(--log-nav-bg);
  --color-blue-light-bg: var(--blue-light-bg);
  --color-progress-gray: var(--progress-gray);
  --color-hello-text: var(--hello-text);
  --color-light-gray: var(--light-gray);
  --color-gray-one: var(--gray-one);
  --color-upload-bg: var(--upload-bg);
  --color-danger-one: var(--danger-one);
  --color-danger-seven: var(--danger-seven);
  --color-sidebar-bg: var(--sidebar-bg);
  --color-sky-one: var(--sky-one);
  --color-cancel-button: var(--cancel-button);
  --color-dark-button: var(--darkButton);
  --color-light-box: var(--light-box);

  /* font */

  --font-inter: var(--font-inter);
  --font-manrope: var(--font-manrope);
  --font-bricolage: var(--font-bricolage);
  --font-poppins: var(--font-poppins);
}

:root {
  /* box color */
  --radius: 0.625rem;
  --primary-background: #ffffff;
  --background: #0062ff;
  --border: #e3e3e3;
  --darkButton: #161616;
  --expertise-box-bg: #f3f5f7;
  --primaryButtonColor: #000549;
  --primaryButtonColorDark: #000549;
  --secondaryButtonColor: #e3e3e3;
  --log-nav-bg: #f2f1f6;
  --blue-light-bg: #0062ff40;
  --progress-gray: #474747;
  --light-box: #F3F5F780;
;

  --bg-background-download: #019138;


  --gray-one: #707070;
  --hello-text: #252525;
  --upload-bg: #f8f8f8;
  --danger-one: #ff0000;
  --danger-seven: #ffd9d9;
  --sidebar-bg: #282828;
  --sky-one: #007bf7;
  --cancel-button: #ffffff; /* border color */
  --borderColor: #e3e3e3;
  /* Text colors */
  --primaryTextColor: #0062ff;
  --secondaryTextColor: #333333;
  --highlightTextColor: #333333;
  --offsetTextColor: #0062ff1a;

  /* my theam end */
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: #0b1220;
  --foreground: #e6eef8;
  --card: #0f1724;
  --card-foreground: #e6eef8;
  --popover: #0f1724;
  --popover-foreground: #e6eef8;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #1f2937;
  --secondary-foreground: #e6eef8;
  --muted: #0b1220;
  --muted-foreground: #9ca3af;
  --accent: #2563eb;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.06);
  --ring: rgba(37, 99, 235, 0.6);
  --chart-1: #60a5fa;
  --chart-2: #34d399;
  --chart-3: #f472b6;
  --chart-4: #f59e0b;
  --chart-5: #a78bfa;
  --sidebar: #0b1220;
  --sidebar-foreground: #e6eef8;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2563eb;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-ring: rgba(37, 99, 235, 0.4);

  /* Dark mode overrides for custom theme variables */
  --primary-background: #09090b;
  --expertise-box-bg: #0b1220;
  --borderColor: #27272a;
  --border: #27272a;
  --log-nav-bg: #0f0f10;
  --upload-bg: #0f0f10;
  --hello-text: #f4f4f5;
  --progress-gray: #a1a1aa;
  --light-gray: #3f3f46;
  --gray-one: #a1a1aa;
  --secondaryTextColor: #e4e4e7;
  --highlightTextColor: #ffffff;
  --primaryTextColor: #3b82f6;
  --primaryButtonColor: #1f2937;
  --primaryButtonColorDark: #e6eef8;
  --secondaryButtonColor: #27272a;
  --blue-light-bg: rgba(59, 130, 246, 0.15);
  --sky-one: #3b82f6;
}

/*
  Global dark-mode utility overrides
  - Covers common Tailwind utility classes used across components that lack explicit dark: variants
  - Uses CSS variables defined in the `.dark` block above for a soothing, high-contrast-but-soft palette
  - Scoped under the `.dark` root so it only applies when dark mode is active
*/
.dark .bg-white {
  background-color: var(--primary-background) !important;
}
.dark .bg-gray-50 {
  background-color: var(--upload-bg) !important;
}
.dark .bg-gray-100 {
  background-color: var(--card) !important;
}
.dark .bg-gray-200 {
  background-color: rgba(255, 255, 255, 0.02) !important;
}
.dark .text-black,
.dark [class*="text-black"] {
  color: var(--foreground) !important;
}
.dark .text-gray-400,
.dark .text-gray-500 {
  color: var(--muted-foreground) !important;
}
.dark [class*="border-[#e3e3e3]"] {
  border-color: var(--border) !important;
}
.dark .border-border {
  border-color: var(--border) !important;
}
.dark [class*="bg-[#E6F3FF]"] {
  background-color: rgba(59, 130, 246, 0.06) !important;
}
.dark [class*="hover:bg-gray-100"]:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.dark [class*="hover:bg-gray-50"]:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

@layer base {
  .leaflet-container {
    @apply !bg-card !font-[inherit];
  }
  .leaflet-container a {
    @apply !text-inherit;
  }
  .leaflet-div-icon {
    @apply !border-none !bg-transparent;
  }
  .leaflet-popup-content-wrapper,
  .leaflet-popup-content,
  .leaflet-popup-content p {
    @apply ![all:unset];
  }
  .leaflet-popup {
    @apply !animate-none;
  }
  .leaflet-popup-close-button {
    @apply ring-offset-background focus:ring-ring bg-secondary rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden;
  }
  .leaflet-tooltip,
  .leaflet-draw-tooltip {
    @apply !bg-foreground !text-background !animate-none !rounded-md !border-none !p-0 !px-3 !py-1.5 !shadow-none;
  }
  .leaflet-draw-tooltip:before {
    @apply bg-foreground !top-1/2 !right-0.5 size-2.5 translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] !border-none;
  }
  .leaflet-error-draw-tooltip {
    @apply !bg-destructive !text-white;
  }
  .leaflet-error-draw-tooltip:before {
    @apply bg-destructive;
  }
  .leaflet-draw-tooltip-subtext {
    @apply !text-background;
  }
  .leaflet-popup-tip-container,
  .leaflet-tooltip-top:before,
  .leaflet-tooltip-bottom:before,
  .leaflet-tooltip-left:before,
  .leaflet-tooltip-right:before {
    @apply hidden;
  }
  .leaflet-control-attribution {
    @apply !bg-muted rounded-md !px-[4px] !py-[2px] text-[10px] !leading-none !text-inherit;
  }
  .leaflet-draw-guide-dash {
    @apply rounded-full;
  }
  .leaflet-edit-marker-selected {
    @apply !border-transparent !bg-transparent;
  }
  .marker-cluster div {
    @apply font-[inherit];
  }
  .maplibregl-popup-content {
    @apply rounded-none! bg-transparent! p-0! shadow-none!;
  }
  .maplibregl-popup-tip {
    @apply hidden!;
  }
}

/* toaster colors */
/* Success */
[data-sonner-toast][data-type="success"] {
  color: #22c55e; /* green */
}

/* Error */
[data-sonner-toast][data-type="error"] {
  color: #ef4444; /* red */
}

/* Warning */
[data-sonner-toast][data-type="warning"] {
  color: #f59e0b; /* amber */
}

/* Info */
[data-sonner-toast][data-type="info"] {
  color: #3b82f6; /* blue */
}