/* /////////////////////////////////////
   INVOICES
   Page-specific invoice layout only
///////////////////////////////////// */

.invoice-match-stack,
.invoice-status-stack,
.admin-card-actions.invoice-status-stack {
  display: grid;
  gap: var(--cc-space-2, 0.5rem);
  align-items: start;
  justify-items: start;
}

.invoice-match-stack .button,
.invoice-status-stack .button {
  margin-top: 0.125rem;
}

.invoice-match-stack .muted,
.invoice-status-stack .muted {
  margin: 0;
  line-height: 1.35;
}

@media (max-width: 43.75rem) {
  .invoice-match-stack,
  .invoice-status-stack {
    gap: var(--cc-space-3, 0.75rem);
  }
}

/*************************************
  INVOICE LINE MATCH
  Shared correction form layout
*************************************/

.invoice-line-match-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-4);
}

.invoice-line-match-form > * {
  grid-column: 1 / -1;
}

.invoice-line-match-form .db-match-suggestions {
  width: 100%;
}

.invoice-line-match-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
}

.invoice-line-correction-panel {
  width: 100%;
}

.invoice-line-correction-panel h2 {
  margin: 0 0 var(--cc-space-2);
}

.invoice-line-correction-panel .form-actions {
  margin-top: var(--cc-space-3);
}

.invoice-line-correction-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-3);
  width: 100%;
}

.invoice-line-correction-field {
  min-width: 0;
}

.invoice-line-correction-field label,
.invoice-line-correction-panel > label {
  display: block;
  margin: 0 0 var(--cc-space-1);
  color: var(--cc-colour-muted);
  font-size: clamp(0.76rem, 0.12vw + 0.72rem, 0.84rem);
  font-weight: 500;
  line-height: 1.15;
}

.invoice-line-correction-field input,
.invoice-line-correction-field select,
.invoice-line-correction-panel > input:not([type="hidden"]),
.invoice-line-correction-panel > select {
  width: 100%;
  min-height: 2.15rem;
  font-size: clamp(0.86rem, 0.12vw + 0.82rem, 0.94rem);
}

.invoice-line-correction-panel > label {
  margin-top: var(--cc-space-3);
}

@media (min-width: 47.5625rem) {
  .invoice-line-correction-fields {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--cc-space-3) var(--cc-space-2);
    align-items: end;
  }

  .invoice-line-correction-field--description {
    grid-column: span 3;
  }
}

/*************************************
  INVOICE UPLOAD OVERLAY
*************************************/

.invoice-upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-4, 1rem);
  background: var(--cc-upload-overlay-bg);
  backdrop-filter: blur(2px);
}

.invoice-upload-overlay[hidden] {
  display: none !important;
}

.invoice-upload-card {
  width: min(28rem, 100%);
  background: var(--cc-colour-surface);
  border: 1px solid var(--cc-colour-border);
  border-radius: var(--cc-radius-xl, 1rem);
  box-shadow: var(--cc-upload-card-shadow);
  padding: clamp(1rem, 2vw, 1.25rem);
  text-align: center;
}

.invoice-upload-card h2 {
  margin: 0 0 var(--cc-space-2, 0.5rem);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}

.invoice-upload-card p {
  margin: 0 0 var(--cc-space-4, 1rem);
  color: var(--cc-colour-muted);
}

.invoice-upload-spinner {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--cc-space-4, 1rem);
  border: 0.3rem solid var(--cc-upload-progress-bg);
  border-top-color: var(--cc-colour-primary);
  border-radius: 50%;
  animation: invoiceUploadSpin 0.9s linear infinite;
}

.invoice-upload-progress {
  width: 100%;
  height: 0.7rem;
  overflow: hidden;
  border-radius: var(--radius-pill, 999rem);
  background: var(--cc-upload-progress-bg);
}

.invoice-upload-progress span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--radius-pill, 999rem);
  background: var(--cc-upload-progress-fill);
  animation: invoiceUploadIndeterminate 1.2s ease-in-out infinite;
}

@keyframes invoiceUploadSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes invoiceUploadIndeterminate {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(280%);
  }
}

body.invoice-upload-active {
  overflow: hidden;
}