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

@layer utilities {

  p,
  li {
    @apply my-4;
  }

  a.nav-button {
    @apply  cursor-pointer px-5 py-2 rounded-lg border border-gray-300 hover:border-indigo-500 transition-colors duration-700;
  }

  .tr {
    @apply flex border-b pb-3 border-slate-100 dark:border-slate-700 text-neutral-700 dark:text-neutral-100;

    .td {
      @apply pl-4 pt-4 content-center;
    }

    .td:nth-child(1) {
      @apply flex-auto w-2 pl-0;
    }

    .td:nth-child(2) {
      @apply flex-auto w-28;
    }

    .td:nth-child(3) {
      @apply flex-auto w-64;
    }

    .td:nth-child(4) {
      @apply flex-auto w-36;
    }

    .td:nth-child(5) {
      @apply flex-auto w-24 flex justify-center;
    }
  }

  .tr:first-child {
    @apply dark:border-slate-600 font-bold;

    .td {
      @apply pt-0;
    }
  }

  .tr:last-child {
    @apply border-b-0;
  }

  .dropover, .dragged {
    @apply ring-2 ring-inset ring-indigo-500;
  }

  .dragged {
    @apply border-b-transparent;
  }

  select,
  input {
    @apply bg-neutral-100 dark:bg-neutral-700 h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-neutral-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700;
  }

  .accordion-title {
    @apply text-2xl flex items-center justify-between w-full p-5 font-medium border border-b-0 border-neutral-200 dark:focus:ring-slate-800 dark:border-slate-700 hover:bg-neutral-100 dark:hover:bg-neutral-700 gap-3;
  }

  .accordion-title:first-child {
    @apply rounded-t-xl;
  }

  .accordion-title:last-child,
  .accordion-body:last-child {
    @apply border-b rounded-b-xl;
  }

  .accordion-body {
    @apply p-5 border border-b-0 border-slate-200 dark:border-slate-700;
  }
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
}