/* Upload Portal — app-specific styles */
/* Extends tokens.css; no hardcoded hex values */

:root {
  /* Upload portal uses standard PCM primary palette */
  --upload-zone-border: var(--neutral-300);
  --upload-zone-bg: var(--neutral-100);
  --upload-zone-bg-active: var(--color-primary-light);
  --upload-zone-border-active: var(--color-primary);
}

.dark {
  --upload-zone-border: var(--neutral-400);
  --upload-zone-bg: var(--neutral-100);
  --upload-zone-bg-active: var(--color-primary-light);
  --upload-zone-border-active: var(--color-primary);
}

/* ─── Layout overrides for single-page portal ─────────────────────────────── */
body {
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.portal-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

.portal-card {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  animation: pcm-fadeInUp 0.35s ease-out;
}

.portal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.portal-logo__mark {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.portal-logo__text {
  font: var(--text-page-title);
  color: var(--color-primary);
}

/* ─── PIN screen ──────────────────────────────────────────────────────────── */
.pin-screen__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-800);
  text-align: center;
  margin-bottom: var(--space-2);
}

.pin-screen__sub {
  font-size: var(--text-secondary-size);
  color: var(--neutral-500);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* ─── Upload screen ───────────────────────────────────────────────────────── */
.upload-welcome {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-800);
  margin-bottom: var(--space-1);
}

.upload-sub {
  font-size: var(--text-secondary-size);
  color: var(--neutral-500);
  margin-bottom: var(--space-5);
}

.upload-constraints {
  font-size: var(--text-caption-size);
  color: var(--neutral-500);
  text-align: center;
  margin-top: var(--space-3);
  font-weight: var(--text-caption-weight);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ─── Drop zone ───────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--upload-zone-border);
  border-radius: var(--radius-lg);
  background: var(--upload-zone-bg);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal);
  position: relative;
}

.drop-zone:hover,
.drop-zone--active {
  border-color: var(--upload-zone-border-active);
  background: var(--upload-zone-bg-active);
}

.drop-zone__icon {
  width: 48px;
  height: 48px;
  color: var(--neutral-400);
  margin: 0 auto var(--space-3);
}

.drop-zone--active .drop-zone__icon {
  color: var(--color-primary);
}

.drop-zone__title {
  font-size: var(--text-body-size);
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: var(--space-1);
}

.drop-zone__hint {
  font-size: var(--text-secondary-size);
  color: var(--neutral-500);
}

.drop-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* ─── Progress screen ─────────────────────────────────────────────────────── */
.progress-filename {
  font-size: var(--text-secondary-size);
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: var(--space-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-bar-wrap {
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  height: 10px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
  width: 0%;
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-secondary-size);
  color: var(--neutral-500);
  margin-bottom: var(--space-5);
  font-variant-numeric: tabular-nums;
}

/* ─── Complete screen ─────────────────────────────────────────────────────── */
.complete-icon {
  width: 64px;
  height: 64px;
  background: var(--semantic-success-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--semantic-success);
  animation: pcm-checkPop 0.4s ease-out;
}

.complete-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-800);
  text-align: center;
  margin-bottom: var(--space-2);
}

.complete-text {
  font-size: var(--text-body-size);
  color: var(--neutral-500);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

/* ─── Error screen ────────────────────────────────────────────────────────── */
.error-icon {
  width: 48px;
  height: 48px;
  color: var(--semantic-error);
  margin: 0 auto var(--space-3);
}

.error-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-800);
  text-align: center;
  margin-bottom: var(--space-2);
}

.error-text {
  font-size: var(--text-secondary-size);
  color: var(--neutral-500);
  text-align: center;
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

/* ─── Disconnected banner ─────────────────────────────────────────────────── */
.offline-banner {
  background: var(--semantic-warning-light);
  border: 1px solid var(--semantic-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-secondary-size);
  color: var(--neutral-700);
}

.offline-banner svg {
  width: 18px;
  height: 18px;
  color: var(--semantic-warning);
  flex-shrink: 0;
}

/* ─── Hidden utility ──────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Touch targets ───────────────────────────────────────────────────────── */
.pcm-btn--lg {
  width: 100%;
  min-height: 52px;
}

/* ─── Theme toggle ────────────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--neutral-200);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600);
  transition: background var(--transition-normal);
  z-index: var(--z-sticky);
}

.theme-toggle:hover {
  background: var(--neutral-300);
}