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

.text-link {
  @apply text-primary-700;
}

.text-link:hover {
  @apply text-gray-900;
}

.btn {
  @apply font-semibold text-sm py-3 px-4 rounded-lg cursor-pointer flex justify-center items-center;
}
.btn-black {
  @apply bg-gray-900 text-white;
}

.btn-black:hover {
  @apply bg-blue-700;
}
.btn-outline {
  @apply border border-gray-300 text-gray-700;
}
.btn-outline:hover {
  @apply bg-gray-100;
}

.PageHeader {
  @apply text-gray-900 font-semibold text-3xl;
}

.PageHeader__supportingText {
  @apply text-gray-600;
}

.SectionHeader {
  @apply text-gray-900 font-medium text-lg;
}


/* TABLE */

.table-header {
  @apply font-medium p-4 pl-6 py-3 text-gray-500 border-b border-gray-100;
}

.table-icon {
  max-height: 16px;
  max-width: 16px;
}

/* FORM */
.Form__inputField {
  @apply border-gray-300 rounded px-3.5 py-2.5 focus:outline-none focus:bg-white text-gray-900;
}

/* SETTINGS */
.Settings__sectionHeaderWrapper {
  @apply mb-8;
}

.Settings__sectionHeader {
  @apply font-semibold text-lg mb-1;
}

.Settings__supportingText {
  @apply text-sm text-gray-600;
}

.Settings__form {
  @apply mb-5;
}

.Settings__formSection {
  @apply flex flex-row space-x-8 py-6 border-t border-gray-200 items-start;
}

.Settings__formSection:last-child {
  @apply flex flex-row space-x-8 py-6 border-b border-t border-gray-200;
}

.Settings__formSectionLabel {
  @apply font-semibold text-sm text-gray-700 w-1/4 max-w-xs;
  display: block;
}

.Settings__formAdditionalInformation {
  @apply text-gray-400 text-base text-sm font-normal;
}

.Settings__formBottomOptions {
  display: flex;
  justify-content: flex-end;
  @apply space-x-3;
}

.MetricGroup {
  @apply py-4 px-5 border border-gray-200 rounded-lg space-y-6;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.MetricGroup .SectionHeader {
  @apply text-gray-700;
}

.MetricGroup__metric {
  @apply font-semibold text-gray-900 text-3xl;
  letter-spacing: -0.02em;
}


#drop-area.highlight {
  @apply border-gray-900 border-2;
}
/*
 * 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.
 *


 */

 .noHover{
  pointer-events: none;
}

 input[type='number'] {
   -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
}

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

 .vendorIcon {
    border-radius: 6px;
    width: 32px;
    height: 32px;
    background: #3F3F45;
    font-weight: 600
 }

 .modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(217, 217, 217, 0.50);
   z-index: 1;
   display: none;
}

.modal{
   top: 0;
   right: 0;
   height: 100%;
   background: #ffffff;
   display: none;
}

.modal.show{
   z-index: 999;
   position: fixed;
   display: block;
}

.form-group {
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;
 }
 
 .label {
   @apply mb-1.5;
 }

 .info-group {
   display: flex;
   flex-direction: column;
   margin-bottom: 24px;
 }

 .input-error {
   border-color: #D92D20;
   border-width: 1px;
   box-shadow: 0px 0px 0px 4px #F044383D, 0px 1px 2px 0px #1018280D;
 }

 .field_with_errors {
   display: inline-block;
   width: 100%;
 }

 /* Hide pricing groups */
.pricing-group {
  display: none;
}

.main-content-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content-scroll__inner {
  min-height: 100%;
}

.receipt-processing {
  min-height: 730px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background:
    linear-gradient(135deg, rgba(21, 94, 239, 0.06), rgba(16, 24, 40, 0) 34%),
    radial-gradient(circle at 72% 24%, rgba(102, 112, 133, 0.10), rgba(102, 112, 133, 0) 30%),
    #fcfcfd;
}

.receipt-processing__panel {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1fr;
  gap: 48px;
  align-items: center;
}

