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


:root {
  --primary-color: #6AB9A7;
  --primary-color-hover: #16a393; /*to remove*/
  --primary-color-dark: #497E72;
  --secondary-color: #3B4B53;
  --secondary-color-light: #ecf6f4;

  --text-color-light-gray: #EAEAEA;
  --primary-color-light: #B1D9D1;

  --dark-gray-var-1: #27302E;
  --dark-gray-var-2: #323232;
  --dark-gray-var-4: #5F6765;
  --dark-gray-var-5: #828282;
  --light-gray-var-1: #979797;
  --light-gray-var-2: #CBCBCB;
  --light-gray-var-3: #EAEAEA;
  --light-gray-var-4: #F6F6F6;

  --alert-green: #F3F9F8;
}

body {
  min-height: 100vh;
  @apply text-dark-gray-2 flex flex-col;
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-secondary-light {
  color: var(--secondary-color-light);
}

.text-primary-dark {
  color: var(--primary-color-dark);
}

.text-light-gray {
  color: var(--text-color-light-gray);
}

.text-dark-gray-1 {
  color: var(--dark-gray-var-1);
}

.text-dark-gray-2 {
  color: var(--dark-gray-var-2);
}

.text-dark-gray-4 {
  color: var(--dark-gray-var-4);
}

.text-dark-gray-5 {
  color: var(--dark-gray-var-5);
}

.text-light-gray-1 {
  color: var(--light-gray-var-1);
}

.text-light-gray-3 {
  color: var(--light-gray-var-3);
}

main {
  flex: 1;
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-primary-dark {
  background-color: var(--primary-color-dark);
}

.bg-primary-light {
  background-color: var(--primary-color-light);
}

.bg-primary-hover {
  background-color: var(--primary-color-hover);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-secondary-light {
  background-color: var(--secondary-color-light);
}

.bg-dark-gray-1 {
  background-color: var(--dark-gray-var-1);
}

.bg-light-gray {
  background-color: var(--text-color-light-gray);
}

.bg-light-gray-3 {
  background-color: var(--light-gray-var-3);
}

.bg-light-gray-4 {
  background-color: var(--light-gray-var-4);
}

.bg-alert-green {
  background-color: var(--alert-green);
}

.bg-linear-gradient-primary {
  background: linear-gradient(180deg, rgba(106, 185, 167, 0.50) 0%, rgba(106, 185, 167, 0.00) 52%);
}

.bg-linear-gradient-secondary {
  background: linear-gradient(0deg, rgba(106, 185, 167, 0.20) 67.73%, rgba(106, 185, 167, 0.00) 99.68%);
}

.border-primary {
  border-color: var(--primary-color);
}

.border-primary-dark {
  border-color: var(--primary-color-dark);
}

.border-secondary {
  border-color: var(--secondary-color);
}

.border-dark-gray-5 {
  border-color: var(--dark-gray-var-5);
}

.border-light-gray-2 {
  border-color: var(--light-gray-var-2);
}

.border-light-gray-3 {
  border-color: var(--light-gray-var-3);
}

.headline-title {
  @apply text-3xl font-bold;
}

.headline-3 {
  @apply text-2xl font-semibold;
}

.headline-4 {
  @apply text-xl font-semibold;
}

.headline-5 {
  @apply text-base;
}

.box-centered-rounded {
  @apply max-w-md mx-auto bg-white rounded-lg py-8 px-4 md:px-16 min-w-[90vw] md:min-w-[520px];
}


.text-paragraph {
  @apply text-sm leading-normal;
}

.text-label {
  @apply text-xs font-semibold;
  &.filled {
    background: #22AD5C;
  }
}

.checkbox-item {
  @apply flex items-center;
  input[type="checkbox"] {
    @apply form-checkbox;
  }
  label {
    @apply ml-2 text-sm text-dark-gray-4;
  }
}

.sub-menu {
  width: 340%;
}


nav {
  .left,.right {
    a{
      @apply text-gray-300 hover:bg-gray-700 hover:text-gray-300 px-3 py-2 rounded-md text-sm font-semibold uppercase;
    }
  }
  #menu-mobile{
    a {
      @apply block;
    }
  }

  
  &.pagination {
    @apply text-light-gray-1 border-light-gray-3 w-fit rounded-md mt-8 flex mx-auto;

    a {
      @apply inline-block text-dark-gray-1;

      &:hover {
        text-decoration: none !important;
      }
    }

    span {
      @apply border m-0 p-0 text-center inline-block text-light-gray-1;

      a {
        @apply py-1 px-3 text-light-gray-1;
      }

      &.current {
        @apply border-primary-dark bg-primary-dark text-white py-1 px-3 inline-block;
      }

      &.gap {
        @apply py-1 px-3 inline-block;
      }

      &:first-child {
        @apply rounded-s-md;
      }

      &:last-child {
        @apply rounded-e-md;
      }

      &:hover:not(.current):not(.gap) {
        @apply border-primary-dark;

        a {
          @apply text-primary-dark;
        }
      }
    }
  }
}


main {
  a {
    /* @apply text-blue-500; */
    &:not([href^="#"], [class*="text-"], [class*="btn"]) {
      color: var(--primary-color-dark);
    }
    &.btn-primary {
      color: #fff;
    }
    &.btn-secondary {
      color: var(--primary-color-dark);
    }
    &:hover:not([href^="#"], [class*="text-"], [class*="btn"]) {
      @apply underline;
    }
    &[disabled] {
      @apply text-gray-500;
      text-decoration: none;
      cursor: default;
    }
    &.icon-button {
      svg {
        color: var(--primary-color-dark);
      }
      &:hover {
        text-decoration: none;
        svg {
          /* @apply text-blue-600; */
          color: var(--primary-color);
        }
      }
    }
  }

  select {
    @apply text-dark-gray-4 border-light-gray-2 rounded-md leading-5 pl-4 py-4;

    &:focus {
      @apply border-primary ring-green-800;
    }
  }

  form {
    input {
      &[type="text"] {
        @apply text-dark-gray-2 border-light-gray-2 rounded-md leading-5 px-4 py-4;
        
        &:focus {
          @apply border-primary ring-green-800;
        }
      }
    }
  }
}

.suggestions-text {
  p {
    padding-top: 1rem;
  }
  &:last-child {
    p:not(:first-child) {
      padding-top: 0;
    }
  }
  ul {
    list-style-type: disc;
    margin-left: 1rem;
    li {
      @apply pb-2;
    }
  }
}

@layer components {
  .btn-primary {
    /* @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:cursor-pointer; */
    @apply text-white bg-primary-dark text-sm font-bold py-3 px-4 rounded hover:cursor-pointer hover:brightness-125 hover:no-underline;
    &[disabled] {
      @apply bg-gray-200 hover:bg-gray-500 cursor-default;
      &:hover{
        @apply bg-gray-200;
      }
    }
  }
  
  .btn-secondary {
    @apply bg-white text-sm text-primary-dark font-semibold py-3 px-4 rounded border border-primary-dark;
    &:hover {
      @apply bg-primary-dark no-underline text-white cursor-pointer;
    }
    &[disabled] {
      @apply bg-gray-200 hover:bg-gray-500 cursor-default;
      &:hover{
        @apply bg-gray-200;
      }
    }
  }

  .form-radio {
    @apply h-5 w-5 text-primary border-dark-gray-5 focus:ring-transparent;
  }

  .checkbox1 {  
    @apply h-5 w-5 text-primary-dark border-gray-300 rounded focus:ring-transparent;
  }

  .loading-spinner {
    text-align: center;
    padding: 20px;
    /* Add any spinner animation CSS you prefer */
    @apply animate-spin;
  }

  .tooltip {
    @apply invisible absolute;
  }

  .has-tooltip:hover .tooltip {
    @apply visible z-50;
  }

  .table-wrapper {
    @apply overflow-x-auto rounded-lg relative;
  }

  .table-default {
    @apply table-auto border-collapse w-full rounded-lg shadow-md shadow-slate-200 overflow-hidden mb-8;
    thead {
      tr {
        @apply bg-light-gray-3 uppercase text-sm;
      }
    }
    tbody{
      tr {
        td {
          @apply p-4 py-6;
        }
      }
    }
    th {
      @apply text-left text-dark-gray-2 p-4;
    }
  }

  .report-default {
    @apply mb-10 mt-5 p-6 print-no-break rounded-lg border border-light-gray-2 text-dark-gray-2 text-paragraph;
  }
}

.print-no-break {
  page-break-inside: avoid;
}

.secondary-font {
  font-family: 'Calibre', 'Open Sans', 'Inter var', sans-serif;
}
/*
 * 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.
 *


 */



/* a[disabled] {
    pointer-events: none;
    cursor: default;
    display: none;
} */