/* CS-NL Soft file picker (scripts/cs-filepick.js): a pressed drop area that
   replaces the browser's "Choose file" button; built on the cs-soft.css tokens. */

/* the native input stays in the form (focusable, submitted) but out of sight */
.cs-file__input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important;
}

.cs-file__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 132px; padding: 22px; margin: 0; cursor: pointer; text-align: center;
  background: var(--cs-paper); border-radius: var(--cs-r-panel); box-shadow: var(--cs-press);
  outline: 2px dashed var(--cs-divider-strong); outline-offset: -10px;
  color: var(--cs-fg-muted); font-size: var(--cs-fs-md); font-weight: var(--cs-fw-regular);
  transition: outline-color var(--cs-dur-fast) var(--cs-ease), background var(--cs-dur-fast) var(--cs-ease);
}
.cs-file__drop[hidden] { display: none; }
.cs-file__drop:hover, .cs-file__drop.is-over { outline-color: var(--cs-navy-light); background: var(--cs-band); }
.cs-file__icon { color: var(--cs-navy-light); }
.cs-file__text strong { color: var(--cs-navy-mid); }

.cs-file__chosen {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--cs-paper); border-radius: var(--cs-r-panel); box-shadow: var(--cs-press);
}
.cs-file__chosen[hidden] { display: none; }
.cs-file__thumb { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--cs-r-card); background: var(--cs-chip); }
.cs-file__thumb[hidden] { display: none; }
.cs-file__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
.cs-file__name { color: var(--cs-navy); font-weight: var(--cs-fw-bold); font-size: var(--cs-fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-file__size { color: var(--cs-fg-muted); font-size: var(--cs-fs-2xs); }
.cs-file__remove { flex: none; font-size: var(--cs-fs-sm); }
.cs-file__remove:hover, .cs-file__remove:focus { color: var(--cs-coral-dark); }

/* keyboard focus sits on the hidden input: show it on whatever is visible */
.cs-file__input:focus-visible + .cs-file .cs-file__drop,
.cs-file__input:focus-visible + .cs-file .cs-file__chosen { outline: 2px solid var(--cs-navy-mid); outline-offset: 2px; }

.cs-file__error { margin: 7px 0 0; font-size: var(--cs-fs-2xs); color: var(--cs-coral-dark); }
.cs-file__error:empty { display: none; }
.cs-file.is-too-large .cs-file__chosen,
.cs-file.is-invalid .cs-file__drop { box-shadow: var(--cs-press), 0 0 0 2px var(--cs-coral); }
/* crispy hides .invalid-feedback unless it follows an .is-invalid input; the
   picker sits in between, which the general sibling selector still matches */
.cs-file + .invalid-feedback, .cs-file ~ .invalid-feedback { display: block; }

@media (max-width: 480px) {
  .cs-file__chosen { flex-wrap: wrap; }
  .cs-file__remove { margin-left: auto; }
}