@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.modal-wrapper{
  background-color: #00000063;
}

.modal-wrapper button.text-gray-500.hover\:text-gray-700,
button, a{
  cursor: pointer;
}

input:focus, textarea:focus, select:focus {
  box-shadow: none;
  outline-color: #2b7fff;
}

.sidebar-wrapper.open{
  display: block !important;
}

body.sidebar-open {
    position: relative;
}

body.sidebar-open::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00000063;
    z-index: 1;
}

.hamburger-bar{
  position: relative;
  z-index: 91;
}

body.sidebar-open svg.lucide.lucide-x.text-gray-800 {
    color: #ebedef;
    background: #101828;
    border-radius: 4px;
}

@media (max-width: 767px) {
  .sidebar-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 50;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
  }

  .sidebar-wrapper.open {
    transform: translateX(0);
  }
}