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

.highlight-row {
  @apply bg-purple-200;
  transition: background-color 1s ease;
}

input:invalid,
textarea:invalid,
select:invalid {
  @apply border border-red-400;
}

[data-hovered="true"].hover-sgYellow {
  @apply ring-sgYellow-500 border-sgYellow-500 text-sgYellow-500;
}

[data-hovered="true"].hover-sgYellow-link {
  @apply text-sgYellow-500;
}

[data-hovered="true"].hover-sgGreen {
  @apply ring-sgGreen-500 border-sgGreen-500 text-sgGreen-500;
}

.feature-button {
  @apply text-nowrap hover-sgYellow cursor-pointer rounded px-1 py-0.5;
}

.header-feature-button {
  @apply feature-button text-white border border-white;
}

.header-active-feature-button {
  @apply header-feature-button;
}

.body-feature-button {
  @apply feature-button p-2 text-black border-2 border-black;
  @apply px-1 py-1;
}

.body-feature-link {
  @apply body-feature-button;
  @apply px-1 py-0.5;
}

.hover-yellow {
  @apply hover:text-sgYellow-500  hover:border-sgYellow-500;
}

.inactive-button {
  @apply bg-white text-gray-400 border-gray-400 hover:text-gray-500 hover:border-gray-500 hover:ring-0 !important;
}

.plus-button {
  @apply flex py-1 pl-1 pr-2;
}

.green-outline-button {
  @apply px-2 py-1.5 inline-block text-center bg-white text-sgGreen-600 font-medium rounded border-2 border-sgGreen-600 hover:cursor-pointer;
  @apply hover:ring-sgGreen-600 hover:ring-1;
  @apply flex flex-row justify-center;
}

.gray-outline-button {
  @apply px-2 py-1.5 text-center bg-white text-gray-600 hover:text-gray-400 font-medium rounded border-2 border-gray-600 hover:border-gray-400 hover:cursor-pointer;
}

.blue-outline-button {
  @apply px-2 py-1.5 text-center bg-white text-blue-500 hover:text-blue-700 rounded border-2 border-blue-500 hover:border-blue-700 hover:cursor-pointer;
}

/* Hides the sort order arrows in the gene table */
.ag-sort-order {
  @apply hidden;
}

.inprogress {
  @apply hover:opacity-30 cursor-not-allowed hover:cursor-not-allowed;
}

.form-input {
  @apply mt-1 p-2 w-full border border-gray-400 rounded-md;
}

.form-select {
  @apply mt-1 p-2 w-full border border-gray-400 rounded-md;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-select option {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  line-height: 1.2;
}

@layer components {
  .info-button {
    @apply cursor-pointer hover:opacity-80 transition-opacity;
  }

  /* Responsive select containers for very narrow viewports */
  @media (max-width: 480px) {
    .form-filter-container {
      @apply flex-none w-full min-w-0;
    }

    .form-filter-container .form-select {
      @apply text-xs;
      font-size: 0.75rem;
    }

    .form-filter-container .form-select option {
      font-size: 0.75rem;
      padding: 0.125rem 0.25rem;
    }

    .form-filter-buttons {
      @apply flex-col w-full;
    }

    .form-filter-buttons > * {
      @apply w-full text-center;
    }
  }

  /* Additional responsive breakpoint for very small screens */
  @media (max-width: 320px) {
    .form-filter-container .form-select {
      font-size: 0.6875rem;
      padding: 0.375rem 0.5rem;
    }

    .form-filter-container .form-select option {
      font-size: 0.6875rem;
      padding: 0.125rem 0.25rem;
      line-height: 1.1;
    }
  }
}

.ag-header-cell-no-border {
  border: none !important;
  background: transparent !important;
}

.ag-header-cell-no-border .ag-header-cell-resize {
  display: none;
}

@layer base {
  :root {
    --color-sgGreen-50: 249 253 249;
    --color-sgGreen-100: 242 250 242;
    --color-sgGreen-200: 223 243 223;
    --color-sgGreen-300: 204 236 204;
    --color-sgGreen-400: 165 221 166;
    --color-sgGreen-500: 127 207 128;
    --color-sgGreen-600: 114 186 115;
    --color-sgGreen-700: 76 124 77;
    --color-sgGreen-800: 57 93 58;
    --color-sgGreen-900: 38 62 38;
    --color-sgYellow-50: 254 254 246;
    --color-sgYellow-100: 253 253 237;
    --color-sgYellow-200: 251 250 209;
    --color-sgYellow-300: 249 246 181;
    --color-sgYellow-400: 244 240 126;
    --color-sgYellow-500: 239 233 70;
    --color-sgYellow-600: 215 210 63;
    --color-sgYellow-700: 143 140 42;
    --color-sgYellow-800: 108 105 32;
    --color-sgYellow-900: 72 70 21;
    --color-sgDarkBlue-50: 244 244 245;
    --color-sgDarkBlue-100: 233 233 235;
    --color-sgDarkBlue-200: 201 200 206;
    --color-sgDarkBlue-300: 168 167 176;
    --color-sgDarkBlue-400: 103 101 117;
    --color-sgDarkBlue-500: 38 35 58;
    --color-sgDarkBlue-600: 34 32 52;
    --color-sgDarkBlue-700: 23 21 35;
    --color-sgDarkBlue-800: 17 16 26;
    --color-sgDarkBlue-900: 11 11 17;
    --color-sgPurple-50: 248 246 254;
    --color-sgPurple-100: 240 237 254;
    --color-sgPurple-200: 219 210 252;
    --color-sgPurple-300: 197 182 250;
    --color-sgPurple-400: 153 128 246;
    --color-sgPurple-500: 109 73 242;
    --color-sgPurple-600: 98 66 218;
    --color-sgPurple-700: 65 44 145;
    --color-sgPurple-800: 49 33 109;
    --color-sgPurple-900: 33 22 73;
  }
}

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

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

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

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