/*
    Upload workspace: compact, tactile, operator-first.
    Motion is limited to direct feedback from hover, drag, and state changes.
  */
  .upload-page-shell {
    max-width: 76rem;
  }

  .upload-plan-strip {
    display: inline-flex;
    align-items: center;
  }

  .upload-plan-status {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.32rem 0.5rem 0.32rem 0.55rem;
    border: 1px solid #d8e0ea;
    border-radius: 0.4rem;
    background: #ffffff;
    color: #475569;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      box-shadow 140ms ease,
      transform 140ms ease;
  }

  .upload-plan-status:hover {
    background: #f8fafc;
    border-color: #aebdcc;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
  }

  .upload-plan-status.is-low {
    border-color: #f3cf82;
    background: #fffdf6;
  }

  .upload-plan-status.is-empty {
    border-color: #fecdd3;
    background: #fff8f8;
    color: #881337;
  }

  .upload-plan-status__arrow {
    width: 0.95rem;
    height: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.08rem;
    color: #7b8ba1;
    transition: color 140ms ease, transform 140ms ease;
  }

  .upload-plan-status:hover .upload-plan-status__arrow {
    color: #2458a6;
    transform: translateX(2px);
  }

  .upload-utility {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      transform 140ms ease;
  }

  .upload-utility:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
  }

  .upload-utility__icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.32rem;
    background: #f8fafc;
    color: #64748b;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  .upload-utility:hover .upload-utility__icon {
    background: #eef4fb;
    border-color: #cbdbee;
    color: #2458a6;
  }

  .upload-action-primary,
  .upload-action-secondary,
  .upload-action-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.4rem;
    font-weight: 700;
    text-decoration: none;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      transform 140ms ease,
      color 140ms ease;
  }

  .upload-action-primary {
    border: 1px solid #2458a6;
    background: #2458a6;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(18, 35, 63, 0.08);
  }

  .upload-action-primary:hover {
    border-color: #1d4b91;
    background: #1d4b91;
    box-shadow: 0 3px 8px rgba(18, 35, 63, 0.13);
    transform: translateY(-1px);
  }

  .upload-action-primary .upload-action-icon {
    transition: transform 140ms ease;
  }

  .upload-action-primary:hover .upload-action-icon {
    transform: translateX(2px);
  }

  .upload-action-secondary {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
  }

  .upload-action-secondary:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
  }

  .upload-action-warning {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #78350f;
  }

  .upload-action-warning:hover {
    border-color: #fbbf24;
    background: #fef3c7;
    transform: translateY(-1px);
  }


  .upload-action-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid #173f76;
    border-radius: 0.4rem;
    background: #173f76;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(18, 35, 63, 0.10);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }

  .upload-action-review:hover {
    border-color: #12325f;
    background: #12325f;
    box-shadow: 0 3px 8px rgba(18, 35, 63, 0.14);
    transform: translateY(-1px);
  }

  .upload-action-review .upload-action-icon {
    transition: transform 140ms ease;
  }

  .upload-action-review:hover .upload-action-icon {
    transform: translateX(2px);
  }

  /* Tailwind's .hidden must win over component display declarations.
     This keeps JS-controlled actions truly hidden until their state is valid. */
  .upload-action-primary.hidden,
  .upload-action-secondary.hidden,
  .upload-action-warning.hidden,
  .upload-action-review.hidden,
  .upload-utility.hidden {
    display: none !important;
  }

  .upload-tabs {
    scrollbar-width: none;
  }

  .upload-tabs::-webkit-scrollbar {
    display: none;
  }

  #tab-single-btn,
  #tab-batch-btn {
    border-radius: 0.35rem 0.35rem 0 0;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  #tab-single-btn.text-blue-600,
  #tab-batch-btn.text-blue-600 {
    background: #f8fbff;
  }

  #tab-single-btn:not(.text-blue-600):hover,
  #tab-batch-btn:not(.text-blue-600):hover {
    background: #f8fafc;
  }

  .upload-workspace-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .invoice-dropzone {
    min-height: clamp(240px, 33vh, 340px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #b9c7d8;
    border-radius: 0.46rem;
    background: #fbfcfe;
    cursor: pointer;
    overflow: hidden;
    transition:
      min-height 180ms ease,
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease;
  }

  .invoice-dropzone:hover,
  .invoice-dropzone:focus-visible {
    border-color: #6f96ca;
    background: #f6f9fd;
    box-shadow: inset 0 0 0 1px rgba(36, 88, 166, 0.035);
    outline: none;
  }

  .invoice-dropzone__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    background: #ffffff;
    color: #2458a6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  .invoice-dropzone:hover .invoice-dropzone__icon {
    transform: translateY(-2px);
    border-color: #aac0dd;
    box-shadow: 0 3px 8px rgba(18, 35, 63, 0.07);
  }

  .invoice-dropzone.border-blue-500 {
    border-color: #2458a6;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(36, 88, 166, 0.08);
  }

  .invoice-dropzone.border-blue-500 .invoice-dropzone__standard {
    opacity: 0;
    transform: scale(0.985);
  }

  .invoice-dropzone__standard {
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .invoice-dropzone__drag-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.55rem;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.985);
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .invoice-dropzone.border-blue-500 .invoice-dropzone__drag-message {
    opacity: 1;
    transform: scale(1);
  }

  .invoice-dropzone.border-blue-500 {
    box-shadow: inset 0 0 0 1px rgba(36, 88, 166, 0.09), 0 3px 10px rgba(18, 35, 63, 0.055);
  }

  .invoice-file-ready {
    width: min(100%, 46rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1rem 1.05rem;
    border: 1px solid #d8e2ed;
    border-radius: 0.46rem;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
  }

  #single-dropzone:has(#single-file-preview:not(.hidden)) {
    min-height: 132px;
    border-style: solid;
    border-color: #cbd8e6;
    background: #f8fbff;
    cursor: default;
  }

  #single-dropzone:has(#single-file-preview:not(.hidden)):hover {
    border-color: #b8c9db;
    box-shadow: none;
  }

  #btn-change-single {
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
  }

  #btn-change-single:hover {
    border-bottom-color: #2458a6;
  }

  .single-submit-bar {
    border-top: 1px solid #e2e8f0;
  }

  .single-processing-card {
    border: 1px solid #cbdbee;
    border-left: 3px solid #2458a6;
    border-radius: 0.45rem;
    background: #f7faff;
  }

  #single-upload-form:has(#single-loading-state:not(.hidden)) #single-dropzone {
    pointer-events: none;
    opacity: 0.68;
  }

  #setup-section:has(#queue-container:not(.hidden)) #dropzone-container {
    min-height: 98px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #fbfcfe;
  }

  #setup-section:has(#queue-container:not(.hidden)) #batch-dropzone-content {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
  }

  #setup-section:has(#queue-container:not(.hidden)) #batch-dropzone-copy {
    flex: 1 1 auto;
  }

  #setup-section:has(#queue-container:not(.hidden)) #batch-dropzone-help {
    display: none;
  }

  #setup-section:has(#queue-container:not(.hidden)) #batch-dropzone-actions {
    padding-top: 0;
    flex: 0 0 auto;
  }

  .queue-table-wrap,
  .summary-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .queue-table-wrap .lh-work-table__scroll > table {
    min-width: max(100%, 760px);
  }

  .summary-table-wrap .lh-work-table__scroll > table {
    min-width: max(100%, 820px);
  }

  .queue-table-wrap thead,
  .summary-table-wrap thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .batch-processing-shell {
    border-block: 1px solid #dde2e8;
    box-shadow: none;
  }

  .batch-progress-track {
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef5;
  }

  .batch-progress-track > div {
    height: 100%;
    border-radius: 999px;
  }

  .processing-log-shell {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d7e0ea;
    border-radius: 0.45rem;
    background: #ffffff;
  }

  .processing-log-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
  }

  #live-log-container {
    position: relative;
    min-width: 0;
    min-height: 0;
    max-height: 16rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    padding: 0.35rem 0.75rem;
    background: #ffffff;
    font-family: inherit;
  }

  #live-log-container::-webkit-scrollbar {
    width: 10px;
  }

  #live-log-container::-webkit-scrollbar-track {
    background: #f8fafc;
  }

  #live-log-container::-webkit-scrollbar-thumb {
    border: 2px solid #f8fafc;
    border-radius: 999px;
    background: #94a3b8;
  }

  #live-log-container > div {
    min-height: 34px;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    color: #475569 !important;
    border-bottom-color: #edf1f5 !important;
  }

  #live-log-container > div:last-child {
    border-bottom-color: transparent !important;
  }

  #live-log-container .text-slate-100,
  #live-log-container .text-slate-200,
  #live-log-container .text-slate-300 {
    color: #334155 !important;
  }

  #live-log-container .text-blue-400 {
    color: #2458a6 !important;
  }

  #live-log-container .text-emerald-400 {
    color: #047857 !important;
  }

  #live-log-container .text-amber-400 {
    color: #b45309 !important;
  }

  #live-log-container .text-rose-400 {
    color: #be123c !important;
  }

  #live-log-container .animate-pulse {
    animation: none !important;
  }

  .batch-summary-overview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    row-gap: 0.45rem;
  }

  .batch-summary-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-height: 22px;
    padding: 0 0.8rem;
    border-left: 1px solid #dbe3ec;
    white-space: nowrap;
  }

  .batch-summary-metric:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .batch-summary-metric__value {
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 800;
    color: #0f172a;
  }

  .batch-summary-metric__label {
    font-size: 0.6875rem;
    line-height: 0.9rem;
    font-weight: 700;
    color: #64748b;
  }

  .batch-summary-metric.is-verified .batch-summary-metric__label {
    color: #047857;
  }

  .batch-summary-metric.is-review .batch-summary-metric__label {
    color: #b45309;
  }
  .batch-summary-metric.is-waiting .batch-summary-metric__label {
    color: #b45309;
  }


  .batch-summary-metric.is-skipped .batch-summary-metric__label {
    color: #be123c;
  }

  #skipped-warning-banner {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
  }

  #warning-banner-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #warning-banner-list li {
    line-height: 1.45;
  }

  /* The batch-level Review Invoices action is the AP workflow entry point.
     Per-row Review links are redundant here, so keep the results table scan-only. */
  #summary-section .summary-table-wrap th:last-child,
  #summary-section .summary-table-wrap td:last-child {
    display: none;
  }

  #summary-section .summary-table-wrap tbody td {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  @media (max-width: 640px) {
    .invoice-dropzone {
      min-height: 196px;
    }

    .invoice-file-ready {
      align-items: flex-start;
      flex-direction: column;
    }

    #setup-section:has(#queue-container:not(.hidden)) #batch-dropzone-content {
      align-items: flex-start;
      flex-direction: column;
    }

    .batch-summary-overview {
      align-items: flex-start;
      gap: 0.4rem 0;
    }

    .batch-summary-metric {
      width: 50%;
      padding: 0 0.55rem;
    }

    .batch-summary-metric:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .upload-plan-status,
    .upload-plan-status__arrow,
    .upload-utility,
    .upload-action-primary,
    .upload-action-secondary,
    .upload-action-warning,
    .invoice-dropzone,
    .invoice-dropzone__icon,
    .invoice-dropzone__standard,
    .invoice-dropzone__drag-message {
      transition: none !important;
    }
  }