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

@layer components {
  @keyframes pulse-glow {
    0% {filter: drop-shadow(0 0 2px rgb(var(--tw-color) / 0.3));}
    50% {filter: drop-shadow(0 0 4px rgb(var(--tw-color) / 0.7));}
    100% {filter: drop-shadow(0 0 2px rgb(var(--tw-color) / 0.3));}
  }

  .tw-animate-pulse-glow-amber {
    animation: pulse-glow 2s ease-in-out infinite;
    --tw-color: 245 158 11;
  }

  .tw-animate-pulse-glow-blue {
    animation: pulse-glow 2s ease-in-out infinite;
    --tw-color: 59 130 246;
  }

  .tw-animate-pulse-glow-green {
    animation: pulse-glow 2s ease-in-out infinite;
    --tw-color: 34 197 94;
  }

  .tw-animate-pulse-glow-red {
    animation: pulse-glow 2s ease-in-out infinite;
    --tw-color: 239 68 68;
  }
}

.form-field {
  @apply tw-border tw-border-gray-300 hover:tw-border-gray-400 tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-w-full tw-shadow;
}

.form-field-disabled {
  @apply tw-border tw-border-gray-300 tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-w-full tw-bg-gray-50 tw-text-gray-400;
}

.form-field:focus {
  @apply tw-outline-none tw-border-blue-500;
}

.form-select-field {
  @apply tw-border tw-border-gray-300 hover:tw-border-gray-400 tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-w-full tw-shadow;
}

.form-select-field:focus {
  @apply tw-outline-none tw-border-blue-500;
}

.custom-form-label {
  @apply tw-block tw-text-sm tw-font-medium tw-text-gray-700;
}

.form-file-field {
  @apply tw-border tw-border-gray-300 hover:tw-border-gray-400 tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-w-full tw-shadow file:tw-mr-2 file:tw-py-1 file:tw-px-3 file:tw-rounded file:tw-border-0 file:tw-font-semibold file:tw-bg-blue-100 file:tw-text-blue-700 hover:file:tw-bg-blue-200 hover:file:tw-text-blue-800;
}

.form-checkbox {
  @apply tw-border tw-border-gray-300 tw-rounded tw-p-2 tw-shadow hover:tw-border-gray-400;
}

.form-checkbox-disabled {
  @apply tw-border tw-border-gray-300 tw-rounded tw-p-2 tw-shadow tw-bg-gray-100;
}

/* TODO: remove hover expand buttons */
.hover-expand {
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s ease;
}

.hover-expand .button-content {
  display: inline-flex;
  align-items: center;
}

.hover-expand .hover-text {
  max-width: 0;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.4s ease, margin-left 0.4s ease;
}

.hover-expand:hover .hover-text {
  max-width: 200px;
  opacity: 1;
  margin-left: 8px;
}

div.top-scrollbars {
  transform: rotateX(180deg);
}
div.top-scrollbars table {
  transform: rotateX(180deg);
}

.top-scrollbars::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 0 0 6px 6px;
}

.top-scrollbars::-webkit-scrollbar-thumb {
  background: #e4e4e4;
  border-radius: 20px;
  border: 3px solid #F3F4F6;
}

.table-scroll {
  @apply tw-overflow-x-scroll tw-rounded-md top-scrollbars tw-shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)];
}


@layer components {
  .custom-table {
    @apply tw-table-fixed tw-min-w-full tw-text-sm;
  }

  .custom-table thead {
    @apply tw-bg-gray-100 tw-border-b-2 tw-border-slate-700;
  }

  /* .custom-table thead tr {

  } */

  .custom-table th {
    @apply tw-px-3 tw-py-2 tw-whitespace-nowrap;
  }

  .custom-table thead tr td {
    @apply tw-px-3 tw-pb-2;
  }

  .custom-table tr:hover {
    @apply tw-bg-gray-100;
  }

  .custom-table tbody {
    @apply tw-divide-y tw-divide-gray-200;
  }

  .custom-table tbody tr td {
    @apply tw-whitespace-nowrap tw-px-3 tw-py-2;
  }

  .custom-table tfoot {
    @apply tw-bg-gray-100;
  }

  .custom-table tfoot tr {
    @apply tw-border-t-2 tw-border-slate-700 tw-font-bold;
  }

  .custom-table tfoot td {
    @apply tw-px-3 tw-py-3 tw-whitespace-nowrap;
  }
}


.table-flush {
  @apply tw-text-sm tw-border-collapse;
}

.table-flush tbody {
  @apply tw-divide-y tw-divide-gray-200;
}

.table-flush td {
  @apply tw-py-2;
}

.table-flush td:first-child {
  @apply tw-font-semibold tw-pr-4;
}


.custom-link { @apply tw-text-black tw-no-underline; }

.custom-button { @apply tw-rounded-lg tw-shadow tw-px-2.5 tw-py-1.5 tw-no-underline; }
.custom-button-small { @apply tw-rounded-md tw-shadow tw-px-2 tw-py-1 tw-text-sm tw-tracking-tight tw-no-underline; }

.custom-button-primary { @apply tw-bg-blue-500 tw-text-white; }
.custom-button-primary:hover { @apply tw-bg-blue-600; }

