/* =============================================================================
   Porto Guará — Document / image upload component
   File: css/upload.css
   Tokens: maritime-system.css (--ms-*). No parallel palette.
   ============================================================================= */

.pg-upload {
  --pg-upload-progress-scale: 0;
  --pg-upload-enter-delay: 0ms;
  font-family: var(--ms-font-body);
  color: var(--ms-text);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  padding: var(--ms-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-4);
}

.pg-upload *,
.pg-upload *::before,
.pg-upload *::after {
  box-sizing: border-box;
}

.pg-upload__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-2) var(--ms-space-4);
}

.pg-upload__title {
  margin: 0;
  font-family: var(--ms-font-heading);
  font-size: var(--ms-text-lg);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
  line-height: var(--ms-leading-tight);
  color: var(--ms-text);
}

.pg-upload__subtitle {
  margin: 0;
  font-size: var(--ms-text-sm);
  color: var(--ms-text-muted);
  line-height: var(--ms-leading-snug);
}

/* —— Drop zone —— */
.pg-upload__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: 168px;
  padding: var(--ms-space-6) var(--ms-space-5);
  text-align: center;
  cursor: pointer;
  background: var(--ms-deep);
  border: 1px dashed var(--ms-border-strong);
  border-radius: var(--ms-radius-md);
  transition:
    border-color var(--ms-duration-base) var(--ms-ease-standard),
    background-color var(--ms-duration-base) var(--ms-ease-standard),
    box-shadow var(--ms-duration-base) var(--ms-ease-standard);
}

.pg-upload__zone:hover {
  border-color: var(--ms-accent);
  background: var(--ms-accent-muted);
}

.pg-upload__zone:focus {
  outline: none;
}

.pg-upload__zone:focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
  border-color: var(--ms-accent);
  background: var(--ms-accent-dim);
}

.pg-upload[data-state="dragging"] .pg-upload__zone,
.pg-upload__zone.is-dragover {
  border-style: solid;
  border-color: var(--ms-accent);
  background: var(--ms-accent-dim);
  box-shadow: inset 0 0 0 1px var(--ms-border-accent);
}

html.pg-upload-doc-drag .pg-upload__zone {
  border-color: var(--ms-accent);
  box-shadow: var(--ms-shadow-md);
  transform: translateZ(0);
}

.pg-upload[data-state="uploading"] .pg-upload__zone {
  border-color: var(--ms-data);
  background: var(--ms-data-dim);
}

.pg-upload[data-state="success"] .pg-upload__zone {
  border-color: var(--ms-success);
  background: var(--ms-success-dim);
}

.pg-upload[data-state="error"] .pg-upload__zone {
  border-color: var(--ms-danger);
  background: var(--ms-danger-dim);
}

.pg-upload__zone-icon {
  width: 40px;
  height: 40px;
  color: var(--ms-accent);
  display: grid;
  place-items: center;
}

.pg-upload__zone-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg-upload__zone-label {
  font-size: var(--ms-text-base);
  font-weight: var(--ms-weight-medium);
  color: var(--ms-text);
  line-height: var(--ms-leading-snug);
}

.pg-upload__zone-hint {
  font-size: var(--ms-text-xs);
  color: var(--ms-text-dim);
  line-height: var(--ms-leading-normal);
  max-width: 36rem;
}

.pg-upload__browse {
  margin-top: var(--ms-space-1);
  border: 1px solid var(--ms-border-strong);
  background: var(--ms-elevated);
  color: var(--ms-text);
  font-size: var(--ms-text-sm);
  font-weight: var(--ms-weight-medium);
  padding: 8px 14px;
  border-radius: var(--ms-radius-sm);
  pointer-events: none;
  transition: var(--ms-transition-color);
}

.pg-upload__zone:hover .pg-upload__browse {
  border-color: var(--ms-accent);
  background: var(--ms-hover);
  color: var(--ms-accent-bright);
}

.pg-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— Queue —— */
.pg-upload__queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.pg-upload__queue:empty {
  display: none;
}

.pg-upload__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--ms-space-3);
  align-items: center;
  padding: var(--ms-space-3);
  background: var(--ms-deep);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  transition:
    border-color var(--ms-duration-base) var(--ms-ease-standard),
    background-color var(--ms-duration-base) var(--ms-ease-standard),
    opacity var(--ms-duration-base) var(--ms-ease-standard);
}

.pg-upload__row[data-state="queued"] {
  border-color: var(--ms-border);
}

.pg-upload__row[data-state="uploading"] {
  border-color: var(--ms-border-accent);
  background: var(--ms-accent-muted);
}

