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

@font-face {
    font-family: 'Berlingske Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url(/saastix/BerklingskeSans-Md.woff2) format('woff2'),
         url(/saastix/assets/BerlingskeSans-Md-5f3fda7ba3fe30a9dc9f73e28e1e09fd0f54a92b71ae0cd79c0814a67222bf6e.woff) format('woff');
}

div.field_with_errors > label {
  @apply text-red-900;
}

div.field_with_errors > :is(input, textarea, select) {
  @apply border-red-300 text-red-900 placeholder-red-300;
}

.what_needs_to_change_heading .field_with_errors > :is(p) {
  @apply border-red-300 text-red-900 placeholder-red-300;
}



.pagy-nav.pagination {
  @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
}

.page.next a {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-black-70 hover:bg-gray-50 focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-black-70 hover:bg-gray-50 focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center rounded-r-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-black-70 hover:bg-gray-50 focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-100 px-2 py-2 text-sm font-medium text-black-70 hover:bg-gray-50 focus:z-20;
}

.page a, .page.gap {
  @apply bg-white border-gray-300 text-black-70 hover:bg-gray-50 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}

.page.active {
  @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
}


/* Custom styles for Settings pages */
.editing_header {
  background-image: linear-gradient(45deg, #73000a 33.33%, #000000 33.33%, #000000 50%, #73000a 50%, #73000a 83.33%, #000000 83.33%, #000000 100%);
  background-size: 5.24px 5.24px;
}

/* .reimbursement_recipients, .card {
  scrollbar-width: auto;
  scrollbar-color: #010307 #d5d5d5;
}

.reimbursement_recipients::-webkit-scrollbar, .card::-webkit-scrollbar {
  width: 12px;
  background-color: #d5d5d5;
}

.reimbursement_recipients::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb {
  background-color: #010307;
  border-radius: 6px;
  border: 3px solid #d5d5d5;
} */

@layer components {
  .request-ticket-show .request-ticket-side-stack > * {
    @apply mt-0 mb-5;
  }

  .request-ticket-show .request-ticket-side-stack > *:last-child,
  .request-ticket-show .request-ticket-details > *:last-child {
    @apply mb-0;
  }

  .request-ticket-show .request-ticket-details > * {
    @apply mt-0 mb-5;
  }
}

/* Request ticket detail sections */
.request-ticket-show .request-ticket-details > * {
  margin: 0;
}

.request-ticket-show .request-ticket-details > :is(ul.bg-white.rounded-lg.border.border-black-30, div.bg-white.rounded-lg.border.border-black-30),
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 {
  background-color: rgb(255 255 255 / 0.96);
  border: 1px solid rgb(226 232 240 / 0.72);
  border-radius: 0.875rem;
  box-shadow: none;
  overflow: hidden;
  padding: 1rem 1.25rem;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 {
  padding: 1rem 1.25rem;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:first-child,
.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child),
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) {
  align-items: center;
  background-color: rgb(0 0 0 / 1);
  color: rgb(255 255 255 / 1);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.05rem;
  font-weight: 600;
  gap: 0.625rem;
  letter-spacing: -0.02em;
  margin: -1rem -1.25rem 0.875rem;
  padding: 0.875rem 1.25rem;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:first-child {
  margin: -1rem -1.25rem 0.875rem;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:first-child::before,
.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child)::before,
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child)::before {
  content: "";
  background-color: rgb(255 199 44 / 1);
  border-radius: 9999px;
  flex: none;
  height: 0.5rem;
  width: 0.5rem;
}

.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) p,
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) p {
  margin: 0;
}

.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) small,
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) small {
  color: rgb(255 255 255 / 0.75);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
}

.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) a,
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) a,
.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:first-child a {
  color: inherit;
  text-decoration: none;
}

.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) a:hover,
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(p:first-child, div:first-child) a:hover,
.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:first-child a:hover {
  text-decoration: underline;
}

