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

@layer base {
    h1 { /* https://flowbite.com/docs/typography/headings/#heading-one-h1 */
        @apply text-5xl font-extrabold dark:text-white text-black;
    }
    h2 { /* https://flowbite.com/docs/typography/headings/#heading-two-h2 */
        @apply text-4xl font-bold dark:text-white text-black;
    }
    h3 { /* https://flowbite.com/docs/typography/headings/#heading-three-h3 */
        @apply text-3xl font-bold dark:text-white text-black;
    }
    h4 { /* https://flowbite.com/docs/typography/headings/#heading-four-h4 */
        @apply text-2xl font-bold dark:text-white text-black;
    }
    h5 { /* https://flowbite.com/docs/typography/headings/#heading-five-h5 */
      @apply text-xl font-bold dark:text-white text-black;
    }
    ol.ol {
      @apply space-y-1 list-decimal ml-6;
    }
    ul.ul {
      @apply space-y-1 list-disc ml-6;
    }
    p { /* TODO: DO we need this? */
      @apply text-base; 
    }
    .lead { /* TODO: REMOVE */
      @apply text-lg md:text-xl;
    }
    .text-lead {
      @apply text-lg md:text-xl;
    }
    .text-muted {
      @apply text-gray-500 dark:text-gray-300;
    }
    .text-link {
      @apply text-primary-700 hover:text-primary-800 cursor-pointer font-medium underline hover:no-underline dark:text-white;
    }
    .text-strong {
      @apply font-bold text-black dark:text-white;
    }
}

@layer components {
  .card {
    @apply p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700;
  }

  .pagy.nav {
    @apply inline-flex -space-x-px text-sm;
      a { /* a:not(.gap) */
          @apply flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 first:rounded-l-lg last:rounded-r-lg;
          &:not([href]) {
              @apply cursor-default;
          }
          &:not(.current) {
              @apply bg-white hover:bg-gray-100;
          }
          &.current {
              @apply text-primary-600 bg-primary-100 hover:bg-primary-100 hover:text-primary-700;
          }
      }
  }

  .pagy.info {
    @apply text-sm font-normal;
  }

  .table-default {
    @apply w-full text-sm text-left rtl:text-right;
    thead {
      @apply text-xs uppercase bg-gray-50 dark:bg-gray-700;
      th {
        @apply px-6 py-3;
      }
    }
    tbody {
      tr {
        @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600;
        th {
          @apply px-6 py-4 text-gray-900 dark:text-white;
        }
        td {
          @apply px-6 py-4;
        }
      }
    }
  }

  .btn-primary {
    @apply whitespace-nowrap cursor-pointer inline-block px-5 py-2.5 text-center text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800;
  
    &:disabled {
      @apply bg-primary-400 dark:bg-primary-500 cursor-not-allowed hover:bg-primary-400 focus:ring-0 focus:outline-none dark:hover:bg-primary-500 dark:focus:ring-0;
    }
  }

  .btn-secondary {
    @apply whitespace-nowrap cursor-pointer inline-block px-5 py-2.5 text-center text-sm font-medium text-gray-900 rounded-lg bg-white focus:outline-none border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
  }

  .btn-secondary.disabled {
    @apply cursor-not-allowed hover:bg-white hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-400;
  }

  .btn-dark {
    @apply whitespace-nowrap cursor-pointer inline-block text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700;
  }

  .btn-success {
    @apply whitespace-nowrap cursor-pointer inline-block focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
  }

  .btn-warning {
    @apply whitespace-nowrap cursor-pointer inline-block text-white bg-yellow-400 hover:bg-yellow-500 focus:outline-none focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-900;
  }

  .btn-danger {
    @apply whitespace-nowrap cursor-pointer inline-block text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900;
  }

  .btn-large {
    @apply px-6 py-3.5 text-base;
  }

  .btn-small {
    @apply px-3 py-2 text-xs;
  }

  .btn-xsmall {
    @apply px-2 py-1 text-xs;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-primary-900 dark:text-primary-300 whitespace-nowrap;
  }

  .badge-secondary {
    @apply bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300 whitespace-nowrap;
  }

  .badge-success {
    @apply bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 whitespace-nowrap;
  }

  .badge-warning {
    @apply bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300 whitespace-nowrap;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300 whitespace-nowrap;
  }

  .alert-primary {
    @apply p-4 text-sm text-primary-800 rounded-lg bg-primary-50 dark:bg-gray-800 dark:text-primary-400;
  }

  .alert-secondary {
    @apply p-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400;
  }

  .alert-success {
    @apply p-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-green-900 dark:text-green-400;
  }

  .alert-warning {
    @apply p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-yellow-900 dark:text-yellow-400;
  }

  .alert-danger {
    @apply p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-red-900 dark:text-red-400;
  }

  .modal {
    @apply hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full;
    
    .modal-content-wrapper {
      @apply relative p-4 w-full max-w-2xl max-h-full;

      .modal-content {
        @apply relative bg-white rounded-lg shadow dark:bg-gray-700;

        .modal-header {
          @apply flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600;

          .modal-close-button {
            @apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white;
          }
        }

        .modal-body {
          @apply p-4 md:p-5;
        }

        .modal-footer {
          @apply flex items-center gap-2 p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600 justify-end;
        }
      }
    }
  }

  .accordion-headings {
    @apply w-full;

    .accordion-button {
      @apply flex items-center justify-between w-full py-5 rtl:text-right border-b border-gray-200 dark:border-gray-700 gap-3;
    }

    .accordion-content {
      @apply py-5 border-b border-gray-200 dark:border-gray-700;
    }
  }

  .accordion-faqbox {
    @apply w-full;

    .accordion-button {
      @apply flex items-center justify-between w-full p-5 rtl:text-right font-medium border border-b-0 border-gray-200 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-800 dark:border-gray-700 dark:text-gray-400 hover:bg-primary-100 dark:hover:bg-gray-800 gap-3;
    }

    > div:nth-last-child(2) .accordion-button {
      @apply border-b;
    }

    > div:first-child .accordion-button {
      @apply rounded-t-xl;
    }

    .accordion-content {
      @apply p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900;

      &:last-child {
        @apply border-b;
      }
    }
  }

  .notification-badge {
    @apply inline-flex items-center justify-center px-2 h-5 text-xs font-semibold text-white bg-red-600 rounded-full;
  }
}

@layer utilities {

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.cropper-modal {
  background-color: white !important;
}

.cropper-round {
  .cropper-view-box,
  .cropper-face {
    border-radius: 50%;
  }
}

.cropper-square {
  .cropper-view-box,
  .cropper-face {
    border-radius: 0.5rem;
  }
}

/* The css styles for `outline` do not follow `border-radius` on iOS/Safari (#979). */
.cropper-view-box {
  outline: 0;
  box-shadow: 0 0 0 1px #39f;
}