@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500;600&family=Inter:wght@500;600&display=swap');

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

@layer base {
  body {
    @apply font-sans bg-white text-gray-900;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-gray-900;
  }
}

@layer components {
  /* Flash messages */
  .alert {
    @apply
    p-2
    mb-4
    pl-6
    text-sm
    text-gray-800
    rounded-lg
    bg-gray-50
  }

  .alert.alert-danger {
    @apply
    text-red-800
    bg-red-50
  }

  .alert.alert-success {
    @apply
    text-green-800
    bg-green-50
  }

  .alert.alert-notice {
    @apply
    text-blue-800
    bg-blue-50
  }

  .nav-link {
    @apply flex items-center p-2 w-full text-base font-semibold text-table-default font-roboto rounded-lg transition duration-75 
    hover:bg-[#153764] hover:text-white
  }
  .nav-link svg {
    @apply mr-3
  }
  .nav-link:hover svg {
    @apply hidden
  }
  .nav-link:hover svg.hover {
    @apply block
  }
  .nav-link svg.hover {
    @apply hidden
  }
  .nav-link.is-current-page {
    @apply bg-[#153764]/70 text-white 
  }
  .nav-link.is-current-page svg.normal {
    @apply hidden
  }
  .nav-link.is-current-page svg.hover {
    @apply block
  }

  /* Tables */
  .table-header {
    @apply font-semibold text-3xl text-table-default font-roboto text-left
  }

  .table-header-th {
    @apply flex-1 px-2 py-2 font-semibold font-roboto text-left
  }

  .table-th {
    @apply flex-1 px-2 py-1 text-table-default text-left
  }


  /* Buttons */
  .btn {
    @apply
    inline-flex
    text-center
    items-center
    justify-center
    rounded-md
    bg-primary
    cursor-pointer
    px-3
    py-2
    text-sm
    font-medium
    text-white
    shadow-sm
    ring-1
    ring-inset
    ring-primary-100
    hover:bg-primary-100
    hover:no-underline
    focus:outline-none
    focus:ring-2
    focus:ring-primary-500
    focus:ring-offset-2
    transition-colors;
  }

  .btn.btn-secondary {
    @apply
    bg-secondary
    ring-secondary-100
    hover:bg-secondary-100
    focus:ring-secondary-500;
  }

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

  .btn-md {
    @apply text-sm px-5 py-3;
  }

  .btn-lg {
    @apply text-base px-6 py-3;
  }

  .btn-xl {
    @apply text-lg px-8 py-4;
  }

  .btn-2xl {
    @apply text-xl px-10 py-5;
  }

  .btn-3xl {
    @apply text-2xl px-12 py-6;
  }

  /* Forms */

  .form-input,
  .form-select,
  .form-textarea,
  .form-richtext,
  .form-multiselect {
    @apply
    bg-gray-50
    border
    border-gray-300
    text-gray-900
    text-sm
    rounded-lg
    focus:ring-primary
    focus:border-primary
    block
    w-full
    p-2.5
  }

  .form-label {
    @apply
    block
    text-sm
    font-medium
    text-gray-900
  }

  .form-textarea {
    @apply
    resize-none
    h-24
  }

  .form-checkbox {
    @apply
    h-4
    w-4
    rounded
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

  .form-radio {
    @apply
    h-4
    w-4
    rounded-full
    border-gray-300
    text-primary
    focus:ring-primary-500
  }

  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500 p-5 justify-center;
  }
  .pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
  }
  .pagy a:hover {
    @apply bg-gray-300;
  }
  .pagy a:not([href]) { /* disabled links */
    @apply text-gray-300 bg-gray-100 cursor-default;
  }
  .pagy a.current {
    @apply text-white bg-gray-400;
  }
  .pagy label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
  }
  .pagy label input {
    @apply bg-gray-100 border-none rounded-md;
  }
  .modal {
    @apply font-sans bg-white text-gray-900 ;
  }

  /* Text */
  .ils-normal-text {
    @apply font-sans text-base font-normal text-black px-8 py-2;
  }

  .normal-header-text {
    @apply font-roboto text-base font-bold leading-4 tracking-tight text-left text-[#424242];
  }

  .normal-body-text {
    @apply font-roboto text-base font-normal leading-[22px] tracking-tight text-left text-[#424242];
  }

  .ils-label-text {
    @apply font-sans text-base font-bold text-black leading-9;
  }

  .ils-title-text {
    @apply font-sans text-2xl font-bold text-black leading-9;
  }

  .ils-form-field {
    @apply border border-[#153764];
  }

  .ils-form-field:focus {
    outline: none;
    border-color: #153764;
  }

  /* Turbo modal */
  .turbo-modal {
    @apply
    fixed
    z-50
    left-1/2
    top-1/2
    transform
    -translate-x-1/2
    -translate-y-1/2
    overflow-auto
    bg-white
    rounded-lg
    shadow-lg
  }
}
/*
 * 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.
 *


 */