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

/* ActionText Trix editor minimal reset */
.trix-content {
  @apply tw-prose tw-max-w-none;
}

@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-before-width {
  @apply tw-border tw-border-gray-300 hover:tw-border-gray-400 tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-shadow disabled:tw-bg-gray-50 disabled:tw-text-gray-400 disabled:hover:tw-border-gray-300;
}

.form-field {
  @apply form-field-before-width tw-w-full;
}

.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-bg-white tw-border tw-border-gray-300 hover:tw-border-gray-400 tw-cursor-pointer 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 file:tw-cursor-pointer hover:tw-shadow-md tw-transition-all;
}

.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;
}

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

/* 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;
}

.custom-table-container {
  @apply tw-overflow-x-auto tw-rounded-md tw-shadow-md table-container-hidden-scrollbar;
}

/* Infinite scroll: make pagination row span full table width so it stays visible when scrolled right */
.custom-table-container turbo-frame:has(table):has(turbo-frame[loading="lazy"]) {
  display: inline-block;
  min-width: 100%;
}
.custom-table-container turbo-frame:has(table) turbo-frame[loading="lazy"] {
  width: 100%;
  display: block;
}

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

  .custom-table thead {
    @apply tw-bg-gray-100 tw-sticky tw-top-0;
    box-shadow: 0 2px 0 0 rgb(68, 78, 91); /* border-b-2 border-slate-700 equivalent */
  }

  .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:not(.custom-table-subtotal-row):not(.tw-bg-gray-50.tw-font-bold):not(.tw-bg-green-50) {
    @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 tbody tr td .onewrap,
  .custom-table tbody tr td.onewrap-cell {
    white-space: normal;
  }

  .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;
  }

  /* Small font size variant */
  .font-size-small .custom-table {
    @apply tw-text-xs;
  }

  .font-size-small .custom-table th,
  .font-size-small .custom-table td {
    @apply tw-px-2 tw-py-1;
  }

  .font-size-small .custom-table tbody tr td {
    @apply tw-px-2 tw-py-1;
  }
}

/* Unlayered: sticky lead columns (no @apply — avoids Tailwind selector corruption on table cells) */
.custom-table-sticky-lead-cols {
  border-collapse: separate;
  border-spacing: 0;
}

.custom-table-sticky-lead-cols thead {
  box-shadow: none;
  z-index: 20;
}

/* Same td-level border on every filter cell — matches scrollable cols; replaces thead box-shadow */
.custom-table-sticky-lead-cols thead tr:last-child td {
  border-bottom: 2px solid rgb(68, 78, 91);
}

.custom-table-sticky-lead-cols .sticky-lead-col-1 {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  background-color: #fff;
}

.custom-table-sticky-lead-cols .sticky-lead-col-2 {
  position: sticky;
  left: 3rem;
  z-index: 1;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  background-color: #fff;
}

.custom-table-sticky-lead-cols .sticky-lead-col-3 {
  position: sticky;
  left: 6rem;
  z-index: 1;
  width: 12rem;
  min-width: 12rem;
  max-width: 12rem;
  background-color: #fff;
  overflow: visible;
}

.custom-table-sticky-lead-cols .sticky-lead-col-edge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(100%);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right, rgb(15 23 42 / 0.07), transparent);
}

.custom-table-sticky-lead-cols thead .sticky-lead-col-1,
.custom-table-sticky-lead-cols thead .sticky-lead-col-2,
.custom-table-sticky-lead-cols thead .sticky-lead-col-3 {
  top: 0;
  z-index: 1;
  background-color: rgb(243 244 246);
}

.custom-table-sticky-lead-cols tbody tr:not(.custom-table-subtotal-row):hover .sticky-lead-col-1,
.custom-table-sticky-lead-cols tbody tr:not(.custom-table-subtotal-row):hover .sticky-lead-col-2,
.custom-table-sticky-lead-cols tbody tr:not(.custom-table-subtotal-row):hover .sticky-lead-col-3 {
  background-color: rgb(243 244 246);
}

.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row .sticky-lead-col-1,
.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row .sticky-lead-col-2,
.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row .sticky-lead-col-3,
.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row:hover .sticky-lead-col-1,
.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row:hover .sticky-lead-col-2,
.custom-table-sticky-lead-cols tbody tr.custom-table-subtotal-row:hover .sticky-lead-col-3 {
  background-color: rgb(249 250 251);
}

.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50 .sticky-lead-col-1,
.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50 .sticky-lead-col-2,
.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50 .sticky-lead-col-3 {
  background-color: rgb(240 253 244);
}

.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50:hover .sticky-lead-col-1,
.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50:hover .sticky-lead-col-2,
.custom-table-sticky-lead-cols tbody tr.tw-bg-green-50:hover .sticky-lead-col-3 {
  background-color: rgb(220 252 231);
}

/* Non-sticky cells inherit tr background; beat row hover:tw-bg-gray-100 when selected */
.custom-table tbody tr.tw-bg-green-50:hover {
  background-color: rgb(220 252 231);
}

/* Font size toggle button active state */
button[data-font-size-toggle-target="button"].active {
  @apply tw-bg-blue-100 tw-border-blue-400 tw-text-blue-700;
}


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

/* Hide scrollbar on table container, show only top scrollbar */
.table-container-hidden-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.table-container-hidden-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}


.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-bg { background-color: oklch(0.985 0.001 106.423) }

.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-success-light2 { @apply tw-bg-green-200 tw-text-green-700; }
.custom-button-success-light2:hover { @apply tw-bg-green-300; }

.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-button-disabled { @apply tw-bg-gray-200 tw-text-gray-400 tw-shadow-inner; }

.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;
}


.bullet-list {
  @apply tw-space-y-1 tw-list-disc tw-list-inside tw-pl-2 tw-mb-0;
}

/* LP document cards: bulk-select highlight. Unlayered (after @tailwind) so it wins over utilities on the same element. */
.limited-document-access-card--selected {
  @apply tw-z-[1] tw-border-blue-500 tw-bg-blue-50 tw-shadow-md tw-ring-2 tw-ring-blue-400 tw-ring-offset-2
    hover:tw-border-blue-500 hover:tw-bg-blue-50 hover:tw-shadow-md;
}