@import url("/assets/shadcn-54bf718c.css");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 72.22% 50.59%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5% 64.9%;
  --radius: 0.5rem;
  --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%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 240 5% 64.9%
}

html {
  scroll-behavior: smooth
}

body {
  overscroll-behavior: none;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility
}



::-webkit-scrollbar {
  width: 5px
}

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

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 5px
}

* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent
}

.pagy-nav.pagination {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
  @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
  @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}


.animate-flash {
  animation: flash 1.5s ease-in-out;
}

@keyframes flash {
  0% { background-color: transparent; }
  25% { background-color: rgba(254, 240, 138, 0.8); }
  75% { background-color: rgba(254, 240, 138, 0.8); }
  100% { background-color: transparent; }
}

.hl-green {
  @apply bg-green-100 px-[1px] py-[2px] hover:cursor-pointer;
}

.hl-red {
  @apply bg-red-100 px-[1px] py-[2px] hover:cursor-pointer;
}

.hl-blue {
  @apply bg-blue-100 px-[1px] py-[2px] hover:cursor-pointer;
}

.hl-yellow {
  @apply bg-yellow-100 px-[1px] py-[2px] hover:cursor-pointer;
}

.hl-purple {
  @apply bg-purple-100 px-[1px] py-[2px] hover:cursor-pointer;
}

.ul-wavy {
  @apply underline underline-offset-4 decoration-wavy decoration-red-400 hover:cursor-pointer;
}

.ul-dashed {
  @apply underline underline-offset-4 decoration-dashed decoration-red-400 hover:cursor-pointer;
}

.ul-double {
  @apply underline underline-offset-4 decoration-double decoration-red-400 hover:cursor-pointer;
}

.ul-dotted {
  @apply underline underline-offset-4 decoration-dotted decoration-red-400 hover:cursor-pointer;
}

.ul-solid {
  @apply underline underline-offset-4 decoration-solid decoration-red-400 hover:cursor-pointer;
}

.ul-red-solid {
  @apply underline underline-offset-4 decoration-solid decoration-red-400 hover:cursor-pointer;
}

.ul-red-wavy {
  @apply underline underline-offset-4 decoration-wavy decoration-red-400 hover:cursor-pointer;
}

.ul-red-dotted {
  @apply underline underline-offset-4 decoration-dotted decoration-red-400 hover:cursor-pointer;
}

.ul-blue-solid {
  @apply underline underline-offset-4 decoration-solid decoration-blue-400 hover:cursor-pointer;
}

.ul-blue-wavy {
  @apply underline underline-offset-4 decoration-wavy decoration-blue-400 hover:cursor-pointer;
}

.ul-blue-dotted {
  @apply underline underline-offset-4 decoration-dotted decoration-blue-400 hover:cursor-pointer;
}

.ul-yellow-solid {
  @apply underline underline-offset-4 decoration-solid decoration-yellow-400 hover:cursor-pointer;
}

.ul-yellow-wavy {
  @apply underline underline-offset-4 decoration-wavy decoration-yellow-400 hover:cursor-pointer;
}

.ul-yellow-dotted {
  @apply underline underline-offset-4 decoration-dotted decoration-yellow-400 hover:cursor-pointer;
}