/* DRAG_DROP_UPLOADS_2026_06_28 — global drag-and-drop file zones.
   Loaded from base.html (whole app) and client/upload.html (public page).
   Brand colours come from the :root vars each page defines; the fallbacks keep
   it sensible if a page hasn't set them. */

.dz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  background: #f8fafc;
  padding: 1.1rem 1rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.dz:hover {
  border-color: var(--flow-deep, #1f4e46);
  background: var(--flow-deep-soft, #eef2f1);
}
.dz__icon { line-height: 0; color: var(--flow-deep, #1f4e46); opacity: .85; }
.dz__svg { display: block; }
.dz__text { font-weight: 600; font-size: .9rem; color: var(--flow-deep, #1f4e46); }
.dz__link { text-decoration: underline; }
.dz__hint { font-size: .72rem; color: #94a3b8; }
.dz__file { font-size: .75rem; color: #334155; margin-top: .15rem; word-break: break-all; }

/* Injected affordance line for bespoke [data-dropzone] wrappers (e.g. the
   Company-expenses receipt box) that don't already say "drag & drop". */
.dz__customhint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--flow-deep, #1f4e46);
  margin-bottom: .4rem;
}
.dz__customhint .dz__svg { opacity: .85; }

/* The native input is visually hidden but stays focusable (so `required`
   validation still works and the label-click still opens the picker). */
.dz__input {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Active highlight while a file is dragged over the zone — the "lights up"
   feedback. Applies both to generated .dz zones and bespoke [data-dropzone]
   wrappers (e.g. the Company-expenses receipt box). */
.dz.dz--over,
[data-dropzone].dz--over {
  border-color: var(--flow-deep, #1f4e46) !important;
  background: var(--flow-deep-soft, #eef2f1) !important;
  box-shadow: 0 0 0 3px var(--flow-deep-soft, #eef2f1);
}
[data-dropzone] {
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* While a file is being dragged anywhere over the window, gently outline every
   zone so the user can see where it can go. */
body.dz-dragging .dz {
  border-color: var(--flow-deep, #1f4e46);
  background: var(--flow-deep-soft, #eef2f1);
}
body.dz-dragging [data-dropzone] {
  border-color: var(--flow-deep, #1f4e46);
}