:root {
  --color-primary-50: 219 229 231 !important;
  /* Slightly darker */
  --color-primary-100: 194 213 218 !important;
  /* Slightly darker */
  --color-primary-200: 168 196 202 !important;
  /* Slightly darker */
  --color-primary-300: 143 179 185 !important;
  /* Slightly darker */
  --color-primary-400: 117 163 169 !important;
  /* Slightly darker */
  --color-primary-500: 93 144 152 !important;
  /* Slightly darker */
  --color-primary-600: 68 125 135 !important;
  /* Slightly darker */
  --color-primary-700: 50 106 116 !important;
  /* Slightly darker */
  --color-primary-800: 35 88 98 !important;
  /* Slightly darker */
  --color-primary-900: 20 69 79 !important;
  /* Slightly darker */
}

.grid {
  display: grid !important;
}

.gap-8 {
  gap: 2rem
    /* 32px */
    !important;
}

.max-h-80 {
  max-height: 20rem
    /* 320px */
    !important;
}

.col-span-2 {
  grid-column: span 2 / span 2 !important;
}

.justify-center {
  justify-content: center !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.max-w-xs {
  max-width: 20rem
    /* 320px */
    !important;
}

.outline-0 {
  outline-width: 0px !important;
}

.even\:bg-gray-50:nth-child(even) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
}

:is(.dark .dark\:even\:bg-gray-900\/50:nth-child(even)) {
  background-color: rgb(17 24 39 / 0.5) !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
}

.rounded-lg {
  border-radius: 0.600rem !important;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}


select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  border: 1px solid #ccc;
  position: relative;
  background: none;
}





@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lg\:border {
    border: 1px solid !important;
  }

  .lg\:rounded-md {
    border-radius: 0.375rem !important;
  }

  .lg\:rounded-lg {
    border-radius: 0.600rem !important;
  }

  .lg\:shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  }
}


.hidden {
  display: none;
}

.custom-upload-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #496A81;
  color: white;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.custom-upload-btn:hover {
  background-color: #365a6d;
  transform: scale(1.05);

  @media (max-width: 1023px) {

    /* Tailwind's 'lg' breakpoint */
    /* 🚨 ABSOLUTE MAX-SPECIFICITY OVERRIDE */
    html body .truncate-text td:not(.field-actions_holder),
    html body .truncate-text th:not(.field-actions_holder),
    html body .truncate-text td:not(.field-actions_holder) a,
    html body .truncate-text th:not(.field-actions_holder) a {
      max-width: unset !important;
      max-width: none !important;
      max-width: initial !important;
      width: auto !important;
      min-width: auto !important;
      min-width: unset !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    table {
      /* Target your table specifically */
      display: block;
      width: 100%;
    }

    table thead {
      display: none;
    }

    table tbody {
      display: block;
    }

    table tr {
      display: block;
      width: 100%;
      margin-bottom: 1rem;
      /* Optional spacing between rows */
    }

    table td {
      display: block;
      width: 100% !important;
      /* Override any inline/table-layout widths */
      text-align: right;
      /* Optional: Align content to the right */
    }

    /* Add data-label pseudo-elements to mimic headers (optional) */
    table td::before {
      content: attr(data-label);
      /* Use data-label attribute if available */
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
  }
}