.receipt-processing__visual {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receipt-processing__receipt {
  position: relative;
  width: 190px;
  min-height: 260px;
  padding: 24px 22px 28px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
  animation: receipt-float 3.4s ease-in-out infinite;
}

.receipt-document-preview {
  width: 100%;
  height: 100%;
  min-height: 650px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, #f9fafb 0%, #f2f4f7 100%);
}

.receipt-document-preview__toolbar {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.receipt-document-preview__badge {
  padding: 4px 8px;
  border-radius: 6px;
  background: #101828;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.receipt-document-preview__filename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
}

.receipt-document-preview__page {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 24px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.receipt-uploader-background,
.receipt-document-preview__page {
  background:
    linear-gradient(90deg, rgba(16, 24, 40, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 24, 40, 0.035) 1px, transparent 1px),
    #f8fafc;
  background-size: 18px 18px;
}

.receipt-document-preview__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.08);
}

.receipt-document-preview__empty {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #667085;
  font-size: 14px;
  font-weight: 600;
}

.receipt-document-preview__empty.hidden {
  display: none;
}

.receipt-document-preview__emptyIcon {
  width: 88px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.receipt-processing__receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background: linear-gradient(135deg, transparent 8px, #ffffff 0) 0 0 / 16px 100%;
  border-bottom: 1px solid #eaecf0;
}

.receipt-processing__receiptHeader,
.receipt-processing__line,
.receipt-processing__row span {
  border-radius: 999px;
  background: linear-gradient(90deg, #eaecf0, #d0d5dd, #eaecf0);
  background-size: 220% 100%;
  animation: receipt-shimmer 1.8s linear infinite;
}

.receipt-processing__receiptHeader {
  width: 52px;
  height: 52px;
  margin: 0 auto 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #155eef, #101828);
}

.receipt-processing__line {
  width: 72%;
  height: 8px;
  margin: 10px auto;
}

.receipt-processing__line--wide {
  width: 88%;
}

.receipt-processing__line--short {
  width: 52%;
}

.receipt-processing__divider {
  height: 1px;
  margin: 24px 0 18px;
  background: repeating-linear-gradient(90deg, #d0d5dd 0 6px, transparent 6px 12px);
}

.receipt-processing__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 14px 0;
}

.receipt-processing__row span {
  display: block;
  width: 58px;
  height: 8px;
}

.receipt-processing__row span:last-child {
  width: 38px;
}

.receipt-processing__row--total span {
  height: 10px;
  background: #101828;
  animation: none;
}

.receipt-processing__scanLine {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 22px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 94, 239, 0), rgba(21, 94, 239, 0.24), rgba(21, 94, 239, 0));
  animation: receipt-scan 2.2s ease-in-out infinite;
}

.receipt-processing__orbit {
  position: absolute;
  padding: 8px 12px;
  border: 1px solid #eaecf0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #344054;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  animation: receipt-chip 2.8s ease-in-out infinite;
}

.receipt-processing__orbit--vendor {
  top: 46px;
  left: 8px;
}

.receipt-processing__orbit--tax {
  right: 10px;
  top: 132px;
  animation-delay: 0.45s;
}

.receipt-processing__orbit--date {
  left: 22px;
  bottom: 52px;
  animation-delay: 0.9s;
}

.receipt-processing__content {
  min-width: 0;
}

.receipt-processing__eyebrow {
  color: #155eef;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.receipt-processing__title {
  color: #101828;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 650;
  margin: 0 0 12px;
}

.receipt-processing__status {
  min-height: 24px;
  color: #475467;
  font-size: 15px;
  margin: 0 0 24px;
}

.receipt-processing__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receipt-processing__step {
  position: relative;
  padding: 10px 12px 10px 34px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  color: #667085;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.receipt-processing__step::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #d0d5dd;
  border-radius: 999px;
  transform: translateY(-50%);
}

.receipt-processing__step.is-active {
  border-color: rgba(21, 94, 239, 0.36);
  color: #101828;
  box-shadow: 0 0 0 4px rgba(21, 94, 239, 0.08);
}

.receipt-processing__step.is-active::before {
  border-color: #155eef;
  background: #155eef;
  box-shadow: 0 0 0 4px rgba(21, 94, 239, 0.16);
}

.receipt-processing__step.is-complete::before {
  border-color: #155eef;
  background: #155eef;
}

@keyframes receipt-float {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

@keyframes receipt-scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  14%, 82% {
    opacity: 1;
  }
  100% {
    transform: translateY(190px);
    opacity: 0;
  }
}

@keyframes receipt-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes receipt-chip {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Statement matching – credit card visual */
.statement-matching__card {
  position: relative;
  width: 220px;
  min-height: 140px;
  padding: 22px 20px 20px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: linear-gradient(135deg, #101828 0%, #1d2939 60%, #344054 100%);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
  animation: receipt-float 3.4s ease-in-out infinite;
}

.statement-matching__cardChip {
  width: 36px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f9a825, #f57f17);
  margin-bottom: 20px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.statement-matching__cardNumber {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.statement-matching__cardNumber span {
  display: block;
  width: 32px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  animation: receipt-shimmer 1.8s linear infinite;
}

.statement-matching__cardNumber span:last-child {
  background: rgba(255, 255, 255, 0.5);
  animation: none;
}

.statement-matching__cardLine {
  width: 60%;
  height: 6px;
  margin: 8px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  animation: receipt-shimmer 1.8s linear infinite;
}

.statement-matching__cardLine--wide {
  width: 80%;
}

.statement-matching__scanLine {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 18px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 94, 239, 0), rgba(21, 94, 239, 0.3), rgba(21, 94, 239, 0));
  animation: statement-scan 2.6s ease-in-out infinite;
}

@keyframes statement-scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  14%, 82% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .receipt-processing {
    min-height: 620px;
    padding: 28px 20px;
  }

  .receipt-processing__panel {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .receipt-processing__visual {
    min-height: 300px;
  }

  .receipt-processing__steps {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .receipt-processing__receipt,
  .receipt-processing__receiptHeader,
  .receipt-processing__line,
  .receipt-processing__row span,
  .receipt-processing__scanLine,
  .receipt-processing__orbit {
    animation: none;
  }
}