.pg-upload__row[data-state="success"],
.pg-upload__row[data-state="uploaded"],
.pg-upload__row[data-state="done"] {
  border-color: rgba(52, 211, 153, 0.35);
  background: var(--ms-success-dim);
}

.pg-upload__row[data-state="extracting"],
.pg-upload__row[data-state="analyzing"] {
  border-color: var(--ms-border-accent);
  background: var(--ms-accent-muted);
}

.pg-upload__row[data-state="empty-extract"] {
  border-color: rgba(245, 158, 11, 0.38);
  background: var(--ms-warning-dim, rgba(245, 158, 11, 0.08));
}

.pg-upload__row[data-state="failed"],
.pg-upload__row[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.40);
  background: var(--ms-danger-dim);
}

.pg-upload__row[data-state="cancelled"] {
  border-color: var(--ms-border);
  background: var(--ms-input);
  opacity: 0.72;
}

.pg-upload__thumb,
.pg-upload__type-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-input);
  border: 1px solid var(--ms-hairline);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ms-steel);
  flex-shrink: 0;
  position: relative;
}

.pg-upload__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.pg-upload__thumb.is-loading {
  background: var(--ms-input);
}

.pg-upload__thumb-shimmer {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
}

.pg-upload__type-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg-upload__type-icon[data-kind="pdf"] { color: var(--ms-danger); }
.pg-upload__type-icon[data-kind="doc"] { color: var(--ms-data); }
.pg-upload__type-icon[data-kind="sheet"] { color: var(--ms-success); }
.pg-upload__type-icon[data-kind="cad"] { color: var(--ms-amber); }
.pg-upload__type-icon[data-kind="image"] { color: var(--ms-accent); }
.pg-upload__type-icon[data-kind="text"] { color: var(--ms-text-secondary); }

.pg-upload__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-upload__name {
  font-size: var(--ms-text-sm);
  font-weight: var(--ms-weight-medium);
  color: var(--ms-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-upload__details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--ms-text-2xs);
  color: var(--ms-text-muted);
  font-family: var(--ms-font-metric);
}

.pg-upload__status {
  font-family: var(--ms-font-body);
  font-weight: var(--ms-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--ms-tracking-label);
}

.pg-upload__row[data-state="queued"] .pg-upload__status { color: var(--ms-text-dim); }
.pg-upload__row[data-state="uploading"] .pg-upload__status,
.pg-upload__row[data-state="extracting"] .pg-upload__status,
.pg-upload__row[data-state="analyzing"] .pg-upload__status { color: var(--ms-accent-bright); }
.pg-upload__row[data-state="success"] .pg-upload__status,
.pg-upload__row[data-state="uploaded"] .pg-upload__status,
.pg-upload__row[data-state="done"] .pg-upload__status { color: var(--ms-success); }
.pg-upload__row[data-state="empty-extract"] .pg-upload__status { color: var(--ms-amber, #d97706); }
.pg-upload__row[data-state="error"] .pg-upload__status,
.pg-upload__row[data-state="failed"] .pg-upload__status { color: var(--ms-danger); }
.pg-upload__row[data-state="cancelled"] .pg-upload__status { color: var(--ms-text-muted); }

.pg-upload__progress {
  width: 100%;
  height: 4px;
  margin-top: 2px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-input);
  overflow: hidden;
}

/* Progress uses transform scaleX (not width) for compositable, eased motion. */
.pg-upload__progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--pg-upload-progress-scale, 0));
  transform-origin: left center;
  background: var(--ms-accent);
  border-radius: var(--ms-radius-pill);
  transition: transform var(--ms-duration-base) var(--ms-ease-standard);
  will-change: transform;
}

.pg-upload__row[data-state="success"] .pg-upload__progress-bar {
  background: var(--ms-success);
}

.pg-upload__row[data-state="error"] .pg-upload__progress-bar {
  background: var(--ms-danger);
}

.pg-upload__row[data-state="cancelled"] .pg-upload__progress-bar {
  background: var(--ms-steel);
}

.pg-upload__error {
  margin: 0;
  font-size: var(--ms-text-xs);
  color: var(--ms-danger);
  line-height: var(--ms-leading-snug);
}

.pg-upload__error-detail {
  color: var(--ms-text-muted);
}

.pg-upload__honesty {
  margin: 4px 0 0;
  font-size: var(--ms-text-xs);
  line-height: var(--ms-leading-snug);
  color: var(--ms-text-secondary);
}

.pg-upload__honesty--fail {
  color: var(--ms-danger);
}

.pg-analysis-dock {
  margin: 12px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-elevated, var(--ms-deep));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateZ(0);
  transition:
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-analysis-dock[hidden] {
  display: none;
}