.custom-button-primary-light { @apply tw-bg-blue-100 tw-text-blue-700; }
.custom-button-primary-light:hover { @apply tw-bg-blue-200; }

.custom-button-primary-light2 { @apply tw-border tw-border-blue-500 tw-text-blue-500 tw-transition-colors; }
.custom-button-primary-light2:hover { @apply tw-bg-blue-50; }

.custom-button-secondary { @apply tw-bg-gray-500 tw-text-white; }
.custom-button-secondary:hover { @apply tw-bg-gray-600; }

.custom-button-light { @apply tw-bg-gray-100 tw-text-gray-700; }
.custom-button-light:hover { @apply tw-bg-gray-200; }

.custom-button-danger { @apply tw-bg-red-500 tw-text-white; }
.custom-button-danger:hover { @apply tw-bg-red-600; }

.custom-button-danger-light { @apply tw-border tw-border-red-500 tw-text-red-500 tw-transition-colors; }
.custom-button-danger-light:hover { @apply tw-bg-red-50; }

.custom-button-success { @apply tw-bg-green-600 tw-text-white; }
.custom-button-success:hover { @apply tw-bg-green-700; }

.custom-button-success-light { @apply tw-border tw-border-green-600 tw-text-green-600 tw-transition-colors; }
.custom-button-success-light:hover { @apply tw-bg-green-50; }

.custom-button-white { @apply tw-bg-white tw-text-gray-700 tw-shadow-none tw-border tw-border-gray-200; }
.custom-button-white:hover { @apply tw-bg-gray-50; }

.custom-button-warning { @apply tw-bg-yellow-400 tw-text-black; }
.custom-button-warning:hover { @apply tw-bg-yellow-500; }

.custom-button-warning-light { @apply tw-border tw-border-yellow-500 tw-text-yellow-500 tw-transition-colors; }
.custom-button-warning-light:hover { @apply tw-bg-yellow-50; }

.custom-button-amber { @apply tw-bg-amber-500 tw-text-white; }
.custom-button-amber:hover { @apply tw-bg-amber-600; }

.custom-badge { @apply tw-rounded-full tw-px-1.5 tw-py-0.5 tw-text-xs tw-font-medium; }



.spreadsheet-table {
  @apply tw-table-fixed tw-min-w-full tw-border tw-border-gray-200 tw-text-sm;
}

.spreadsheet-table thead {
  @apply tw-bg-gray-100;
}

.spreadsheet-table tr {
  @apply tw-border-b tw-border-gray-200 tw-divide-x tw-divide-solid;
}

.spreadsheet-table th {
  @apply tw-px-3 tw-py-2 tw-whitespace-nowrap;
}

.spreadsheet-table tbody {
  @apply tw-divide-y tw-divide-gray-200;
}

.spreadsheet-table td {
  @apply tw-whitespace-nowrap tw-px-3 tw-py-2;
  height: 36px;
  @apply tw-relative;
}

.spreadsheet-input {
  @apply tw-w-full tw-h-full tw-border-none tw-outline-none tw-bg-white tw-px-3 tw-py-2;
  min-height: 36px;
}

.spreadsheet-input:focus {
  @apply tw-ring-2 tw-ring-green-500 tw-ring-inset;
}

select.spreadsheet-input {
  @apply tw-appearance-none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.spreadsheet-input-error {
  @apply tw-ring-2 tw-ring-red-500 tw-ring-inset;
}

.spreadsheet-error-tooltip {
  @apply tw-absolute tw-z-10 tw-bg-red-500 tw-text-white tw-px-2 tw-py-1 tw-rounded tw-text-sm tw-mt-1;
  top: 100%;
  left: 0;
  white-space: nowrap;
}

.file-content-preview {
  @apply tw-prose tw-text-sm tw-max-w-none tw-overflow-x-auto tw-break-words tw-p-6 tw-bg-white tw-rounded-lg tw-shadow tw-border tw-border-gray-200;
}


.autocomplete-selected-new {
  @apply tw-bg-blue-100 tw-border tw-border-blue-500;
}

.autocomplete-selected-existing {
  @apply tw-bg-green-100 tw-border tw-border-green-500;
}

.autocomplete-selected-existing:hover {
  @apply tw-bg-green-200;
}

.autocomplete-selected-new:hover {
  @apply tw-bg-blue-200;
}


.card-info {
  @apply tw-text-sm tw-text-cyan-800 tw-p-3 tw-bg-cyan-100 tw-rounded-md;
}

.card-danger {
  @apply tw-text-sm tw-text-red-800 tw-p-3 tw-bg-red-100 tw-rounded-md;
}


.navbar-tab-link {
  @apply tw-gap-1 tw-text-black tw-cursor-pointer tw-p-2 tw-rounded-tl-md tw-rounded-tr-md tw-text-nowrap tw-no-underline;
}

.navbar-tab-link:hover {
  @apply tw-bg-blue-200 tw-text-black;
}

.navbar-tab-link.active {
  @apply tw-bg-blue-200 tw-text-black;
}

.navbar-tab-link.active:hover {
  @apply tw-bg-blue-300 tw-text-black;
}