.request-ticket-show .request-ticket-details > div.bg-white.rounded-lg.border.border-black-30 > :is(.mt-2, .m-2),
.request-ticket-show .request-ticket-details > form > div.bg-white.rounded-lg.border.border-black-30 > :is(.mt-2, .m-2) {
  margin-top: 0.5rem;
  padding: 0;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:not(:first-child) {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgb(226 232 240 / 1);
  border-radius: 0;
  color: rgb(15 23 42 / 0.92);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
  padding: 0.875rem 0.25rem;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li + li {
  margin-top: 0;
}

.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:last-child {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

.request-ticket-show .request-ticket-details dl.divide-y {
  display: grid;
  gap: 0;
}

.request-ticket-show .request-ticket-details dl.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 0;
}

.request-ticket-show .request-ticket-details dl.divide-y > div {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgb(226 232 240 / 1);
  border-radius: 0;
  margin: 0;
  padding: 0.875rem 0.25rem;
}

.request-ticket-show .request-ticket-details dl.divide-y > div:last-child {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

.request-ticket-show .request-ticket-details dl.divide-y > div > dt,
.request-ticket-show .request-ticket-details > ul.bg-white.rounded-lg.border.border-black-30 > li:not(:first-child) > :is(strong, span.font-semibold):first-child {
  color: rgb(15 23 42 / 0.82);
  color: rgb(15 23 42 / 0.82);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.request-ticket-show .request-ticket-details dl.divide-y > div > dd {
  color: rgb(15 23 42 / 0.95);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.35rem;
}

.request-ticket-show .request-ticket-details ul ul {
  display: grid;
  gap: 0;
  margin-top: 0.5rem;
}

.request-ticket-show .request-ticket-details ul ul > li {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgb(226 232 240 / 1);
  border-radius: 0;
  color: rgb(15 23 42 / 0.9);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
  padding: 0.625rem 0;
}

.request-ticket-show .request-ticket-details ul ul > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.request-ticket-show .request-ticket-details > :is(div.bg-black.text-white.rounded, p.bg-black.text-white.rounded-lg) {
  background-color: black;
  border: 1px solid rgb(15 23 42 / 0.08);
  box-shadow: none;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
  padding: 1rem;
}

.request-ticket-show .request-ticket-details > :is(div.bg-black.text-white.rounded, p.bg-black.text-white.rounded-lg) a {
  color: rgb(255 199 44 / 1);
  font-weight: 600;
  text-decoration: none;
}

.request-ticket-show .request-ticket-details > :is(div.bg-black.text-white.rounded, p.bg-black.text-white.rounded-lg) a:hover {
  text-decoration: underline;
}

.activity-log-toggle > summary {
  transition: background-color 180ms ease, color 180ms ease;
}

.activity-log-toggle > summary::-webkit-details-marker {
  display: none;
}

.activity-log-toggle > summary i {
  transition: transform 180ms ease, color 180ms ease;
}

.activity-log-toggle[open] > summary {
  background-color: rgb(241 245 249 / 1);
}

.activity-log-toggle[open] > summary i {
  transform: rotate(180deg);
}

.activity-log-toggle__content {
  transform-origin: top center;
}

.activity-log-toggle[open] > .activity-log-toggle__content {
  animation: activity-log-toggle-reveal 180ms ease-out;
}

@keyframes activity-log-toggle-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scaleY(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-log-toggle > summary,
  .activity-log-toggle > summary i,
  .activity-log-toggle[open] > .activity-log-toggle__content {
    animation: none;
    transition: none;
  }
}
/*
 * 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.
 *


 */

.dropzone .dz-preview.dz-error {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.dropzone .dz-preview.dz-error .dz-remove {
  order: 1 !important;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  background: transparent !important;
  color: #dc2626 !important;
  display: block !important;
  font-size: 0.8125rem !important;
  line-height: 1.25rem !important;
  margin-top: 0.25rem !important;
  opacity: 1 !important;
  order: 2 !important;
  padding: 0 !important;
  position: static !important;
  pointer-events: auto !important;
  text-align: center !important;
  width: auto !important;
}

.dropzone .dz-preview.dz-error .dz-error-message::after {
  display: none !important;
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  color: #dc2626 !important;
}

.dropzone .dz-preview.dz-error .dz-error-mark svg path {
  fill: #dc2626 !important;
  stroke: #dc2626 !important;
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}