/* ============================================================
   Phase 6 Plan 04: Upload — bulk-first surface CSS
   Layered AFTER shell.css (cascade order in _HeadAssets.cshtml).
   No hex literals — all colors via hsl(var(--token)).
   No force declarations — specificity + cascade order do the work.
   Design spec Section 4; RESTRUCTURE-04.
   ============================================================ */


/* ============================================================
   1. Page container
   ============================================================ */

.secuura-upload-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 0;
}


/* ============================================================
   2. Header pill — enterprise trust framing
   ============================================================ */

.secuura-upload-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.secuura-upload-header-pill i {
  color: hsl(var(--primary));
}


/* ============================================================
   3. Drop zone — hero state (no files yet)
   ============================================================ */

.secuura-upload-dropzone {
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius);
  padding: 64px 24px;
  text-align: center;
  background-color: hsl(var(--card));
  transition: border-color 150ms ease, background-color 150ms ease;
  cursor: pointer;
}

.secuura-upload-dropzone[data-dragover="true"] {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.05);
}

.secuura-upload-dropzone-icon {
  font-size: 3rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 16px;
}

.secuura-upload-dropzone-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 8px;
}

.secuura-upload-dropzone-subtitle {
  color: hsl(var(--muted-foreground));
  margin-bottom: 16px;
}


/* ============================================================
   4. Full-page drop overlay (dragover anywhere on page)
   ============================================================ */

.secuura-upload-drop-overlay {
  position: fixed;
  inset: 0;
  background-color: hsl(var(--primary) / 0.12);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1070;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.secuura-upload-drop-overlay[data-active="true"] {
  display: flex;
}

.secuura-upload-drop-overlay-message {
  padding: 24px 48px;
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  box-shadow: 0 8px 24px hsl(var(--foreground) / 0.2);
}


/* ============================================================
   5. Queue container and header
   ============================================================ */

.secuura-upload-queue {
  margin-top: 24px;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.secuura-upload-queue-header {
  padding: 16px;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.secuura-upload-queue-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: hsl(var(--foreground));
}


/* ============================================================
   6. Cumulative progress strip
   ============================================================ */

.secuura-upload-cumulative {
  flex-grow: 1;
  max-width: 320px;
}

.secuura-upload-cumulative-label {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.secuura-upload-cumulative-bar {
  height: 4px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  overflow: hidden;
}

.secuura-upload-cumulative-fill {
  height: 100%;
  background-color: hsl(var(--primary));
  transition: width 200ms ease-out;
}


/* ============================================================
   7. Queue list + per-file rows
   ============================================================ */

.secuura-upload-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 06-13 pass 2: cap the queue panel so it can't push the rest of the page off-screen
     when the user drops many files. ~6 rows × ~56px + a little headroom. */
  max-height: 360px;
  overflow-y: auto;
}

.secuura-upload-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
}

.secuura-upload-row:last-child {
  border-bottom: none;
}

.secuura-upload-row-icon {
  font-size: 1.5rem;
  color: hsl(var(--muted-foreground));
}

.secuura-upload-row-info {
  min-width: 0;
}

.secuura-upload-row-name {
  font-weight: 500;
  word-break: break-all;
  color: hsl(var(--foreground));
}

.secuura-upload-row-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.secuura-upload-row-encrypt-flag {
  color: hsl(var(--muted-foreground));
}

.secuura-upload-row-progress {
  height: 3px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  margin-top: 6px;
  overflow: hidden;
}

.secuura-upload-row-progress-fill {
  height: 100%;
  background-color: hsl(var(--primary));
  transition: width 150ms linear;
}

.secuura-upload-row-status {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  flex-shrink: 0;
}


/* ---- Status state: done ---- */
.secuura-upload-row[data-status="done"] {
  animation: secuura-upload-flash 200ms ease-out;
}

.secuura-upload-row[data-status="done"] .secuura-upload-row-status-done {
  color: hsl(var(--primary));
  font-weight: 600;
}


/* ---- Status state: error ---- */
.secuura-upload-row[data-status="error"] .secuura-upload-row-status-error {
  color: hsl(var(--destructive));
}

.secuura-upload-row-retry {
  background: none;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  padding: 2px 8px;
  margin-left: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
  transition: background-color 150ms ease;
}

.secuura-upload-row-retry:hover {
  background-color: hsl(var(--muted));
}

.secuura-upload-row-retry:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}


/* ---- Completion flash keyframe ---- */
@keyframes secuura-upload-flash {
  0%   { background-color: hsl(var(--primary) / 0.15); }
  100% { background-color: transparent; }
}


/* ============================================================
   8. Role-specific configuration panels
   ============================================================ */

.secuura-upload-config {
  margin-top: 24px;
  padding: 16px;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.secuura-upload-config-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: hsl(var(--foreground));
}

/* Recipient chips container */
.secuura-upload-recipients-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 0;
}

.secuura-upload-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}

.secuura-upload-recipient-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  padding: 0;
  line-height: 1;
  font-size: 0.875rem;
}

.secuura-upload-recipient-chip-remove:hover {
  color: hsl(var(--destructive));
}


/* ============================================================
   9. Sticky footer CTA
   ============================================================ */

.secuura-upload-footer-cta {
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background-color: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.secuura-upload-footer-cta-btn {
  min-width: 280px;
}

/* 06-13 pass 2: three-action footer block revealed when every queued upload completes.
   Buttons sit side by side with the same min-width; Clear link is ghost-style. */
.secuura-upload-footer-done {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.secuura-upload-footer-clear {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  padding: 0 8px;
}
.secuura-upload-footer-clear:hover {
  color: hsl(var(--foreground));
  text-decoration: underline;
}


/* ============================================================
   10a. Phase 11 mobile refinements — 06-11 append only
   ============================================================ */

@media (max-width: 767.98px) {
  .secuura-upload-page { padding: 12px; }
  .secuura-upload-dropzone { padding: 32px 16px; }
  /* Queue row: collapse to icon + content; status moves below on full width */
  .secuura-upload-row {
    grid-template-columns: 24px 1fr;
    gap: 8px;
  }
  .secuura-upload-row-status {
    grid-column: 1 / -1;
    text-align: right;
  }
  /* Footer CTA stretches full-width and meets 44px touch target */
  .secuura-upload-footer-cta-btn { width: 100%; min-height: 44px; }
}


/* ============================================================
   10. Reduced-motion accommodations (WCAG 2.3.3)
   All transitions become instant; color/opacity changes still apply.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .secuura-upload-cumulative-fill,
  .secuura-upload-row-progress-fill,
  .secuura-upload-dropzone,
  .secuura-upload-row-retry {
    transition: none;
  }

  .secuura-upload-row[data-status="done"] {
    animation: none;
  }
}