/*!
 * ZIC forms — the upload component
 * ============================================================================
 * The control layer is Materio's. `form-label`, `form-control`, `form-select`,
 * `form-check`, `input-group`, `form-text`, `invalid-feedback` / `valid-feedback`
 * and the floating-label variant all render from `vendor/css/core.css`, exactly
 * as the reference template does.
 *
 * This file used to restate all of them — 40px controls against Materio's 48px,
 * an 8px radius against 6px, 20px checks against 18px, a hand-encoded select
 * arrow, replacement validation glyphs. The Materio restoration removed that
 * (docs/MATERIO_DRIFT_AUDIT.md §7.7, Prompt 4 of
 * docs/prompts/MATERIO_RESTORE_BULK_PROMPTS.md). Two of the removal's
 * side-effects are worth knowing:
 *
 *   - The old rules pinned the focus box model to stop a height jump. Measured
 *     with them gone: Materio's `border-width: 2px` on `:focus` is exactly
 *     compensated by `padding-block: calc(0.8555rem - 2px)`, so the jump is
 *     **0px**, with or without them.
 *   - The dark-mode select arrow and date-icon assets went with them; the
 *     control's `color-scheme` (set by the dark palette) and Materio's own
 *     `--bs-form-select-bg-img` handle both themes.
 *
 * What is left is what Materio does not ship: the drag-and-drop upload zone,
 * its file list and its progress bar. Those are ZIC components and they read
 * from the token layer, so nothing here needs a per-theme rule.
 */

/* ===========================================================================
 * 1. Drop zone
 * ======================================================================== */
.zic-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zic-space-2);
  padding: var(--zic-space-5) var(--zic-space-4);
  text-align: center;
  cursor: pointer;
  color: var(--zic-text-secondary);
  background-color: var(--zic-surface-tertiary);
  border: 2px dashed var(--zic-border-strong);
  border-radius: var(--zic-control-radius);
}

.zic-dropzone:hover,
.zic-dropzone:focus-within,
.zic-dropzone.is-dragover {
  transition:
    background-color var(--zic-transition-fast),
    border-color var(--zic-transition-fast),
    color var(--zic-transition-fast);
}

.zic-dropzone:hover,
.zic-dropzone:focus-visible {
  border-style: solid;
  border-color: var(--zic-border-focus);
  background-color: var(--zic-interactive-hover);
  color: var(--zic-text-primary);
  outline: none;
}

.zic-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--zic-border-focus);
  background-color: var(--zic-interactive-active);
  color: var(--zic-text-primary);
}

/* A required drop zone with no file: the zone itself carries the state, since
   the input inside it is not focusable and cannot be the validation surface. */
.zic-dropzone.is-invalid {
  border-style: solid;
  border-color: var(--zic-status-danger);
  color: var(--zic-text-primary);
}

.zic-dropzone.is-invalid:focus-visible {
  box-shadow: 0 0 0 var(--zic-focus-ring-width) color-mix(in srgb, var(--zic-status-danger) 30%, transparent);
}

.zic-dropzone__icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--zic-text-secondary);
}

.zic-dropzone__hint {
  font-size: 0.75rem;
  color: var(--zic-text-secondary);
}

/* ===========================================================================
 * 2. File list
 * ======================================================================== */
.zic-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--zic-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zic-file {
  display: flex;
  align-items: center;
  gap: var(--zic-space-3);
  padding: var(--zic-space-2) var(--zic-space-3);
  background-color: var(--zic-surface-tertiary);
  border: 1px solid var(--zic-border-default);
  border-radius: var(--zic-control-radius);
}

.zic-file__icon {
  flex: 0 0 auto;
  color: var(--zic-text-secondary);
}

.zic-file__body {
  flex: 1 1 auto;
  min-width: 0;
}

.zic-file__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--zic-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zic-file__meta {
  font-size: 0.6875rem;
  color: var(--zic-text-secondary);
  font-variant-numeric: tabular-nums;
}

.zic-file__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--zic-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--zic-radius-sm);
  cursor: pointer;
}

.zic-file__remove:hover,
.zic-file__remove:focus-visible {
  transition:
    color var(--zic-transition-fast),
    background-color var(--zic-transition-fast);
}

.zic-file__remove:hover,
.zic-file__remove:focus-visible {
  color: var(--zic-status-danger-text);
  background-color: var(--zic-status-danger-bg-subtle);
  outline: none;
}

.zic-file.is-error {
  border-color: var(--zic-status-danger);
}

.zic-file.is-error .zic-file__meta {
  color: var(--zic-status-danger-text);
}

/* ===========================================================================
 * 3. Upload progress
 *
 * A 4px pill track, used by the upload field. Distinct from Bootstrap's
 * `.progress`, which the dashboard and the commitment widgets use.
 * ======================================================================== */
.zic-progress {
  height: 4px;
  overflow: hidden;
  background-color: var(--zic-surface-tertiary);
  border-radius: var(--zic-radius-pill);
}

.zic-progress__bar {
  height: 100%;
  width: 0;
  background-color: var(--zic-primary-fill);
  border-radius: var(--zic-radius-pill);
  transition: width var(--zic-transition-normal);
}

@media (prefers-reduced-motion: reduce) {
  .zic-progress__bar {
    transition: none;
  }
}