.pg-analysis-dock__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pg-analysis-dock__title {
  margin: 0;
  font-size: var(--ms-text-sm);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
  color: var(--ms-text);
}

.pg-analysis-dock__count {
  font-family: var(--ms-font-metric, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--ms-text-xs);
  color: var(--ms-text-muted);
}

.pg-analysis-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-analysis-dock__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--ms-radius-sm);
  border: 1px solid transparent;
  background: var(--ms-input);
  transition:
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-analysis-dock__item.is-current {
  border-color: var(--ms-border-accent);
  background: var(--ms-accent-muted);
}

.pg-analysis-dock__phase {
  font-size: var(--ms-text-2xs);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
  color: var(--ms-text-muted);
  white-space: nowrap;
}

.pg-analysis-dock__item.is-current .pg-analysis-dock__phase {
  color: var(--ms-accent-bright);
}

.pg-analysis-dock__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
}

@media (prefers-reduced-motion: reduce) {
  .pg-analysis-dock,
  .pg-analysis-dock__item {
    transition: none;
  }
}

.pg-upload__error[data-error-kind="unsupported"],
.pg-upload__error[data-error-kind="oversized"],
.pg-upload__error[data-error-kind="batch"] {
  color: var(--ms-warning);
}

.pg-upload__error[data-error-kind="network"],
.pg-upload__error[data-error-kind="server"],
.pg-upload__error[data-error-kind="auth"],
.pg-upload__error[data-error-kind="read"] {
  color: var(--ms-danger);
}

.pg-upload__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-1);
  align-items: stretch;
}

.pg-upload__btn {
  appearance: none;
  border: 1px solid var(--ms-border-strong);
  background: var(--ms-elevated);
  color: var(--ms-text-secondary);
  font: inherit;
  font-size: var(--ms-text-2xs);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: var(--ms-tracking-label);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--ms-radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--ms-transition-color);
}

.pg-upload__btn:hover {
  color: var(--ms-text);
  border-color: var(--ms-border-accent);
  background: var(--ms-hover);
}

.pg-upload__btn:focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
}

.pg-upload__btn--danger:hover {
  color: var(--ms-danger);
  border-color: rgba(239, 68, 68, 0.45);
  background: var(--ms-danger-dim);
}

.pg-upload__btn--accent:hover {
  color: var(--ms-accent-bright);
  border-color: var(--ms-accent);
  background: var(--ms-accent-dim);
}

.pg-upload__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pg-upload__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
}

.pg-upload__summary {
  font-size: var(--ms-text-xs);
  color: var(--ms-text-muted);
}

.pg-upload__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
}

.pg-upload__footer .pg-upload__btn {
  font-size: var(--ms-text-xs);
  padding: 8px 12px;
}

.pg-upload__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Entrance + thumb shimmer — nonessential motion gated on no-preference */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pg-upload-row-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pg-upload-thumb-pulse {
    0%,
    100% { opacity: 0.55; }
    50% { opacity: 1; }
  }

  .pg-upload__row--enter {
    animation: pg-upload-row-enter var(--ms-duration-base) var(--ms-ease-standard) both;
    animation-delay: var(--pg-upload-enter-delay, 0ms);
  }

  .pg-upload__thumb.is-loading .pg-upload__thumb-shimmer {
    animation: pg-upload-thumb-pulse 1.2s var(--ms-ease-standard) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-upload__progress-bar {
    transition: none;
  }

  .pg-upload__row--enter {
    animation: none;
  }

  html.pg-upload-doc-drag .pg-upload__zone {
    transform: none;
    box-shadow: none;
  }

  .pg-upload__thumb.is-loading .pg-upload__thumb-shimmer {
    animation: none;
    opacity: 0.7;
  }
}

@media (max-width: 640px) {
  .pg-upload {
    padding: var(--ms-space-4);
    min-width: 0;
    max-width: 100%;
  }

  .pg-upload__title,
  .pg-upload__hint {
    overflow-wrap: anywhere;
  }

  .pg-upload__zone {
    min-height: 156px;
    padding: var(--ms-space-5) var(--ms-space-3);
  }

  .pg-upload__zone-hint {
    max-width: 31rem;
    overflow-wrap: anywhere;
  }

  .pg-upload__row {
    grid-template-columns: 40px minmax(0, 1fr);
    min-width: 0;
  }

  .pg-upload__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }

  .pg-upload__thumb,
  .pg-upload__type-icon {
    width: 40px;
    height: 40px;
  }

  .pg-upload__footer,
  .pg-upload__footer-actions {
    align-items: stretch;
    width: 100%;
  }

  .pg-upload__footer-actions .pg-upload__btn {
    flex: 1 1 9rem;
  }
}