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

div.field_with_errors > label {
  @apply text-red-500;
}

div.field_with_errors > :is(input, textarea, select) {
  @apply border-red-500 text-red-500 placeholder-red-300;
}

@layer components {
  .btn-base {
    @apply inline-flex items-center justify-center cursor-pointer rounded-md shadow-sm sm:w-auto focus:outline-none focus:ring-0 focus:ring-offset-0;
  }

  .btn-primary {
    @apply btn-base bg-lime-600 text-sm font-medium text-white hover:bg-lime-700 px-4 py-2;
    &:disabled {
      @apply bg-lime-700;
    }
  }
  .btn-primary-lean {
    @apply btn-base bg-lime-600 text-sm font-medium text-white hover:bg-lime-700 px-3 py-1.5;
    &:disabled {
      @apply bg-lime-700;
    }
  }

  .btn-secondary {
    @apply btn-base border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700 hover:bg-gray-200 px-4 py-2;
    &:disabled {
      @apply bg-gray-200;
    }
  }
  .btn-secondary-lean {
    @apply btn-base border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700 hover:bg-gray-200 px-3 py-1.5;
    &:disabled {
      @apply bg-gray-200;
    }
  }

  .btn-soft {
    @apply btn-base border border-lime-400 bg-lime-50 text-sm font-medium text-lime-600 hover:bg-lime-100 px-2.5 py-1.5;
    &:disabled {
      @apply bg-lime-100;
    }
  }
  .btn-soft-lean {
    @apply btn-base border border-lime-400 bg-lime-50 text-sm font-normal text-lime-600 hover:bg-lime-100 px-2 py-1;
    &:disabled {
      @apply bg-lime-100;
    }
  }

  .btn-danger {
    @apply btn-base border border-red-600 bg-red-50 text-sm font-medium text-red-600 hover:text-red-600 hover:bg-red-100 px-4 py-2;
    &:disabled {
      @apply bg-red-100;
    }
  }
  .btn-danger-lean {
    @apply btn-base border border-red-600 bg-red-50 text-sm font-medium text-red-600 hover:text-red-600 hover:bg-red-100 disabled:bg-red-100 px-3 py-1.5;
    &:disabled {
      @apply bg-red-100;
    }
  }

  .link-primary {
    @apply font-medium text-lime-600 hover:text-lime-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500;
  }
  .link-primary-lean {
    @apply inline-flex text-lime-600 hover:text-lime-700 text-sm focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  .link-primary-danger {
    @apply font-medium text-red-600 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }
  .link-danger-lean {
    @apply font-normal text-red-600 hover:text-red-500 focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  .active-item {
    @apply bg-gray-100 text-gray-900;
  }
  .active-range {
    @apply bg-lime-100 text-gray-700 hover:bg-lime-200 !important;
  }
  .active-list-item {
    @apply text-lime-700 font-semibold;
  }

  .title {
    @apply md:text-xl text-lg font-bold text-gray-900 sm:truncate
  }
  .subtitle {
    @apply text-base text-gray-600 sm:truncate
  }

  .header-nav {
    @apply relative flex justify-center sm:flex flex-col shadow-sm rounded-xl p-4;
  }
  .header-nav-badge {
    @apply absolute sm:hidden -top-3 -right-2 flex h-8 w-8 flex-shrink-0 items-center justify-center text-base font-medium text-gray-800 rounded-full border border-gray-300 bg-white;
  }

  @media (max-width: 400px) {
    .header-nav {
      @apply p-2;
    }
    .header-nav-badge {
      @apply h-6 w-6 text-sm;
    }
  }

  @media (max-width: 355px) {
  .charts-checkboxes-content {
    @apply flex-col gap-y-3;
  }
}

  .slide-hidden {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.5s ease-in, opacity 0.5s ease-in, visibility 0.5s ease-in;
  }

  .slide-visible {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
  }

  .form-input {
    @apply shadow-sm text-base border-slate-300 bg-white rounded-md w-full focus:ring-lime-500 focus:border-lime-500;
    &:disabled {
      @apply border-gray-300 bg-gray-50;
    }
  }
  .form-input:read-only:not(select) {
    @apply border-gray-300 bg-gray-50;
  }

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

  .form-label-description {
    @apply block text-sm leading-6 text-gray-600 mb-1;
  }

  .form-group {
    @apply mt-8;
  }

  .form-radio {
    @apply border-gray-300 text-lime-600 focus:ring-lime-600 cursor-pointer;
    &:disabled {
      @apply text-gray-300;
    }
  }

  .form-checkbox {
    @apply h-4 w-4 cursor-pointer rounded border-gray-300 text-lime-600 focus:ring-lime-600
  }

  .form-checkbox-label {
    @apply pl-2 p-1 text-base text-gray-700 cursor-pointer
  }

  .form-checkbox-disabled {
    @apply text-gray-300 pointer-events-none;
  }

  .tab-link {
    @apply flex items-center border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 pb-3 px-1 text-sm font-medium;
  }

  .tab-link-active {
    @apply border-lime-500 text-lime-600 hover:border-lime-600 hover:text-lime-600;
  }

  .truncate-5-lines {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .heat-list:last-of-type .line-vertical {
    display: none;
    height: 0;
  }
  .heat-list:last-child .line-vertical {
    display: none;
  }
  .heat-list:last-of-type .day-label {
    display: none;
    height: 0;
  }
  .heat-list:last-child .day-label {
    display: none;
  }
  .active-tab {
    @apply bg-gradient-to-b from-gray-50 to-lime-200/75 !important;
  }
  .div-body:has(> .no-navigation) .navigation-content {
    display: none !important;
    background-color: blue !important;
  }
  /* Status Colors */
  .fresh-primary-color {
    background-color: #C6DEF1;
  }
  .fresh-secondary-color {
    color: #349DF0;
  }

  .ready-primary-color {
    background-color: #D6EEE7;
  }
  .ready-secondary-color {
    color: #17BC97;
  }

  .inseminated-primary-color {
    background-color: #DBCDF0;
  }
  .inseminated-secondary-color {
    color: #8D4DEC;
  }

  .pregnant-primary-color {
    background-color: #FFF0F3;
  }
  .pregnant-secondary-color {
    color: #F742A5;
  }

  .dry-primary-color {
    background-color: #FAEDCB;
  }
  .dry-secondary-color {
    color: #DBB10B;
  }

  .undefined-primary-color {
    background-color: #f3f4f6;
  }
  .undefined-secondary-color {
    color: #94a3b8;
  }
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200 hover:bg-gray-300;

    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

.searchInput {
  transition: all 0.4s ease-in;
}

.searchInput:focus {
  width: 100%;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/*
 * 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.
 *


 */