/* fw-upload.css · Componente compartilhado de upload de anexos (js/fw/file-upload.js).
   Dropzone moderna (borda tracejada, hover/drag destacados) + lista de arquivos com ícone/tamanho/remover.
   Usa --product-accent (cor do produto corrente) para o realce — herda o tema sem hard-code. */

.fw-upload { display: flex; flex-direction: column; gap: 10px; }

.fw-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #f8fafc;
  color: #64748b; transition: border-color .15s, background .15s, color .15s;
}
.fw-dropzone:hover,
.fw-dropzone:focus-visible {
  border-color: var(--product-accent, #2563eb);
  background: color-mix(in srgb, var(--product-accent, #2563eb) 6%, #f8fafc);
  color: #334155; outline: none;
}
.fw-dropzone.is-dragover {
  border-color: var(--product-accent, #2563eb); border-style: solid;
  background: color-mix(in srgb, var(--product-accent, #2563eb) 12%, #fff);
  color: var(--product-accent, #2563eb);
}
.fw-dz-icon { color: var(--product-accent, #94a3b8); opacity: .9; }
.fw-dropzone.is-dragover .fw-dz-icon { color: var(--product-accent, #2563eb); }
.fw-dz-title { font-size: 13.5px; font-weight: 600; color: inherit; }
.fw-dz-hint { font-size: 11.5px; color: #94a3b8; letter-spacing: .02em; }

.fw-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fw-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
}
.fw-file-icon { display: inline-flex; color: var(--product-accent, #64748b); flex: 0 0 auto; }
.fw-file-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-file-size { flex: 0 0 auto; font-size: 11.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.fw-file-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: #94a3b8; transition: background .12s, color .12s;
}
.fw-file-remove:hover { background: #fef2f2; color: #dc2626; }

/* Lista de anexos JÁ ENVIADOS (read-only, ex.: detalhe da justificativa / Vault) */
.fw-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fw-attach-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; text-decoration: none; color: inherit;
}
.fw-attach-item:hover { border-color: var(--product-accent, #cbd5e1); background: #f8fafc; }
.fw-attach-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-attach-meta { flex: 0 0 auto; font-size: 11.5px; color: #94a3b8; }
.fw-attach-empty { font-size: 12.5px; color: #94a3b8; padding: 4px 2px; }

@media (prefers-color-scheme: dark) {
  .fw-dropzone { background: #1e293b; border-color: #334155; color: #94a3b8; }
  .fw-file-item, .fw-attach-item { background: #0f172a; border-color: #334155; }
  .fw-file-name, .fw-attach-name { color: #e2e8f0; }
}