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

@layer components {
  input {
    @apply block
      w-full
      px-4
      py-1.5
      text-base
      font-normal
      text-gray-700
     dark:text-white
      bg-white dark:bg-zinc-900
      dark:border-zinc-600
      bg-clip-padding
      border border-solid border-gray-300
      rounded-lg
      transition
      ease-in-out
      m-0
      focus:bg-white
      focus:dark:bg-zinc-800
      focus:border-blue-600
      focus:outline-none;
  }

  select {
    @apply block
      w-full
      px-3
      py-1.5
      text-base
      font-normal
      text-gray-700
      dark:text-white
      bg-white dark:bg-zinc-900
      dark:border-zinc-600
      bg-clip-padding bg-no-repeat
      border border-solid border-gray-300
      rounded-lg
      transition
      ease-in-out
      m-0
      focus:bg-white
      focus:dark:bg-zinc-800
      focus:border-blue-600
      focus:outline-none;
  }

  .external-link {
    @apply text-blue-600
      hover:text-blue-800
      active:text-blue-900
      dark:text-blue-400
      dark:hover:text-blue-300
      dark:active:text-blue-200
      cursor-pointer
      transition-all
      duration-200;
  }
}

:root {
  --popper-theme-background-color: #eee;
  --popper-theme-background-color-hover: #eee;
  --popper-theme-text-color: #000000;
  --popper-theme-border-radius: 6px;
  --popper-theme-padding: 15px;
  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --popper-theme-background-color: #333333;
    --popper-theme-background-color-hover: #333333;
    --popper-theme-text-color: #ffffff;
    --popper-theme-border-radius: 6px;
    --popper-theme-padding: 15px;
    --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
  }
}

.visible-in-print {
  display: none;
}

@media print {
  #app {
    color: black !important;
    margin: 0;
    zoom: 75%;
  }

  #app .single-event p {
    color: black !important;
  }

  .hidden-in-print {
    display: none;
  }
  .visible-in-print {
    display: inherit;
  }
}